CSS基础知识学习(含实例)课件.ppt

1、第四章 CSS基础知识整 体 概 述THE FIRST PART OF THE OVERALL OVERVIEW,P L E A S E S U M M A R I Z E T H E C O N T E N T第一部分本章内容一、CSS 简介 二、在网页中应用 CSS 三、CSS 基本语法 四、CSS 选择器 五、CSS 的继承性 六、CSS 的层叠和特殊性重点 难点 复习v HTML 标记 ，bodyph1h2h3lililililiulppppimgdiv id=“header”div id=“navigation”div id=“mainContent”div id=“mainCont

2、ent”div id=“footer”v CSS 的引入 W3C 组织于 1996 年推出 CSS1.0 技术标准，1998 年推出 CSS2.0 技术标准。CSS 是 Cascading Style Sheets 的缩写，译为“层叠样式表”，是用于控制网页样式的一种标记性语言。HTML 控制网页内容的结构，CSS 控制网页内容的样式。CSS 实现了网页的结构与表现相分离。一、CSS 简介二、在网页中应用 CSSv 在网页上应用CSS的三种方法：行内样式（Inline Styles）内部样式表（Embedding a Style Block）外部样式表（Linking to a Style S

3、heet）二、在网页中应用 CSSv 行内样式：在 HTML 标记的 style 属性中设置 CSS 样式。例：泡泡潜水俱乐部欢迎你泡泡潜水俱乐部泡泡潜水俱乐部为你量身打造一流的潜水服务，style=“color:#FFFFFF;background-color:#000080”泡泡潜水俱乐部二、在网页中应用 CSSv 内部样式表：将 CSS 样式写在 和 标记之间。例：泡泡潜水俱乐部欢迎你泡泡潜水俱乐部泡泡潜水俱乐部为你量身打造一流的潜水服务，h1 color:#FFFFFF;background-color:#000080;泡泡潜水俱乐部泡泡潜水俱乐部为你量身打造一流的潜水服务，例：泡泡潜

4、水俱乐部欢迎你泡泡潜水俱乐部泡泡潜水俱乐部为你量身打造一流的潜水服务，二、在网页中应用 CSSv 外部样式表：将 CSS 样式写在独立的 CSS 文件中，然后将 CSS 文件链接到 HTML 文件上。泡泡潜水俱乐部泡泡潜水俱乐部为你量身打造一流的潜水服务，网页文件 CSSCSS文件小结：v 在网页上应用CSS的三种方法：行内样式（Inline Styles）内部样式表（Embedding a Style Block）外部样式表（Linking to a Style Sheet）v 内部样式表优于行内样式。v 外部样式表优于内部样式表。CSS 样式由“选择器”和“声明”组成。声明由“属性”和“属

5、性值”组成。每条声明之间用“;”分隔。三、CSS 基本语法selectors property:value;选择器属性属性值声明四、CSS 选择器v CSS 常用选择器的类型：通配选择器 类型选择器 ID 选择器 后代选择器 类选择器 伪类 群选择器四、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 u

6、rl(images/bg.gif);h1 font-size:180%;margin:1em 0;p margin:1em 0;四、CSS 选择器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 4.后代选择器（Descendant Selectors）selector1 selector2

7、 property:value 说明：选择所有被 selector1 selector1 包含的 selector2selector2。例：#content p text-indent:2em;四、CSS 选择器v 5.类选择器（Class Selectors）.className property:value;使用类选择器需要两个步骤：标识类；定义类。四、CSS 选择器v 5.类选择器（Class Selectors）例：散文诗 秋夜鲁迅在我的后园，可以看见墙外有两株树，秋夜鲁迅秋夜鲁迅.center text-align:center;秋夜鲁迅在我的后园，可以看见墙外有两株树，.cente

8、r text-align:center;h2.center color:#0000FF;秋夜鲁迅在我的后园，可以看见墙外有两株树，四、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:#FF00

9、00;text-decoration:underline;注意：一定要按照 link，visited，hover，actived 的顺序书写。四、CSS 选择器v 6.群选择器（Group Selectors）selector1，selector2，selector3 property:value;说明：当多个选择符设置相同样式时，可以将选择符合并为一组。例：h2,h3 margin:1em 0;td,th border:solid 1px#000000;padding:5px;小结：v CSS 常用选择器的类型：通配选择器（*）类型选择器（body p li h1 h2 h3）ID 选择器（

10、#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 的继承性v 继承性是指：如果某个属性具有继承性，则属性作用在父元素的同时，也会作用于其包含的子元素。v 常用的具有继承性的属性：font-family font-size font-style line-height color text-align text-indent a:link a:vi

11、sited a:hover a:active五、CSS 的继承性#header font:20px/1.5“楷体_GB2312”;color:#000000;text-align:center;width:408px;height:200px;border:3px solid#993300;background:#FFF5E3 url(images/bg.jpg)no-repeat center bottom;聊城大学敬业 博学 求实 创新例：可继承的属性不可继承的属性六、层叠和特殊性v 选择符的特殊性分成四个等级：用行内样式具有最高特殊性。“ID选择符”比“类选择符”特殊。“类选择符”比“类

12、型选择符”特殊。选择符特殊性行内样式1000ID选择符100类选择符、伪类选择符10类型选择符1v 练习选择符特殊性style=“”1000#container#content 200#content.center 110#content p 101#content 100p.center 11.center 10p 1六、层叠和特殊性敬业 博学 求实 创新例：提问与解答环节Questions and answers结束语 CONCLUSION感谢参与本课程，也感激大家对我们工作的支持与积极的参与。课程后会发放课程满意度评估表，如果对我们课程或者工作有什么建议和意见，也请写在上边，来自于您的声音是对我们最大的鼓励和帮助，大家在填写评估表的同时，也预祝各位步步高升，真心期待着再次相会！感谢您的观看与聆听本课件下载后可根据实际情况进行调整