CSS基础知识(用例子来讲解)

1、第四章第四章 CSS基础知识基础知识本章内容一、一、CSS 简介简介 二、在网页中应用二、在网页中应用 CSS 三、三、 CSS 基本语法基本语法 四、四、CSS 选择器选择器 五、五、 CSS 的继承性的继承性 六、六、 CSS 的层叠和特殊性的层叠和特殊性重点重点 难点难点 复习v HTML 标记标记 ， ， bodyph1h2h3lililililiulppppimgdiv id=“header”div id=“navigation”div id=“mainContent”div id=“mainContent”div id=“footer”v CSS 的引入的引入 W3C 组织于组织于

2、 1996 年推出年推出 CSS1.0 技术标准，技术标准，1998 年推出年推出 CSS2.0 技术标准。技术标准。 CSS 是是 Cascading Style Sheets 的缩写，译为的缩写，译为“层叠样式表层叠样式表”，是用于控制网页样式的一种标记性语言。是用于控制网页样式的一种标记性语言。 HTML 控制网页内容的结构，控制网页内容的结构，CSS 控制网页内容的样式。控制网页内容的样式。 CSS 实现了网页的结构与表现相分离。实现了网页的结构与表现相分离。一、CSS 简介二、在网页中应用 CSSv 在网页上应用在网页上应用CSS的三种方法：的三种方法： 行内样式行内样式 （Inli

3、ne Styles） 内部样式表（内部样式表（Embedding a Style Block） 外部样式表（外部样式表（Linking to a Style Sheet）二、在网页中应用 CSSv 行内样式：在行内样式：在 HTML 标记的标记的 style 属性中设置属性中设置 CSS 样式。样式。例：例：泡泡潜水俱乐部泡泡潜水俱乐部欢迎你欢迎你泡泡潜水俱乐部泡泡潜水俱乐部泡泡潜水俱乐部为你量身打造一流的潜水服务，泡泡潜水俱乐部为你量身打造一流的潜水服务，style=“color: #FFFFFF; background-color: #000080” 泡泡潜水俱乐部泡泡潜水俱乐部二、在网页

4、中应用 CSSv 内部样式表：将内部样式表：将 CSS 样式写在样式写在 和和 标记之间。标记之间。例：例：泡泡潜水俱乐部欢迎你泡泡潜水俱乐部欢迎你泡泡潜水俱乐部泡泡潜水俱乐部泡泡潜水俱乐部为你量身打造一流的潜水服务，泡泡潜水俱乐部为你量身打造一流的潜水服务，h1 color: #FFFFFF; background-color: #000080;泡泡潜水俱乐部泡泡潜水俱乐部泡泡潜水俱乐部为你量身打造一流的潜水服务，泡泡潜水俱乐部为你量身打造一流的潜水服务，例：例：泡泡潜水俱乐部欢迎你泡泡潜水俱乐部欢迎你泡泡潜水俱乐部泡泡潜水俱乐部泡泡潜水俱乐部为你量身打造一流的潜水服务，泡泡潜水俱乐部为你量

5、身打造一流的潜水服务，二、在网页中应用 CSSv 外部样式表：将外部样式表：将 CSS 样式写在独立的样式写在独立的 CSS 文件中，然后将文件中，然后将 CSS 文件链接到文件链接到 HTML 文件上。文件上。泡泡潜水俱乐部泡泡潜水俱乐部泡泡潜水俱乐部为你量身打造一流的潜水服务，泡泡潜水俱乐部为你量身打造一流的潜水服务，网页文件网页文件 CSSCSS文件文件小结：v 在网页上应用在网页上应用CSS的三种方法：的三种方法： 行内样式行内样式 （Inline Styles） 内部样式表（内部样式表（Embedding a Style Block） 外部样式表（外部样式表（Linking to a

6、 Style Sheet）v 内部样式表优于行内样式。内部样式表优于行内样式。v 外部样式表优于内部样式表。外部样式表优于内部样式表。 CSS 样式由样式由“选择器选择器”和和“声明声明”组成。组成。 声明由声明由“属性属性”和和“属性值属性值”组成。组成。 每条声明之间用每条声明之间用“;” 分隔。分隔。三、CSS 基本语法selectors property: value; 选择器选择器属性属性属性值属性值声明声明四、CSS 选择器v CSS 常用选择器的类型：常用选择器的类型： 通配选择器通配选择器 类型选择器类型选择器 类选择器类选择器 ID 选择器选择器 后代选择器后代选择器 伪类伪

7、类 群选择器群选择器四、CSS 选择器v 1. 通配选择器（通配选择器（ Universal Selector ） * property: value; 例：例：* padding: 0; margin: 0;四、CSS 选择器v 2. 类型选择器（类型选择器（ Type Selectors ） Tag property: value; 例：例：body font: 0.75em/1.5 宋体宋体; background: #E0E0E0 url(images/bg.gif);h1 font-size: 180%; margin: 1em 0;p margin: 1em 0; 四、CSS 选择

8、器v 3. ID 选择器（选择器（ ID Selectors ） ID property: value; 例：例：#container width: 760px; margin: auto;#header height: 120px; background: url(images/bg_header.gif) no-repeat;#content padding: 30px;四、CSS 选择器v 5. 类选择器（类选择器（ Class Selectors ） .className property: value; 使用类选择器需要两个步骤：使用类选择器需要两个步骤： 标识类；标识类； 定义类。

9、定义类。四、CSS 选择器v 5. 类选择器（类选择器（ Class Selectors ）例：例：散文诗散文诗 秋夜秋夜鲁迅鲁迅在我的后园，可以看见墙外有两株树，在我的后园，可以看见墙外有两株树，秋夜秋夜鲁迅鲁迅秋夜秋夜鲁迅鲁迅.center text-align: center; 秋夜秋夜鲁迅鲁迅在我的后园，可以看见墙外有两株树，在我的后园，可以看见墙外有两株树，.center text-align: center; h2.center color: #0000FF; 秋夜秋夜鲁迅鲁迅在我的后园，可以看见墙外有两株树，在我的后园，可以看见墙外有两株树，四、CSS 选择器v 4. 后代选择器

10、（后代选择器（ Descendant Selectors ） selector1 selector2 property: value 说明：选择所有被说明：选择所有被 selector1 selector1 包含的包含的 selector2selector2。例：例：#content p text-indent: 2em;四、CSS 选择器v 4. 子选择器子选择器 selector1selector2 property: value 说明：选择说明：选择selector1selector1的第一代元素的第一代元素selector2selector2。例：例：.foodli text-inde

11、nt: 2em;四、CSS 选择器v 7. 伪类（伪类（ Pseudo-Classes Selectors ） selector : pseudo-class property: value 例：例：a:link color: #000000; text-decoration: none;a:visited color: #000000; text-decoration: none;a:hover color: #FF0000; text-decoration: underline;a:active color: #FF0000; text-decoration: underline;注意：一

12、定要按照注意：一定要按照 link，visited，hover，actived 的顺序书写。的顺序书写。允许给允许给html不存在的标签不存在的标签(标签的某种状标签的某种状态态)设置样式设置样式四、CSS 选择器v 6. 群选择器（群选择器（ Group Selectors ） selector1，selector2，selector3 property: value; 说明：当多个选择符设置相同样式时，可以将选择符合并为一组。说明：当多个选择符设置相同样式时，可以将选择符合并为一组。例：例：h2, h3 margin: 1em 0;td, th border: solid 1px #000

13、000;padding: 5px;小结：v CSS 常用选择器的类型：常用选择器的类型： 通配选择器（通配选择器（*） 类型选择器（类型选择器（ body p li h1 h2 h3 ） ID 选择器（选择器（ #header #navigation #maincontent ） 后代选择器（后代选择器（ #header p #navigation ul #footer p ） 类选择器（类选择器（ .center .fltrt ） 伪类（伪类（ a:link a:visited a:hover a:active ） 群选择器（群选择器（ p, li p, h2, h3 ）五、CSS 的继承性

14、v 继承性是指：如果某个属性具有继承性，则属性作用在父继承性是指：如果某个属性具有继承性，则属性作用在父元素的同时，也会作用于其包含的子元素。元素的同时，也会作用于其包含的子元素。v 常用的具有继承性的属性：常用的具有继承性的属性： font-family font-size font-style line-height color text-align text-indent a:link a:visited a:hover a:active六、层叠和特殊性v 选择符的特殊性分成四个等级：选择符的特殊性分成四个等级： 用行内样式具有最高特殊性。用行内样式具有最高特殊性。 “ID选择符选择符”

15、比比“类选择符类选择符”特殊。特殊。 “类选择符类选择符”比比“类型选择符类型选择符”特殊。特殊。选择符选择符特殊性特殊性行内样式行内样式1000ID选择符选择符100类选择符、伪类选择符类选择符、伪类选择符10类型选择符类型选择符1v 练习练习选择符选择符特殊性特殊性style=“”1000#container #content 200#content .center 110#content p 101#content 100p .center 11.center 10p 1六、层叠和特殊性敬业敬业 博学博学 求实求实 创新创新例：例：敬业敬业 博学博学 求实求实 创新创新例：例：最近优先原

16、则最近优先原则#content text-align:left;.title text-align: center;敬业敬业 博学博学 求实求实 创新创新例：例：七、盒模型v 块级元素块级元素 、.、 、v 内联元素内联元素 、v 内联块状元素内联块状元素 、七、元素分类-块级元素v 在html中、 、 和 就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将行内元素行内元素a转换为块状元素块状元素，从页使用a元素具有块状元素块状元素特点。v adisplay:block;v 块级元素特点：块级元素特点：v 1、每个块级元素都从新的一行开始，并且其后的元素也另起

17、一行。（真霸道，一个块级元素独占一行）v 2、元素的高度、宽度、行高以及顶和底边距都可设置。v 3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。七、元素分类-行内元素v 在html中，、 、 和就是典型的行内元素行内元素（inline）元素。当然块状元素块状元素也可以通过代码display:inline将元素设置为行行内元素内元素。如下代码就是将块状元素块状元素div转换为行内元素行内元素，从页使用div元素具有行内元素行内元素特点。v 行内元素特点：行内元素特点：v 1、和其他元素都在一行上；v 2、元素的高度、宽度、行高及顶部和底部边距不可不可设置v 3、元素的宽度就是它包含的文字或图片的宽度，不可改变七、元素分类-内联块状元素v 内联块状元素（内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，、标签就是这种内联块状标签。v inline-block元素特点：v 1、和其他元素都在一行上；v 2、元素的高度、宽度、行高以及顶和底边距都可设置。七、盒模型v div border:2px solid red; v div border-width:2px; border-sty