网页设计与制作 第3章 CSS技术基础

《网页设计与制作 第3章 CSS技术基础》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、通过本章学习，应该掌握以下内容：什么是CSSCSS样式和常用的selector在网页中使用CSS的方法CSS的各种属性第3章CSS技术基础3.1CSS简介CSS（CascadingStyleSheet，层叠样式表）技术是一种格式化网页的标准方式，它通过设置CSS属性使网页元素获得各种不同效果。CSS不是一种程序设计语言，而只是一种用于网页排版的标识性语言，是对现有HTML语言功能的补充和扩展。CSS的主要功能是通过对HTML选择器进行设定，来实现对网页中的字体、字号、颜色、背景、图像记其他元素的控制，使网页能够完全按照设计者的要求来显示。CSS的定义由三部分构成：选择符select

2、or、属性property和属性值value。其基本格式如下：selector{propertyl：valuel；property2：value2；……}其中selector（选择符）表示需要应用样式的内容，property表示由CSS标准定义的样式属性，value表示样式属性的值。3.2CSS样式3.2.1CSS样式表组成3.2.2几种常用的selectorHTML标记符是最典型的selector类型，网页设计者可以为某个或某些具体的HTML元素应用样式定义。如：BODY{color：black}如果属性的值是多个单词组成的，必须在值前加上双引号。如果需要对一个selector指

3、定多个属性时，应使用分号将所有的属性和值分开。1．HTML标记符selector如果需要为位于某个标记符内的标记符设置特定的样式规则，则应将selector指定为具有上下文关系的HTML标记符。例如，如果只想使位于H1标记符内的A标记符具有特定的属性，则应使用以下格式：H1A{color：blue}注意H1和A之间以空格分隔。2．具有上下文关系的HTML标记符selector可以使用类（class）来为单一HTML标记符创建多个样式。要想将一个类包括到样式定义中，可将一个句点和一个类名称添加到selector后，如下所示：selector.classname{property：va

4、lue；……}可以使用任何名称命名类，但通常使用具体含义的名称。3．用户定义的类selector4．用户定义的IDselector当网页设计者想在整个网页或几个页面上多处以相同样式显示标记符时，除了使用类定义一个通用类样式以外，还可以使用ID定义样式。ID选择符的应用和类选择符类似，只要把CLASS换成ID即可。要将一个ID样式包括在样式定义中，应用一个#号作为ID名称的前缀，如下所示：#IDname{property：value……}定义了ID样式后，需要在引用该样式的标记符内使用id属性。可以单独对某种元素包含关系定义的样式表，元素1里包含元素2，这种方式只对在元素1里的元素2

5、定义，对单独的元素1或元素2无定义，例如：TABLEA{font-size：10px}使用上规则后，在表格内的链接改变了样式，文字大小为10像素，而表格外的链接的文字仍为默认大小。5．包含selector层叠性，即继承性，样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。不同的选择符定义相同的元素时，要考虑到不同的选择符之间的优先级。ID选择符，类选择符和HTML标记选择符，因为ID选择符是最后加在元素上的，所以优先级最高，其次是类选择符。如果想超越这三者之间的关系，可以在定义样式时加上!important，来提升样式表的优先权。6．样式表的层叠性selec

6、tor7．虚类selector虚类可以看作是一种特殊的类选择符，是能被支持CSS的浏览器自动识别的特殊选择符。它最大的用处就是可以在不同状态下定义不同的样式超链接效果。将虚类和类组合起来用，就可以在同一个页面中做几组不同类型的链接效果了。所谓不同类型超链接，是指访问过的（A:visited）、未访问过的（A:link）、激活的（A:active）以及鼠标指针悬停于其上（A:hover）的这4种状态的超链接。8．注释selector用户可以在CSS中插入注释来说明用户代码的意思，注释有利于用户或别人以后编辑和更改代码时理解代码的含义。在浏览器中，注释是不显示的。与HTML注释一样，C

7、SS注释也以“/*”开头，以“*/”结尾。3.3在网页中使用CSS3.3.1在标记符中直接嵌套样式信息在标记符中直接嵌套样式信息又称为“局部引用”，即将样式直接嵌套在HTML标记里使用的。用这种方法，可以很简单的对某个元素单独定义样式。使用style属性可以在HTML标记符中直接嵌入样式定义，如下所示：<标记符style："propertyl：valuel；property2：value2；……">如果能将同类的样式都统一定义，然后再具体应用于网页中的元素，那么就能体