CSS中级指南(CSS教程)

2005年11月02日 00:00 6726

像HTML中级指南一样,CSS中级指南不会很难,但建立在 CSS初级指南的基础上。


一、类class和标识id选择符──不用粘在后面的小胶片,你就可以制做属于你自己的选择符

在CSS初级教程中我们仅仅考虑了HTML选择符──以HTML标签形式出现。

你当然可以用类选择符class和标识选择符id来定义自己的选择符。

这样做的好处是,依赖于class或者id,你可以不同地表现相同的HTML元素。

在CSS中,类选择符在一个半角英文句点.)之前,而id则在半角英文井号#)之前。

看起来像这样:

#top {
background-color: #ccc;
padding: 1em
}
.intro {
color: red;
font-weight: bold;
}


HTML与CSS的连接用属性idclass。像这样:

<div id="top">
<h1>Chocolate curry</h1>
<p class="intro">This is my recipe for making curry purely with chocolate</p>
<p class="intro">Mmm mm mmmmm</p>
</div>


id和class不同之处在于,id用在唯一的元素上,而class则用在不止一个的元素上。

你也可以为一个指定的HTML元素应用选择符,把HTML选择符放置在前面就可以了,所以 p.jam { whatever }会应用在有类“jam”的段落上。


二、 组合和嵌套──给多个选择符或者在选择符内的选择符赋值

你不必重复有相同属性的多个选择符,你只要用英文逗号(,隔开选择符就可以了。

比如,你有如下的代码:

h2 {
color: red;
}
.thisOtherClass {
color: red;
}
.yetAnotherClass {
color: red;
}


则你可以这样写:

h2, .thisOtherClass, .yetAnotherClass {
color: red;
}


嵌套
CSS结构好的话,没有必要使用过多的类或者标识选择符。这是因为你可以指定在选择符内的选择符。(或者更好的说法,上下文选择符--译者著)
比如:

#top {
background-color: #ccc;
padding: 1em
}
#top h1 {
color: #ff0;
}
#top p {
color: red;
font-weight: bold;
}


这就减去不必要的类或者标识选择符,如果应用到像这样的HTML中:

<div id="top">
<h1>Chocolate curry</h1>
<p>This is my recipe for making curry purely with chocolate</p>
<p>Mmm mm mmmmm</p>
</div>

这是因为,用英文半角空格间隔选择符,我们指明了在标识id内的h1有“#ff0”的颜色,而p则是红色red和粗体bold

这可能也会有些复杂(因为可能不止两级,比如在内在内在内在内等等)。你有必要多加练习。


三、 伪类──定义连接选择符的多种状态

伪类(Pseudo classes)是选择符的螺栓,用来指定一个或者与其相关的选择符的状态。它们的形式是selector:pseudo class { property: value; },简单地用一个半角英文冒号(:)来隔开选择符和伪类。

CSS很多的建议并没有得到浏览器的支持,但有四个可以安全使用的用在连接上的伪类。


伪类

伪类(Pseudo classes)是选择符的螺栓,用来指定一个或者与其相关的选择符的状态。它们的形式是selector:pseudo class { property: value; },简单地用一个半角英文冒号(:)来隔开选择符和伪类。

CSS很多的建议并没有得到浏览器的支持,但有四个可以安全使用的用在连接上的伪类。

* link用在为访问的连接上。
* visited用在已经访问过的连接上。
* active用于获得焦点(比如,被点击)的连接上。
* hoverhover用于鼠标光标置于其上的连接。

a.snowman:link {
color: blue;
}
a.snowman:visited {
color: purple;
}
a.snowman:active {
color: red;
}
a.snowman:hover {
text-decoration: none;
color: blue;
background-color: yellow;
}

注意:尽管CSS给予你绕开的控制权,用不同的颜色表示已经访问过的连接是一个很好的习惯,因为很多用户还是这样预期的。伪类(除了hover)不常用,恐怕也没有过去常用。因此,它没有过去那样有用了。但如果你能收集常用用户的意见,你会发现应该使用它。传统上,连接文本是蓝色的,已访问的连接是紫色的。也许,这是最有效、最有用的颜色。然而,伴随着CSS的广泛发展,这种颜色不会是平常的了,用户也不再假设连接必须是蓝色或紫色的。

注意:你应该也可以在除了连接的其他元素上使用hover伪类。不幸的是,Internet Explore并不支持。这真是一个极大的烦恼,因为在其它浏览器上可以有很多小技巧让你的页面看起来更令人愉快。

四、 快捷属性──很多属性,比如边框border和边界margin都可以把其他方向的属性组合在一起

有些CSS属性允许一连串的属性组合,用英文半角空格隔开即可。

marginpaddingborder-width允许你把诸如margin-top-width,margin-right-width,margin-bottom-width等用属性: 上 右 下 左(property: top right bottom left;)组合起来。

所以:

p {
border-top-width: 1px;
border-right-width: 5px;
border-bottom-width: 10px;
border-left-width: 20px;
}


可以概括起来:

p {
border: 1px red solid;
}


(这也可应用到border-top,border-right等)

加入只指定两个值(比如margin: 1em 10em;),第一个值是上和下,第二个值是右和左。

字体相关的属性还可以聚合在font的属性下:

p {
font: italic bold 1em/1.5 courier;
}


1.5是行高)

所以,组合起来吧,试试这个:

p {
font: 1em/1.5 "Times New Roman", times, serif;
padding: 3em 1em;
border: 1px black solid;
border-width: 1px 5px 5px 1px;
border-color: red green blue yellow;
margin: 1em 5em;
}

很有趣吧?(看起来也应该不难,只要你心里记住,时钟是朝哪个方向走的——译者注)


五、 背景图片──猜猜看

有很多属性跟背景图片的操作相关。

background的属性可以全部处理它们。

body {
background: white url(http://www.htmldog.com/images/bg.gif) no-repeat top right;
}


这是如下属性的组合:

* background-color,在前面我们已经说过了。
* background-image,图片的存储位置。
* background-repeat,图片如何平铺。可以是 repeat(将会平铺整个页面),repeat-y(在y轴上平铺,上下)repeat-x (在x轴上平铺,左右),或者no-repeat(图片不重复)。
* background-position,可以是top、center、bottom、left、right或者像上面的任意组合。

背景图片可以用在绝大部分的HTML元素上而不仅仅是整个页面(body)。简单使用但可以获得良好效果,比如角落的阴影。

注意:很容易对背景图片失去控制和把你的网页涂得到处都是。一些明显活跃过度的人可能认为在一个页面的背景铺上一个色彩鲜明的图片看起来会很酷,然而却给用户判读前景文本带来识别一个Ж面的挑战。这是一个极端的例子。实践中,用户界面友好的可读文本是在白色朴素的背景上黑色或者在黑色朴素的背景上的白色(当然还有一个建议:米黄色的背景或浅灰色背景会更好,因为会减少刺眼的光)。所以,最佳地使用背景是用在无内容在上的地方,或者使背景图片比较淡,这也可以减少图片文件的容量,因为没有更多涉及更多的颜色(假设你是使用索引颜色的格式,比如GIF)。(以上文字版权归原作者所有)

相关链接:CSS初级指南    CSS高级指南