Style使用方法.docVIP

Style使用方法 　　一样式表基础 　　1 样式表中每一个条目由选择符（selector）和对应的规则组成，选择符通常是HTML元素名称，也可以是类（class）、标识符（id）、伪类（pseudo class，它们标示了超链接的不同状态）等。 　　2 将样式表（规则）添加到HTML文档中有3种方式： 　　① 外部样式表。 　　② 应用于整个文档的样式，位于head区，包括嵌入样式表和输入样式表。 　　③ 行内样式，通过绝大多数元素的style属性实现。 　　3 样式表内的注释用。通过将样式规则包围在HTML注释!-- --之间可以让那些不支持样式表技术的老浏览器也能正常工作而不是直接把样式规则显示在屏幕上。一般而言，浏览器会忽略不认识的元素和属性，但包围在元素之间的内容会显示出来。 　　4 每一条规则必须以分号；结束。 　　5 如果多个元素共享相同的样式规则，可以使用逗号将它们分组定义。这里分组的概念与分类（class）或标识符（id）的概念不同，前者设置的规则对整个文 档中所有的该元素都起作用，而后者只对该元素的一个子集（class或id相同的）起作用。当成组规则和其他规则都涉及到同一个元素时，它们将被组合起 来，以生成某个元素的完整的样式。 　　举例：成组规则的应用。 h1,h2,h3 {background : yellow; color : black;} h1 {font-size : 200%;} h2 {font-size : 150%;} h3 {font-size : 125%;} 　　二外部样式表 　　外部样式表通过在head区内使用link元素来引用，link元素有三大属性： 　　① rel：指明了链接关系，这里是stylesheet。 　　② href：指明了外部样式表的URL。 　　③ type：指明了样式表的类型，这里是text/css。（其他还有jss） 　　举例：外部样式表的引用方式。 head titleStyle Sheet Linking Example/title link rel = stylesheet href = \css\css1.css type = text/css /head 　　三应用于整个文档的样式表 　　31 嵌入样式表 嵌入样式表的使用方式是直接写在head区的style元素内，从而形成应用与整个文档的样式表。这种情况下只需要用到style元素的type属性。 　　举例：嵌入样式表的使用。 head style type = “text/css” !-- body { font: 10pt; font-family: Serif; color: black; background-color: white; } -- /style /head 　　32 输入样式表 　　输入样式表也是引用一个外部样式表，但不是通过link元素而是在style区内通过@import语法来引用：@import url（css的url地址）；可以在style元素内引用一些输入样式表，同时又指定一些只应用于本文档的样式。但是（Netscape）浏览器对输入样式表的支持还不普遍，所以建议使用link来引用外部样式表。 　　举例：输入样式表和嵌入样式表的联合使用。 head style type = “type/css” !-- @import url(corerules.css); @import url(linkrules.css); h1{ font : 24pt; font-family : Sans-Serif; color : black; text-align : center; } -- /style /head 　　四行内样式 　　绝大多数元素都有style属性。行内样式信息并不需要从不支持样式表的浏览器中隐藏，因为浏览器会忽略它们不理解的任何属性。 　　举例：行内样式的使用。 h1 style = “font-size: 48pt; font-family: Arial; color: green;”CSS1 Inline/h1 　　五样式规则的辖域 　　以上讨论了样式表的存放位置，现在讨论样式表的作用范围，两者既有联系又有区别：行内样式规则自然决定了它的影响范围是当前元素，而其他样式规则可以灵活地设置规则的作用范围。 　　51 简单规则 　　最简单的规则不妨称它们为文档规则和行内规则。前者可以应用到整个文档中出现的所有的某元素（如所有的p元素），后者只应用到当前元素。 　　52 id规则 　　使用id属性的元素除了可以作为超链接的目标外（类似name属性，在载入