层叠样式表(CSS) 在设计中的使用
层叠样式表(CSS)
1)CSS概念
优秀的杂志不仅仅是具备一套完整的结构内容、巧妙出奇的页面布局，还需要一个统一的风格，好的风格代表了一种高级的品味。优秀的网页制作也不再是漂亮的图形、优美的布局和完整的结构就能满足了，使网站整体保持一致的风格，例如字体字形的显示，页面边距等等，也是使网站作品有美感有品味的关键一步。层叠样式表就是设置整体风格这一任务的最好方法。
CSS的作用：
①就是针对页面中的对象的风格和样式进行定义；
②使得HTML各个标记的属性更具有一般性和通用性。然而建立样式单的意义在于把对象真正引入了HTML，使得可以使用脚本调用对象属性，并且可以改变对象属性，达到动态的目的。
③简化了HTML中各种繁琐的标记，使得各个标记的属性更具有一般性和通用性。
例如：
HTML方法：
<p><font color=read>这是显示红色字</font></p>
css方法：
<p sytle="color:red">这是显示红色字</p>
2)样式表语法
样式表基本语法：
HTML标记 { 属性:值；属性:值；…… }
放置样式表有内联式、嵌入式和外联式三种不同的方法。
⑴嵌入式:
把样式表信息包括在<style>和</style>标记中，并嵌入到<HEAD>和</HEAD>之中。
例如：将页面中所有H1标题字显示为蓝色：
<HTML>
<HEAD>
<TITLE>This is a CSS samples</TITLE>
<STYLE TYPE="text/css">
<!--
H1{ color:blue }
-->
</STYLE>
</HEAD>
<BODY>
... 页面内容…
</BODY>
</HTML>
注意:<STYLE>标记中包括了TYPE＝ "text/css"，这是让浏览器知道你是使用 CSS1 样式规则。加入<!--和-->这一对注释标记是防止有些老式的浏览器不认识样式表规则，可以把该段代码忽略不计。
在使用样式表过程中，经常会有几个标志用到同一个属性，比如我们规定 HTML 页面中凡是粗体字、斜体字、H1号标题字显示为红色，我们可以写成：
B,I,H1{color:red}
此外，同一个HTML标志，可能定义到多种属性，例如，我们规定把从H1到H6各级标题定义为红色黑体字，带下划线，则应写为：
H1,H2,H3,H4,H5,H6{color:red;text-decoration:underline;font-family:"黑体"}
⑵内联式:
将样式直接插入某一个标志，规定其风格样式。
例如：
<p style="font-size:10pt;color:blue">
⑶外部式:
编制一个网站的分类页面，其风格往往是相同的或说是类似的，每次都在<HEAD>和</HEAD>中插入相同的繁琐复杂的样式表规则，显然不是我们的愿望。
写一个样式表，以期实现于各风格相同的不同页面，这一点即可借助于引入外部样式表来实现。并且当外部样式表被更改时，各引用该样式表的HTML页面风格也随之发生变化，而不需要手工一个个去更改。
外部样式表是指建立一个完全独立的文本文件，其扩展名为 .css ，文件内容则输入样式表信息，除去任何相关的 HTML 语言。
例如:在外部样式表文件(lx.css)中输入：
body {line-height:130pt}
H1,H2,H3,H4,H5,H6{color:red;text-decoration:underline;font-family:"黑体"}
b{font-style:italic;color:#FF3333;text-decoration:underline
}
引用外部样式表。
<link rel=stylesheet href="lx.css">
注：link标记应将嵌入到<HEAD>和</HEAD>之中；href中应包含路径信息，这里所指是该样式表文件与HTML文档在同一目录下。
3)选择符
Selector{属性:值;属性:值;...}
其中selector分为三类：标记选择符、类选择符和id选择符。上面所介绍的样式表规则中使用的都是标记选择符。
有时候会有同一个HTML标记需要呈现不同的风格；有若干个不同的HTML标记采用相同的样式规则；此时可以用类选择符。
⑴类选择符:
[标记].类名{属性:值;属性:值;……}
引用方法是：
<标记 class="类名">
例如:让某一些段落缩进0.5in，另一些段落缩进1.0in。
<html>
<head>
<title>This is a sample< /title>
<style type="text/css">
<!--
p.first { text-indent:0.5in}
p.second { text-indent:1.0in}
-->
</style>
</head>
<body bgcolor="#FFFFFF">
……
<p class="first">这个段落将缩进0.5in</p>
<p class="second">这个段落将比上面缩进一倍距离</p>
……
</body>
</html>
⑵直接定义CLASS：
作用：应用于HTML页面中的各个标记。
例如：
<style type="text/css">
<!--
.note { font-size:10pt;color:blue}
-->
</style>
引用方法是：
<HTML任意标记 class="类名">
例如：
<p class="note">……</p>
<h4 class="note">……</h4>
注意：这种省略HTML标记的类选择符是我们以后最常用的CSS方法，使用这种方法，我们可以很方便的在任意元素上套用预先定义好的类样式。
我们可以在同一HTML文档中多次引用这个类，引用该类的地方都将呈现同一种风格。
⑶id选择符
创建CLASS并不是建立多种风格的唯一手段， id也可以用来实现同一规则被应用到页面中不同的地方。
它的语法是：
#id名{属性:值；属性:值；……属性:值}
例如：
<style type="text/css">
<!--
#001{font-size:10pt;color:red}
#002{font-size:12pt;color:blue}
-->
</style>
引用的方法：
<HTML标记 id＝"id名">
注：定义ID选择符的属性也有两种方法。下面这个例子，ID属性将匹配所有id="intro"的元素：
#intro {font-size:110%;font-weight:bold;color:#0000ff;background-color:transparent} （字体尺寸为默认尺寸的110%；粗体；蓝色；背景颜色透明）
下面这个例子，ID属性只匹配id="intro"的段落(p)元素：
p#intro{font-size:110%;font-weight:bold;color:#0000ff;background-color:transparent}
注意：ID选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。
⑷标记选择符
标记选择符就是由HTML标记作为选择符，其使用方法见上面２样式表的介绍。
4)样式表的层叠性
层叠性就是继承性，样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。事实上，所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把很多层嵌套的样式叠加在一起，除非另外更改。例如在DIV标记中嵌套P标记：
div { color:red;font-size:9pt}
……
<div>
<p>这个段落的文字为红色9号字</p>
</div>
（P元素里的内容会继承DIV定义的属性）
注意：有些情况下内部选择符不继承周围选择符的值，但理论上这些都是特殊的。例如，上边界属性值是不会继承的，直觉上，一个段落不会同文档BODY一样的上边界值。
另外，当样式表继承遇到冲突时，总是以最后定义的样式为准。如果上例中定义了P的颜色：
div {color:red;font-size:9pt}
p {color:blue}
……
<div>
<p>这个段落的文字为蓝色9号字</p>
</div>
我们可以看到段落里的文字大小为9号字是继承div属性的，而color属性则依照最后定义的。
不同的选择符定义相同的元素时，要考虑到不同的选择符之间的优先级。ID选择符，类选择符和HTML标记选择符，因为ID选择符是最后加上元素上的，所以优先级最高，其次是类选择符。如果想超越这三者之间的关系，可以用!important提升样式表的优先权。
例如：
p {color:#FF0000!important}
.blue {color:#0000FF}
#id1 {color:#FFFF00}
我们同时对页面中的一个段落加上这三种样式，它最后会依照被!important申明的HTML标记选择符样式为红色文字。如果去掉!important，则依照优先权最高的ID选择符为黄色文字。
5)锚的伪类
我们最常用的是4种a（锚）元素的伪类，它表示动态链接在4种不同的状态：link、visited、active、hover（未访问的链接、已访问的链接、激活链接和鼠标停留在链接上）。我们把它们分别定义不同的效果：
a:link {color:#FF0000;text-decoration:none} /*未访问的链接 */
a:visited {color:#00FF00;text-decoration:none} /*已访问的链接 */
a:hover {color:#FF00FF;text-decoration:underline} /* 鼠标在链接上 */
a:active {color:#0000FF;text-decoration:underline} /* 激活链接 */
（上面这个例子中，这个链接未访问时的颜色是红色并无下划线，访问后是绿色并无下划线，激活链接时为蓝色并有下划线，鼠标在链接上时为紫色并有下划线）
注意：有时这个链接访问前鼠标指向链接时有效果，而链接访问后鼠标再次指向链接时却无效果了。这是因为你把a:hover放在了a:visited的前面，这样的话由于后面的优先级高，当访问链接后就忽略了a:hover的效果。所以根据叠层顺序，我们在定义这些链接样式时，一定要按照a:link， a:visited， a:hover， a:actived的顺序书写。
6)多重样式表的叠加
如果在同一个选择器上使用几个不同的样式表时，属性值将会叠加几个样式表，遇到冲突的地方会以最后定义的为准。例如，我们首先链入一个外部样式表，其中定义了h3选择符的color 、text-align和font-size属性：
h3 {color:red;text-align:left;font-size:8pt}
（标题3的文字颜色为红色；向左对齐；文字尺寸为8号字）
然后在内部样式表里也定义了h3选择符的text-align和font-size属性：
h3{text-align:right;font-size:20pt}
（标题3文字向右对齐；尺寸为20号字）
那么这个页面叠加后的样式就是：
color:red;text-align:right;font-size:20pt
（文字颜色为红色；向右对齐；尺寸为20号字）
字体颜色从外部样式表里保留下来，而对齐方式和字体尺寸都有定义时，按照后定义的优先而依照内部样式表。
注意：依照后定义的优先，所以优先级最高的是内嵌样式，链入的外部样式表和内部样式表之间是最后定义的优先级高。
