CSS 高级语法.docx

CSS 高级语法.docx

《CSS 高级语法.docx》由会员分享，可在线阅读，更多相关《CSS 高级语法.docx（23页珍藏版）》请在冰豆网上搜索。

CSS高级语法

CSS语法

CSS语法由三部分构成：

选择器、属性和值：

selector{property:

value}

选择器（selector）通常是你希望定义的HTML元素或标签，属性（property）是你希望改变的属性，并且每个属性都有一个值。

属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）：

body{color:

blue}

上面这行代码的作用是将body元素内的文字颜色定义为蓝色。

在上述例子中，body是选择器，而包括在花括号内的的部分是声明。

声明依次由两部分构成：

属性和值，color为属性，blue为值。

值的不同写法和单位

除了英文单词red，我们还可以使用十六进制的颜色值#ff0000：

p{color:

#ff0000;}

为了节约字节，我们可以使用CSS的缩写形式：

p{color:

#f00;}

我们还可以通过两种方法使用RGB值：

p{color:

rgb（255,0,0）;}

p{color:

rgb（100%,0%,0%）;}

请注意，当使用RGB百分比时，即使当值为0时也要写百分比符号。

但是在其他的情况下就不需要这么做了。

比如说，当尺寸为0像素时，0之后不需要使用px单位，因为0就是0，无论单位是什么。

记得写引号

提示：

如果值为若干单词，则要给值加引号：

p{font-family:

"sansserif";}

多重声明：

提示：

如果要定义不止一个声明，则需要用分号将每个声明分开。

下面的例子展示出如何定义一个红色文字的居中段落。

最后一条规则是不需要加分号的，因为分号在英语中是一个分隔符号，不是结束符号。

然而，大多数有经验的设计师会在每条声明的末尾都加上分号，这么的好处是，当你从现有的规则中增减声明时，会尽可能的减少出错的可能性。

就像这样：

p{text-align:

center;color:

red;}

你应该在每行只描述一个属性，这样可以增强样式定义的可读性，就像这样：

p{

text-align:

center;

color:

black;

font-family:

arial;

}

空格和大小写

大多数样式表包含不止一条规则，而大多数规则包含不止一个声明。

多重声明和空格的使用使得样式表更容易被编辑：

body{

color:

#000;

background:

#fff;

margin:

0;

padding:

0;

font-family:

Georgia,Palatino,serif;

}

是否包含空格不会影响CSS在浏览器的工作效果，同样，与XHTML不同，CSS对大小写不敏感。

不过存在一个例外：

如果涉及到与HTML文档一起工作的话，class和id名称对大小写是敏感的。

CSS高级语法

∙PreviousPage

∙NextPage

选择器的分组

你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。

用逗号将需要分组的选择器分开。

在下面的例子中，我们对所有的标题元素进行了分组。

所有的标题元素都是绿色的。

h1,h2,h3,h4,h5,h6{

color:

green;

}

继承及其问题

根据CSS，子元素从父元素继承属性。

但是它并不总是按此方式工作。

看看下面这条规则：

body{

font-family:

Verdana,sans-serif;

}

根据上面这条规则，站点的body元素将使用Verdana字体（假如访问者的系统中存在该字体的话）。

通过CSS继承，子元素将继承最高级元素（在本例中是body）所拥有的属性（这些子元素诸如p,td,ul,ol,ul,li,dl,dt,和dd）。

不需要另外的规则，所有body的子元素都应该显示Verdana字体，子元素的子元素也一样。

并且在大部分的现代浏览器中，也确实是这样的。

但是在那个浏览器大战的血腥年代里，这种情况就未必会发生，那时候对标准的支持并不是企业的优先选择。

比方说，Netscape4就不支持继承，它不仅忽略继承，而且也忽略应用于body元素的规则。

IE/Windows直到IE6还存在相关的问题，在表格内的字体样式会被忽略。

我们又该如何是好呢？

友善地对待Netscape4

幸运地是，你可以通过使用我们称为"BeKindtoNetscape4"的冗余法则来处理旧式浏览器无法理解继承的问题。

body{

font-family:

Verdana,sans-serif;

}

p,td,ul,ol,li,dl,dt,dd{

font-family:

Verdana,sans-serif;

}

4.0浏览器无法理解继承，不过他们可以理解组选择器。

这么做虽然会浪费一些用户的带宽，但是如果需要对Netscape4用户进行支持，就不得不这么做。

继承是一个诅咒吗？

如果你不希望"Verdana,sans-serif"字体被所有的子元素继承，又该怎么做呢？

比方说，你希望段落的字体是Times。

没问题。

创建一个针对p的特殊规则，这样它就会摆脱父元素的规则：

body{

font-family:

Verdana,sans-serif;

}

td,ul,ol,ul,li,dl,dt,dd{

font-family:

Verdana,sans-serif;

}

p{

font-family:

Times,"TimesNewRoman",serif;

}

CSS派生选择器

∙PreviousPage

∙NextPage

派生选择器

通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。

在CSS1中，通过这种方式来应用规则的选择器被称为上下文选择器（contextualselectors），这是由于它们依赖于上下文关系来应用或者避免某项规则。

在CSS2中，它们称为派生选择器，但是无论你如何称呼它们，它们的作用都是相同的。

派生选择器允许你根据文档的上下文关系来确定某个标签的样式。

通过合理地使用派生选择器，我们可以使HTML代码变得更加整洁。

比方说，你希望列表中的strong元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：

listrong{

font-style:

italic;

font-weight:

normal;

}

请注意标记为的蓝色代码的上下文关系：

我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用

1. 我是斜体字。

   这是因为strong元素位于li元素内。

2. 我是正常的字体。

在上面的例子中，只有li元素中的strong元素的样式为斜体字，无需为strong元素定义特别的class或id，代码更加简洁。

再看看下面的CSS规则：

strong{

color:

red;

}

h2{

color:

red;

}

h2strong{

color:

blue;

}

下面是它施加影响的HTML：

Thestronglyemphasizedwordinthisparagraphisred.

Thissubheadisalsored.

CSSid选择器

∙PreviousPage

∙NextPage

id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式。

id选择器以"#"来定义。

下面的两个id选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：

#red{color:

red;}

#green{color:

green;}

下面的HTML代码中，id属性为red的p元素显示为红色，而id属性为green的p元素显示为绿色。

这个段落是红色。

这个段落是绿色。

注意：

id属性只能在每个HTML文档中出现一次。

想知道原因吗，请参阅XHTML:

网站重构。

id选择器和派生选择器

在现代布局中，id选择器常常用于建立派生选择器。

#sidebarp{

font-style:

italic;

text-align:

right;

margin-top:

0.5em;

}

上面的样式只会应用于出现在id是sidebar的元素内的段落。

这个元素很可能是div或者是表格单元，尽管它也可能是一个表格或者其他块级元素。

它甚至可以是一个内联元素，比如或者，不过这样的用法是非法的，因为不可以在内联元素中嵌入

（如果你忘记了原因，请参阅XHTML:

网站重构）。

一个选择器，多种用法

即使被标注为sidebar的元素只能在文档中出现一次，这个id选择器作为派生选择器也可以被使用很多次：

#sidebarp{

font-style:

italic;

text-align:

right;

margin-top:

0.5em;

}

#sidebarh2{

font-size:

1em;

font-weight:

normal;

font-style:

italic;

margin:

0;

line-height:

1.5;

text-align:

right;

}

在这里，与页面中的其他p元素明显不同的是，sidebar内的p元素得到了特殊的处理，同时，与页面中其他所有h2元素明显不同的是，sidebar中的h2元素也得到了不同的特殊处理。

单独的选择器

id选择器即使不被用来创建派生选择器，它也可以独立发挥作用：

#sidebar{

border:

1pxdotted#000;

padding:

10px;

}

根据这条规则，id为sidebar的元素将拥有一个像素宽的黑色点状边框，同时其周围会有10个像素宽的内边距（padding，内部空白）。

老版本的Windows/IE浏览器可能会忽略这条规则，除非你特别地定义这个选择器所属的元素：

div#sidebar{

border:

1pxdotted#000;

padding:

10px;

}

CSS类选择器

∙PreviousPage

∙NextPage

在CSS中，类选择器以一个点号显示：

.center{text-align:

center}

在上面的例子中，所有拥有center类的HTML元素均为居中。

在下面的HTML代码中，h1和p元素都有center类。

这意味着两者都将遵守".center"选择器中的规则。

Thisheadingwillbecenter-aligned

Thisparagraphwillalsobecenter-aligned.

注意：

类名的第一个字符不能使用数字！

它无法在Mozilla或Firefox中起作用。

和id一样，class也可被用作派生选择器：

.fancytd{

color:

#f60;

background:

#666;

}

在上面这个例子中，类名为fancy的更大的元素内部的表格单元都会以灰色背景显示橙色文字。

（名为fancy的更大的元素可能是一个表格或者一个div）

元素也可以基于它们的类而被选择：

td.fancy{

color:

#f60;

background:

#666;

}

在上面的例子中，类名为fancy的表格单元将是带有灰色背景的橙色。

你可以将类fancy分配给任何一个表格元素任意多的次数。

那些以fancy标注的单元格都会是带有灰色背景的橙色。

那些没有被分配名为fancy的类的单元格不会受这条规则的影响。

还有一点值得注意，class为fancy的段落也不会是带有灰色背景的橙色，当然，任何其他被标注为fancy的元素也不会受这条规则的影响。

这都是由于我们书写这条规则的方式，这个效果被限制于被标注为fancy的表格单元（即使用td元素来选择fancy类）。

如何创建CSS

∙PreviousPage

∙NextPage

如何插入样式表

当读到一个样式表时，浏览器会根据它来格式化HTML文档。

插入样式表的方法有三种：

外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。

在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。

每个页面使用标签链接到样式表。

标签在（文档的）头部：

浏览器会从文件mystyle.css中读到样式声明，并根据它来格式文档。

外部样式表可以在任何文本编辑器中进行编辑。

文件不能包含任何的html标签。

样式表应该以.css扩展名进行保存。

下面是一个样式表文件的例子：

hr{color:

sienna;}

p{margin-left:

20px;}

body{background-image:

url（"images/back40.gif"）;}

不要在属性值与单位之间留有空格。

假如你使用“margin-left:

20px”而不是“margin-left:

20px”，它仅在IE6中有效，但是在Mozilla/Firefox或Netscape中却无法正常工作。

内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。

你可以使用

内联样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。

请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

要使用内联样式，你需要在相关的标签内使用样式（style）属性。

Style属性可以包含任何CSS属性。

本例展示如何改变段落的颜色和左外边距：

sienna;margin-left:

20px">

Thisisaparagraph

多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

例如，外部样式表拥有针对h3选择器的三个属性：

h3{

color:

red;

text-align:

left;

font-size:

8pt;

}

而内部样式表拥有针对h3选择器的两个属性：

h3{

text-align:

right;

font-size:

20pt;

}

假如拥有内部样式表的这个页面同时与外部样式表链接，那么h3得到的样式是：

color:

red;

text-align:

right;

font-size:

20pt;

即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。

CSS伪类（Pseudo-classes）

∙PreviousPage

∙NextPage

CSS伪类用于向某些选择器添加特殊的效果。

CSS伪类（Pseudo-classes）实例：

超链接

本例演示如何向文档中的超链接添加不同的颜色。

超链接2

本例演示如何向超链接添加其他样式。

超链接-:

focus的使用

本例演示如何对超链接应用:

focus伪类（无法在IE中工作）。

:

first-child（首个子对象）

本例演示:

first-child伪类的用法。

:

lang（语言）

本例演示:

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}/*选定的链接*/

提示：

在CSS定义中，a:

hover必须被置于a:

link和a:

visited之后，才是有效的。

提示：

在CSS定义中，a:

active必须被置于a:

hover之后，才是有效的。

提示：

伪类名称对大小写不敏感。

伪类与CSS类

伪类可以与CSS类配合使用：

a.red:

visited{color:

#FF0000}

CSSSyntax

假如上面的例子中的链接被访问过，那么它将显示为红色。

CSS2-:

first-child伪类

您可以使用:

first-child伪类来选择元素的第一个子元素。

这个特定伪类很容易遭到误解，所以有必要举例来说明。

考虑以下标记：

在上面的例子中，作为第一个元素的元素包括第一个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:

first-child{

color:

red;

}

sometext

sometext

TIY

例子2-匹配所有

元素中的第一个元素

在下面的例子中，选择器匹配所有

元素中的第一个元素：

p>i:

first-child{

font-weight:

bold;

}

sometext.sometext.

sometext.sometext.

TIY

例子3-匹配所有作为第一个子元素的

元素中的所有元素

在下面的例子中，选择器匹配所有作为元素的第一个子元素的

元素中的所有元素：

p:

first-childi{

color:

blue;

}

sometext.sometext.

sometext.sometext.

TIY

CSS2-:

lang伪类

:

lang伪类使你有能力为不同的语言定义特殊的规则。

在下面的例子中，:

lang类为属性值为no的q元素定义引号的类型：

q:

lang（no）

{

quotes:

"~""~"

}

文字段落中的引用的文字文字

伪类

浏览器支持：

IEInternetExplorer,F:

Firefox,N:

Netscape。

W3C：

“W3C”列的数字显示出伪类属性由哪个CSS标准定义（CSS1还是CSS2）。

伪类

作用

IE

F

N

W3C

:

active

将样式添加到被激活的元素

4

1

8

1

:

focus

将样式添加到被选中的元素

-

-

-

2

:

hover

当鼠标悬浮在元素上方时，向元素添加样式

4

1

7