web技术基础-第三章.pptVIP

CSS内容介绍 CSS概述 CSS设置方式 CSS语法 样式规则注释和样式规则优先级 CSS的属性分类介绍 CSS编程技术 CSS（Cascading Style Sheets）中文翻译为层叠样式表单，简称样式单，是近几年才发展起来的新技术 1998年5月12日，CSS level 2才成为W3C 的标准，它是一组样式，样式中的属性在HTML元素中依次出现，并显示在浏览器中。样式可以定义在HTML文档的标志里，也可以在外部附加文档作为外加文档。CSS的功能无比强大，W3C也极力向世界推广这一先进技术。 CSS概述 简单来说，HTML是一种标记语言，而CSS是这种标记的一种重要扩展，可以进一步美化页面。换句话说，CSS是一种用来装饰HTML的标记集合。 CSS样式规则组成为：选择符 { 属性: 值 }，单一选择符的复合样式声明应该用分号隔开，如：选择符 { 属性1: 值1; 属性2: 值2 }。 CSS可以用来精确的控制页面里每一个元素的字体样式、背景、排列方式、区域尺寸、边框等。使用CSS能够简化网页的格式代码，加快下载显示的速度，外部链接样式可以同时定义多个页面，大大减少了重复劳动的工作量。 样式表的使用结构  多个网页文件共享样式文件  多个样式文件套用在一个网页文件上 HTML CSS 样式文件N CSS 样式文件1 CSS设置方式 设置方式 举 例 特 点 内联样式 body h1 style=font-family:宋体;font-size:12pt;color:blue在这里使用了H1标记/h1 /body 灵活，简单方便。 嵌入样式 head style type=text/css h1 {font-family:宋体;font-size:12pt;color:blue} /style /head body h1在这里使用了H1标记/h1 /body 一个样式可以在一个页面多次应用。 外部样式 head link rel=stylesheet href=h1.css type=text/css /head bodyh1在这里使用了H1标记/h1/body h1.css h1 {font-family:宋体;font-size:12pt;color:blue} 需要有一个外部的样式表文件(.css)，可以为多个网页所共同引用，即减少代码，又可以做到统一页面风格。 样式表应用案例 使用用CSS样式的4种方式显示界面 CSS 1.直接定义style属性 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 CSS 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 CSS 3.嵌入外部样式表 CSS  style1.css 保存文字的其它样式 h1 { text-align:center; font-style:italic; font-family:隶书; font-size:x-large; }  style2.css 保存文字的颜色 h1{ color:green;} 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 4.链接外部样式表 htmlheadtitle链接外部样式表/title link rel=stylesheet type=text/css href=style1.css li