请选择 进入手机版 | 继续访问电脑版
贠老师培训群:150322713    贠老师QQ:767708506

贠老师office培训-excel学习网

 找回密码
 立即注册
点击咨询贠老师
查看: 200|回复: 6

[css] 美化段落文本的首字,防止下沉

[复制链接]

607

主题

604

帖子

1909

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1909
发表于 2016-2-4 23:04:27 | 显示全部楼层 |阅读模式

今天要讲的内容是如何实现“首字下沉”,,第一个字是很大的红色楷体,陷于一段文字之首。这种做法在杂志中常见,但是在网页中不那么常见。那么如何实现呢?其实很简单,只有一句CSS就可以了。

Selector:first-letter {font-size:2.5em; font-family:"楷体_GB2312"; font-weight:bold; line-height:1.2em; float:left; padding:5px 2px 0 0; color:#c00;}

如果你觉得还不是很清楚,那么这里就细细讲述一下:

首先要在HTML中有一段自己的文本,是在中的也好,在其它块标签中都可以。给他个ID也好,class也好,直接的标签也可以,先找到这个选择符,这里假设一段文字的id为article,那么给这段的CSS一开始就写成:

#article:first-letter {……}

:first-letter 是个伪类,用途是设置对象内的第一个字符的样式表属性。该语法属CSS2范围。详细见《CSS2中文手册》

这里再细说语句中的一个个属性,首先我们要让这个字大于正文中的字,那么给他的字体大小是正文内容的2.5倍。当然你也可以选择3倍,4倍,这个根据自己的需要来作修改。

#article:first-letter { font-size:2.5em }

为什么要用em这个标签呢?因为有时候我们的读者们会需要通过浏览器缩放的功能改变文字的大小,如果设为一个具体的大小,那么自然就会比例失调。这个大家可以动手变动一下看看找找感觉。有了大小了,但是字体不对,那么这里应增加字体与字体加粗。

#article:first-letter { font-size:2.5em; font-family:"楷体_GB2312"; font-weight:bold; }

好了,到现在为此这个首字似乎还并没有打算下沉的意思,那么这里的关键点就是 float:left; 对的,就是左浮动。我们要知道,当一个对象被设为浮动属性之后,不论原来是否是块级元素都会具备块级元素的特性。而周围没有被设定的文本流侧会环绕着这个对象。图片在文本中的环绕也是这个属性。

#article:first-letter { font-size:2.5em; font-family:"楷体_GB2312"; font-weight:bold; line-height:1.2em; float:left; }

动手试试看,是不是已经看到首字下沉了?当然或许你看出来了,有点不那么整齐上面是不是多了一点出来?不用担心,用padding来设置一下让这个字顶部多点空间出来,让这个首字和第一行齐平。

最后我还能说点什么?我想到了,有一次我试图让

……

中的P也能实现首字下沉,可是结果却失败了,得出的结论是:我们并不能隔着一层标签去控制子对象中的第一个字符。

当然如果你对这个伪类产生兴趣的话那么也推荐你接着研究一下:

Selector : first-line { sRules } 

Selector1 Selector2 : first-child { sRules }


想要了解更多更全面的web前段知识,css样式,html教程,数据库教程,word教程,excel教程等等,就到excel学习网www.excelxue.com


回复

使用道具 举报

0

主题

895

帖子

61

积分

注册会员

Rank: 2

积分
61
发表于 2016-3-15 18:11:20 | 显示全部楼层
佩服你,能发这么好的帖子,厉害
回复 支持 反对

使用道具 举报

2

主题

939

帖子

108

积分

注册会员

Rank: 2

积分
108
发表于 2016-6-3 16:55:29 | 显示全部楼层
有些不是太明白,研究研究再说
回复 支持 反对

使用道具 举报

1

主题

1041

帖子

76

积分

注册会员

Rank: 2

积分
76
发表于 2016-7-11 22:50:05 | 显示全部楼层
还有许多问题不明白,有点恼火啊!
回复 支持 反对

使用道具 举报

0

主题

863

帖子

54

积分

注册会员

Rank: 2

积分
54
发表于 2017-11-9 13:33:07 | 显示全部楼层
希望楼主能够收集更多的资料,谢谢了!
回复 支持 反对

使用道具 举报

0

主题

629

帖子

102

积分

注册会员

Rank: 2

积分
102
发表于 2018-10-31 12:28:19 | 显示全部楼层
好东西一定要看看!
回复 支持 反对

使用道具 举报

0

主题

590

帖子

67

积分

注册会员

Rank: 2

积分
67
发表于 2018-11-10 09:09:11 | 显示全部楼层
佩服你,能发这么好的帖子,厉害
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



陕ICP备15003731号  

贠老师培训 GMT+8, 2018-11-18 18:00 , Processed in 0.224536 second(s), 31 queries .

快速回复 返回顶部 返回列表