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

  • 8
  • 0
  • 约1.06万字
  • 约 87页
  • 2017-02-16 发布于江西
  • 举报
第七章 使用样式修饰页面 本章学习目标 熟悉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选择器 复合选

文档评论(0)

1亿VIP精品文档

相关文档