第9章级联样式表(CSS.ppt

第九章 级联样式表(CSS)技术 9.1 CSS简介 9.2 样式定义 9.3 使用样式 9.4 STYLE对象 9.5 CSS属性 9.1 CSS简介 级联样式表(Cascading Style Sheets,简称CSS)是一种格式化网页的标准方式，用于扩展HTML的功能。CSS定义可以应用到网页或页面元素的样式，CSS样式定义页面元素的显示方式和位置。 CSS样式可以作用于一个元素，也可以作用于具有指定HTML标记的所有元素，另外也可以作用于一组分配有指定class属性或id属性的元素。 CSS样式可以通过内嵌方式放置在单个HTML元素内，也可以在页面HEAD部分的STYLE 块内加以分组，或从单独的CSS样式表文件中导入。同一个外部样式表文件可链接到多个Web 页，从而使整个Web站点具有统一的外观。 【例9.1】在FrontPage环境下使用CSS技术控制P段落的显示格式,使所有文字的字形为“倾斜”。 【例9.1】 HTML HEADTITLE初次使用CSS样式/TITLE STYLE !-- p { font-style: italic } -- /STYLE/HEAD BODY P级联样式表 (CSS) 样式有助于为 HTML 文档提供美观而一致的外观。/P P任何支持 HTML 4.0 或更高版本的 Web 浏览器都会支持大多数的 CSS 样式属性。/P /BODY/HTML 9.2 样式定义 9.2.1 样式定义的格式???? 基本格式： selector {property1:value1;property2:value2;…} 每个样式定义都包含一个选择器，其后是该选择器的属性和值。 示例： H1 { font-size: large; color:green }H2 { font-size: small; color:blue }.product_name { font-family:隶书}#my_name { font-size: 14pt } 其中: H1和H2为选择器，用来修改HTML标记的默认格式设置。 选择器的属性和值包含在大括号内{ }，可以用分号(;)分隔多个属性。 选择器也可以是类选择器(如.product_name)、ID选择器(如#my_name)等。 在同一个样式定义中可以为多个选择器(用逗号分隔)定义相同的属性，如：H1,H2,H3 { color:red } 9.2.2 选择器的分类 选择器可以是HTML标记、具有上下文关系的HTML标记、类、ID和虚类。 HTML标记选择器 为HTML标记定义的样式将改变它的默认显示格式。 有上下文关系的HTML标记选择器 为位于某个标记内的标记设置特定的样式,如：ADDRESS I { color:red } /* 注意: ADDRESS和I之间以空格分隔 */ 类选择器 可以为HTML标记指定class属性。 为其指定样式,形如：.classname { property:value;…} 例如.web_name { font-style:italic; font-weight:bold } 【例9.2】使用类选择器控制页面中单词“Web”的显示样式为“倾斜、加粗”。 【例9.2】 HTMLHEADTITLE类选择器/TITLE STYLE !-- .web_name { font-style:italic; font-weight:bold } -- /STYLE/HEADBODY PCSS 样式可以通过内联方式放置在单个 HTML 元素内，也可以在 SPAN class=web_nameWeb/SPAN 页 HEAD 部分的 lt;STYLEgt; 块内加以分组，或从单独的 CSS 样式表文件中导入。同一个外部样式表文件可链接到很多 SPAN class=web_nameWeb/SPAN 页，从而使整个 SPAN class=web_nameWeb/SPAN 站点具有统一的外观。/P /BODY/HTML ID选择器 为HTML标记指定ID属性 为其指定样式,形如：#IDname { property:value;…} 例如：#web_name { font-style:italic; font-weight:bold } 【例9.3】使用ID选择器控制显示样式为“倾斜、加粗、大字体”。 【例9.3】 HTMLHEADTITLEID选择器/TITLE STYLE !-- #css_name { font-size: large; font-style: italic; font-weight: bold} -- /ST