Web技术应用基础_第五章解读.ppt

* 5.4 样式表应用案例 使用用CSS样式的4种方式显示界面 第5章 CSS * 1.直接定义style属性 例5.2 htmlhead title直接定义HTML标记中的style属性/title /head body h1 style=color:green;text-align:center;font-style: italic;font-family:隶书;font-size:x-large; 用四种方式将样式表功能应用到Web页面中/h1 /body/html 第5章 CSS 例5.2 * 2.定义内部样式表 htmlhead title定义内部样式表/title style type=text/css /*定义样式*/ !-- h1{color:green; text-align:center; font-style:italic; font-family:隶书; font-size:x-large; } -- /style /head body h1用四种方式将样式表功能应用到Web页面中/h1 /body/html 例5.3 第5章 CSS * 3.嵌入外部样式表 第5章 CSS * ? style1.css 保存文字的其它样式 h1 { text-align:center; font-style:italic; font-family:隶书; font-size:x-large; } ? style2.css 保存文字的颜色 h1{ color:green;} 第5章 CSS * html head title嵌入外部样式表/title style type=text/css /*定义样式*/ !-- @import url(style1.css); @import url(style2.css); ? /style /head body h1用四种方式将样式表功能应用到Web页面中/h1 /body /html 例5.4 第5章 CSS * 4.链接外部样式表 htmlheadtitle链接外部样式表/title link rel=stylesheet type=text/css href=style1.css link rel=stylesheet type=text/css href=style2.css /head body h1用四种方式将样式表功能应用到Web页面中/h1 /body /html 第5章 CSS 例5.5 * * 样式的混合使用 外部样式文件 对于某个HTML标签： 1）如果有多种样式，如果规定的样式没有冲突，则叠加； 2）如果有冲突，则最先考虑行内样式表显示，如果没有，再考虑内嵌样式显示，如果还没有，最后采用外面样式表显示，否则就按HTML的默认样式显示； 内部样式 行内样式 某个HTML标签 * CSS实例一：设置背景颜色 html head style type=text/css body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)} p.no2 {background-color: gray; padding: 20px;} /style /head body h1这是标题 1/h1 h2这是标题 2/h2 p这是段落/p p class=no2这个段落设置了内边距。/p /body /html * CSS实例二：设置文本的背景颜色 html head style type=text/css span.highlight { background-color:yellow } /style /head body p span class=highlight这是文本。/span 这是文本。span class=highlight这是文本。/span /p /body /html * CSS实例三：背景图片 html head style type=text/css body { background-image: url(eg_bg_03.gif); background-repeat: no-repeat } /style /head body /body /html * CSS实例