6 CSS语言基础 HTML、CSS和JavaScript共同构筑了Web前端设计的基础，有人形象的把它们比作凳子的三支腿。本章包括4部分内容： 创建CSS样式 应用CSS样式 准确选用CSS选择器 灵活使用CSS的层叠和继承 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（www.css8.cn）
6.1 创建CSS样式 6.1.1 网页样式发展概述 1994年哈坤·利提出了CSS的设想。 6.1.1 网页样式发展概述 1994年哈坤·利提出了CSS的设想。 1994年哈坤在一次会议中正式公布了个人对于CSS的想法。 1995年他与波斯一起再次深入探索CSS技术问题。W3C介入这个技术研究。 1996年底，CSS初稿设计完成。同年12月CSS的第1版本被出版。 1997年初，W3C组织成立了专门管理CSS的工作组。 1998年5月，CSS 2.0版本被正式发布，随后W3C正式推荐CSS 2.0为标准。 2000年，W3C升级CSS为CSS 2.1，并把它作为标准版本推荐使用。 2001年，推出CSS3.0，但是没有普及。 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（www.css8.cn）
6.1 创建CSS样式 6.1.2 CSS样式的构成 样式是CSS的最小、最基本单元。从本质上来看，CSS样式就是网页格式化的规则列表。一个样式单元必须包含两部分组成： 样式作用的对象：选择器（Selector）。 作用对象的效果：声明块（Declaration Block）。 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（www.css8.cn）
6.1 创建CSS样式 6.1.2 CSS样式的构成 选择器：定义样式作用的对象。为了能准确选定页面中特定对象，CSS提供了很多类型的选择器，这些选择器功能各异，但是它们的共同目标就是帮助设计师精确选择对象或对象范围。 声明块：声明块必须紧跟在选择器的后面，中间不能够插入其他非注释字符。声明块由大括号包括，大括号内列表显示一个或无数个声明，当然也可以保持大括号为空，即为指定选择器不定义具体的样式。声明之间必须使用分号进行分隔，最后一个声明可以省略分号。但是为了养成好的习惯，建议所有声明后面都增加一个分号。 声明：实际上就是一个“属性/属性值”对，因此声明包含两部分，左侧部分是属性，右侧部分是属性值，左右两部分之间使用冒号进行分隔。关于属性和属性值的相关内容请参阅后面各章分解内容。 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（www.css8.cn）
6.2 应用CSS样式 6.2.1 行内样式 所谓行内样式，就是把CSS样式直接放在代码行内的标签中，一般都是放在标签的style属性中。由于样式直接被放入到标签中，所以它的作用对象就已经明确了，不再需要指定样式的选择器。 <p style="text-indent:2em; font-size:12px; line-height:1.6em; color:gray;">段落样式</p> 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（www.css8.cn）
6.2 应用CSS样式 6.2.2 内部样式 HTML提供了一个style元素，使用该元素能够在文档内定义仅供当前页面内使用的样式，因此称其为内部样式。style元素必须位于页面的头部区域，即必须包含在<head>和</head>标签之间。（示例： 6-5.html） <style type="text/css"> p { text-indent:2em; font-size:12px; line-height:1.6em; color:gray; } </style> 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（www.css8.cn）
6.2 应用CSS样式 6.2.3 外部样式 所谓外部样式，就是把样式代码存放在独立的文件中，使用时再把这个独立的文件导入或链接到HTML文档中。这个样式表文件就是我们常说的CSS文件，其扩展名为.css。CSS文件实际上就是一个文本文件，使用任何文本编辑器都可以打开并进行编辑。（示例：6-6.css） 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（www.css8.cn）
6.2 应用CSS样式 6.2.4 引入外部样式 链接外部样式表文件的具体用法如下： 6.2.4 引入外部样式 链接外部样式表文件的具体用法如下： <link href="images/6-6.css " type="text/css" rel="stylesheet" media="all" /> 也可以在内部样式表中使用@import命令导入外部样式表。用法如下： <style type="text/css" media="all"> <!-- @import url("images/6-6.css"); --> </style> 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（www.css8.cn）
6.3 准确选用CSS选择器 6.2.1 基本选择器（示例： 6-7、8、9.html） 《网页制作与网站开发从入门到精通》配套视频 类型 用法 范围 适用 说明 标签选择器 element { } 复数 元素的默认样式 统一元素的显示样式 类选择器 .class { } 细节修饰 提炼不同元素所拥有的相同样式 ID选择器 #id { } 单数 框架布局 精确控制元素的具体显示样式 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（www.css8.cn）
6.3 准确选用CSS选择器 6.2.2 选定范围选择器（示例 6-10、11、12.html） 《网页制作与网站开发从入门到精通》配套视频 类型 用法 范围 适用 说明 包含选择器 s1 s2 { } 复数 s1范围下的所有s2 在指定范围中的特定基本选择器 子对象选择器 s1 > s2 { } s1包含子对象中的所有s2 在指定范围内子对象中的特定基本选择器 相邻选择器 s1 + s2 { } 与s1向下相邻的s2 指定基本选择器后相邻的特定基本选择器 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（www.css8.cn）
6.3 准确选用CSS选择器 6.2.3 属性选择器（示例： 6-13.html） 《网页制作与网站开发从入门到精通》配套视频 子类型 用法 范围 适用 说明 匹配属性 [a] { } 复数 包含属性a 选定标签中包含指定属性的所有对象 匹配属性值 [a=v] { } 包含属性a的值为v 选定标签中包含指定属性为某个值的所有对象 匹配连字符 [a|=v] { } 包含属性a的部分值为v v作为属性值的组成部分，各部分使用连字符进行分隔 匹配空白 [a~=v] { } v作为属性值的组成部分，各部分使用空格进行分隔 匹配前缀 [a^=v] { } v必须位于属性值开头 匹配后缀 [a$=v] { } v必须位于属性值末尾 匹配子字符串 [a*=v] { } v可以显示在属性值的任何位置 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（www.css8.cn）
6.3 准确选用CSS选择器 6.2.4 选择器分组、嵌套和指定 通过分组来合并样式： 6.2.4 选择器分组、嵌套和指定 通过分组来合并样式： <style type="text/css"> h1 { text-align:center;} /* 一级标题居中对齐 */ h2 { text-align:center;} /* 二级标题居中对齐 */ h3 { text-align:center;} /* 三级标题居中对齐 */ h4 { text-align:center;} /* 四级标题居中对齐 */ h5 { text-align:center;} /* 五级标题居中对齐 */ h6 { text-align:center;} /* 六级标题居中对齐 */ </style> h1, h2, h3, h4, h5, h6 { /* 选择器分组 */ text-align:center; /* 居中对齐 */ } 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（www.css8.cn）
6.3 准确选用CSS选择器 6.2.4 选择器分组、嵌套和指定（ 示例： 6-16.html） 通过选择器嵌套精确定位样式： <div id="content">一级文本 <div>二级文本 <div>三级文本 <div>四级文本 <div>五级文本 <div>六级文本</div> </div> <style type="text/css"> #content {font-size:60px;} /* 没有选择器嵌套*/ #content div {font-size:50px;} /* 包含选择器 */ #content div div {font-size:40px;} /* 2个包含选择器嵌套 */ #content div div div {font-size:30px;} /* 3个包含选择器嵌套 */ #content div div div div {font-size:20px;} /* 4个包含选择器嵌套 */ #content div div div div div { font-size:12px;} /* 5个包含选择器嵌套 */ </style> 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（www.css8.cn）
6.3 准确选用CSS选择器 6.2.4 选择器分组、嵌套和指定 6.2.4 选择器分组、嵌套和指定 在属性选择器中为具体的标签指定匹配属性，当然我们也可以为类选择器、ID选择器等不同类型的选择器指定范围。 #content {/* ID选择器 */ font-size:60px; } 我们可以指定选择器的使用范围： div#content {/* 指定ID选择器 */ 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（www.css8.cn）
6.3 准确选用CSS选择器 6.2.4 选择器分组、嵌套和指定 6.2.4 选择器分组、嵌套和指定 通用选择器是一类特殊类型的选择器，它可以定义所有网页元素的显示样式。由于该类型选择器比较特殊，一般使用一个星号来表示选择器的名称。例如： * {/* 通用选择器 */ font-size:20px; /* 20像素的字体大小 */ } 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（www.css8.cn）
6.4 灵活使用CSS的层叠和继承 6.4.1 CSS的层叠性 在同等条件下，距离应用对象的距离越近就拥有较大的优先权。 （示例： 6-19.html） 标签选择器 = 1分。 伪元素或伪对象选择器 = 1分（在后面章节中将专题讲解）。 类选择器 = 10分。 属性选择器 = 10分。 ID选择器 = 100分。 通用选择器 = 0分。 （示例： 6-20.html） !important命令，无穷大。 h1 { font-size:12px!important ;} 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（www.css8.cn）
6.4 灵活使用CSS的层叠和继承 6.4.2 CSS的继承性 第一，并不是所有属性都可以继承。 从本质上分析，继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它所包含的后代。继承性最典型的应用是在网页默认样式的预设上。 注意如下两个问题： 第一，并不是所有属性都可以继承。 第二，在部分浏览器中（IE6）部分元素的继承性不是很好。 body, table, td { font-size:12px; } 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（www.css8.cn）