Web前端开发案例教程（HTML5+CSS3） 第4章 CSS3基础.pptxVIP

第4章 CSS3基础 ※ 理解CSS语法； ※ 掌握CSS使用方式； ※ 掌握常用的CSS的属性； ※ 会熟练使用CSS常用属性设置文本样式。 4.1 案例：学院新闻详情页面 2 第4章 CSS基础 3 CSS功能强大，CSS的样式能实现比HTML更多的网页元素样式，几乎能定义所有的网页元素。现在所有漂亮的网页几乎都使用了CSS，CSS已经成为网页设计必不可少的工具之一。很多站点都为自己的网页添加了各种酷炫的CSS效果。 5 CSS（Cascading Style Sheet，层叠样式表）是由W3C的CSS工作组创建和维护的。它是一种不需要编译、可直接由浏览器执行的标记性语言，用于格式化网页的标准格式，它扩展了HTML的功能，使网页设计者能够以更有效的方式设置网页格式。 CSS能将样式的定义与HTML文件结构分离。对于由几百个网页组成的大型网站来说，要使所有的网页样式风格统一，可以定义一个CSS样式表文件，几百个网页都调用这个样式表文件即可。如果要修改网页的样式，只需修改CSS样式表文件就可以了。 6 CSS1 CSS3 伴随着HTML的发展，CSS的各种版本也应运而生。CSS的发展主要有三个版本，介绍如下： 7 行内式 链入外部样式表 内嵌式 行内式 说明： （1）通过style可以设置标记的样式。 （2）属性指的是CSS属性，不同于HTML标记的属性。一般用小写书写。 （3）属性和属性值之间用冒号分隔；多个属性之间用分号隔开，最后一个属性值后的分号可以省略。 语法格式：标记 style=属性：属性值； 属性：属性值；...内容/标记名 行内式：是通过标记的stye属性设置元素的样式 8 行内式 链入外部样式表 内嵌式 内嵌式 语法格式： head style type=text/css 选择器1{属性：属性值； 属性：属性值；...} /* 注释内容 */ 选择器2{属性：属性值； 属性：属性值；...} ...... /style /head 内嵌式也叫内部样式表，是将样式代码写在head头部标记中，并且用style标记定义。 9 行内式 链入外部样式表 内嵌式 内嵌式 说明： （1）style标记一般位于head标记中title标记之后。 （2）选择器用于指定CSS样式作用的HTML对象，有标记选择器、类选择器和ID选择器等。选择器的详细内容会在本章后面介绍。 （3）/*......*/为CSS的注释符号，用于说明该行代码的作用。注释内容不会显示在网页上。 10 行内式 链入外部样式表 内嵌式 内嵌式 内嵌式CSS样式只对其所在的HTML页面有效。因此，如果只有一个页面时，使用内嵌式。但如果网站有多个页面，则应使用外部样式表。 11 行内式 链入外部样式表 内嵌式 链入外部样式表 语法格式： head link href= 外部样式表文件路径 rel=stylesheet type=text/css / /head 外部样式表是指将所有的CSS样式放入一个以.css为扩展名的外部样式表文件中，通过link标记将外部样式表文件链接到HTML文件中。 12 说明： （1）link标记一般位于head标记中title标记之后。 （2）link标记必须指定以下三个属性： href：定义所链接的外部样式表文件的URL。 rel：定义被链接的文件是样式表文件。 type：定义所链接文档的类型为text/css，即CSS文档。 行内式 链入外部样式表 内嵌式 链入外部样式表 13 链接外部样式表的最大好处是同一个CSS样式表可以被多个HTML页面链接使用。最实用 该种方式实现了结构与表现的分离，使得网页的前期制作和后期维护都十分方便。 行内式 链入外部样式表 内嵌式 链入外部样式表 14 标记选择器 ID选择器 交集选择器 并集选择器 后代选择器 类选择器 标记选择器 说明：所有的HTML标记都可以作为标记选择器， 例如，body、h1~h6、p、ul、li、strong等。标记选择器定义的样式能自动应用到网页中的相应元素上。 语法格式：标记名称{属性：属性值； 属性：属性值；...} 通配符选择器 标记选择器是指用HTML标记名称作为选择器，为页面中的该类标记指定统一的CSS样式。 15 标记选择器 ID选择器 交集选择器 并集选择器 后代选择器 类选择器 标记选择器 通配符选择器 标记选择器最大的优点是能快速为页面中同类型的标记统一样式，同时这也是它的缺点，不能设计差异化样式。 p{ font-size:12px; /*设置文字大小*/ color:#666;　　　 /*设置文字颜色*