伪元素控制文本中的字体事例分享

      网页中文本是几乎必不成少 , 可是网页中的文字往往很是都雅 , 一行文字也可以呈现分歧的大小尺寸 , 小编就分享一下本身用伪元素选择器做的事例;

伪元素控制文本中的字体事例分享

文章插图

需要这些哦
电脑
Sublime text 2
方式/
1【伪元素控制文本中的字体事例分享】起首架构一下网页的根基内容 , 直接一 p 标签(简单点 , 只是写一个存放文本的处所 , 用来演示成果)

伪元素控制文本中的字体事例分享

文章插图

2然后我们用css节制一下 p 标签的外不雅 和里面的内容;
width , height节制高宽;
border , 显示外边框;
font-family , 节制字体;
font-size , 节制字体大小;

伪元素控制文本中的字体事例分享

文章插图

3text-indent , 节制一下首行缩进的位置;
letter-spacing , 节制文字之间的间距;(如图标红的位置;)

伪元素控制文本中的字体事例分享

文章插图

4p:first-letter(这是一个选择器 , 算是伪类选择器 , 可以如许节制 p 标签的 第一个首字母) , 节制第一文字的字体 , 大小 , 字体颜色(这个选择器的具体诠释可以百度一下 。 )

伪元素控制文本中的字体事例分享

文章插图

伪元素控制文本中的字体事例分享

文章插图

5p:first-line , 这个节制第一行的整个属性 , 如图所示我们将整一个行设为绿色字体;如许就简单的完当作了;

伪元素控制文本中的字体事例分享

文章插图

伪元素控制文本中的字体事例分享

文章插图

注重事项仅作分享;

以上内容就是伪元素控制文本中的字体事例分享的内容啦 , 希望对你有所帮助哦!

    推荐阅读