用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属性):

时间: 2024-10-04 01:35:44

用css样式表实现首字大写的相关文章

网页特效之用css样式表实现首字大写

css|大写|特效|网页|网页特效|样式表 css当中有许多平时很少用的属性,但是这些属性有时候被发掘出来以后就会立刻引起一些人的追逐,首字大写就是这样一种效果.最近越来越多的blogger开始在自己的blog中运用这一方法,东西很简单,下面就来给大家介绍一下用:first-letter伪类来实现这种效果的方法: :first-letter版本:CSS2 兼容性:IE5.5+ 语法: Selector : first-letter { sRules } 说明: 设置对象内的第一个字符的样式. 此

CSS样式表实现分页效果源代码

CSS样式表实现效果很好的分页效果,在学习编程过程中由于文章内容比较多或者列表内容比较多,我们都需要分页!那么你想不想要一种好的分页效果呢?这个是我认为比较容易使用,同时编程方面也挺容易实现的分页,就是以10页为基础,然后上十页和下十页,因为很少有人有兴趣会去看10页甚至20页以后的内容. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1

CSS样式表实现文字变图象特效

css|特效|样式表 一段文字,当鼠标在文字上面单击,文字消失,原来文字的地方却立即变成了一张图片,当鼠标在图片上单击,图片又消失,原来的文字又重现了,像变魔术一样,是不是有意思?!这种效果用Dreamweaver的Behavirs 功能也可实现,但那要增加一段Javascript程序,明显增加了不少代码.而用CSS来制作这种效果,增加的代码却要少得多. 原理:利用CSS的属性值可动态改变的特点. 思路:定义一个HTML元素CSS属性的两种属性值,再用一个事件来触发,一旦事件发生,则改变HTML

用CSS样式表实现文字变图象特效

一段文字,当鼠标在文字上面单击,文字消失,原来文字的地方却立即变成了一张图片,当鼠标在图片上单击,图片又消失,原来的文字又重现了,像变魔术一样,是不是有意思?!这种效果用Dreamweaver的Behavirs 功能也可实现,但那要增加一段Javascript程序,明显增加了不少代码.而用CSS来制作这种效果,增加的代码却要少得多. 原理:利用CSS的属性值可动态改变的特点. 思路:定义一个HTML元素CSS属性的两种属性值,再用一个事件来触发,一旦事件发生,则改变HTML元素的属性值,从而达到

CSS入门教程:网页首字下沉

CSS入门教程:网页首字下沉 :first-letter 版本:CSS2 兼容性:IE5.5+ 语法: Selector : first-letter { sRules } 说明: 设置对象内的第一个字符的样式. 此伪对象仅作用于块对象.内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 position 属性为 absolute ,或者设定 display 属性为 block . 在此伪对象中配合使用 font-size 属性和 float 属性可以制作首字下

单词首字母大写正则表达式

每单词首字大写,其他小写.如blue idea转换为Blue Idea,BLUE IDEA也转换为Blue Idea cloeft的正则:  代码如下 复制代码  /b(w)|s(w)/g 所谓"首字母"包括两种情况:第一种是边界(开头)的单词字符,一种是空格之后的新单词的第一个字母.测试代码如下:  代码如下 复制代码  <script type="text/javascript">  function replaceReg(reg,str){   s

使用CSS设置段落首字下沉

css 我们在使用Word制作文档,或者观看某些报刊杂志时,总会看到段落的首字下沉的效果.那我们在使用DW制作网页时,是否也能做出这样的效果呢?答案是肯定的. 制作方法: 定义CSS样式,代码如下: .first {FONT-WEIGHT: bolder; FONT-SIZE: 230%; FLOAT: left; COLOR: #990000; LINE-HEIGHT: 1.3em; background-color: #E4E4E4} 代码介绍如下: Font-weight:bolder 定

首字下沉与首行样式的如何实现?

首字下沉的效果我们可以用伪对象first-letter,需要与其它一些属性配合使用,font-size.float.padding等.伪对象first- 我们来看下面的例子:  代码如下 复制代码 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8

CSS首字下沉 :first-letter用法

  见到一些网站的一段文字开头的首字都是很大,看上去挺特别,这叫首字下沉效果,CSS中有现成的语法可以用,那就是:first-letter ,我们先来了解一下:first-letter 的语法说明:选择器: first-letter { CSS规则 } ,此伪对象仅作用于块对象.内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 position 属性为 absolute ,或display 属性为 block .你可以在此伪对象中配合使用 font-size