Html设置css的4种⽅式和css6种声明⽅式
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 >
导⼊式样式表
〈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">
<!--
-->
</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>
<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&</p>
</body>
</html>
长度随浏览器窗⼝⼤⼩⽽改变
<html>
<head>
<style>
<!--
p:first-letter{color:red;font-size:50pt;float:left;}
-->
</style>
</hesd>
<body>
<p&</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" border="1" height="150">
<tr>
<td align="center" class="red">决撒地⽅官</td> </tr>
</table>
</body>
</html>
css单位
分四⼤类：
1 长度单位
数值可以是整数，⼩数，正数，负数，0，后加单位（负值不要轻易使⽤）换算关系：
1in(英⼨)=6pc(派)
1in(英⼨)=72pt(磅)
1in(英⼨)=2.54(厘⽶)
1cm(厘⽶)=10mm(毫⽶)
1cm(厘⽶)=0.3937(英⼨)
1pt(磅)=1/72in(英⼨)=0.2478mm(毫⽶)
1pc(派)=1/6in(英⼨)=我国新四号铅字的尺⼨
2 百分⽐单位
textstyle
3 颜⾊单位
4 url单位

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。