1. 样式表可以放在几种不同的地方：
Ø 外部：样式表放在一个文字档案中，独立于网页文件；
Ø 内部：样式表放在网页原始码的<head>区段，也称为内嵌样式表；
Ø 行内：使用样式属性，将样式表定义在<html>标签内需要制订格式的地方。
2. 外部样式表：
样式表可以用文字档或者JavaScript文件的形式，放在网站上，由页面进行连接。
<head>
<link rel=”Stylesheet” type=”text/css” href=”example.css”>
</head>
注意<link>与<a>的区别，<link>必须放在<head>区段中指定，且必须有rel ,type,href三个属性。rel属性指定文件的类型，type标示出连接文件的形式，href指向文件的位置。
@import规则：可以让页面于<style>元素标签中汇入一个CSS文件，而不用在<head>区段中使用<link>元素。
<style type=”text/css”>
@import url(example.css)
</style>
3. 内部样式表：
如果样式表中只有少数几行代码，那就应该直接用<style>元素，放在页面的<head>区段中。虽然<style>元素也可以放在<body>区段中，但是放在<head>区段中是一个比较好的做法。
<head>
<style type=”text/css”>
p {
color:red;
font-size:3;
font-family:Verdana;
}
h1{
color:blue;
}
</style>
</head>
4. 行内样式表：
可以在元素标签内部，设定元素的样式属性，定义只使用一次的样式规则。
<p style=”font-family:Verdana;font-size:3;color:red;”>……</p>
上例中有一个规则，为<p>元素设定了三种样式属性。
5. 样式表摘要：
有四种方式可以在HTML文件中使用样式表：
(1) 在<head>区段中使用<link>元素；
(2) 在<head>区段中的<style>元素标签中使用@import规则；
(3) 在文件的<head>区段中插入<style>元素标签；
(4) 在HTML标签内插入样式属性。
6. 声明：属性加上对应的数值，连接起来，就是声明。在定义一个样式规则时，多个声明之间要用分号隔开。
7. 选择器：
可以让您将规则应用到元素上，无论这些元素出现在页面上的何处。选择器分为简单选择器和关联选择器。如
element1 {
样式规则;
}
简单选择器为单一元素类型定义样式规则，如<h1>,<b>,<p>。规则会应用到所有的这些类型中。
element1 element2 {
样式规则;
}
关联选择器可以让您对多个元素类型定义相同的样式规则。
h1 em ul{color:red;}
等价于
h1{color:red;}
em{color:red;}
ul{color:red;}
8. 使用类属性作为选择器：
另外还有一种方法，可以让不使用相同标签的多个元素应用同一个选择器。可以用类选择器定义一个规则，然后使用类属性，让所有元素使用。所定义的每个类都必须有不同的名称。
在样式表中，类的名称前面要加一个句点（.），这样浏览器才知道是一个类。
.wide{color:red;}
下面的<p>元素标签使用了wide这个类：
<p class=”wide”>内容</p>
也可以为拥有类属性、使用相同设定数值的元素，定义不同的样式。如：
.colorred{color:red;}
p.colorred{color:blue;}
在上面的例子中，所有使用此类属性的<p>标签会使用blue，而使用这个类的其他元素都会是红色。所有不包含此类属性的<p>元素，不会受这两个类声明的影响。
特别说明：每个选择器只能用于一个类。
9. 使用id属性作为选择器：
指定样式表到一个特定元素时，在元素的id属性前加一个#符号。
h1{color:blue;}
#special{color:red;}
所有<h1>元素内的文字都是blue，但只有id属性为special的<h1>元素例外，其内文字是red。
10. 使用选择器的摘要：
(1) 简单选择器让您将一份样式规则应用至一个特定标签。所有使用此标签的元素，都会使用相同的样式规则。
(2) 关联选择器让您将一份样式规则应用到使用不同标签的多个元素中。所有使用这些标签的元素，都会使用相同的样式规则。
(3) 使用类选择器，您可以将一份样式规则应用到页面上的各种元素。这时候，样式的名称必须以一个句点开头。
(4) 类选择器也可以指定元素类型。您可以将一个类选择器用于特定的元素类型，让这些样式规则只有在引用此类的特定元素类型中生效。这时候，类名前必须加上元素的名称，然后才是句点。
(5) id属性可以让您将一个样式规则应用到某个元素类型，样式名称必须以#符号开头。
11. CSS2的属性选择器：
CSS2规范中，加入了与HTML规范不对应的选择器。这些选择器包括了伪类与伪元素。伪元素用于指定元素内的细节，而伪类允许样式表在元素的不同状态中营造差异。
12. 锚伪类：
可以让您将样式规则依据其目前的状况应用到<a>元素：link、visited、hover或者active。您可以用伪类定义锚元素的样式。
a:link{color:red}//未访问的链接
a:visited{color:blue}//访问过的链接
a:active{color:lime}//单击但是未放开鼠标键的链接
a:hover{color:aque}//鼠标指针放在上面的链接
目前为止，伪类只能用于<a>元素。所以选择器可以省略元素类型。伪类也可以用于关联选择器中。
a:link img{border:solid blue}
13. 印刷伪元素：使用伪元素，可以对<p>元素的首行或首字指定印刷效果。
14. 首行伪元素：用于对所有<p>元素的第一行应用特殊样式。
<style type=”text/css”>
p:first-line{
font-variant:small-caps;
color:blue;
}
</style>
上述例子中，段落的第一行会以blue与小写字母呈现。
15. 首字伪元素：用于对所有<p>元素的第一个字应用特殊样式。
<style type=”text/css”>
P{
font-size: 12pt ;
line-height: 12pt ;
}
p:first-letter{
font-size: 24pt ;
float:left;
}
</style>
上述例子中，段落的第一个字会以 24pt 显示，加上float是为第一个字腾出空间，而其它会以 12pt 显示。
16. 选择器中的伪元素：
关联选择器可以与伪元素相结合，可以将伪元素接在选择器后面。
body p:first-letter{color:red}
上例表示<body>与<p>元素会共用相同的伪元素属性，表示<body>与<p>元素的首字都会显示为蓝色。
伪元素也可以以相同的方式和类结合，语法是“元素名称.类名称:伪元素名称”。
p.initial:first-letter{color:red}
<p class=”initial”>First paragraph</p>
17. !important属性
!important属性会让样式规则声明增加优先权，它会让样式规则提升等级，比其它的样式规则具有更高的优先权，以影响相同的元素。
h1{
color:red !important;
background:white !important;
}
p{
font-size: 12pt !important;
font-style:italic;
}
18. 优先权：
在预设状况中，一个元素会同时套用各种样式，不同的样式可能会有冲突的内容。优先权定义了样式套用到页面上元素时的顺序。
(1) <body>元素样式规则。如果没有指定，则会套用预设规则；
(2) 透过简单与关联选择器定义的样式；
(3) 类别规则；
(4) !important样式；
(5) 透过使用ID选择器定义的样式；
(6) 行内套用样式属性的样式。
这个优先顺序，表示顺序越高的样式，会盖过顺序低的冲突规则。
<style type=”text/css”>
#myId{color:blue}
</style>
<p id=”myId” style=”color:red”>内容</p>
上例中<p>元素的“内容”为红色，而不是蓝色，因为行内样式盖过了ID选择器所定义的样式。
19. 样式属性：
CSS属性可以通过利用JavaScript属性，在JavaScript程序中引用。CSS语法并没有大小写差异，但是JavaScript语法则有区别。在CSS中的border属性中，可以用Border或者BORDER，甚至任何大小写字母的组合。但是在JavaScript当中，只有一种正确的写法：border。
20. 元素在页面上的定位：
在CSSP出现前，元素只能在页面上通过表格来定位，所以有时候不稳定，并且复杂，同时过于依赖目标浏览器技术。
区块元素在页面上是独立的，而且各自在起始与结束标签中都包含了一个换行符号，如<p>、<div>、<ol>、<table>。相对地，行内元素在起始与结束标签之间就不包含换行符号，如<strong>、<b>或者<u>。每个行内元素都属于区块元素的一部分。
21. 坐标定位：
每一个矩形容器，都是用笛卡尔坐标来定位的，也就是说以容器左上角与页面左上角的相对相对坐标来定位，页面左上角的坐标为(0,0);
22. Z索引（z-index）：
Z索引属性，决定多层元素在第三维度的位置。Z索引的数值是一个整数，决定元素在页面上从前到后的顺序。Z索引较高的元素，会放在Z索引较低的元素前面。
23. 继承：
子元素从其父元素获得一些属性，叫继承。不过并非所有内容都可以继承。
“显示性”和“拖拽性”是子元素从父元素继承时的范例。
子元素可以从父元素继承z-index属性。
当使用相对定位时（默认），定位属性也会在继承时受到影响。子元素相对父元素来说是使用相对定位，而不是使用页面的坐标。
24. 根据W 3C 建议定位元素：
如果元素是可以定位的，CSS2建议在其样式规则中加入定位属性，无论是否用到。
<p style=”position:absolute;”>text</p>
25. 定位值：
使用CSS层可以在页面上以三种方式定位：静态、绝对及相对。
Ø 静态：对于一个元素，静态是默认的定位方式，但是这也会让元素无法使用脚本重新定位。甚至静态定位会强迫元素使用HTML本身的定位方式，而这样的定位并不是很准确。如果不想让元素以HTML原本的顺序呈现，或者您想要在页面上加入动态的维度，那就必须使用绝对定位或者相对定位。
Ø 绝对：绝对定位不仅可以用脚本控制，而且可以精确控制元素在页面上的位置。元素往后可以通过脚本重新定位，不会影响到同一页面上的其他元素。绝对定位是使用元素与父元素之间的相对位置，而非元素与整体页面之间的相对位置，除非父元素就是文档本身。不要被“绝对”这个词混淆了。
在Netscape浏览器中，只有<div>元素与其他内含<div>的元素可以使用绝对定位。
<div style=”position:absolute;left:100;top: 50” >
<img src=”someImage.gif”/>
</div>
而Internet Explorer允许将绝对定位应用在其它元素上。上例可以写成：
<img src=”someImage.gif” style=”position:absolute;left:100;top: 50” />
因此，如果要设计一个页面让两种浏览器都适用的话，最好的方法是将需要使用绝对定位的元素，放在<div>元素之中。
Ø 相对：相对定位可以让HTML根据其原本的顺序，在页面上将元素定位。看起来，相对定位与静态定位很相似，但两者之间的差别在于相对定位可以通过脚本控制，而静态定位则不行。
相对定位与Netscape和Internet Explorer都兼容，但是只能用于<span>或者<div>标签。相对定位允许通过脚本，改变元素在页面上的位置。当一个元素在页面上移动时，其他的元素必须挪出空间来给元素新的位置使用。
<div style=”position:relative;left=100;top=100;”>
这个<div>元素位置在（100，100），但是通过脚本可以变更其left与top的内容。
总结：静态定位与相对定位依据HTML的定位规则，而绝对定位则是依据DHTML的规则。可以将一个绝对定位的元素在页面上移动，而不影响页面上的其他元素。移动相对定位的元素，会推动其他页面上的元素以便腾出空间。至于静态定位元素，完全无法移动。
26. 其他定位属性：
除position属性外，大部分可用于style属性中的定位属性如下：
Ø left与top：指定元素与父元素左方和上方边缘之间的空间大小，其数值通常用像素表示，也可以用其他度量单位。无法继承。
Ø width与heigth：代表元素的宽度与高度。不包括padding、bordert和margin。无法继承。
Ø z-index：表示层在页面上堆叠的顺序。数值是以整数表示，可以用正数或负数。
Ø visibility：决定层是否显示出来。此属性可以用脚本随时设定或修改。如果值为visible，这个层与其内容就会显示出来；要是值为hidden，那么层与其内容就不会显示；如果值为inherit，层与其内容会继承父层的visibility属性值，这个属性可以继承。
27. 属性中使用的度量单位：
px：像素，最常用，根据显示器屏幕分辨率而定。
em：这个单位是依据元素字型的高度，只能用于文字内容。
ex：这个单们依据元素字型的字母x的高度，只能用于文字内容。
in： 英寸。
cm：厘米。
mm：毫米。
pt：级。一级是1/72英寸。
pc：Pica的高度，一个Pica等于12级。
900
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
