- CSS 指层叠样式表 (Cascading Style Sheets)
内容与表现分离的问题
一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的 优先权。
- 浏览器缺省设置
- 外部样式表
- 内部样式表(位于 <head> 标签内部)
- 内联样式(在 HTML 元素内部)
selector {property: value}
p { color:
#ff0000
; }
p { color:
red
; }
p { color:
#f00
; }
p { color:
rgb(255,0,0)
; }p { color:
rgb(100%,0%,0%)
; }
请注意,当使用 RGB 百分比时,即使当值 为 0 时也要写百分比符号 。但是在其他的情况下就不需要这么做了。比如说,当尺寸为 0 像素时,0 之后不需要使用 px 单位,因为 0 就是 0,无论单位是什么。
提示: 如果值为若干单词,则要给值加 引号:
p {font-family:
"sans serif"
;}
最后一条规则是不需要加分号的 ,因为分号在英语中是一个分隔符号,不是结束符号。然而,大多数有经验的设计师会 在每条声明的末尾都加上分号 ,这么做的好处是,当你从现有的规则中增减声明时,会尽可能地减少出错的可能性。
是否包含空格不会影响 CSS 在浏览器的工作效果,同样,与 XHTML 不同,CSS 对 大小写不敏感 。不过存在一个 例外: 如果涉及到与 HTML 文档一起工作的话,class 和 id 名称对大小写是敏感的。
不可以在内联元素 <span> 中嵌入 <p>
#sidebar
{border: 1px dotted #000;padding: 10px;}
根据这条规则,id 为 sidebar 的元素将拥有一个像素宽的黑色点状边框,同时其周围会有 10 个像素宽的内边距(padding,内部空白)。老版本的 Windows/IE 浏览器可能会忽略这条规则,除非你特别地定义这个选择器所属的元素:
div#sidebar
{border: 1px dotted #000;padding: 10px;}
注意: 类名(class)的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用。
对带有指定属性的 HTML 元素设置样式。
可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。
注释: 只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中,不支持属性选择。
属性选择器
下面的例子为带有 title 属性的所有元素设置样式:
[title]
{color:red;}
属性和值选择器
下面的例子为 title="W3School" 的所有元素设置样式:
[title=W3School]
{border:5px solid blue;}
属性和值选择器 - 多个值
下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值:
[title~=hello]
{ color:red; } //title约等于hello,即含有hello
下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值:
[lang|=en] { color:red; } //恒等于
CSS 选择器参考手册
选择器 | 描述 |
用于选取带有指定属性的元素。 | |
用于选取带有指定属性和值的元素。 | |
用于选取属性值中包含指定词汇的元素。 | |
用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。 | |
匹配属性值以指定值开头的每个元素。 | |
匹配属性值以指定值结尾的每个元素。 | |
匹配属性值中包含指定值的每个元素。 |
不要在 属性值与单位 之间留有 空格 。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ,它仅在 IE 6 中有效,但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。
background-color 不能继承 ,其默认值是 transparent。transparent 有“透明”之意。也就是说,如果一个元素没有指定背景色,那么背景就是透明的,这样其祖先元素的背景才能可见。
如果需要设置一个背景图像,必须为这个属性设置一个 URL 值:
body {background-image: url(/i/eg_bg_04.gif);}
理论上讲,甚至可以向 textareas 和 select 等替换元素的背景应用图像,不过并不是所有用户代理都能很好地处理这种情况。
另外还要补充一点,background-image 也不能继承。事实上, 所有背景属性都不能继承。
如果需要在页面上对 背景图像进行平铺, 可以使用 background-repeat 属性 。
属性值 repeat 导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复,no-repeat 则不允许图像在任何方向上平铺。
默认地,背景图像将从一个元素的左上角开始。请看下面的例子:
body { background-image: url(/i/eg_bg_03.gif);
background-repeat: repeat-y;
}
背景定位
可以利用 background-position 属性 改变图像在背景中的位置。
下面的例子在 body 元素中将一个背景图像居中放置:
body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat;
background-position:center;
}
为 background-position 属性提供值有很多方法。首先,可以使用一些关键字:top、bottom、left、right 和 center。通常,这些关键字会成对出现,不过也不总是这样。还可以使用长度值,如 100px 或 5cm,最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。
关键字
图像放置关键字最容易理解,其作用如其名称所表明的。例如,top right 使图像放置在元素内边距区的右上角。
根据规范,位置关键字可以按任何顺序出现,只要保证不超过两个关键字 - 一个对应水平方向,另一个对应垂直方向。
如果只出现一个关键字,则认为另一个关键字是 center。
所以,如果希望每个段落的中部上方出现一个图像,只需声明如下:
p { background-image:url('bgimg.gif'); background-repeat:no-repeat;
background-position:top;
}
百分数值
百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中,这很容易:
body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat;
background-position:50% 50%;
}
这会导致图像适当放置,其中心与其元素的中心对齐。 换句话说,百分数值同时应用于元素和图像。 也就是说,图像中描述为 50% 50% 的点(中心点)与元素中描述为 50% 50% 的点(中心点)对齐。
如果图像位于 0% 0%,其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%,会使图像的右下角放在右边距的右下角。
因此,如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处,可以这样声明:
body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat;
background-position:66% 33%;
}
如果只提供一个百分数值,所提供的这个值将用作水平值,垂直值将假设为 50%。这一点与关键字类似。
background-position 的默认值是 0% 0%,在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺,除非您设置了不同的位置值。
长度值
长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。
比如,如果设置值为 50px 100px,图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上:
body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat;
background-position:50px 100px;
}
注意,这一点与百分数值不同,因为偏移只是从一个左上角到另一个左上角。也就是说,图像的左上角与 background-position 声明中的指定的点对齐。
背景关联
如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。当文档滚动到超过图像的位置时,图像就会消失。
您可以通过 background-attachment 属性 防止这种滚动。通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响:
body { background-image:url(/i/eg_bg_02.gif); background-repeat:no-repeat;
background-attachment:fixed
}
background-attachment 属性的默认值是 scroll,也就是说,在默认的情况下,背景会随文档滚动。
CSS 背景属性
属性 | 描述 |
简写属性,作用是将背景属性设置在一个声明中。 | |
背景图像是否固定或者随着页面的其余部分滚动。 | |
设置元素的背景颜色。 | |
把图像设置为背景。 | |
设置背景图像的起始位置。 | |
设置背景图像是否及如何重复。 |
通过使用 text-indent 属性 ,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。
注意: 一般来说,可以为所有块级元素应用 text-indent,但无法将该属性应用于行内元素,图像之类的替换元素上也无法应用 text-indent 属性。不过,如果一个块级元素(比如段落)的首行中有一个图像,它会随该行的其余文本移动。
提示: 如果想把一个行内元素的第一行“缩进”,可以用左内边距或外边距创造这种效果。
使用负值
text-indent 还可以设置为负值。利用这种技术,可以实现很多有趣的效果,比如“悬挂缩进”,即第一行悬挂在元素中余下部分的左边:
不过在为 text-indent 设置负值时要当心,如果对一个段落设置了负值,那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题,建议针对负缩进再设置一个外边距或一些内边距:
p {text-indent: -5em; padding-left: 5em;}
使用百分比值
text-indent 可以使用所有长度单位,包括百分比值。
百分数要相对于缩进元素父元素的宽度。换句话说,如果将缩进值设置为 20%,所影响元素的第一行会缩进其父元素宽度的 20%。
在下例中,缩进值是父元素的 20%,即 100 个像素:
div {width: 500px;}p {text-indent: 20%;}<div><p>this is a paragragh</p></div>
水平对齐
text-align 是一个基本的属性,它会影响一个元素中的 文本行 互相之间的对齐方式。它的前 3 个值相当直接,不过第 4 个和第 5 个则略有些复杂。
值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。
西方语言都是从左向右读,所有 text-align 的默认值是 left。文本在左边界对齐,右边界呈锯齿状(称为“从左到右”文本)。对于希伯来语和阿拉伯语之类的的语言,text-align 则默认为 right,因为这些语言从右向左读。不出所料,center 会使每个文本行在元素中居中。
提示: 将块级元素或表元素居中,要通过在这些元素上适当地设置左、右外边距来实现。
text-align:center 与 <CENTER>
您可能会认为 text-align:center 与 <CENTER> 元素的作用一样,但实际上二者大不相同。
<CENTER> 不仅影响文本,还会把整个元素居中 。text-align 不会控制元素的对齐,而只影响内部内容。元素本身不会从一段移到另一端,只是 其中的文本受影响。
justify
最后一个水平对齐属性是 justify。
在两端对齐文本中,文本行的左右两端都放在父元素的内边界上。然后,调整单词和字母间的间隔,使各行的长度恰好相等。您也许已经注意到了,两端对齐文本在打印领域很常见。
需要注意的是,要由用户代理(而不是 CSS)来确定两端对齐文本如何拉伸,以填满父元素左右边界之间的空间。如需了解详情,请参阅 CSS text-align 属性参考页 。
字间隔
word-spacing 属性 可以改变字(单词)之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。
word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值,那么字之间的间隔就会增加。为 word-spacing 设置一个负值,会把它拉近:
字母间隔
letter-spacing 属性 与 word-spacing 的区别在于,字母间隔修改的是字符或字母之间的间隔。
字符转换
text-transform 属性 处理文本的大小写。这个属性有 4 个值:
- none
- uppercase
- lowercase
- capitalize
默认值 none 对文本不做任何改动,将使用源文档中的原有大小写。顾名思义,uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后,capitalize 只对每个单词的 首字母大写 。
文本装饰
接下来,我们讨论 text-decoration 属性 ,这是一个很有意思的属性,它提供了很多非常有趣的行为。
text-decoration 有 5 个值:
- none
- underline
- overline
- line-through
- blink
不出所料,underline 会对元素加 下划线 ,就像 HTML 中的 U 元素一样。overline 的作用恰好相反,会在文本的顶端画一个 上划线 。值 line-through 则在文本中间画一个 贯穿线 ,等价于 HTML 中的 S 和 strike 元素。blink 会让 文本闪烁 ,类似于 Netscape 支持的颇招非议的 blink 标记。
还可以在一个规则中结合多种装饰。如果希望所有超链接既有下划线,又有上划线,则规则如下:
a:link a:visited {text-decoration: underline overline;}
不过要注意的是,如果两个不同的装饰都与同一元素匹配,胜出规则的值会完全取代另一个值。请考虑以下的规则:
h2.stricken {text-decoration: line-through;}h2 {text-decoration: underline overline;}
对于给定的规则,所有 class 为 stricken 的 h2 元素都只有一个贯穿线装饰,而没有下划线和上划线,因为 text-decoration 值会替换而不是累积起来 。
处理空白符
white-space 属性 会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。
通过使用该属性,可以影响浏览器处理字之间和文本行之间的空白符的方式。从某种程度上讲,默认的 XHTML 处理已经完成了空白符处理:它会把所有空白符合并为一个空格。所以给定以下标记,它在 Web 浏览器中显示时,各个字之间只会显示一个空格,同时忽略元素中的换行:
<p>This paragraph has many spaces in it.</p>
可以用以下声明显式地设置这种默认行为:
p {white-space: normal;}
上面的规则告诉浏览器按照平常的做法去处理:丢掉多余的空白符。如果给定这个值,换行字符(回车)会转换为空格,一行中多个空格的序列也会转换为一个空格。
值 pre
不过,如果将 white-space 设置为 pre,受这个属性影响的元素中,空白符的处理就有所不同,其行为就像 XHTML 的 pre 元素一样;空白符不会被忽略。
如果 white-space 属性的值为 pre,浏览器将会注意额外的空格,甚至回车。在这个方面,而且仅在这个方面,任何元素都可以相当于一个 pre 元素。
注意: 经测试,IE 7 以及更早版本的浏览器不支持该值,因此请使用非 IE 的浏览器来查看上面的实例。
值 nowrap
与之相对的值是 nowrap,它会 防止元素中的文本换行 ,除非使用了一个 br 元素。在 CSS 中使用 nowrap 非常类似于 HTML 4 中用 <td nowrap> 将一个表单元格设置为不能换行,不过 white-space 值可以应用到任何元素。
值 pre-wrap 和 pre-line
CSS2.1 引入了值 pre-wrap 和 pre-line,这在以前版本的 CSS 中是没有的。这些值的作用是允许创作人员更好地控制空白符处理。
如果元素的 white-space 设置为 pre-wrap,那么该元素中的文本会保留空白符序列,但是文本行会正常地换行。如果设置为这个值,源文本中的行分隔符以及生成的行分隔符也会保留。pre-line 与 pre-wrap 相反,会像正常文本中一样合并空白符序列,但保留换行符。
注意: 我们在 IE7 和 FireFox2.0 浏览器中测试了上面的两个实例,但是结果是,值 pre-wrap 和 pre-line 都没有得到很好的支持。
总结
下面的表格总结了 white-space 属性的行为:
值 | 空白符 | 换行符 | 自动换行 |
pre-line | 合并 | 保留 | 允许 |
normal | 合并 | 忽略 | 允许 |
nowrap | 合并 | 忽略 | 不允许 |
pre | 保留 | 保留 | 不允许 |
pre-wrap | 保留 | 保留 | 允许 |
文本方向
如果您阅读的是英文书籍,就会从左到右、从上到下地阅读,这就是英文的流方向。不过,并不是所有语言都如此。我们知道古汉语就是从右到左来阅读的,当然还包括希伯来语和阿拉伯语等等。CSS2 引入了一个属性来描述其方向性。
direction 属性 影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置。
注释: 对于行内元素,只有当 unicode-bidi 属性 设置为 embed 或 bidi-override 时才会应用 direction 属性。
direction 属性有两个值:ltr 和 rtl。大多数情况下,默认值是 ltr,显示从左到右的文本。如果显示从右到左的文本,应使用值 rtl。
CSS 文本属性
属性 | 描述 |
设置文本颜色 | |
设置文本方向。 | |
设置行高。 | |
设置字符间距。 | |
对齐元素中的文本。 | |
向文本添加修饰。 | |
缩进元素中文本的首行。 | |
text-shadow | 设置文本阴影。CSS2 包含该属性,但是 CSS2.1 没有保留该属性。 |
控制元素中的字母。 | |
unicode-bidi | 设置文本方向。 |
设置元素中空白的处理方式。 | |
设置字间距。 |
字体风格
font-style 属性 最常用于规定斜体文本。
该属性有三个值:
- normal - 文本正常显示
- italic - 文本斜体显示
- oblique - 文本倾斜显示
实例
p.normal {font-style:normal;}p.italic {font-style:italic;}p.oblique {font-style:oblique;}
italic 和 oblique 的区别
font-style 非常简单:用于在 normal 文本、italic 文本和 oblique 文本之间选择。唯一有点复杂的是明确 italic 文本和 oblique 文本之间的差别。
斜体(italic)是一种简单的字体风格,对每个字母的结构有一些小改动,来反映变化的外观。与此不同,倾斜(oblique)文本则是正常竖直文本的一个倾斜版本。
通常情况下,italic 和 oblique 文本在 web 浏览器中看上去完全一样。
字体变形
font-variant 属性 可以设定小型大写字母。
小型大写字母不是一般的大写字母,也不是小写字母,这种字母采用 不同大小的大写字母 。
实例
p {font-variant:small-caps;}
font-weight 属性 设置文本的粗细。
使用 bold 关键字可以将文本设置为粗体。
关键字 100 ~ 900 为字体指定了 9 级加粗度 。如果一个字体内置了这些加粗级别,那么这些数字就直接映射到预定义的级别,100 对应最细的字体变形,900 对应最粗的字体变形。数字 400 等价于 normal,而 700 等价于 bold。
如果将元素的加粗设置为 bolder,浏览器会设置比所继承值更粗的一个字体加粗。与此相反,关键词 lighter 会导致浏览器将加粗度下移而不是上移。
font-size
相对大小 绝对大小
注意: 如果您没有规定字体大小,普通文本(比如段落)的默认大小是 16 像素 (16px=1em)。
(注:16 等于父元素的默认字体大小,假设父元素的 font-size 为 20px,那么公式需改为: pixels /20= em )
链接的四种状态:
- a:link - 普通的、未被访问的链接
- a:visited - 用户已访问的链接
- a:hover - 鼠标指针位于链接的上方
- a:active - 链接被点击的时刻
实例
a:link {color:#FF0000;} /* 未被访问的链接 */ a:visited {color:#00FF00;} /* 已被访问的链接 */ a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */ a:active {color:#0000FF;} /* 正在被点击的链接 */
当为链接的不同状态设置样式时,请按照以下次序规则:
- a:hover 必须位于 a:link 和 a:visited 之后
- a:active 必须位于 a:hover 之后
修改用于列表项的标志类型,可以使用属性 list-style-type :
ul {list-style-type : square}
上面的声明把无序列表中的列表项 标志设置为方块。默认是圆点
标志使用一个图像,这可以利用 list-style-image 属性做到:
ul li {list-style-image : url(xxx.gif)}
列表标志位置
CSS2.1 可以确定标志出现在列表项内容之外还是内容内部。这是利用 list-style-position 完成的。
简写列表样式
为简单起见,可以将以上 3 个列表样式属性合并为一个方便的属性: list-style ,就像这样:
li {list-style : url(example.gif) square inside}
list-style 的值可以按任何顺序列出,而且这些值都可以忽略。只要提供了一个值,其它的就会填入其默认值。
table, th, td { border: 1px solid blue; }
p
{
outline:#00ff00 dotted thick;
}
CSS 边框属性
"CSS" 列中的数字指示哪个 CSS 版本定义了该属性。
属性 | 描述 | CSS |
在一个声明中设置所有的轮廓属性。 | 2 | |
设置轮廓的颜色。 | 2 | |
设置轮廓的样式。 | 2 | |
设置轮廓的宽度。 | 2 |
您还可以按照 上、右、下、左 的顺序分别设置各边的内边距,各边均可以使用不同的单位或百分比值:
h1 {padding: 10px 0.25em 2ex 20%;}
一切皆为框
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为 一块内容 ,即“块框”。与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。
您可以使用 display 属性 改变生成的框的类型。这意味着,通过将 display 属性设置为 block,可以让行内元素(比如 <a> 元素)表现得像块级元素一样。还可以通过把 display 设置为 none,让生成的元素根本没有框。这样的话,该框及其所有内容就不再显示,不占用文档中的空间。
CSS 定位机制
CSS 有三种基本的定位机制:普通流、浮动和绝对定位。
除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为 行框(Line Box) ,行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。
CSS 元素选择器(类型选择器)可以设置 XML 文档中元素的样式。
类型 | 描述 |
[abc^="def"] | 选择 abc 属性值以 "def" 开头的所有元素 |
[abc$="def"] | 选择 abc 属性值以 "def" 结尾的所有元素 |
[abc*="def"] | 选择 abc 属性值中包含子串 "def" 的所有元素 |
选择相邻兄弟
如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。
例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:
h1
+
p {margin-top:50px;}
这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”。
请记住,用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器:
li + li {font-weight:bold;}
上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。
CSS 伪类用于向某些选择器添加特殊的效果。
CSS 伪类 (Pseudo-classes)实例:
本例演示如何向文档中的超链接添加不同的颜色。
本例演示如何向超链接添加其他样式。
本例演示如何对超链接应用 :focus 伪类(无法在 IE 中工作)。
本例演示 :first-child 伪类的用法。
本例演示 :lang 伪类的用法。
语法
伪类的语法:
selector : pseudo-class {property: value}
CSS 类也可与伪类搭配使用。
selector.class : pseudo-class {property: value}
锚伪类
在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。
a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */
CSS2 - :first-child 伪类
您可以使用 :first-child 伪类来选择元素的第一个子元素。这个特定伪类很容易遭到误解,所以有必要举例来说明。考虑以下标记:
<div>
<p>These are the necessary steps:</p>
<ul>
<li>Intert Key</li>
<li>Turn key
<strong>clockwise</strong>
</li><li>Push accelerator</li></ul><p>Do
<em>not</em>
push the brake at the same time as the accelerator.</p></div>
在上面的例子中,作为第一个元素的元素包括第一个 p、第一个 li 和 strong 和 em 元素。
给定以下规则:
p:first-child {font-weight: bold;}li:first-child {text-transform:uppercase;}
第一个规则将作为某元素第一个子元素的所有 p 元素设置为粗体。第二个规则将作为某个元素(在 HTML 中,这肯定是 ol 或 ul 元素)第一个子元素的所有 li 元素变成大写。
请访问该链接,来查看这个 :first-child 实例 的效果。
提示: 最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素。
注释: 必须声明 <!DOCTYPE> ,这样 :first-child 才能在 IE 中生效。
为了使您更透彻地理解 :first-child 伪类,我们另外提供了 3 个例子:
例子 1 - 匹配第一个 <p> 元素
在下面的例子中,选择器匹配作为任何元素的第一个子元素的 p 元素:
<html><head><style type="text/css">
p:first-child
{ color: red; } </style></head><body>
<p>some text</p>
<p>some text</p></body></html>
例子 2 - 匹配所有 <p> 元素中的第一个 <i> 元素
在下面的例子中,选择器匹配所有 <p> 元素中的第一个 <i> 元素:
<html><head><style type="text/css">
p > i:first-child
{ font-weight:bold; } </style></head><body><p>some
<i>text</i>
. some <i>text</i>.</p><p>some
<i>text</i>
. some <i>text</i>.</p></body></html>
例子 3 - 匹配所有作为第一个子元素的 <p> 元素中的所有 <i> 元素
在下面的例子中,选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素:
<html><head><style type="text/css">
p:first-child i
{ color:blue; } </style></head><body><p>some
<i>text</i>
. some
<i>text</i>
.</p><p>some <i>text</i>. some <i>text</i>.</p></body></html>
CSS2 - :lang 伪类
:lang 伪类使你有能力为不同的语言定义特殊的规则。在下面的例子中,:lang 类为属性值为 no 的 q 元素定义引号的类型:
<html><head><style type="text/css">
q:lang(no) { quotes: "~" "~" }
</style></head><body><p>文字<q
lang="no"
>段落中的引用的文字</q>文字</p></body></html>
伪类
W3C :"W3C" 列指示出该属性在哪个 CSS 版本中定义(CSS1 还是 CSS2)。
属性 | 描述 | CSS |
向被激活的元素添加样式。 | 1 | |
向拥有键盘输入焦点的元素添加样式。 | 2 | |
当鼠标悬浮在元素上方时,向元素添加样式。 | 1 | |
向未被访问的链接添加样式。 | 1 | |
向已被访问的链接添加样式。 | 1 | |
向元素的第一个子元素添加样式。 | 2 | |
向带有指定 lang 属性的元素添加样式。 | 2 |
:first-line 伪元素
"first-line" 伪元素用于向文本的首行设置特殊样式。
在下面的例子中,浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化:
实例
p:first-line { color:#ff0000; font-variant:small-caps; }
注释: "first-line" 伪元素只能用于块级元素。
注释: 下面的属性可应用于 "first-line" 伪元素:
- font
- color
- background
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
:first-letter 伪元素
"first-letter" 伪元素用于向文本的首字母设置特殊样式:
p:first-letter { color:#ff0000; font-size:xx-large; }
注释: "first-letter" 伪元素只能用于块级元素。
注释: 下面的属性可应用于 "first-letter" 伪元素:
- font
- color
- background
- margin
- padding
- border
- text-decoration
- vertical-align (仅当 float 为 none 时)
- text-transform
- line-height
- float
- clear
CSS2 - :before 伪元素
":before" 伪元素可以在元素的内容前面插入新内容。
下面的例子在每个 <h1> 元素前面插入一幅图片:
h1:before { content:url(logo.gif); }
CSS2 - :after 伪元素
":after" 伪元素可以在元素的内容之后插入新内容。
下面的例子在每个 <h1> 元素后面插入一幅图片:
h1:after { content:url(logo.gif); }
伪元素
W3C :"W3C" 列指示出该属性在哪个 CSS 版本中定义(CSS1 还是 CSS2)。
属性 | 描述 | CSS |
向文本的第一个字母添加特殊样式。 | 1 | |
向文本的首行添加特殊样式。 | 1 | |
在元素之前添加内容。 | 2 | |
在元素之后添加内容。 | 2 |
块元素指的是占据全部可用宽度的元素,并且在其前后都会换行。
块元素的例子:
<h1><p><div>
出于布局目的如何水平对齐块级元素。
使用 margin 属性来水平对齐
可通过将左和右外边距设置为 "auto",来对齐块元素。
注释: 除非已经声明了 !DOCTYPE ,否则使用 margin:auto 在 IE8 以及更早的版本中是无效的。
把左和右外边距设置为 auto,规定的是均等地分配可用的外边距。结果就是居中的元素:
使用 position 属性进行左和右对齐
对齐元素的方法之一是使用绝对定位:
实例
.right{
position:absolute;
right:0px;width:300px;background-color:#b0e0e6;}
注释: 绝对定位元素会被从正常流中删除,并且能够交叠元素。
使用 float 属性来进行左和右对齐
对齐元素的另一种方法是使用 float 属性:
实例
.right{
float:right;
width:300px;background-color:#b0e0e6;}
Cursor:
Auto
Crosshair
Default
Pointer
Move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
媒介类型
某些 CSS 属性仅仅被设计为针对某些媒介。比方说 "voice-family" 属性被设计为针对听觉用户终端。其他的属性可被用于不同的媒介。例如,"font-size" 属性可被用于显示器以及印刷媒介,但是也许会带有不同的值。显示器上面的显示的文档通常会需要比纸媒介文档更大的字号,同时,在显示器上,sans-serif 字体更易阅读,而在纸媒介上,serif 字体更易阅读。
@media规则
@media 规则使你有能力在相同的样式表中,使用不同的样式规则来针对不同的媒介。
下面这个例子中的样式告知浏览器在显示器上显示 14 像素的 Verdana 字体。但是假如页面需要被打印,将使用 10 个像素的 Times 字体。注意:font-weight 被设置为粗体,不论显示器还是纸媒介:
<html><head><style>
@media screen{p.test {
font-family:verdana,sans-serif; font-size:14px}
}@media print{p.test {font-family:times,serif; font-size:10px}}
@media screen,print{p.test {font-weight:bold}}
</style></head><body>....</body></html>
不同的媒介类型
注释: 媒介类型名称对大小写不敏感。
媒介类型 | 描述 |
all | 用于所有的媒介设备。 |
aural | 用于语音和音频合成器。 |
braille | 用于盲人用点字法触觉回馈设备。 |
embossed | 用于分页的盲人用点字法打印机。 |
handheld | 用于小的手持的设备。 |
print | 用于打印机。 |
projection | 用于方案展示,比如幻灯片。 |
screen | 用于电脑显示器。 |
tty | 用于使用固定密度字母栅格的媒介,比如电传打字机和终端。 |
tv | 用于电视机类型的设备。 |