css层叠样式表-css规则
css 层叠样式表
引入层叠样式表的方法包括：
1，外联式样式表
2，内嵌样式表
3，元素内定
4，导入样式表
外联式样式表
例：<head>
<link rel="stylesheet" href="/css/default.css">
</head>
<body>
....
</body>
</html>
属性：rel 用来说明<link>元素在这里要完成的任务是连接一个独立的css文件。而href属性给出了所要连接css文件的url地址
内嵌式样式表：
例：<html>
<head>
<style type="text/css">
<!--
td{font:9pt;color:red}
.font105{font:10.5pt;color:blue}
-->
</style>
</head>
<body>....</body>
</html>
元素内定
格式：<p style="font-size:10.5pt">
导入式样式表
〈html>
<head>
<style type="text/css">
<!--
@import url(css/home.css);
-->
</style>
<body>
....
</body>
</html>
css的优先级
越接近目标的样式定义优先级越高，高优先级样式将继承低优先级样式的未重叠定义但覆盖重叠的定义
如果4种样式表对同一元素定义了不同的样式，那么他们的优先级顺序从高到低是，元素内定，内嵌样式表，导入样式表，外联样式表。
css结构
例：td{font-size:10.5pt;color:#666666}
css样式包含两个基础部分，
选择符<td>和声明{font-size:10.5pt;color:#666666}
声明也有两部分组成：
属性font-size,color和值10.5pt,#666666
选择符分为6种
1元素选择符
当页面上多个元素的样式相同时，可以将多个元素放在一起定义，中间以逗号分开 例：td,p,li,input,select{font-size:12px;}
2class(类)选择符
例：〈head>
<title>.....</title>
<style type="text/css">
<!--
.red{font-size:10.5pt;color:#ff0000}
-->
</style>
</head>
<body bgcolor="#ffffff">
<p class="red">士大夫井冈山地方官</p>
<p>九连环离开计划</p>
</body>
还有一种方法就是限定可以应用它的页面元素
例：〈head>
<title>.....</title>
<style type="text/css">
<!--
h1.red{color:#ff0000}
-->
</style>
</head>
<body bgcolor="#ffffff">
<p class="red">士大夫井冈山地方官</p>
<h1 class="red">九连环离开计划</h1>
</body>
3 id选择符
与class选择附类似，只是把'.'换成'#'
例：<body>
<head>
<style type="text/css">
<!--
#select{font-size:18px;color:#0000ff}
-->
</style>
</head>
<body>
<table width="250" border="1" height="50">
<tr>
<td align="center" id="select">id选择符</td>
</tr>
</table>
</body>
</html>
我们看到在调用ID选择附时与CLASS选择附类似，只是将class=""换成了id=""，方便页面脚本语言的调用
4 关联选择符
<body>
<head>
<style type="text/css">
<!--
td p{font-size:18px;color:#0000ff}
-->
</style>
</head>
<body>
<table width="250" border="1" height="50">
<tr>
<td align="center"><p>关联选择符</p></td>
</tr>
</table>
<p>关联选择符</p>
</body>
</html>
我们设定了在元素中<td>的元素<p>所包含文字的样式，只有在两个条件都满足是，样式在会起作用，
5伪类选择符
是只能用在css选择符里，而不能用在html代码中的选择符
例：
〈html>
<head>
<style type="text/css">
<!--
a:link{color:#000000}
a:visited{color:#cccccc}
a:hover{color:#ff0000}
a:active{color:#ooooff}
-->
</style>
</head>
<body>
<p><a href="#">关联选择符</a><p>
<p><a href="#">关联选择符</a><p>
<p><a href="#">关联选择符</a><p>
<p><a href="#">关联选择符</a><p>
〈/body>
</html>
正确的顺序是a:link\a:visited\a:hover否则会引起页面上连接颜色混乱
6伪元素选择符
与伪类选择符定义类似，目前被大多数浏览器支持的有两个：首行伪元素（first-line）和首字符伪元素(first-letter)是用来实现首行大写和首行下沉效果的
例：首行
<html>
<head>
<style>
<!--
p:first-line{color:red;font-size:20pt}
-->
</style>
</hesd>
<body>
<p>dfgsadfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdf...</p>
</body>
</html>
长度随浏览器窗口大小而改变
首字
<html>
<head>
<style>
<!--
p:first-letter{color:red;font-size:50pt;float:left;}
-->
</style>
</hesd>
<body>
<p>dfgsadfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdf...</p>
</body>
</html>
以上两种都只能应用于块状元素上
css规则
一继承
例：<html>
<head>
<style type="text/css">
<!--
td{font-size:12pt}
p{color:red}
-->
</style>
</hesd>
<body>
<table width="300" border="1" height="150">
<tr>
<td align="center">
<p>css规则</p>
</td>
</table>
</body>
</html>
<p>为最高级<td>次一级两种css用在一个属性元素上，相同的覆盖，不同的继承，
二组合
例:td{font-size:12pt}
p1{font-size:12pt}
组合后
td,.p1{font-size:12pt}
三层叠
在样式里定义过后，在表格属性中又定义一次
<html>
<head>
<style type="text/css">
<!--
red{color:#ff0000 limportant}
-->
</style>
</hesd>
<body>
<table width="300
