CSS教程之把持first-letter伪类的背景

只看该作者 · 发表于 2015-1-15 23:20:21

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。
破洛洛文章简介：把持first-letter伪类的背景.
OL界说有序列表的时分，除非指定list-style-position:inside;，不然笔墨和前导符是有缩进的。
但有的时分，OL界说的列表范例无限制，好比不克不及界说汉字的“1、2、三”，我们只妙手动来输出这些字符，但这下笔墨和字符连在一同。
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>first-letter</title><styletype="text/css">body{font-size:12px;width:600px;margin:2emauto;}</style></head><body><ol><li>最后被称为盒模子酸实验，是一个用于测试扫瞄器的网页。它在1998年10月开辟，成了权衡初期扫瞄器兼容性的主要准线，出格是扫瞄器对层叠款式表1.0的撑持情形。就像用酸实验来敏捷并直不雅的权衡一块金属的质量优劣，网页酸实验的方针是供应一个能够分明地标明扫瞄器的是不是恪守Web尺度的办法。</li><li>该版本针对撑持HTML、CSS2.0及PNG图象[1]尺度的综合测试，由网页尺度企图小组（WebStandardsProject）计划。</li><li>于2008年3月3日正式公布，其测试核心会合在ECMAScript、DOMLevel3、MediaQueries和data:URL[3]。以扫瞄器翻开此测试网页后，页面会不休加载功效[4]并依据测试情形赐与分数，满分为100分</li></ol><hr/><olstyle="list-style:none;"><li>1、最后被称为盒模子酸实验，是一个用于测试扫瞄器的网页。它在1998年10月开辟，成了权衡初期扫瞄器兼容性的主要准线，出格是扫瞄器对层叠款式表1.0的撑持情形。就像用酸实验来敏捷并直不雅的权衡一块金属的质量优劣，网页酸实验的方针是供应一个能够分明地标明扫瞄器的是不是恪守Web尺度的办法。</li><li>2、该版本针对撑持HTML、CSS2.0及PNG图象[1]尺度的综合测试，由网页尺度企图小组（WebStandardsProject）计划。</li><li>3、2008年3月3日正式公布，其测试核心会合在ECMAScript、DOMLevel3、MediaQueries和data:URL[3]。以扫瞄器翻开此测试网页后，页面会不休加载功效[4]并依据测试情形赐与分数，满分为100分</li></ol></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
这个时分就能够利用first-letter这个伪类来协助了：
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>first-letter</title><styletype="text/css">body{font-size:12px;width:600px;margin:2emauto;}ol.list{list-style:none;}ol.listli:first-letter{margin-left:-2em;color:blue;font-weight:bold;}</style></head><body><ol><li>最后被称为盒模子酸实验，是一个用于测试扫瞄器的网页。它在1998年10月开辟，成了权衡初期扫瞄器兼容性的主要准线，出格是扫瞄器对层叠款式表1.0的撑持情形。就像用酸实验来敏捷并直不雅的权衡一块金属的质量优劣，网页酸实验的方针是供应一个能够分明地标明扫瞄器的是不是恪守Web尺度的办法。</li><li>该版本针对撑持HTML、CSS2.0及PNG图象[1]尺度的综合测试，由网页尺度企图小组（WebStandardsProject）计划。</li><li>于2008年3月3日正式公布，其测试核心会合在ECMAScript、DOMLevel3、MediaQueries和data:URL[3]。以扫瞄器翻开此测试网页后，页面会不休加载功效[4]并依据测试情形赐与分数，满分为100分</li></ol><hr/><olclass="list"><li>1、最后被称为盒模子酸实验，是一个用于测试扫瞄器的网页。它在1998年10月开辟，成了权衡初期扫瞄器兼容性的主要准线，出格是扫瞄器对层叠款式表1.0的撑持情形。就像用酸实验来敏捷并直不雅的权衡一块金属的质量优劣，网页酸实验的方针是供应一个能够分明地标明扫瞄器的是不是恪守Web尺度的办法。</li><li>2、该版本针对撑持HTML、CSS2.0及PNG图象[1]尺度的综合测试，由网页尺度企图小组（WebStandardsProject）计划。</li><li>3、2008年3月3日正式公布，其测试核心会合在ECMAScript、DOMLevel3、MediaQueries和data:URL[3]。以扫瞄器翻开此测试网页后，页面会不休加载功效[4]并依据测试情形赐与分数，满分为100分</li></ol><hr/><olclass="list"><li>壹、最后被称为盒模子酸实验，是一个用于测试扫瞄器的网页。它在1998年10月开辟，成了权衡初期扫瞄器兼容性的主要准线，出格是扫瞄器对层叠款式表1.0的撑持情形。就像用酸实验来敏捷并直不雅的权衡一块金属的质量优劣，网页酸实验的方针是供应一个能够分明地标明扫瞄器的是不是恪守Web尺度的办法。</li><li>贰、该版本针对撑持HTML、CSS2.0及PNG图象[1]尺度的综合测试，由网页尺度企图小组（WebStandardsProject）计划。</li><li>叁、2008年3月3日正式公布，其测试核心会合在ECMAScript、DOMLevel3、MediaQueries和data:URL[3]。以扫瞄器翻开此测试网页后，页面会不休加载功效[4]并依据测试情形赐与分数，满分为100分</li></ol></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]衬着了局：
这下，前导符就和笔墨坚持必定间隔了，并且能把持的款式也更多一点。
不外前导符前面谁人顿号就把持不到款式了，但我想可不成以设置背景图来代替呢？
复杂测试却发明，把持first-letter伪类的背景，与把持list-style-image一样让人揣摩不透，遂弃之。
别的，各个扫瞄器看待前导符中间的标记处置体例也纷歧样，由于没有安装Safari，以是没有测试它：

代码：