css如何让字体下沉?

css如何让字体下沉?下面本篇文章给大家介绍一下使用CSS实现首字下沉效果的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

可以使用伪元素::first-letter来选中一段文本的首字,然后使用font-size属性设置首字大小,在通过float属性来将实现下沉效果。

示例:

<html>
<head>
<style type="text/css">
p:first-letter 
{
font-size: 50px;
float: left;
color: #333;
text-indent: 0;
padding: 2px;
line-height: 1em;
}
</style>
</head>
<body>
<p>
你可以使用:first-letter伪元素为文本的第一个字母添加特殊效果!
</p>
</body>
</html>

效果图:

1.jpg

:first-letter 伪元素向文本的第一个字母添加特殊样式。

这个伪元素用于指定一个元素第一个字母的样式。所有前导标点符号应当与第一个字母一同应用该样式。某些语言有一些要处理为单个字符的字母组合,如果是这样,用户代理可能会把首字母同时应用到这个字母组合。

在 CSS2.1 之前,:first-letter 只能与块级元素关联。CSS2.1 扩大了这个范围,可以与任何元素关联。可以应用到首字母的属性是有限的。

注释:下列属性应用于 :first-letter 伪元素:

  • font 属性

  • color 属性

  • background 属性

  • margin 属性

  • padding 属性

  • border 属性

  • text-decorationvertical-align (仅当 'float' 为 'none' 时)

  • text-transform

  • line-height

  • float

  • clear

:first-letter还可以:first-child选择器一起使用,实现多段文字的首段首字下沉

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>首字下沉</title>
        <style>
            p:first-child::first-letter{
                color: #c69c6d;
                font-size: 2em;
                float:left;
                margin: 0 .2em 0 0;
            }
        </style>
    </head>
    <body>

        <p>
         首字下沉!这是一段测试文本!这是一段测试文本!这是一段测试文本!这是一段测试文本!
         这是一段测试文本!这是一段测试文本!这是一段测试文本!这是一段测试文本!这是一段测试文本!
         这是一段测试文本!这是一段测试文本!这是一段测试文本!这是一段测试文本!这是一段测试文本!
         这是一段测试文本!
        </p>
        <p>
         首字下沉!这是一段测试文本!这是一段测试文本!这是一段测试文本!这是一段测试文本!
         这是一段测试文本!这是一段测试文本!这是一段测试文本!这是一段测试文本!这是一段测试文本!
         这是一段测试文本!这是一段测试文本!这是一段测试文本!这是一段测试文本!这是一段测试文本!
         这是一段测试文本!
        </p>
        <p>
          首字下沉!这是一段测试文本!这是一段测试文本!这是一段测试文本!这是一段测试文本!
          这是一段测试文本!这是一段测试文本!这是一段测试文本!这是一段测试文本!这是一段测试文本!
          这是一段测试文本!这是一段测试文本!这是一段测试文本!这是一段测试文本!这是一段测试文本!
          这是一段测试文本!
        </p>
    </body>

</html>

效果图:

2.png

更多web前端相关知识,请查阅 HTML中文网 !!

以上就是css如何让字体下沉?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏