ch5 页面设计.docVIP

【例5-2】下面是一个使用CSS对文字显示特性进行控制的HTML文件。 htmlheadtitleCSS示例/title meta http-equiv=Content-Type content=text/html; charset=gb2312 style type=text/css h1 {font-family:隶书, 宋体;color:#ff8800} .text {font-family: 宋体; font-size: 14pt; color: red} /style/head body topmargin=4h1这是一个CSS示例！h1 span class=text这行文字应是红色的。/span/body/html 【例5-3】先将样式定义存放于文件style.css（CSS样式文件的扩展名为.css），style.css文件中包含的内容为： h1 {font-family:隶书,宋体;color:#ff8800} p {background-color:yellow;color:#000000} .text {font-family: 宋体; font-size: 14pt; color: red} HTML文件css1.htm要引用该样式表，其文件内容为： htmlheadtitle链接外部CSS文件示例/title link rel=stylesheet type=text/css href=style.css media=screen/head body topmargin=4 h1这是一个链接外部CSS文件的示例！h1 span class=text这行文字应是红色的。/span p这一段的底色应是黄色。/p/body/html 【例5-4】 设有两个样式表文件s1.css，s2.css和一个HTML文件example_css.htm，内容分别如下： [文件s1.css] h2 {font-family:隶书;color:#ff8800} p {color:black;background-color:yellow;font-size:12pt;} [文件s2.css] h3 {font-family:宋体;color:blue;font-style:italic;} .text {font-family: 宋体; font-size: 10pt; color: red} [文件example_css.htm] htmlheadtitleCSS综合应用示例/title link rel=stylesheet type=text/css href=s1.css style type=text/css a:visited {color: #0000FF; text-decoration: none} a:link {font-family: 宋体; font-size: 9pt; color: #0000FF; text-decoration: none} a:hover {font-family: 宋体; font-size: 12pt; color: #003333; background-color: #FFCC99; text-decoration: none} @import URL(s2.css); /style/head body topmargin=4 h2这是一个CSS样式文件综合示例！/h2 span class=text这行文字应是红色的。/span p这一段的底色应是黄色。/p h3这行文字由s2.css中的样式控制，应是斜体、蓝色。/h3 a href=a.htm超链接/abrbr div style=font-size:14pt;color:darkred;CSS样式使用有四种方式：br 链接、引入、嵌入和局部引用/div/body/html 【例5-5】本例说明字体属性的用法。 htmlheadtitle字体样式示例/title style type=text/css body {font-family:宋体,隶书;} p {font-size:16pt;} p.weight_1{font-weight:100;} p.weight_9{font-weight:900;} p.font_i{font-style:italic;} span {font-size:14pt;} span.font_n {font-variant:normal;} span.font_v {font-variant:small-caps;} span.font_all {font: bold italic 30px/40px;} /style/head bodyp class=weight_