CSS2.0教程

最新推荐文章于 2024-09-28 15:35:33 发布

jianiu

最新推荐文章于 2024-09-28 15:35:33 发布

阅读量1.1k

点赞数

分类专栏： web2.0 文章标签： css html class xhtml 浏览器文档

web2.0 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

就如 HTML初级教程，CSS初级教程假设你对CSS一无所知。这个教程的目的是教授CSS的骨干元素──已经可以足够让你来开始学习了。CSS中级教程和CSS高级教程将探讨CSS的更深层次。

CSS，或Cascading Styles Sheets，中译层叠样式表或级联样式表，是样式化HTML的一种方法。HTML是文档的内容，则样式表是文档的表现，或者说外观。

无论闻起来还是尝起来，样式表一点都不像HTML。它们有着这样的格式：“属性：值(property: value)”，而且大部分属性可以应用到HTML标签中去。

有三条途径可以把CSS应用到HTML中去。

内联

内联样式通过style属性直接套进HTML中去。

看起来像这样：

Example Source Code [www.52css.com]

这将会是指定的段落变成红色。
我们的建议是，HTML应该是独立的、样式自由的文档，所以内联样式无论在什么情况下都应该尽量避免。

内部

内部样式服务于整个当前页面。在头标签head里面，样式标签style里包含当前页面的所有样式。
看起来像这样：

Example Source Code [www.52css.com]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>
<style type="text/css">
p { color: red; }
a { color: blue; }
</style>
...

这将使这个页面的所有段落都是红色的，所有的连接都是蓝色的。
与内联样式类似，你应该是HTML文档和CSS文档分离开来，下面，我们的救世来了……

外部

外部样式为整个网站的多个页面服务。这是一个独立的CSS文档，简单的一个范例如下：

Example Source Code [www.52css.com]

p { color: red; } a { color: blue; }

如果这个文档存为“web.css”的话，它可以这样跟HTML文档连接起来：

Example Source Code [www.52css.com]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>
<link rel="stylesheet" type="text/css" href="web.css" />
...

在CSS高级教程中，我们还将看到其他连接外部样式表的方法，但到目前，这已经足够了。
想从本指南中收获更多，尝试着在你的文本编辑器中新建一个文档，在HTML文档相同的目录中，把这些代码保存为“web.css”。
现在像下面一样改进你的HTML文档：

Example Source Code [www.52css.com]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>My first web page</title>
<link rel="stylesheet" type="text/css" href="web.css" />
</head>
...

保存HTML文档。现在已经把HTML和CSS连接起来了，但还是空白一片，没有改变什么东西。随着进一步学习CSS初级教程，你可以增添或者改变CSS文档，通过刷新浏览器里的HTML文档，方便地看到效果，像我们以前做的一样。

HTML有标签（tag），CSS就有选择符（selector）。选择符就是赋予内部或者外部样式表的名字。在 CSS初级指南中，我们致力于HTML选择符，即是HTML的标签，用来改变一个指定标签的样式。

每个选择符都有属性（properties）在大括号{}中，里面包括诸如color、font-weighth或者 background-color形式的字样。

值（value）在半角英文引号:后面，用半角英文分号;隔离。

Example Source Code [www.52css.com]

body { font-size: 0.8em; color: navy; }

如上，这给body选择符里的font-size和color属性赋值。

基本上，这应用在HTML文档的话，在body标签之间（整个窗口的内容）文本将会有0.8em大小，显示为深蓝色。

长度和百分比

CSS中有很多专有的属性单位，也有很多能够用在大量属性的常规单位，在你继续学习之前，它们值得你熟悉一下。

em（比如font-size: 2em）是一个大致与一个字符高度相同的单位。
px（font-size: 12px）是一个像素的单位。
pt（font-size: 12pt）是一个磅的单位。
%（font-size: 80%）是一个……单位，等等，哦，是百分比。
其他单位还包括pc(活字），cm（厘米），mm（毫米）和in（英寸）。
一个值是0的时候你不必为它声明一个单位。比如，你不想要边界，可以这样设置：border: 0 。

注意

网页不是静态、绝对的媒体。这意味着，网页具有灵活性，用户被允许按他们的喜好方式浏览网页，包括字体尺寸和屏幕的大小等等。

因此，为font-size属性赋值的单位中，最佳的是em或者%，而px在多数浏览器中会导致文本具有不可缩放性，也会导致贫乏、乏味的文本。

CSS拥有1677216色供你处置，可以用名字，rgb（红绿蓝）值或者十六进制代码（hex）值来表示。

Example Source Code [www.52css.com]

红色red
相同于
rgb(255,0,0)
相同于
rgb(100%,0%,0%)
相同于
#ff0000
相同于
#f00

有16中合法的预定义颜色名字。它们是：aqua（水绿）、 black（黑）、blue（蓝）、 fuchsia（紫红）、 gray（灰）、 green（绿）、lime（浅绿）、 maroon（褐）、navy（深蓝）、 olive（橄榄）、purple（紫）、 red（红）、silver（银）、 teal（深青）、white（白）和 yellow（黄）。

透明transparent也是一个合法值。

在rgb的从0至255的三个值中，0是最低阶的（如没有红色），255是最高阶（如全是红色）。这些值也可以是百分比。

十六进制Hexadecimal（以“Sexadecimal”更为人知和更正确的用法）是16位的系统。我们日常生活中常用的是十进制系统（基于10，从0到9），但十六进制有16个数字，从0到f。
在CSS中的十六进制用半角英文井号#来定义，后面跟随3或6位数字。基本上，3位是6位的压缩版（#f00就是#ff0000，#c96就是#cc9966等等）。3位版本比较容易解释（第一个数字，像rgb的第一个值，是红色的，第二个绿色，不用说，第三个就是蓝色了），但6位版本给你更多的颜色精确控制权。

前景色和背景色

颜色可以用color和background-color（注意这必须用美式英语中的color而不是colour）来应用。
下面演示一段有蓝色背景和黄色前景的文本的CSS：

Example Source Code [www.52css.com]

h1 {
color: yellow;
background-color: blue;
}

这些颜色让人感到有点粗糙，所以你可以进一步改进CSS代码，使文本看起来清爽一点：

Example Source Code [www.52css.com]

body {
font-size: 0.8em;
color: navy;
}
h1 {
color: #ffc;
background-color: #009;
}

保存这个CSS文档，然后刷新浏览器。你可以看到第一级标题（h1元素）已经变成介于黄蓝之间的混色。

你可以应用color和background-color的属性到大部分的HTML元素中，包括body，它可以改变整个页面所有东西的颜色。

你可以用大量的属性来改变文本的大小和形态，概括如下：

字体font-family

这是字体本身的名称，如“Times News Roman”，“Arial”或者“Verdana”（又如“宋体”等中文字体名称--译者著）。
你指定的字体必须存在在用户的电脑上，所以在CSS使用字体会存在某种程度上的不确定性。有少量“安全”的字体（最常用的是Arial，Verdana和Times New Roman）。但你可以指定不止一种字体，只要用半角英文逗号,隔开就行。这样做的目的是如果用户的电脑上没有你指定的第一个字体，浏览器会逐遍寻找罗列的字体直到找到电脑上安装有的字体为止。这很有用因为不同的电脑有时侯有不同的安装字体。所以，例子font-family: arial, helvetica的目的就是用在PC（一般情况下有arial字体而没有helvetica字体）和Apple Mac上（一般有helvetica字体而没有arial字体）。
注意：如果一个字体的名称超过一个单词，它应该用英文双引号括起来，如：font-family: "Times New Roman"。

字体尺寸font-size

定义字体的尺寸。必须小心──像标题一样的文本不应该是段落中的大字体而已，你应该使用标题标签（h1，h2 等）。甚至，在练习中，你可以使段落文本字体尺寸大于标题（不推荐使用，如果你明智的话）。

字体加粗font-weight

这用来声明文本粗细与否。实际应用中一般只有两种形式：font-weight: bold（粗体）和font-weight: normal（普通）。在理论上，它们的值有bolder（更粗），lighter（更细），100，200，300，400，500，600，700，800或者900，但许多浏览器会摇摇头，说：“我不认为这样”，所以使用bold和normal是比较安全的。

字体样式font-style

这定义文本正斜与否。可以这样使用 font-style: italic（倾斜）或者font-style: normal（正常）。

文本装饰text-decoration

这用来声明文本是否有划线。可以这样使用：
text-decoration: overline──文本上面的划线。
text-decoration: line-through──穿过文本的删除线。
text-decoration: underline──这应该只使用在连接中，因为用户一般认为连接才有下划线。
这个属性通常用来装饰连接，而 text-decoration: none则是表示没有任何划线。

文本转换text-transform

这可以转换文本的大小写。
text-transform: capitalize把每个单词的首字母转换成大写。
text-transform: uppercase把所有的字母都转换成大写。
text-transform: lowercase把所有的字母都转换成小写。
text-transform: none？你自己试一试啦。

Example Source Code [www.52css.com]

body {
font-family: arial, helvetica, serif;
font-size: 0.8em;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
a {
text-decoration: none;
}
strong {
font-style: italic;
text-transform: uppercase;
}

文本间距

字母间隔letter-spacing和文本间隔 word-spacing属性分别用在字母间和单词间的距离。它们的值可以是长度或者默认的普通normal。
line-height属性为比如段落等元素设置行高，它并不改变字体的尺寸。它的值可以是长度，百分比或者默认的normal。
文本水平对齐text-align属性将对元素里的文本向左、右、中间或者两端对齐，自然，它们的值分别left（左）、 right（右）、center（中间）或者 justify（两端）。
文本缩进text-indent属性依据你设置的长度或者百分比值对文本段落的第一行进行缩进。在印刷中经常会用到这样的格式，然而在像网页这样的电子媒体中并不常用。

Example Source Code [www.52css.com]

p {
letter-spacing: 0.5em;
word-spacing: 2em;
line-height: 1.5em;
text-align: center;
}

边界margin和补白padding（依据国内出版社的翻译惯例，margin被翻译成边界，padding被翻译成补白，译者依照习惯翻译。但译者认为，margin翻译成外边距，padding翻译成内边距更为直白和形象。你可以依据自己的习惯来适应这两种不同的译法。——译者注）是隔开元素最常用的两个属性。边界是元素外边的距离，而补白则是元素内部的距离。

为h2改进代码如下：

Example Source Code [www.52css.com]

h2 {
font-size: 1.5em;
background-color: #ccc;
margin: 1em;
padding: 3em;
}

你可以看到二级标题外围有一个字符的宽度，还很臃肿，因为在二级标题内部有3个字符宽度的补白。

元素的四边可以设置不同的值。margin-top、 margin-right、margin-bottom、 margin-left、padding-top、padding-right、padding-bottom和padding-left是无需解释的属性（看看英文字面意思啦）。

关于盒模型

CSS盒模型（Box Model）问题详解
http://www.52css.com/article.asp?id=286

边框可以应用到在主体元素body中的绝大部分HTML元素中。

创建一个包围着元素的边框，你所需要的是边框样式border-style。它们的值可以是 solid、dotted、dashed、double、groove、ridge、 inset和outset。（你有必要每个值都试一试，看看效果如何——译者注）

边框宽度border-width为边框设置宽度，通常用像素来表示。当然，还可以单独设置四个方向的边框属性，它们是border-top-width、border-right-width、 border-bottom-width和border-left-width。

最后，边框颜色border-color设置颜色。
为下面的CSS文档添加如下代码：

Example Source Code [www.52css.com]

h2 {
border-style: dashed;
border-width: 3px;
border-left-width: 10px;
border-right-width: 10px;
border-color: red;
}

这将会使所有的HTML二级标题（h2）产生红色的破折号（dashed）边框，上下各3像素宽，左右则各10像素宽（取代了3像素宽的全局设置）。

关于盒模型

CSS盒模型（Box Model）问题详解
http://www.52css.com/article.asp?id=286

你应该已经在HTML初级教程的综合中创作了一个HTML文档，而且在CSS初级教程的的开始中增加了一行，用以把HTML文档和CSS文档联系起来。

下面的代码包括了所有我们在初级教程中所学习的方法。只要你把下面的保存起来作为CSS文档，然后在浏览器中查看HTML文档，你就可以理解每一个CSS的属性的表现和怎么应用。最好的方法就是花费时间修改CSS文档和HTML文档上的代码，然后在浏览器中查看到底发生了什么。

Example Source Code [www.52css.com]

body {
font-family: arial, helvetica, sans-serif;
font-size: 80%;
color: black;
background-color: #ffc;
margin: 1em;
padding: 0;
}
/* 顺便说一句，这是注释 */
p {
line-height: 1.5em;
}
h1 {
color: #ffc;
background-color: #900;
font-size: 2em;
margin: 0;
margin-bottom: 0.5em;
padding: 0.25em;
font-style: italic;
text-align: center;
letter-spacing: 0.5em;
border-bottom-style: solid;
border-bottom-width: 0.5em;
border-bottom-color: #c00;
}
h2 {
color: white;
background-color: #090;
font-size: 1.5em;
margin: 0;
padding: 0.1em;
padding-left: 1em;
}
h3 {
color: #999;
font-size: 1.25em;
}
img {
border-style: dashed;
border-width: 2px;
border-color: #ccc;
}
a {
text-decoration: none;
}
strong {
font-style: italic;
text-transform: uppercase;
}
li {
color: #900;
font-style: italic;
}
table {
background-color: #ccc;
}

在CSS初级教程中我们仅仅考虑了HTML选择符──以HTML标签形式出现。
你当然可以用类选择符class和标识选择符id来定义自己的选择符。
这样做的好处是，依赖于class或者id，你可以不同地表现相同的HTML元素。
在CSS中，类选择符在一个半角英文句点（.）之前，而id则在半角英文井号（#）之前。

看起来像这样：

Example Source Code [www.52css.com]

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

HTML与CSS的连接用属性id和class。像这样：

Example Source Code [www.52css.com]

<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”的段落上。

更多关于class和id选择符的知识请浏览：
结构中id与class的使用原则与技巧 http://www.52css.com/article.asp?id=254
CSS selector： class 与 ID 的区别！ http://www.52css.com/article.asp?id=39
id与class区别 - 该用id还是用class呢？！ http://www.52css.com/article.asp?id=149

id与class区别，我在前面的文章中已经讲过了。但还是有新手对此非常迷茫，不知道什么时候该用id，什么时候该用class。这两个选择器让新手左右为难。
　　一、在web标准中是不容许重复ID的，例如 div id="a" 不容许重复2次；而class所定义的是类，理论上可以无限重复。以根据需要多次引用。
　　二、属性的优先级问题：ID 的优先级要高于class，我们在下面的代码中有示例说明。
　　三、方便JS等客户端脚本的引用，如果在页面中要对某个对象进行脚本操作，那么可以给他定义一个ID，否则只能利用遍历页面元素加上指定特定属性来找到它，这是相对浪费时间资源，远远不如一个ID来得简单与快捷。

id与class优先级的试验

Source Code to Run [www.52css.com]

[ 可先修改部分代码再运行查看效果 ]

　　解析：根据一般的CSS优先级的原则。接近的应该是优先的。class="YourHomePage"更接近于定义样式的元素。但此例中，对元素应用的样式是id所定义的样式。说明id的优先级要高于class！ CSS selector：class 和 id 都可以使“单一选择符”有不同的样式

A1：二者主要的区别在哪里呢？
　　id你只能用来定义单一元素，定义二个以后。页面不会出现什么问题，但是W3检测的时候认为你页面不符合标准；class是类，同一个class可以定义多个元素。就页面效果而言，两个东西的视觉效果几乎无差别。

A2：id 选择符为什么要少用，它有有什么局限性？
　　单一使用的样式用id，需要程序、js动态控制的样式用id，id在页面只能使用一次！提供少用id，因为id可能和页面嵌的程序冲突（比如名称相同等）！

A3：我该在什么时候使用ID，什么时候使用class？
　　单一的元素，或需要程序、JS控制的东西，需要用id定义；重复使用的元素、类别，用class定义。

相关文章：同一元素应用多个class的优先级的测试！

在前几日的文章中我提到过XHTML的重要性，在那篇文章中我讲了为什么说XHTML结构重要，重视XHTML结构的好处。但是那篇文章从开发的效率入手，并没有深入细节，而今天的这篇文章是讲XHTML中的细节部分的，可以说是上一篇的续述。这篇续述的主题就是ID与CLASS怎么用，在标题中有提及使用原则与技巧，这里的使用原则与技巧是我的经验总结，并非摘自哪本典籍，所以并不是什么权威论述，请各位网友在看到这篇文章时需要有主见的阅读，不要被我的妖言所迷惑。

　　 ID与CLASS的使用原则
　　据说W3C对于ID与CLASS的设定是ID具有唯一性，CLASS具有普遍性。所以我们这里的使用原则也是依据这一特性建立的。ID是不能重复的，所以在XHTML的结构中，大结构一定是用ID。比如标志、导航、主体内容、版权。这些呢接我自己制定的规范命名为#logo , #nav , #content , #copyright 这些是雷打不动的命名。有人说布局排版用ID，配色背景用CLASS，其实这是不正确的，ID与布局排版没有直接关系，CLASS与配色也不是对等的。有人呢为了麻烦全都用ID或是全都用CLASS，全都用CLASS呢还有可理解，全都用ID就不正常了，这有悖ID唯一性。如果每个ID都不一样，那非累死不可。我通过实践总结的使用原则是：ID需要具有唯一性，并且尽量在外围使用。而CLASS具有可重复性，并且尽量在结构内部使用。这样做的好处是有利于网站代码的后期维护与修改，这样的做法就会让所有的CLASS都成为ID的子级或是孙级。你可以有两个儿子但你能有两个爸爸吗，就是这个道理。在我们写CSS的时候可以写成这样 #father .child {…} 尽量不要让Class包含ID，.father #child {…}如果写成这样显得有点可笑。当然这也不是铁定的，特殊情况需要特殊对待嘛。但是通常情况下这种形式的必要性不大。

　　以上就是ID与CLASS使用原则，归总起来一句话：ID是唯一的并是父级的，CLASS是可以重复的并是子级的。
　　 ID与CLASS的使用技巧

Example Source Code [www.52css.com]

　　1、子级的命名的包含父命名中的部分为开头。这样方便在编写CSS时明确层次关系。
　　2、CLASS中的子级最好不用ID。当然特殊情况特殊对待。
　　3、CLASS的命名最好命名用大小写合用。例 .newMovie 这样的写法与第一条结合起来使用明确关系最合适。要需要注意的是IE以外的浏览器对于大小写是很敏感的。还有就是一定要以字母开头。

　　其实上面讲的都是一些大家都明白的内容，只是我捡了个漏先写下来算是一个总结。希望大家对于ID与CLASS的使用提出自己的新观点新思路。一起总结出最适合也最有效率的规范来。

组合

你不必重复有相同属性的多个选择符，你只要用英文逗号（,）隔开选择符就可以了。
比如，你有如下的代码：

Example Source Code [www.52css.com]

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

则你可以这样写：

Example Source Code [www.52css.com]

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

嵌套

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

Example Source Code [www.52css.com]

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

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

Example Source Code [www.52css.com]

<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很多的建议并没有得到浏览器的支持，但有四个可以安全使用的用在连接上的伪类。

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

Example Source Code [www.52css.com]

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并不支持。这真是一个极大的烦恼，因为在其它浏览器上可以有很多小技巧让你的页面看起来更令人愉快

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

margin、padding和border-width允许你把诸如margin-top-width，margin-right-width，margin-bottom-width等用属性: 上右下左（property: top right bottom left;）组合起来。
所以：

Example Source Code [www.52css.com]

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

可以概括起来：

Example Source Code [www.52css.com]

p {
border: 1px red solid;
}

（这也可应用到border-top，border-right等）
加入只指定两个值（比如margin: 1em 10em;），第一个值是上和下，第二个值是右和左。

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

Example Source Code [www.52css.com]

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

（1.5是行高）
所以，组合起来吧，试试这个：

Example Source Code [www.52css.com]

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;
}

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

应用xhtml+css进行网页布局，有很多属性跟背景图片的操作相关。很多表现因素上的图片，大部分用背景来进行处理。CSS的background的属性可以全部处理它们。

Example Source Code [www.52css.com]

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

这是如下属性的组合：

Example Source Code [www.52css.com]

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

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

注意

Example Source Code [www.52css.com]

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

CSS高级教程意在发挥CSS的极限，然而这些醒目的方法对中级用户的效果并不是马上就显现出来的。
现在，可能显得有些烦琐，我们来学习替换样式表，设置打印样式等等。

处理HTML元素最关键的一个窍门，没有任何特别的，就是理解他们是如何工作的。大部分页面都可以使用一点点的标签组合起来，你可以为每一个你选定的标签样式化。浏览器默认的可视化样式元素由变化的字体样式、边界、补白和，和重要的，显示类型。
最基本的显示类型是内联inline、块block和清除none，他们分别可以用inline、block和none的值赋予display属性来操作。
inline就如本身语义所明示的，显示随着行流动的元素。锚和强调元素都是传统的内联元素。
block使元素前后都有断行。标题和段落元素都是传统的块元素的例子。
none，嗯，不显示这个元素，听起来毫无用处，但于易用性考虑（请看亲和连接），改变样式表，或者高级的翻转效果都有很好的用途。
比如这个站点的默认原始版本，通过操纵一些传统的内联和块元素来适应设计。

Example Source Code [www.52css.com]

h1 {
display: inline;
font-size: 2em;
}
#header p {
display: inline;
font-size: 0.9em;
padding-left: 2em;
}

这使得“htmldog.com”的标题和标签行可以并排，而不是一上一下，维护最优的易用性。

Example Source Code [www.52css.com]

#navigation, #seeAlso, #comments, #standards {
display: none;
}

上述代码使用在打印样式中，用于“关闭”这些元素，比如，对于一个单一的页面导航通常是不必须的。

注意

Example Source Code [www.52css.com]

display: none和visibility: hidden不同之处在于display: none使元素完全是个死球，然而visibility: hidden虽不出现在内容中但保留着这个元素的流位置。比如，如果三段中的第二端设为display: none，第一段会直接到达第三段，而设为visibility: hidden的话，这个段落会有一个间隔。

表格

也许理解表格相关的显示属性值的最好方法是关心HTML表格。table是初始化的显示，你可以用tr和td分别摹拟table-row和table-cell值。
display属性走得更远，提供table-column、table-row-group、table-column-group、table-header-group、table-footer-group和table-caption的值，都是自描述的。这些值显而易见的好处是，你可以用列来构造表格，代替有偏见的row。
最后，inline-table设置前后不断行的表格。

注意

对CSS表格失去控制的话，可能严重的损害你网页的亲和力（易用性）。HTML应该用来传达内容的，所以你有表格式数据的话，你应该用HTML表格来安排它们。使用CSS表格仅仅能给数据调调味，如果没有CSS的话完全不可读。十分不好。别走Michael Jackson的路。

其他显示类型

list-item也是自描述的，一般以列表的形式显示，使用在除li的HTML元素上。为了显示正确，使用这个显示类型的应该嵌套在ul或者ol元素内。
run-in使元素内联或块显示，取决于其父元素的的显示属性。在IE和基于Mozilla的浏览器中都不能工作。
campact也使元素内联或者块显示，同样取决于上下文。它也不能很好工作。
marker仅仅是与:before和:after伪元素一起来定义content属性的值。content属性的自动值已经是marker，所以这只对覆盖掉前面的content的显示属性有用。

用CSS 来布局很容易。如果你已经习惯用表格布局的话，起先会感觉比较困难。其实不难，只不过动机不同，并且在实践中更有意义。
你可以把这一页面的各个部分当作独立的版块来看待，无论你选择哪一块。你可以绝对或相对地用彼块取代此块。

定位

定位属性position用于定义一个元素是否absolute（绝对），relative（相对），static（静态），或者fixed（固定）。
static值是元素的默认值，它会按照普通顺序生成，就如它们在HTML的出现一般。
relative很像static，但可用top、right、bottom和left属性来偏移原始位置。
absolute使元素从HTML普通流中分离出来，并把它送到一个完全属于自己的定位世界。在这个稍微疯狂的世界，这个绝对的元素可以放置到任何地方，只要设置了top、right、bottom和left的值。
fixed的行为也很像absolute，但参考于浏览器窗口相对于页面而放置绝对的元素，所以，理论上，当页面滚动的时候，固定元素完全保持在浏览器视区中。为什么说理论上的？不为别的，在Mozilla和Opera中工作得很好，但IE不会。

用绝对定位布局

你可以用绝对定位来创建一个传统两列布局，只要在HTML中使用如下面的类似规则：

Example Source Code [www.52css.com]

<div id="navigation">
<ul>
<li><a href="this.html">This</a></li>
<li><a href="that.html">That</a></li>
<li><a href="theOther.html">The Other</a></li>
</ul>
</div>
<div id="content">
<h1>Ra ra banjo banjo</h1>
<p>Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.</p>
<p>(Ra ra banjo banjo)</p>
</div>

并且应用如下的CSS：

Example Source Code [www.52css.com]

#navigation {
position: absolute; top: 0; left: 0; width: 10em;
}
#content {
margin-left: 10em;
}

你将看到，长度为10em的导航条被设置在左边。因为导航是绝对定位的，对页面的其他部分的流动不会有任何影响，所以所需要做的只是把内容区域的左边界宽度设置为与导航条宽度一样就可以了。
实在是太容易了！然而你并不受这个两列方法的限制。用精明的定位，你可以布置你所如你所需的更多的块。比如，你需要增加第三列，你可以为HTML增加“navigation2”块并且应用如下CSS：

Example Source Code [www.52css.com]

#navigation {
position: absolute; top: 0; left: 0; width: 10em;
}
#navigation2 {
position: absolute; top: 0; right: 0; width: 10em;
}
#content {
margin: 0 10em; /* setting top and bottom margin to 0 and right and left margin to 10em */
}

绝对定位元素的唯一副作用是，因为它们生活自己的世界里，没有办法精确决定它们在哪儿结束。如果你使用上面的例子在一个少导航和多内容区域，没有什么问题，但是，特别是使用长度和宽度的相对值时，你经常得放弃在下面放置任何事物如脚注的希望。如果你真的要做，与其绝对定位它们，不如浮动它们。

浮动

浮动将移动一个元素到同一线上的左边或者右边，而周围也会有内容浮动。
浮动经常用在定位一个页面内的小型的元素（在本站的原始默认CSS中HTML初级指南和CSS初级指南的“下一页”连接就是浮动到右边的。同样参阅伪元素中的:first-letter例子），但同样可以用在更大的块中，比如导航列。
拿下面的HTML例子，你可以应用随后的CSS：

Example Source Code [www.52css.com]

#navigation {
float: left; width: 10em;
}
#navigation2 {
float: right;
width: 10em;
}
#content {
margin: 0 10em;
}

如果你不希望下一个元素环绕浮动对象，你可以使用clear（清除）属性。clear: left将清除左边元素，clear: right将清除右边元素，而clear: both会清除左边和右边。所以，举个例子，你需要一个页面脚注，你可以用id“footer”为HTML增加一个块，然后使用如下的CSS:

Example Source Code [www.52css.com]

#footer {
clear: both;
}

嗯，你已经搞定了。一个脚注会出现在所有列的下边，不管任何一个列有多长。

注意
我们已经大体上介绍了地位和浮动，着重强调了页面的“大”块，但请记住，这些方法也可以用在这些块内的任何元素。综合定位、浮动、边界、补白和边框，你可以再现任何的版式设计，在布局方面，没有CSS完成不了表格所能完成的的事情。
使用表格布局的唯一理由是你试图适应古老的浏览器。这也是CSS实际上显示其先进的地方──在文件大小上，高易用性的页面只相当基于表格的页面的一小部分。

at（@）规则把CSS规则都注入了一个压缩胶囊中，并且应用到指定的某些事物中。喔。

导入

导入import at规则将吞入另外的样式表。比如，如果你需要把另外的样式表的样式添加到现有的，你可以这样做：
@import url(addonstyles.css);
这经常用来取代连接CSS到HTML中的<link>标签，本质上就是一个内部样式表的形式，看起来像这样：

Example Source Code [www.52css.com]

这样做的好处是，一些老浏览器如Netscape 4.x不接受at规则，进而不连接样式表，从而，如果你有良好结构的标记，只剩下朴素功能的HTML（尽管没有样式）。

媒体类型

媒体media at规则将把内容应用到指定的媒体，比如打印。比如

Example Source Code [www.52css.com]

@media print {
body { font-size: 10pt; font-family: times new roman, times, serif; }
#navigation { display: none; }
}

媒体类型可以是：
all──每一个太阳下、上、周围、里面的所有媒体类型。
aural──语音合成器。
handheld──手持设备。
print──打印机。
projection──投影仪。
screen──电脑屏幕。
还可以使用braille（布莱叶点字）、embossed（压印）、tty（终端）和tv（电视）。

字符集

字符集charset at规则设置一个外部样式的字符编码，它应该出现在样式的顶端，大致如此：@charset "ISO-8859-1";

字体外观

字体外观font-face at规则用来详细描述一个能嵌入CSS的外部字体。
它必须一个font-family的字体可以参考的描述符，值可以是系统已经存在的字体名称（这种情况发生时会覆盖掉该字体），也可以是全新的名字。为了嵌入一个字体，需用使用src描述符。字体外观at规则的其他描述符是使用该字体的一些条件，比如，在at规则里面增加一条font-weight: bold样式，如果font-weight属性也设置了bold，font-family的src将应用该规则到带有font-family属性的选择符。
使用字体外形at规则看起来像这样：

Example Source Code [www.52css.com]

@font-face {
font-family: somerandomfontname; src: url(somefont.eot);
font-weight: bold;
}
p {
font-family: somerandomfontname;
font-weight: bold;
}

这将使somefont.eot这个字体应用到段落里（如果p选择符没有设置成font-weight: bold的话就不会）。

注意

现在内嵌字体的支持度还算凑合。基于Mozilla的浏览器不支持，并且也没有最近的计划显示它会支持。仅Internet Explorer似有一定程度上的支持，但也没有直接得方法。为了在IE中嵌入字体，你需要使用微软的WEFT软件，它会把一个TrueType字体转换成一个压缩的OpenType字体（这也值嗯嗯在指定的URI上使用）。因为有限的（也相当复杂）的兼容性，最好不要使用没有适合的可替换系统字体的内嵌字体。

页面

页面page at规则用于页式（分页）媒体，是一个把样式应用到打印媒体的先进方法。它定义页面块的盒状模型（见边界和补白）扩展因此你可以定义一个独立页面的尺寸和表现。
应用page at规则有许多约定，比如没有补白和边界，我们也没有谈论电脑屏幕──点（pixel）和em作为单位是不可以的。
可以使用很多指定属性，比如尺寸size，可以设置为portrait（竖排格式）、landscape（横排格式）、auto（自动）或者一个高度。marks属性也可以用来定义裁剪标志。

Example Source Code [www.52css.com]

@page {
size: 15cm 20cm;
margin: 3cm;
marks: cross;
}

页式媒体的伪类

有三个伪类被用来指定与page at规则相结合，用如此形式：@page :pseudo-class { stuff }。
:first应用到页式媒体的第一页。
:left和:right分别用于左边和右边的页面。这可以用来指定左边或者右边页面一个更大的边界。
还有其他更多的小方面指定页面at规则，比如页面分隔符和命名页面，但鉴于这个at规则很难在任何浏览器上工作，你可能在浪费时间在阅读这些东西上面。虽然还有更妙的主意……

Example Source Code [www.52css.com]

Example Source Code [www.52css.com]

@media print {
body { font-size: 10pt; font-family: times new roman, times, serif; }
#navigation { display: none; }
}

Example Source Code [www.52css.com]

@font-face {
font-family: somerandomfontname; src: url(somefont.eot);
font-weight: bold;
}
p {
font-family: somerandomfontname;
font-weight: bold;
}

Example Source Code [www.52css.com]

@page {
size: 15cm 20cm;
margin: 3cm;
marks: cross;
}

伪元素（pseudo elements）跟伪类一样吮吸选择符，使用selector:pseudoelement { property: value; }的形式。有四个吮吸器。

首字和首行

首字first-letter 伪元素应用到元素的第一个字，而首行first-line则是元素的顶行。你可以，比如，创建一个首行粗体和首字下沉的段落，像这样：

Example Source Code [www.52css.com]

p:first-letter {
font-size: 3em; float: left;
}
p:first-line {
font-weight: bold;
}

前和后

前before和后after伪元素与内容content属性用于元素的两边，在不更改HTML的情况下改变内容的两边事物。
内容属性的值可以open-quote（开引号）、close-quote（闭括号）、no-open-quote（无开括号）、no-close-quote（无闭括号），任何附上引号的字符串或者图片，使用url(imagename)。

Example Source Code [www.52css.com]

blockquote:before {
content: open-quote;
}
blockquote:after {
content: close-quote;
}
li:before {
content: "POW: "
}
p:before {
content: url(images/jam.jpg)
}

注意

听起来不错吧，dunnit？嗯，有太多太多的东西（唉，一声叹息），大多数用户不能够看到前后的效果，因为IE被它们所困扰。懒洋洋……