资源描述:
《4.4 CSS样式表》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库。
1、4.4CSS样式表运用学习目标理解CSS样式表对网页布局的作用掌握CSS样式表的运用方法样式表设计样式表定义及引用相关的标记和属性样式的继承和作用顺序CSS属性CSS滤镜一、样式表定义及引用CSS,CascadingStyleSheets,层叠样式表,是W3C协会为弥补HTML在显示属性设定上的不足而制定的一套扩展样式标准。CSS标准中重新定义了HTML中原来的文字显示样式,并增加了类、层等新概念,可以对文字重叠、定位等,提供了更为丰富多彩的样式;同时CSS可进行集中样式管理。CSS还允许将样式定义单独
2、存储于样式文件中,这样可以把显示的内容和显示样式定义分离,便于多个HTML文件共享样式定义。一个HTML文件也可以引用多个CSS样式文件中的样式定义。所谓"层叠",实际上就是将显示样式独立于显示的内容,进行分类管理,例如分为字体样式、颜色样式等,需要使用样式的HTML文件进行套用即可。1.样式表定义CSS样式表定义的基本语法为:选择符(Selector){规则(Rule)表}选择符是指要引用样式的对象,它可以是一个或多个HTML标记(各个标记之间以逗号分开),如h1;也可以是类选择符(如.text)、I
3、D选择符或上下文选择符。规则表是由一个或多个样式属性组成的样式规则,各个样式属性间由分号隔开,每个样式属性的定义格式为:样式名:值样式定义中可以加入注解,格式为:/*字符串*/【例】使用CSS控制文字显示特性2.样式引用(1)链接到外部样式表将样式表定义为一个独立的CSS样式文件;使用该样式表的HTML文件在头部用标记链接到CSS样式文件。【例】在HTML文件头部使用多个标记就可以链接到多个外部样式表。标记之间,利用CSS的@import声明引入外部样式表
5、。格式为:例如引入方式:引入外部样式表的使用方式链接方式:链接到外部样式表的使用方式引入方式与链接方式的区别:引入方式在浏览器下载HTML文件时就将样式文件的全部内容拷贝到@import关键字所在位置,以替
6、换该关键字。链接方式在浏览器下载HTML文件时并不进行替换,而仅在HTML文件体部需引用CSS样式文件中的某个样式时,浏览器才链接样式文件,读取需要的内容。(3)嵌入样式表利用