用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属性哦,不然就不会出现那种大字紧贴几行的效果了。

HTML代码范例(未设置float属性):

  1. <script>
  2. p{line-height:25px;}
  3. p:first-letter{font-size:50px;line-height:50px;}
  4. </script>
  5. <p>
  6. 欢迎大家来到<a href="http://www.achome.cn">http://www.achome.cn</a>
  7. <br />换行拉
  8. </p>
Comments
3 Responses to “用css实现首字大写”
  1. 友情链接 says:

    你好,很喜欢你的网站,可以做个友情链接吗?谢谢。http://www.chinatranslation.net
    bjctn@vip.sina.com

  2. 友情链接 says:

    笔译、口译、同声传译和同声传译设备租赁

  3. 同声传译 says:

    提供同声传译以及同传设备租赁服务。另外如您还需要进行资料翻译,请与我们联系,期待与您的合作。

Leave A Comment

Bad Behavior has blocked 951 access attempts in the last 7 days.