CSS样式单的功能及历史背景

HTML5规范推荐把页面外观交给CSS去控制，而HTML标签则负责标签、语议部分。HTML5删除了传统的专门控制页面外观的标签，而把页面外观的控制交给了CSS负责。

CSS的主要功能

对页面的字体、颜色控制更加细腻，让页面内容更富表现力，CSS的表现效果远远超出传统HTML页面的color、bgcolor等属性的表现力。
通过CSS控制整站风格，CSS样式单可以同时控制整个站点所有页面的风格，如果整个站点所有的页面效果都需要改变，则可以直接通过CSS样式单控制，避免逐个修改每个页面文件。

CSS的发展历史

CSS 1.0：1996年12月，CSS1.0作为第一个正式规范面世，其中已经加入了字体、颜色等相关属性。
CSS 2.0：1998年5月，CSS2.0规范正式推出。这个版本的CSS也是最广为人知的一个版本。
CSS 2.1：2004年2月，CSS2.1对原来的CSS2.0进行了一些小范围的修改，删除了一些浏览器不成熟的属性。CSS2.1可认为是CSS2.0的修订版。
CSS 3.0：2010年，CSS3规范推出，这个版本的CSS完善了前面CSS存在的一些不足，例如，颜色模块增加了色彩校正、透明度等功能；字体模块则增加了文字效果、服务器字体支持等；还增加了变形和动画模块等。

使用外部CSS样式单的两种方式

引入外部样式文件

HTML文档中使用<link.../>元素来引用外部样式文件，引入外部样式文件应在<head.../>元素中增加如下<link.../>子元素：

1	<link type="text/css" rel="stylesheet" href="CSS样式文件的URL">

导入外部样式单

导入外部样式单的功能与链接外部样式单的功能差不多，只是语法上存在差别。导入外部样式单需要在<style.../>元素中使用@import来执行导入。

<style type="text/css">
	@import "outer.css";
	@import url("mycss.css");
</style>

以前的很多浏览器不支持@import导入，因此一些CSS开发人员会把一些浏览器可能不支持的高级CSS属性放在外部样式单中导入，这样保证只有支持@import导入的浏览器才会导入这些高级CSS属性。但实际上，由于某些浏览器（例如：IE浏览器）会在导入外部样式单时导致“屏闪”，因此开发者谨慎使用。

使用内部样式单的方式

如果想让某些CSS样式仅对某个页面有效，而不会影响整个站点，则应该选择使用内部CSS样式定义。

内部CSS样式需要放在<style.../>元素中定义

<style type="text/css">
	<!-- 样式单文件定义-->
  table {
    backgroud-color: #003366;
  }
  td {
    backgroud-color: #FFFFFF;
    font-family: "楷体_GB2312";
    font-size: 20pt;
    text-shadow: -8px 6px 2px #333;
  }
</style>

使用内联样式单的方式

内联CSS样式只对单个标签有效，它甚至不会影响整个文件。内联样式定义可以精确控制某个HTML元素的外观表现，并且允许通过JavaScript动态修改XHTML元素的CSS样式，从而改变该元素的外观。

为了使用内联样式，CSS扩展了HTML元素，几乎所有的HTML元素都增加了一个style通过卂性，该属性是一个或多个CSS样式定义，多个CSS样式定义之间以英文逗号隔开。简单地说，使用内联样式定义时，style属性值就是由一个或多个property:value组成的，此处的property:value与前面CSS样式单文件中的完全相同。

定义内联CSS样式的语法格式如下：

1	style="property1:value1;property2:value2..."

CSS的元素选择器

正如前面看到的，除了内联样式之外，定义CSS样式的语法总遵守如下格式：

Selector {
    property1: values1;
    property1: values2;
}

上面的语法格式分为两个部分：

Selector（选择器）：选择器决定该样式定义对哪些元素起作用。
{property1: value1; property2:value2}（属性定义）：属性定义部分决定这些样式起怎样的作用（字体、颜色、布局）等。

因此不难看出掌握CSS需要两部分：选择器的定义方法与CSS属性的定义

元素选择器

元素选择器是最简单的选择器，其语法格式如下：

1	E { ... } /* 其中E代表有效的HTML元素名 */

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>元素选择器</title>
	<style type="text/css">
		/* 定义对div元素起作用的CSS样式 */
		div{
			background-color: grey;
			font: italic normal bold 14pt normal 楷体_GB2312;
		}
		/* 定义对P元素起作用的CSS样式 */
		p{
			background-color: #444;
			color: #fff;
			font: normal small-caps bold 20pt normal 宋体;
		}
	</style>
</head>
<body>
	<div>div内的文字</div>
	<p>p内的文字</p>
</body>
</html>

属性选择器

属性选择器一共有如下几种语法格式：

E {....} ：指定该CSS样式对所有E元素起作用。
E[attr] { ... } ：指定该CSS样式对具有attr属性的E元素起作用
E[attr=value] { ... } ：指定该CSS样式对所有包含attr属性，且attr属性为value的E元素起作用。
E[attr~=value]{ ... } ：指定该CSS样式对所有包含attr属性，且attr属性的值为以空格隔开的系列值，其中某个值为value的E元素起作用。
E[attr|=value]{ ... } ：指定该CSS样式对所有包含attr属性，且attr属性的值为以连字符分隔的系列值，其中第一个值为value的Tag元素起作用。
E[attr^="value"]{ ... } ：指定该CSS样式对所有包含attr属性，且attr属性的值以value开头的字符串的E元素起作用。
E[attr$="value"]{ ... } ：指定该CSS样式对所有包含attr属性，且attr属性的值以value结尾的字符串的E元素起作用。
E[attr*="value"]{ ... } ：指定该CSS样式对所有包含attr属性，且attr属性的值包含value的字符串的E元素起作用。

上面和个属性选择器并没有得到所有浏览器的广泛支持，只有第一种形式可以在所有浏览器中运行良好，最后3种CSS选择器是CSS 3.0新增的选择器。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>属性选择器</title>
	<style type="text/css">
		/*对所有div元素都起作用的CSS样式*/
		div {
			width: 300px;
			height: 30px;
			background-color: #eee;
			border: 1px solid black;
			padding: 10px;
		}
		/*对有id属性的div元素起作用的CSS样式*/
		div[id] {
			background-color: #aaa;
		}
		/*对有id属性值包含xx的div元素起作用的CSS样式*/
		div[id*=xx] {
			background-color: #999;
		}
		/*对有id属性值以xx开头的div元素起作用的CSS样式*/
		div[id^xx] {
			background-color: #555;
			color: #fff;
		}
		div[id=xx] {
			background-color: #111;
			color: #fff;
		}
	</style>
</head>
<body>
	<div>没有任何属性的div元素</div>
	<div id="a">带id属性的div元素</div>
	<div id="zzxx">id属性值包包含xx子字符串的div元素</div>
	<div id="xxyy">id属性值以xx开头的div元素</div>
	<div id="xx">id属性值为xx的div元素</div>
</body>
</html>

ID选择器

ID选择器指定CSS样式将会对具有指定id属性值的HTML元素起作用。ID选择器的语法格式如下：

1	#idvalue {...}

上面语法指定该CSS样式对id为idValue的HTML元素起作用。

各种浏览器对ID选择器都有很好的支持。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>ID选择器</title>
	<style type="text/css">
		/* 对所有div元素都起作用的CSS样式 */
		div{
			width: 200px;
			height: 30px;
			background-color: #ddd;
			padding: 3px;
		}
		/* 对id为xx的元素起作用的CSS样式 */
		#xx {
			border: 2px dotted black;
			background-color: #888;
		}
	</style>
</head>
<body>
	<div>没有任何属性的div元素</div>
	<div id="xx">id属性值为xx的div元素</div>
</body>
</html>

仅对指定元素起作用的ID选择器

定义仅对指定元素起作用的ID选择器的语法格式如下：

1	E#idValue {...} /* 其中E是有效的HTML元素 */

该语法指定该CSS样式对ID为idValue的E元素起作用。

/*对id为xx的p元素起作用的CSS样式*/
p#xx {
	border:2px dotted black;
  backgroud-color: #888;
}

class选择器

class选择器指定CSS样式对具有指定class属性的元素起作用。class选择器的语法格式如下：

1	[E].classValue {...} /其中E是有效的HTML元素/

指定该CSS定义对class属性值为classValue的E元素起作用。此处的E可以省略，如果省略E，则指定该CSS对所有的class属性为classValue的元素都起作用。

为了让HTML页面支持class选择器，W3C组织规定几乎所有的HTML元素都可指定class属性，该属性唯一的作用正是让class选择器起作用

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Class选择器测试</title>
	<style type="text/css">
		/*对所有class为myclass的元素都起作用的CSS样式*/
		.myclass {
			width: 240px;
			height: 40px;
			background-color: #dddddd;
		}
		/*对class为myclass的div元素起作用的CSS样式*/
		div.myclass {
			border: 2px dotted black;
			background-color: #888888;
		}
	</style>
</head>
<body>
	<div class="myclass">class属性为myclass的div元素</div>
	<p class="myclass">class属性为myclass的p元素</p>
</body>
</html>

从上图所示，定义了两个CSS样式都可作用于<div…/>元素，因此该<div…/>元素的显示效果是两个CSS样式“迭加”的效果。从上图可示，既指定标签又指定class值的选择器的优先级更高。

包含选择器

包含选择器用于指定目标选择器必须处于某个选择器对应的元素内部。其语法格式如下：

1	Selector1 Selector2 {...} /其中Selector1、Selector2都是有效的选择器 /

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>包含选择器测试</title>
	<style type="text/css">
		/*对所有的div元素起作用的CSS样式*/
		div {
			width: 350px;
			height: 60px;
			background-color: #ddd;
			margin: 5px;
		}
		/*对处于div之内且class属性为a的元素起作用的CSS样式*/
		div .a {
			width: 250px;
			height: 35px;
			border: 2px dotted black;
			background-color: #888;
		}
	</style>
</head>
<body>
	<div>没有任何属性的div元素</div>
	<div><section><div class="a">处理div之内且class属性为a的元素</div></section></div>
</body>
</html>

子选择器

子选择器用于指定目标选择器必须是某个选择器对应的元素的子元素。子选择器的语法格式如下：

1	Selector1 > Selector2 {...} /其中Selector1、Selector2都是有效的选择器/

包含选择器与子选择器有点相似，它们之间存在如下区别：

对于包含选择器，只要目标选择器位于外部选择器对应的元素内部，即使是其“孙子元素”也可；
对于子选择器，要求目标选择器必须作为外部选择器对应的元素的直接子元素才行

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>子选择器</title>
	<style type="text/css">
		/*对所有的div元素起作用的CSS样式*/
		div {
			width: 350px;
			height: 60px;
			background-color: #ddd;
			margin: 5px;
		}
		/*对处于div之内且class属性为a的元素起作用的CSS样式*/
		div>.a {
			width: 300px;
			height: 35px;
			border: 2px dotted black;
			background-color: #888;
		}
	</style>
</head>
<body>
	<div>没有任何属性的div元素</div>
	<div><p class="a">class属性为a且是div的子节点的元素</p></div>
	<div><section><p class="a">class属性为a且处于div内部的元素</p></section></div>
</body>
</html>

CSS3.0新增的兄弟选择器

兄弟选择器是CSS3.0新增的一个选择器。兄弟选择器的语法如下：

1	Selector1 ~ Selector2 {...} /其中Selector1、Selector2都是有效的选择器/

兄弟选择器匹配与Selector1对应的元素后面、能匹配Selector2的兄弟节点。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>兄弟选择器</title>
	<style type="text/css">
		#android ~ .long{
			background-color: #00FF00;
		}
	</style>
</head>
<body>
<div>
	<div>疯狂Java讲义</div>
	<div class=“long”>轻量级Java EE企业应用实战</div>
	<div id="android">疯狂andoroid讲义</div>
	<p class="long">经典Java EE企业应用实践</p>
	<div class="long">JavaScript权威指南</div>
</div>
</body>
</html>

页面id为android的元素后面，class属性为long的所有兄弟节点都增加了绿色背景。

选择器组合

有些时候，我们需要让一份CSS样式对多个选择器起作用，那就可以利用选择器组合来实现。语法如下：

1	Selector1,Selector2,Selector3,... {...} /其中Selctor1、Selector2、Selector3都是有效的选择器/

对于组合选择器页言，{}中定义的CSS样式将会对前面列出的所有选择器匹配的元素起作用。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>选择器组合</title>
	<style type="text/css">
		div,.a,#abc {
			width: 200px;
			height: 35px;
			border: 2px dotted black;
			background-color: #888;
		}
	</style>
</head>
<body>
<div>没有任何属性的div元素</div>
<p class="a">Class属性为a的元素</p>
<section id="abc">id为abc的元素</section>
</body>
</html>

伪选择器

伪元素选择器并不是针对真正的元素使用的选择器，伪元素选择器只能针对CSS中的伪元素起作用。

CSS提供的伪元素选择器有如下几个

:first-letter：该选择器对应的CSS样式对指定对象内的第一个字符起作用。
:first-line：该选择器对应的CSS样式对指定对象内的第一行内容起作用。
:before：该选择器与内容相关的属性结合使用，用于在指定对象内部的前端插入内容。
:after：该选择器与内容相关的属性结合使用，用于在指定对象内部的尾端添加内容。

`:first-letter:` 伪元素选择器

:first-letter选择器仅对块元素起作用。如果想对内联元素使用该属性，必须先设定对象的height、width属性，或者设定position属性为absolute，或者设定display属性为block。通过该选择器配置font-size、float属性可制作道了下沉的效果。

使用伪元素选择器插入内容

配置counter-increment属性添加编号

插入自定义编号

插入多级编号

CSS3新增的结构性伪类选择器

CSS3新增的UI元素状态伪类选择器

CSS3新增的:not和:target伪类选择器

在脚本中修改CSS样式

大象无形，大音希声

CSS3样式表手册

CSS样式单的功能及历史背景

CSS的主要功能

CSS的发展历史

使用外部CSS样式单的两种方式

引入外部样式文件

导入外部样式单

使用内部样式单的方式

使用内联样式单的方式

CSS的元素选择器

元素选择器

属性选择器

ID选择器

class选择器

包含选择器

子选择器

CSS3.0新增的兄弟选择器

选择器组合

伪选择器

`:first-letter:` 伪元素选择器

CSS样式单的功能及历史背景

CSS的主要功能

CSS的发展历史

使用外部CSS样式单的两种方式

引入外部样式文件

导入外部样式单

使用内部样式单的方式

使用内联样式单的方式

CSS的元素选择器

元素选择器

属性选择器

ID选择器

class选择器

包含选择器

子选择器

CSS3.0新增的兄弟选择器

选择器组合

伪选择器

:first-letter: 伪元素选择器

`:first-letter:` 伪元素选择器