《使用HTML5实现响应式布局》第五章-CSS3基础-理论学习资料.pptxVIP

第五章CSS3基础

理论内容CSS3简介CSS3语法在页面添加CSS3选择符CSS3继承性CSS3优先级

1.CSS简介CSS是CascadingStyleSheet的缩写，可以翻译为“层叠样式表”或“级联样式表”，简称为“样式表”。本书介绍的CSS版本是CSS3。它可以定义于HTML5文档的标签中，也可以在外部编写CSS3文件（.css），附加到HTML5文档中作为外部引用文件引用CSS前的百度首页引用CSS后的百度首页

2.CSS3语法CSS3的基本语法：选择符{属性:值;}body{color:black;}定义body标签的样式这段代码定义了页面主体部分的样式，color属性表示主体部分文字的颜色属性，black是color属性的属性值。因此，这段样式代码实现的功能是将页面中的文字显示为黑色。

3.在页面添加CSS3在HTML5文档中插入样式表的方法有链入外部样式表文件内部样式表定义内嵌样式

链入外部样式表文件链入外部样式表是将样式表单独保存为一个CSS文件（*.css），然后在HTML5文档中用link标签链接link标签必须放置于HTML5文档的head和/head之间的区域内linkrel=stylesheettype=text/csshref=样式表文件的地址使用的是外部样式表引用的文件类型是样式表文件CSS文件的地址

链入外部样式表文件在DreamweaverCC中新建HTML5文件和CSS3文件，将CSS3文件保存为style.csshr{ border:2pxdashed#5151A2}p{ color:red; font-size:36px; font-family:宋体;}设置边框样式设置文字颜色设置文字字体设置文字字号

链入外部样式表文件CSS3常见的单位和标识见下表单位说明px像素（pixel）em类似于当前对象内文本的字体尺寸#rrggbb颜色单位Colorname颜色名称

链入外部样式表文件编写HTML5代码，并链接style.css文件headlinkhref=style.cssrel=stylesheettype=text/css/headbodyp通过使用CSS来提升工作效率！/phrp开始学习CSS！/p/body链入外部样式表

styletype=text/css选择符{样式属性:属性值;样式属性:属性值;……}选择符{样式属性:属性值;样式属性:属性值;……}……/style内部样式表定义内部样式表是将样式表的内容直接放置于HTML5文档的body和/body区域中，通过style标签定义

内部样式表headstyletype=text/css/*省略*//style/headbody!--省略--/body内部样式表定义内部样式表

内嵌样式内嵌样式是混合在HTML5标签中定义的，用这种方法可以对某个元素直接定义样式。内嵌样式的使用是直接在HTML5标签中加入style参数，其内容即为CSS3的属性和属性值html标签style=样式属性:属性值;样式属性:属性值;……style参数引号的内容类似于样式表大括号中的内容。每个样式属性之间用分号间隔

内嵌样式内嵌样式bodypstyle=color:red;font-size:36px;font-family:宋体;通过使用CSS来提升工作效率！/phrstyle=border:2pxdashed#5151A2p开始学习CSS！/p/body内嵌样式内嵌样式

4.选择符常用的CSS3选择符包括id选择符元素选择符类选择符选择符组包含选择符伪类选择符

选择符id选择符对于网页而言，其中的每个标签都可以使用id属性，指定标签的标识。在一个页面中每个id只能使用一次。在CSS3样式中，id选择符使用#标识。使用id选择符有唯一性的指派含义，有助于代码的阅读及使用#id名称{样式属性:属性值;}#top{color:red;}Id=top的文字为红色

选择符元素选择符以HTML5标签作为选择符，实现了让同类标签共享相同样式的效果标签名称{样式属性:属性值;}h1{color:red;}h1的文字为红色

选择符类选择符可以作用于一个或多个元素，使这些元素有相同的样式。需要为HTML5标签设置class属性.类名称{样式属性:属性值;}.warning{color:red;}Class=warning的文字为红色

选择符选择符组将同样的定义应用于多个选择符。可以将选择符以逗号分隔的方式并为一个样式组.选择符1,选择