第1章 HTML+CSS基础知识.ppt

1.6.1 样式表定义 （2）类选择符定义。 标记符 · 类名{ 规则表 } · 类名{ 规则表 } 前者为特定的标记定义的类，标记符和类名之间为“.”。 后者为定义的一般类，类名前为“.”。只要标记的class属性设置为该类名都可采用这个样式。这样，相同的标记使用不同的样式，不同的标记使用相同的样式。例如： p.back{font-family: 隶书, 宋体; color:#FF8800} .heti {font-family: 黑体; font-size: 20pt; color: #000000; } 伪类是特殊的类，可区别标记的不同状态，能自动地被支持CSS的浏览器所识别。伪类定义格式为： 选择符: 伪类{ 规则表 } 例如： a:visited{color: #0000FF; text-decoration: none} a:link{font-family: 宋体; font-size: 9Pt; color:#0000FF; text-decoration: none} a:hover{font-family: 宋体; fora-size: 12pt; color: #008000；background-color: #FF0088; text-decoration: none } 1.6.1 样式表定义 （3）id选择符定义。 #id名{ 规则表 } id选择符用于定义一个独有的样式，以“#”打头。例如： #id1 {color: blue; } id选择符与类选择符的区别在于id选择符在一个HTML页面（文件）中只能被引用一次，而类选择符可以多次被引用。 （4）上下文选择符。 上下文选择符定义嵌套标记的样式。由于应用场合十分特殊，故用得很少。 1.6.1 样式表定义 3．CSS样式表定义 （1）在HTML文档中定义。 样式表定义的内容可以利用style标记括起，放在head标记范围内。嵌入在HTML文档中样式表的样式当然只会影响当前的HTML文档。 1.6.1 样式表定义 【例1.8】 CSS示例。 输入下列代码，以EX1_8_CSS1.htm作为文件名保存： html headtitleCSS示例/title meta http-equiv=Content-Type content=text/html; charset=gb2312 style type=text/css p {font-family: 宋体; color: green; background-color: yellow; font-size: 9pt; } h1,h2 {font-family: 隶书, 宋体; color:#FF8800} .heti {font-family: 黑体; font-size: 20pt; color: #000000; } #id1 {color: blue; } /style /head body topmargin=4 h1内容H1样式显示/h1 h2内容H2样式显示/h2 h3 id=id1内容id1样式显示/h3 h4H4内容默认样式显示/h4 p内容P样式显示/p p class=“heti”内容heti样式显示/p /body /html 1.6.1 样式表定义 用浏览器打开文档，将显示如图1.9所示的页面。 1.6.1 样式表定义 （2）独立的CSS样式文件中定义。 样式表定义的内容一般放在一个独立的CSS样式文件中，注意CSS样式文件中不包含style标记，因style标记是HTML标记，而不是CSS样式。 例如，定义样式表的内容放在EX1_9_style1.css文件中： P {font-family: 宋体; color: green; background-color: yellow; font-size: 9pt; } h1,h2 {font-family: 隶书, 宋体; color:#FF8800} .heti {font-family: 黑体; font-size: 20pt; color: #000000; } #id1 {color: blue; } 1.6.1 样式表定义 4．独立的CSS样式文件中定义的引用 （1）HTML文档在头部用link标记链接CSS样式文件。 引用样式文件的HTML文档在头部用link标记链接CSS样式文件，link标记主要使用属性rel、href、type等。通常rel=stylesheet，type=text/css, href属性指出CSS样式文件的位置和文件名。 【例1.9】 HTML文档链接样式文件EX1_9_style1.css。 输入下列内容，以EX1_9_ CSS2.htm作为文件名保存： ht