第2.2 CSS级联样式表 WEB开发技术教学课件.ppt

CSS编程技术 主要内容 1 CSS概述 2 加载CSS 3 CSS作用域 4 CSS属性 1 CSS概述 CSS（Cascading Style Sheets），级联样式表。 CSS是HTML技术的一种重要扩展，它在允许设置标记更多属性的同时，还允许为全局HTML标记设置属性，通过CSS技术可以进一步美化页面，为HTML文档提供美观而一致的外观。换句话说，CSS是一种用来装饰HTML的标记集合。 1998年5月12日，CSS level 2才成为W3C的标准。 任何支持HTML4.0或更高版本的Web浏览器都会支持大多数的CSS样式属性。 CSS样式规则 CSS样式规则组成为： 选择符 { 属性: 值 } 注：单一选择符的复合样式声明应该用分号隔开 如：选择符 { 属性1: 值1; 属性2: 值2 } 2 加载CSS 使用CSS样式定义HTML页面元素的外观和位置，可以有： 在线格式：用内联方式将style属性添加到许多HTML元素上，从而控制单独的某个标记的格式 全局格式：将CSS样式嵌入到STYLE块中或存储在外部级联式样式表（.css）文件中，从而控制网页中所有相同的标记格式。 CSS在线格式 用于控制单独的某个标记的格式。 方法： HTML标记 style=“属性：值 ; …” 如： HTML BODY H1 STYLE=COLOR:GREEN;FONT-SIZE:37PX; 北京大学，清华大学/H1 P STYLE=BACKGROUND:YELLOW;南京大学/P /BODY/HTML 例：css_style.htm CSS全局格式 在HEAD标记区中添加style… /style标记对，然后在其中指定某个HTML标记的格式。 如： HEAD STYLE TYPE=TEXT/CSS H1 { FONT-SIZE: LARGE; COLOR: RED } P { TEXT-INDENT: 20%; COLOR: BLUE } /STYLE /HEAD BODY H1中国，我的祖国！H1显示的/H1 P中国，我的祖国！P显示的 /BODY 例：css_head.htm CSS全局格式 在HEAD的style… /style标记对内，自定义一些格式名称，指定其格式，然后在HTML标记中引用时用“class=格式名”或“id=格式名”引用。 如： HEAD STYLE TYPE=TEXT/CSS .little { FONT-SIZE: LARGE; COLOR: RED } #text { TEXT-INDENT: 20%; COLOR: BLUE } /STYLE /HEAD BODY DIV class=little中国，我的祖国！DIV显示的/DIV P id=text中国，我的祖国！P显示的 /BODY 例：css_ClassId.htm CSS全局格式 设计级联样式文件，在HEAD区用LINK链接样式表。 如： 样式表文件mystyle.css（不需要使用style标记对） ： h1 {color:green;font-size:48px;} .back {background:yellow;} 网页文件： html head link rel=stylesheet href=css_global.css type=text/css /head body h1北京大学，清华大学/h1 p class=back南京大学，复旦大学/p /body/html 例：css_link.htm CSS全局格式 设计级联样式文件，在HEAD区的style中使用“@import url(…);”导入样式表。 如： 样式表文件mystyle.css（不需要使用style标记对） ： h1 {color:green;font-size:48px;} .back {background:yellow;} 网页文件： html head sty