第4章CSS基础知识.pptVIP

第四章 CSS基础知识 本章内容 复习 HTML 标记 body p h1，h2，h3 u1，li img a div 一、CSS 简介 CSS 的引入 W3C 组织于 1996 年推出 CSS1.0 技术标准，1998 年推出 CSS2.0 技术标准。 CSS 是 Cascading Style Sheets 的缩写，译为“层叠样式表”，是用于控制网页样式的一种标记性语言。 HTML 控制网页内容的结构，CSS 控制网页内容的样式。 CSS 实现了网页的结构与表现相分离。 二、在网页中应用 CSS 在网页上应用CSS的三种方法： 行内样式 （Inline Styles） 内部样式表（Embedding a Style Block） 外部样式表（Linking to a Style Sheet） 二、在网页中应用 CSS 行内样式：在 HTML 标记的 style 属性中设置 CSS 样式。 二、在网页中应用 CSS 内部样式表：将 CSS 样式写在 style 和 /style 标记之间。 二、在网页中应用 CSS 外部样式表：将 CSS 样式写在独立的 CSS 文件中，然后将 CSS  文件链接到 HTML 文件上。 小结： 在网页上应用CSS的三种方法： 行内样式 （Inline Styles） 内部样式表（Embedding a Style Block） 外部样式表（Linking to a Style Sheet） 内部样式表优于行内样式。 外部样式表优于内部样式表。 三、CSS 基本语法 CSS 样式由“选择器”和“声明”组成。 声明由“属性”和“属性值”组成。 每条声明之间用“;” 分隔。 四、CSS 选择器 CSS 常用选择器的类型： 通配选择器 类型选择器 ID 选择器 后代选择器（包含选择器） 类选择器 伪类 群选择器（组选择器） 四、CSS 选择器 1. 通配选择器（ Universal Selector ） * { property: value; } 四、CSS 选择器 2. 类型选择器（ Type Selectors ） Tag { property: value; } 四、CSS 选择器 3. ID 选择器（ ID Selectors ） ＃ID { property: value; } 四、CSS 选择器 4. 类选择器（ Class Selectors ） .className { property: value; } 使用类选择器需要两个步骤： 标识类； 定义类。 四、CSS 选择器 5. 类选择器（ Class Selectors ） 四、CSS 选择器 5. 后代选择器（ Descendant Selectors ） selector1 selector2 { property: value } 说明：选择所有被 selector1 包含的 selector2。 四、CSS 选择器 7. 伪类（ Pseudo-Classes Selectors ） selector : pseudo-class { property: value } 四、CSS 选择器 6. 群选择器（ Group Selectors ） selector1，selector2，selector3 { property: value; } 说明：当多个选择符设置相同样式时，可以将选择符合并为一组。 小结： 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 的继承性 继承性是指：如果某个属性具有继承性，则属性作用在父元素的同时，也会作用于其包含的子元素。 常用的具有继承性的属性： font-family font-size font-style line-height color text-align text-indent a:link a:visited a:hover a:active 五、CSS 的继承性 六、层叠和