欢迎来到山村网

用css样式表实现首字大写

2019-03-29 00:58:00浏览:654 来源:山村网   
核心摘要:css当中有许多平时很少用的属性,但是这些属性有时候被发掘出来以后就会立刻引起一些人的追逐,首字大写就是这样一种效果。最近

css当中有许多平时很少用的属性,但是这些属性有时候被发掘出来以后就会立刻引起一些人的追逐,首字大写就是这样一种效果。最近越来越多的blogger开始在自己的blog中运用这一方法,东西很简单,下面就来给大家介绍一下用:first-letter伪类来实现这种效果的方法:

  :first-letter版本:CSS2  兼容性:IE5.5+

  语法:

  Selector : first-letter { sRules }

  说明:

  设置对象内的第一个字符的样式。

  此伪对象仅作用于块对象。内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 position 属性为 absolute ,或者设定 display 属性为 block 。

  在此伪对象中配合使用 font-size 属性和 float 属性可以制作首字下沉效果。

  示例:

  p a:first-letter { color: green }

  div:first-letter { color:red;font-size:16px;float:left; }

  应用于:

  IE5.5+ ADDRESS BLOCK QUOTE BODY CENTER DD DIV DL DT FIELDSET FORM Hn LEGEND LI LISTING MARQUEE MENU P PLAINTEXT PRE XMP

  目前IE和FF都支持此属性,所以大家不必顾虑兼容性的问题,当然要记得设置float属性哦,不然就不会出现那种大字紧贴几行的效果了。

  范例(未设置float属性):

<style>
p{line-height:25px;}
p:first-letter{font-size:50px;line-height:50px;}
</style>
<p>欢迎大家来到<a href=http://www.3lian.cn>山村</a></p>

范例(设置float属性为left):

<style>
p{line-height:25px;}
p:first-letter{font-size:50px;line-height:50px;float:left;}
</style>
<p>欢迎大家来到<a href="http://www.3连.cn">山村</a></p>

(责任编辑:豆豆)
下一篇:

CSS中的行为:expression

上一篇:

4要素让网页设计中图标更有吸引力

  • 信息二维码

    手机看新闻

  • 分享到
打赏
免责声明
• 
本文仅代表作者个人观点,本站未对其内容进行核实,请读者仅做参考,如若文中涉及有违公德、触犯法律的内容,一经发现,立即删除,作者需自行承担相应责任。涉及到版权或其他问题,请及时联系我们 xfptx@outlook.com