Download presentation
Presentation is loading. Please wait.
1
6 CSS语言基础 HTML、CSS和JavaScript共同构筑了Web前端设计的基础，有人形象的把它们比作凳子的三支腿。本章包括4部分内容： 创建CSS样式 应用CSS样式 准确选用CSS选择器 灵活使用CSS的层叠和继承 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（
2
6.1 创建CSS样式 6.1.1 网页样式发展概述 1994年哈坤·利提出了CSS的设想。
网页样式发展概述 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，但是没有普及。 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（
3
6.1 创建CSS样式 CSS样式的构成 样式是CSS的最小、最基本单元。从本质上来看，CSS样式就是网页格式化的规则列表。一个样式单元必须包含两部分组成： 样式作用的对象：选择器（Selector）。 作用对象的效果：声明块（Declaration Block）。 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（
4
6.1 创建CSS样式 CSS样式的构成 选择器：定义样式作用的对象。为了能准确选定页面中特定对象，CSS提供了很多类型的选择器，这些选择器功能各异，但是它们的共同目标就是帮助设计师精确选择对象或对象范围。 声明块：声明块必须紧跟在选择器的后面，中间不能够插入其他非注释字符。声明块由大括号包括，大括号内列表显示一个或无数个声明，当然也可以保持大括号为空，即为指定选择器不定义具体的样式。声明之间必须使用分号进行分隔，最后一个声明可以省略分号。但是为了养成好的习惯，建议所有声明后面都增加一个分号。 声明：实际上就是一个“属性/属性值”对，因此声明包含两部分，左侧部分是属性，右侧部分是属性值，左右两部分之间使用冒号进行分隔。关于属性和属性值的相关内容请参阅后面各章分解内容。 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（
5
6.2 应用CSS样式 行内样式 所谓行内样式，就是把CSS样式直接放在代码行内的标签中，一般都是放在标签的style属性中。由于样式直接被放入到标签中，所以它的作用对象就已经明确了，不再需要指定样式的选择器。 <p style="text-indent:2em; font-size:12px; line-height:1.6em; color:gray;">段落样式</p> 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（
6
6.2 应用CSS样式 内部样式 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> 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（
7
6.2 应用CSS样式 外部样式 所谓外部样式，就是把样式代码存放在独立的文件中，使用时再把这个独立的文件导入或链接到HTML文档中。这个样式表文件就是我们常说的CSS文件，其扩展名为.css。CSS文件实际上就是一个文本文件，使用任何文本编辑器都可以打开并进行编辑。（示例：6-6.css） 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（
8
6.2 应用CSS样式 6.2.4 引入外部样式 链接外部样式表文件的具体用法如下：
引入外部样式 链接外部样式表文件的具体用法如下： <link href="images/6-6.css " type="text/css" rel="stylesheet" media="all" /> <style type="text/css" media="all"> <!-- @import url("images/6-6.css"); --> </style> 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（
9
6.3 准确选用CSS选择器 6.2.1 基本选择器（示例： 6-7、8、9.html） 《网页制作与网站开发从入门到精通》配套视频
类型 用法 范围 适用 说明 标签选择器 element { } 复数 元素的默认样式 统一元素的显示样式 类选择器 .class { } 细节修饰 提炼不同元素所拥有的相同样式 ID选择器 #id { } 单数 框架布局 精确控制元素的具体显示样式 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（
10
6.3 准确选用CSS选择器 6.2.2 选定范围选择器（示例 6-10、11、12.html） 《网页制作与网站开发从入门到精通》配套视频
类型 用法 范围 适用 说明 包含选择器 s1 s2 { } 复数 s1范围下的所有s2 在指定范围中的特定基本选择器 子对象选择器 s1 > s2 { } s1包含子对象中的所有s2 在指定范围内子对象中的特定基本选择器 相邻选择器 s1 + s2 { } 与s1向下相邻的s2 指定基本选择器后相邻的特定基本选择器 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（
11
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可以显示在属性值的任何位置 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（
12
6.3 准确选用CSS选择器 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; /* 居中对齐 */ } 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（
13
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> 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（
14
6.3 准确选用CSS选择器 6.2.4 选择器分组、嵌套和指定
选择器分组、嵌套和指定 在属性选择器中为具体的标签指定匹配属性，当然我们也可以为类选择器、ID选择器等不同类型的选择器指定范围。 #content {/* ID选择器 */ font-size:60px; } 我们可以指定选择器的使用范围： div#content {/* 指定ID选择器 */ 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（
15
6.3 准确选用CSS选择器 6.2.4 选择器分组、嵌套和指定
选择器分组、嵌套和指定 通用选择器是一类特殊类型的选择器，它可以定义所有网页元素的显示样式。由于该类型选择器比较特殊，一般使用一个星号来表示选择器的名称。例如： * {/* 通用选择器 */ font-size:20px; /* 20像素的字体大小 */ } 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（
16
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 ;} 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（
17
6.4 灵活使用CSS的层叠和继承 6.4.2 CSS的继承性 第一，并不是所有属性都可以继承。
从本质上分析，继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它所包含的后代。继承性最典型的应用是在网页默认样式的预设上。 注意如下两个问题： 第一，并不是所有属性都可以继承。 第二，在部分浏览器中（IE6）部分元素的继承性不是很好。 body, table, td { font-size:12px; } 《网页制作与网站开发从入门到精通》配套视频 样吧视频教室（
Similar presentations
