第10章 使用css格式化网页

第10章 使用css格式化网页

ID:33937658

大小:2.81 MB

页数:102页

时间:2019-03-01

第10章 使用css格式化网页_第1页
第10章 使用css格式化网页_第2页
第10章 使用css格式化网页_第3页
第10章 使用css格式化网页_第4页
第10章 使用css格式化网页_第5页
资源描述:

《第10章 使用css格式化网页》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库

1、CompanynameWEB编程基础第10章使用CSS格式化网页清华大学出版社主要内容•CSS在页面风格设计中的作用•用多个HTML页面调用一个CSS文件•用DIV+CSS的方式来写HTML页面•用CSS控制背景图片的显示方式•用CSS设置滚动条的样式•用CSS设置滚动条的样式10.1理解CSS10.1.1CSS的简介10.1.2CSS构造CSS的简介CSS的英文名为CascadingStyleSheet,译成中文的意思为层叠样式表。样式就是格式,对于网页来说,像网页显示的文字的大小、颜色以及图

2、片位置以及段落、列表等,都是网页显示的样式。层叠就是指当HTML文件引用多个CSS样式时,如果CSS的定义发生冲突,浏览器将依据层次的先后顺序来应用样式,如果不考虑样式的优先级时,一般会遵循“最近优选原则”。CSS能将样式的定义与HTML文件内容分离。只要建立定义样式的CSS文件,并且让所有的HTML文件都来调用CSS文件所定义的样式,如果要改变HTML文件中任意部分的显示风格时,只要把CSS文件打开,更改样式就可以了。CSS构造构造样式规则–样式表的每个规则都有两个主要部分:选择符(selecto

3、r)和声明(declaration)。选择器决定哪些因素要受到影响,声明由一个或多个属性值对组成。基本语法:–selector{属性:属性值[[;属性:属性值]…]}语法说明:–selector表示希望进行格式化的元素;–声明部分包括在选择器后的大括号中;–用“属性:属性值”描述要应用的格式化操作;–声明中的多个属性值对之间必须用分号隔开。CSS构造在样式规则中添加注释–在样式表规则中添加注释有助于记住复杂的样式规则的作用,应用的范围等,便于进行维护和应用。例如,下面是一个添加注释的样例。–/*此标记

4、应用在文档中*/h1{color:red;background:yellow;}–注意:注释不能嵌套。CSS构造继承–继承是CSS的一个主要特征,许多CSS属性不但影响选择符所定义的元素,而且会被这些元素的后代继承。例如一个body定义了的颜色值也会应用到段落的文本中。下面举例说明。CSS的继承性

5、y>

CSS的继承性

10.2样式表的定义与使用在CSS里可以使用四种不同的方法,将样式表的功能加到网页里。–直接定义标记的style属性–定义内部样式表–嵌入外部样式表–链接外部样式表定义标记的style属性将CSS样式定义在HTML标记内的,这是最简单的样式定义方法。基本语法:–<标记style="样式属性:属性值;样式属性:属性值;„">语法说明:–标记:HTML标记,如body、table、p等;–标记的style定义只

6、能影响标记本身;–style的多个属性之间用分号分割;–标记本身定义的style优先于其他所有样式定义。直接定义标记的style属性此行文字被style属性定义为蓝色显示

此行文字没有被style属性定义

示例代码第一个段落标记被直接定义了style属性,此行文字将显示18像

7、素大小,蓝色字体;而第二个段落标记没有被定义,将按照默认设置来显示文字样式。结果如图10-2所示。定义内部样式表内部样式表允许在他们所应用的HTML文档的顶部设置样式,后在整个HTML文件中直接调用使用该样式的标记。基本语法:–

8、yle>定义内部样式表语法说明:–