第11章 CSS样式表基础VIP免费

本书编委会编著实例版实例版第11章CSS样式表基础11.1CSS的概述11.2CSS的使用11.3插入CSS样式表11.4编写CSS文件HTML/CSS/JavaScript标准教程实例版（第2版）HTML/CSS/JavaScript标准教程实例版（第2版）第章1111.1CSS的概述11.1.1CSS基本概念11.1.2CSS的特性HTML/CSS/JavaScript标准教程实例版（第2版）第章1111.1CSS的概述•概述CSS的作用内容和样式的分离，使得网页设计趋于明了、简洁。弥补HTML对标记属性控制的不足，如：背景图像重复的控制和标题大小的控制等。在HTML中可控制的标题仅有7级，即h1~~h7，而利用CSS可以任意设置标题大小。精确控制网页布局，如行间距、字间距、段落缩进和图片定位等属性。提高网页效率，因为多个网页同时应用一个CSS样式，即减少了代码的下载，又提高了浏览器的浏览速度和网页的更新速度。如图11-1中的网页，内容已定，如果CSS样式不满意，可以随便修改，丝毫不会对内容有影响，而且这个CSS样式，也可以同时用到多个网页内容上。CSS还有好多特殊功能，如鼠标指针属性控制鼠标的形状和滤镜属性控制图片的特效等。HTML/CSS/JavaScript标准教程实例版（第2版）第章1111.1.1CSS基本概念CSS（CascadingStyleSheet）即层叠样式表，简称样式表。要理解层叠样式表的概念先要理解样式的概念。样式就是对网页中的元素（字体、段落、图像、列表等）属性的整体概括，即描述所有网页对象的显示形式（例如，文字的大小、字体、背景及图像的颜色、大小等都是样式）。层叠，就是指当HTML文件引用多个CSS文件时，如果CSS文件之间所定义的样式发生了冲突，将依据层次的先后来处理其样式对内容的控制。HTML/CSS/JavaScript标准教程实例版（第2版）第章1111.1.2CSS的特性1．继承性2．层叠性HTML/CSS/JavaScript标准教程实例版（第2版）第章1111.2CSS的使用11.2.1CSS的基本语法11.2.2CSS选择符类型11.2.3选择符的优先级HTML/CSS/JavaScript标准教程实例版（第2版）第章1111.2.1CSS的基本语法•CSS基本语法selector{property:value;property:value……property:value}HTML/CSS/JavaScript标准教程实例版（第2版）第章1111.2.1CSS的基本语法•语法说明语法中selector代表选择符，property代表属性，value代表属性值。HTML/CSS/JavaScript标准教程实例版（第2版）第章1111.2.1CSS的基本语法•语法说明选择符包括多种形式，所有的HTML标记都可以作为选择符，如body、p、table等都是选择符。但在利用CSS的语法给它们定义属性和值时，其中属性和值要用冒号隔开。HTML/CSS/JavaScript标准教程实例版（第2版）第章1111.2.1CSS的基本语法•语法说明HTML/CSS/JavaScript标准教程实例版（第2版）第章1111.2.1CSS的基本语法•语法说明HTML/CSS/JavaScript标准教程实例版（第2版）第章1111.2.1CSS的基本语法•语法说明HTML/CSS/JavaScript标准教程实例版（第2版）第章1111.2.2CSS选择符类型1．类选择符用类选择符可以把相同的元素分类定义成不同的样式。在定义类选择符时，在自定义类名称的前面加一个句点（.）。类选择符语法：标记名.类名{样式属性:取值;样式属性:取值;…}HTML/CSS/JavaScript标准教程实例版（第2版）第章1111.2.2CSS选择符类型2．id选择符在HTML文档中，需要唯一标识一个元素时，就会赋予它一个id标识，以便在对整个文档进行处理时能够很快地找到这个元素。而id选择符就是用来对这个单一元素定义单独的样式。其定义方法与类选择符大同小异，只需要把句点（.）改为井号（#），而调用时需要把class改为id。id选择符语法：标记名#标识名{样式属性:取值;样式属性:取值;…}HTML/CSS/JavaScript标准教程实例版（第2版）第章1111.2.2CSS选择符类型3．包含选择符包含选择符是对某种元素包含关系（如元素1里包含元素2）定义的样式表。这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义。HTML/CSS/JavaScript标准教程实例版（第2版）第章1111.2.2CSS选择符类型4．伪类伪类不属于选择符，它是让页面呈现丰富表现力的特殊属性。之所以称为“伪”，是因为它指定的对象在文档中并不存在，它们指定的是元素的某种状态。应用最为广泛的伪类是链接的4个...