网页设计 第7章css 共九章ppt.pptVIP

第七章 使用样式修饰页面 本章学习目标 熟悉CSS样式面板 掌握创建和使用一些常用的CSS样式的方法 掌握通过CSS样式管理和修饰页面的方法 1. CSS样式的创建 CSS的全称是Cascading Style Sheets，中文翻译为“层叠样式表”，简称样式表。 CSS可以扩展HTML的功能，美化页面 最基本的功能就是为了将样式的定义与HTML文件分离开来。 在CSS里面可以使用四种方法，将样式表添加到网页里面。分别为： 直接定义标记的STYLE属性（不建议） 定义内部样式表 嵌入外部样式表 连接外部样式表 在HTML中引入CSS的方法 行内式 h1 style=color:white;background-color:blue This is a line of Text./h1 内嵌式 style type=text/css h1{ color:white; background-color:blue } /style 在HTML中引入CSS的方法 导入式 style type=text/css @importmystyle.css; /style 链接式 link href=mystyle.css rel=stylesheet type=text/css / （1）直接定义标记的STYLE属性 body p style=color:redaaa/p h1 style=color:redbbb/h1 p ccc /p h1 ddd/h1 /body 实例1css_zhijiedingyicss.htm （2）定义内部样式表 在style元素中定义，其语法为： style type=“text/css” !-- 样式名称1{样式属性：属性值；样式属性：属性值；……} …… -- /style 实例201css_zidingyineibuyangshi.htm 其中的样式名称可以放在一起，表示相同的样式属性。 如样式名称1，样式名称2{样式属性：属性值；样式属性：属性值；……} 实例：202css_zidingyineibuyangshi.htm 可以使用CLASS与ID选择符，在CSS里定义样式 Clsss类选择符的使用语法： style type=“text/css” !- - 标记1.A1{样式属性：属性值；样式属性2：属性值；……} …… -- /style 实例211css_zidingyineibuyangshi.htm 利用ID指定选择符定义样式 用class时 “标记名称.样式名称” 用id定义时 “标记名称#样式名称” style type=“text/css” !- - 标记名称1#A1{样式属性：属性值；样式属性2：属性值；……} …… -- /style （3）嵌入外部样式表 将样式定义在独立的CSS文件中，当浏览器在进行HTML文件的读取时，将以嵌入的方式，复制一份样式表到这个HTML文件中。 嵌入外部样式表的语法： style type=“text/css” !- - @import url(“外部样式表的文件名称”); -- /style 实例213css_qianruwaibucss.css 213css_qianruwaibucss.htm (4) 连接外部样式表 当浏览器读取到HTML文件内设置格式的标记时，将会向所连接的外部样式表索取样式。 连接外部样式表的语法： link type=“text/css”rel=stylesheet href=“外部样式表的文件名称” 导入与链接样式表的区别 　　差别1：老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。　　link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。　　差别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。　　差别3：兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。　　差别4：使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。 内嵌式与外部样式定义方法 基本CSS选择器 复合选