介绍
小编给大家分享一下css如何让字体下沉,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
css让字体下沉的方法:首先创建一个HTML示例文件,然后使用伪元素”:首字母“选中一段文本的首字,接着使用“字体大小”属性设置首字大小,最后通过浮动属性实现下沉效果即可。
引用>在css中可以使用伪元素::首字母来选中一段文本的首字,然后使用字体大小属性设置首字大小,在通过浮动属性来将实现下沉效果。
下面我们来看看实现首字下沉的示例:
& lt; ! DOCTYPE html> & lt; html> ,,,& lt; head> ,,,,,,,& lt; meta charset=癠TF-8"比; ,,,,,,,& lt; title>首字下沉& lt;/title> ,,,,,,,& lt; style> ,,,,,,,,,,,p:第一个孩子:首字母{ ,,,,,,,,,,,,,,,颜色:,# c69c6d; ,,,,,,,,,,,,,,,,字体大小:2 em; ,,,,,,,,,,,,,,,浮动:左; ,,,,,,,,,,,,,,,保证金:,0,.2em 0, 0; ,,,,,,,,,,,} ,,,,,,,& lt;/style> ,,,& lt;/head> ,,,& lt; body> ,,,,,,,& lt; p> ,,,,,,,,首字下沉!这是一段测试文本!这是一段测试文本!这是一段测试文本!这是一段测试文本! ,,,,,,,,这是一段测试文本!这是一段测试文本!这是一段测试文本!这是一段测试文本!这是一段测试文本! ,,,,,,,,这是一段测试文本!这是一段测试文本!这是一段测试文本!这是一段测试文本!这是一段测试文本! ,,,,,,,,这是一段测试文本! ,,,,,,,& lt;/p> ,,,,,,,& lt; p> ,,,,,,,,首字下沉!这是一段测试文本!这是一段测试文本!这是一段测试文本!这是一段测试文本! ,,,,,,,,这是一段测试文本!这是一段测试文本!这是一段测试文本!这是一段测试文本!这是一段测试文本! ,,,,,,,,这是一段测试文本!这是一段测试文本!这是一段测试文本!这是一段测试文本!这是一段测试文本! ,,,,,,,,这是一段测试文本! ,,,,,,,& lt;/p> ,,,,,,,& lt; p> ,,,,,,,,,首字下沉!这是一段测试文本!这是一段测试文本!这是一段测试文本!这是一段测试文本! ,,,,,,,,,这是一段测试文本!这是一段测试文本!这是一段测试文本!这是一段测试文本!这是一段测试文本! ,,,,,,,,,这是一段测试文本!这是一段测试文本!这是一段测试文本!这是一段测试文本!这是一段测试文本! ,,,,,,,,,这是一段测试文本! ,,,,,,,& lt;/p> ,,,& lt;/body> & lt;/html>效果图:
说明:
css的:第一个孩子选择器用于选取属于其父元素的首个子元素,:首字母伪元素用于向文本的第一个字母来添加特殊样式。这样就可保证是首段的首字。然后,浮动属性定义元素的浮动,让元素脱离原来页面的标准输出流。
如果不设置:第一个孩子选择器,即:
p::首字母{ ,,,颜色:,# c69c6d; ,,,字体大小:,2 em; ,,,浮动:左; ,,,保证金:,0,.2em 0, 0; }则效果为:
以上是“css如何让字体下沉”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!
css如何让字体下沉