CSS 概述
级联样式单是一系列格式规则，这些规则用于控制网页内容的外观，可以将数据逻辑和显示逻辑分离，从而提高文件的可读性。
CSS 样式单的基本使用
链接外部样式文件：这种方式可以将央视文件彻底与HTML文档分离，样式文件需要额外引入
导入外部样式文件：这种方式与上一种类似，只是适用@import来引入外部样式文件。
使用内部样式定义：这种方式时通过在HTML文档头定义样式表来实现的。
使用行内样式：这种方式将样式行内定义到具体的HTML元素。
引入外部样式文件
HTML 文档中使用<link…/>元素来引入外部样式文件，引入外部样式文件应在<head…/>元素中增加如下<link…/>子元素:
<link type="text/css" rel="stylesheet" href="CSS样式文件的URL">
1
为了让页面更富表现力，可以为页面指定外部的CSS样式单文件，引入外部CSS
样式单文档的语法格式见上面介绍。在该页面代码的<head…/>元素内插入如下<link…/>子元素:
<link href="outer.css" rel="stylesheet" type="text/css" />
1
outer.css 样式单文件的代码如下:
/*设置整个表格的背景色*/
table {
background-color: #003366;
width: 400px;
}
/*设置单元格的背景色、字体等*/
td {
background-color: Jtfff;
font- family: ＂楷体＿GB2312";
font-size: 20pt ;
text-shadow: -8px 6px 2px f333 ;
}
导入外部样式单
导入外部样式单的功能与链接外部样式单的功能差不多，只是语法上存在差别。导入外部样式单需要在<style…/> 元素中使用＠import来执行导入。
例如：
<style tupe="text/css">
@import"out.css";
@import url("mycss.css");
</style>
使用＠import 完整语法如下：
@import url （样式单地址） sMedia;
使用内部CSS样式
通常不建议使用内部CSS样式因为这种做法需要在HTML文档内嵌入CSS样式定义，这种内部CSS样式主要有三大劣势。
如果次CSS样式需要被其他HTML文档适用，那么这些CSS样式必须在其他HTML文档中重复定义。
当量CSS嵌套在HTML文档中，必将导致HTML文档过大，大量的重复下载导致网络负载加重。
如果需要修改整站封个时，必须一次打开每个页面重复修改，不利于软件工程化。
但是内部样式定义并不是一无是处，如果想让某些CSS只对某个页面生效的话，则应该选用内部样式定义。
适用内部样式定义的语法格式如下：
<style type="text/css">
样式单文件定义
</style>
CSS选择器
定义CSS样式的语法总遵守如下格式：
Selector {
propertyl: valuel ;
property2 : value2;
...
}
元素选择器
元素选择器是最简单的选择器，其语法格式如下：
E {...}/*其中E代表有效的HTML元素名*/
其实E可以是任意有效的 HTML 元素名，甚至可用" * “来代表元素名，”＊"可匹配 HTML文档中任意元素。
属性选择器
E{ } : 指定该 CSS 样式对所有E元素起作用
E[attr]{…} : 指定该 CSS 样式对具有 attr 属性的E元素起作用
E[attr=value] {…} : 指定该CSS样式对所有包含attr属性，且attr属性为value的E元素起作用。
E[att"=“value”] {…} : 指定该 CSS 样式对所有包含attr属性，且attr属性的值为以 value开头的字符串的E元素起作用。
上面这几个选择器匹配规则越严格优先级越高。例如，对于包含 abc 属性的<div…/>元素，如果其属性值为 xyz ，则 div[abc=xyz] 选择器定义的 CSS 样式会覆盖 div[abc] 定义的 CSS 样式。
ID选择器
ID 选择器指定 CSS 样式将会对具有指定id属性值的 HTML 元素起作用。ID选择器的语法格式如下：
#idValue {...}
上面语法指定该 CSS 样式对id为 idValue的HTML 元素起作用。
定义仅对指定元素起作用的 ID 选择器的语法格式如下：
E#idValue {...}/*其中E是有效的HTML元素*/
该语法指定该 CSS 样式对id为idValue的E元素起作用。
class选择器
class 选择器指定 CSS 样式对具有指定class属性的元素起作用。class 选择器的语法格式如下：
[E] . classValue ( ...... }/*其中 是有效的 HTML 元素*/
指定该 CSS 定义对 class 属性值为 classValue 的E元素起作用。此处的E
可以省略，如果省略 E, 则指定该 CSS 对所有的 class 属性为 classValue 的元素都起作用。
包含选择器
包含选择器用千指定目标选择器必须处千某个选择器对应的元素内部。其语法格式如下：
Selectorl Selector2 {...}/*其中 Selectorl、Selector2 都是有效的选择器*/
子选择器
子选择器用于指定目标选择器必须是某个选择器对应的元素的子元素。子选择器的语法格式如下：
Selectorl>Selector2 {...}/*其中 Selectorl、Selector2 都是有效的选择器*/
CSS 3 新增的兄弟选择器
兄弟选择器 CSS 3.0 新增的一个选择器。兄弟选择器的语法如下:
Selectorl ~ Selector2 {...}/*其中 Selectorl、Selector2 都是有效的选择器 */
兄弟选择器匹配与 Selector1对应的元素后面、能匹配 Selector2 的兄弟节点。
选择器组合
如果需要让一份 CSS 样式对多个选择器起作用，那就可以利用选择器组合来实现了。选择器组合的语法格式如下：
Selectorl , Selector2 , Selector3 ,...{...}/*其中 Selectorl Selector2 Selector3都是有效的选择器*/
对于组合选择器而言，{}中定义的 CSS 样式将会对前面列出的所有选择器匹配的元素起作用
。
伪元素选择器
伪元素选择器并不是针对真正的元素使用的选择器，伪元素选择器只能针对 CSS 中已有的伪元素起作用。
CSS 提供的伪元素选择器有如下几个。
► first-letter: 该选择器对应的 CSS 样式对指定对象内的第一个字符起作用
► first-line: 该选择器对应的 CSS 样式对指定对象内的第一行内容起作用。
► :before: 该选择器与内容相关的属性结合使用 ，用于在指定对象内部的前端插入内容
► :after: 该选择器与内容相关的属性结合使用，用于在指定对象内部的尾端添加内容
:first-letter 选择器仅对块元素(如<div…/>、<p…/>、<section…/＞等元素）起作用。
:first-line选择器同样只对块元素(如<div…/>、<p…/＞、<section…/＞等元素）起作用。如果要对行内元素（如<span…/>等元素）使用该属性 ，必须先设定对象的 height、width 属性，或者设定 position 属性为 absolute, 或者设定 display 属性为 block。
结构性伪类选择器
Selector:first-child:匹配符合Selector选择器，而且必须是其父元素的第一个子节点的元素
Selector:last-child:匹配符合Selector选择器，而且必须是其父元素的最后一个子节点的元素
Selector:nth-child(n):匹配符合Selector选择器，而且必须是其父元素的第n个子节点的元素
Selector:nth-last-child(n):匹配符合Selector选择器，而且必须是其父元素的倒数第n个子节点的元素
Selector:only-child:匹配符合Selector选择器，而且必须是其父元素的唯一子节点的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ch</title>
<style type="text/css">
li:first-child{
border:1px solid black;
}
li:last-child{
background-color:blue;
}
li:nth-child(odd){
color:red;
}
li:nth-last-child(2){
font-weight:bold;
}
span:only-child{
font-size:40pt;
font-family:"隶书"
}
</style>
</head>
<body>
<div>
<ol>
<li>zxcvb</li>
<li>zxcvb</li>
<li>zxcvb</li>
<li>zxcvb</li>
<li>zxcvb</li>
</ol>
<ul>
<li id="java">zxcvb</li>
<li id="javaee">zxcvb</li>
<li id="ajax">zxcvb</li>
<li id="xml">zxcvb</li>
<li id="ejb">zxcvb</li>
<li><span>zxcvb</span></li>
</ul>
<span>zxcvb</span>
</div>
</body>
</html>
UI元素状态伪类选择器
Selector:link：匹配Selector选择器且未被访问前的元素（通常只能是超链接）
Selector:visited:匹配Selector选择器且已被访问过的元素（通常只能是超链接）
Selector:active:匹配Selector选择器且处于被用户激活（在鼠标点击与释放之间的事件）状态的元素
Selector:hover:匹配Selector选择器且处于鼠标悬停状态的元素
Selector:focus:匹配Selector选择器且已经得到焦点的元素
Selector:enabled:匹配Selector选择器且当前处于可用状态的元素
Selector:disabled:匹配Selector选择器且当前处于不可用状态的元素
Selector:checked:匹配Selector选择器且当前处于选中状态的元素
在脚本中修改显示样式
如果需要在脚本中动态控制页面的显示效果，使用脚本动态设置 CSS 样式也非常简单。按如下步骤就可动态修改目标元素的 CSS 样式
获取到需要设置 CSS 样式的目标元素，例如可以使用 getElementById()方法。
修改目标元素的 CSS 样式 。常用的方式有两种。
修改行内 CSS 属性值:使用如 “obj.style 属性名=属性值”的 JavaScript 代码即可。
修改 HTML 元素的 class 属性值：使用如 “obj.className=class 选择器”的 javaScript脚本即可
<script type ="text/javascript ">
function changeBg ()
//将背景色的值定义成空字符串
var bgColor= " ";
//循环6次生成一个随机的6位数
for (var i = 0 ; i < 6 ;i++）
bgColor += "" + Math.round(Math.random () * 9) ;
//将随机生成背景颜色值赋给页面的背景色
document.body.style.backgroundColor= + bgColor;
//为页面的单击事件绑定事件处理函数
document.onclick = changeBg ;
</script>
本站文章版权归原作者及原出处所有 。内容为作者个人观点， 并不代表本站赞同其观点和对其真实性负责，本站只提供参考并不构成任何投资及应用建议。本站是一个个人学习交流的平台，网站上部分文章为转载，并不用于任何商业目的，我们已经尽可能的对作者和来源进行了通告，但是能力有限或疏忽，造成漏登，请及时联系我们，我们将根据著作权人的要求，立即更正或者删除有关内容。本站拥有对此声明的最终解释权。
