HTML首字下沉的编码,css如何实现首字下沉效果？伪元素+浮动实现效果（代码实例）...

在word文档中有一个首字下沉功能，可以在文章的排版时使用，有时能给文章增色不少。那么css可以实现这样的效果吗？本篇文章就给大家介绍css是如何实现首字下沉效果的，让大家可以了解如何用css的伪元素+浮动实现首字下沉效果。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

在css中首字下沉效果都是能过伪元素::first-letter来实现。其实现原理非常的简单，就是把首字font-size值设置较大，然后能过float来实现。

下面我们就通过简单的代码示例来看看css是怎样实现首字下沉效果的。

首字下沉

p::first-letter{

color: #c69c6d;

font-size: 2em;

float:left;

margin: 0 .2em 0 0;

}

这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。

效果图：

上例中是将所有段落的首字下沉，如果仅需要实现某段的首字下沉效果，那还需要配合其它的选择器来实现。这里我们就来看看首段首字下沉的实现：

首字下沉

p:first-child::first-letter{

color: #c69c6d;

font-size: 2em;

float:left;

margin: 0 .2em 0 0;

}

效果图：

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问CSS基础视频教程！

HTML首字下沉的编码,css如何实现首字下沉效果？伪元素+浮动实现效果（代码实例）...相关推荐

[css] 有哪些标签是不支持伪元素的？
[css] 有哪些标签是不支持伪元素的? 首先我们要知道伪元素有哪些: ::after ::before ::first-letter ::fist-line (单双冒号皆可) ::selection ...
[css] 不用换行的标签，怎么伪元素实现换行的效果？
[css] 不用换行的标签,怎么伪元素实现换行的效果? 使用\A 换行,并且指定white-space: pre保留换行效果.foo::after {content: '123\A 456';whit ...
css伪元素实现选中效果【打勾效果】
css伪元素实现选中效果 .item{border: 1px solid #00a9ff;position: relative;&:after {position: absolute;cont ...
css如何设置透明度？设置透明度的两种方法（代码实例）
在前端页面开发布局的时候,为了给用户呈现不同的效果,经常需要设置透明度,那么css是怎样设置透明度的?本章给大家介绍用css设置透明度的两种方法(代码实例).有一定的参考价值,有需要的朋友可以参考一下 ...
如何用css和HTML结合画熊,结合伪元素实现的纯CSS3高级图形绘制
自小编上次整理了一些基础图形的绘制方法之后,大家都纷纷表示对css3的绘图技巧学习很有帮助.虽说万变不离其宗,再复杂的图形也可以用最简单的三角形或者圆弧组合出来,但仍有不少朋友反映,学会基本图形也不懂 ...
css select换行,css强制换行和超出隐藏实现单行和多行（代码实例）
本篇文章给大家带来的内容是关于css强制换行和超出隐藏实现单行和多行(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 通俗点的解释: word-break:break-al ...
【CSS】1049- 深入了解::before 和 ::after 伪元素
本文从最简单的开始,解释如何理解和使用::before和::after.然后再在实际使用场景中去应用它. ::before和::after是什么? ::before和::after可以添加到选择器以创 ...
用html写一首古诗,怎么用html/css写一首古诗
写一首古诗的方法:首先新建一个html文件,在文件里写上基础的html代码,然后在文档" "标签里写上古诗:最后在每句诗结尾部分添上一个" "标签即可. 本教程 ...
用html写显示一首古诗,怎么用html/css写一首古诗
写一首古诗的方法:首先新建一个html文件,在文件里写上基础的html代码,然后在文档" "标签里写上古诗:最后在每句诗结尾部分添上一个" "标签即可. 本教程 ...

HTML首字下沉的编码,css如何实现首字下沉效果？伪元素+浮动实现效果（代码实例）...

HTML首字下沉的编码,css如何实现首字下沉效果？伪元素+浮动实现效果（代码实例）...相关推荐

最新文章

热门文章