css样式表实现首写字母大写

时间:2007-10-08 12:11:00 

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>欢迎大家</p>


查看效果:


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

<style>
p{line-height:25px;}
p:first-letter{font-size:50px;line-height:50px;float:left;}
</style>
<p>欢迎大家</p>

查看效果:


标签:大写,css
0
投稿

猜你喜欢

  • 仿dw8代码折叠功能的HTML编辑器

    2008-04-29 21:19:00
  • 操作mysql数据库的类

    2010-03-13 12:53:00
  • 详细讲解SQL Server数据库的文件恢复技术

    2009-01-15 12:54:00
  • 此数据库没有有效所有者,因此无法安装数据库关系图支持对象

    2012-01-29 18:15:11
  • 用 SA FileUp 上传多文件

    2008-07-04 13:44:00
  • 6个asp判断函数使用方法介绍

    2007-09-24 13:10:00
  • ASP基础教程:常用的 ASP ActiveX 组件

    2008-10-14 15:15:00
  • Javascript学习第一季 一

    2008-06-24 17:51:00
  • 关于大批量数据高效插入方法

    2010-07-31 19:07:00
  • asp HTTP_X_FORWARDED_FOR和REMOTE_ADDR

    2010-07-02 12:33:00
  • 一个不错的js软键盘代码而且移植方便

    2007-08-14 12:56:00
  • 大容量SQL Server数据库迁移偏方

    2011-05-05 08:18:00
  • 由 IE8 User-Agent 更新想到的

    2009-01-12 18:33:00
  • 验证码的最高境界

    2008-05-08 14:17:00
  • 一个带采集远程文章内容,保存图片,生成文件等完整的采集功能

    2011-04-02 11:02:00
  • 有效防止ASP木马上传运行—小知识[网络安全技术]

    2011-03-06 11:15:00
  • 用ASP对网页进行限制性的访问

    2008-07-03 13:02:00
  • 把JS与CSS写在同一个文件里

    2007-12-16 15:29:00
  • oracle 下WITH CHECK OPTION用法

    2009-02-28 10:59:00
  • SaaS中的用户体验设计

    2009-05-20 12:28:00
  • asp之家 网络编程 m.aspxhome.com