一.样式表基础 1. 样式表中每一个条目由选择符(selector)和对应的规则组成,选择符通常是HTML元素名称,也可以是类(class)、标识符(id)、伪类(pseudo class,它们标示了超链接的不同状态)等。 2. 将样式表(规则)添加到HTML文档中有3种方式: ① 外部样式表。 ② 应用于整个文档的样式,位于区,包括嵌入样式表和输入样式表。 ③ 行内样式,通过绝大多数元素的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%;} 二.外部样式表 外部样式表通过在区内使用元素来引用,元素有三大属性: ① rel:指明了链接关系,这里是stylesheet。 ② href:指明了外部样式表的URL。 ③ type:指明了样式表的类型,这里是text/css。(其他还有jss) 举例:外部样式表的引用方式。 三.应用于整个文档的样式表 3.1 嵌入样式表 嵌入样式表的使用方式是直接写在head区的style元素内,从而形成应用与整个文档的样式表。这种情况下只需要用到style元素的type属性。 举例:嵌入样式表的使用。 3.2 输入样式表 输入样式表也是引用一个外部样式表,但不是通过link元素而是在style区内通过@import语法来引用:@import url(css的url地址);可以在 四.行内样式 绝大多数元素都有style属性。行内样式信息并不需要从不支持样式表的浏览器中隐藏,因为浏览器会忽略它们不理解的任何属性。 举例:行内样式的使用。 CSS1 Inline五.样式规则的辖域 以上讨论了样式表的存放位置,现在讨论样式表的作用范围,两者既有联系又有区别:行内样式规则自然决定了它的影响范围是当前元素,而其他样式规则可以灵活地设置规则的作用范围。 5.1 简单规则 最简单的规则不妨称它们为文档规则和行内规则。前者可以应用到整个文档中出现的所有的某元素(如所有的 元素),后者只应用到当前元素。 … ,则可以如下引用:Go to SecondParagraph 或者 5.3 class规则 和id属性一样,class属性也是HTML核心属性之一,多数元素都有该属性。class属性定义了一个元素所属类的名称。class取值不要求唯一,同一类元素的多个实例、多个不同类的元素都可能属于同一个类。使用类可以显著地减少文档中必需的样式规则的数量。样式规则中有两种引用class的格式: ① 为所有该类的元素设置样式:.类名{样式规则;} ② 为属于该类的所有X元素设置样式:X.类名{样式规则;} 举例:class规则的使用。 5.4 伪类(pseudo-classes)和伪元素(pseudo-elements) 5.4.1 伪类 一组专门的预定义的类称为伪类,主要用来处理超链接的状态。超链接文字的状态可以通过伪类选择符+样式规则来控制。伪类选择符包括: ① a:link:未访问链接 ② a:visited:已访问链接 ③ a:active:激活时(链接获得焦点时)链接的颜色 ④ a:hover:鼠标移到链接上时 一般a:hover和a:visited链接的状态(颜色、下划线等)应该是相同的。前三者分别对应body元素的link、vlink、alink这三个属性。四个“状态”的先后过程是:a:link ->a:hover ->a:active ->a:visited。另外,a:active不能设置有无下划线(总是有的)。 举例:伪类的常见状态值 5.4.2 伪元素 两个伪元素::first-letter和:first-letter。它们常常和像 这样的元素引导的一段文字一起使用,用来影响其中首字母或者首行的显示,如p:first-letter和p:first-line。 元素内的元素都有黄色的背景颜色。 元素指定规则,这相对于通过class规则指定的规则具有优先权,而class规则相对于为 元素自身指定的规则有优先权。相对于应用于整个文档的样式或链接进来的外部样式,通过一个style属性指定的行内样式是更重要的。考虑究竟哪一个规则将最终生效的简单方法是:越专门的规则优先级越高,和标记位置越近的规则优先级越高。 元素最终将以红色、24点大小显示。 |
|小黑屋|最新主题|手机版|微赢网络技术论坛 ( 苏ICP备08020429号 )
GMT+8, 2024-9-30 15:30 , Processed in 0.177321 second(s), 12 queries , Gzip On, MemCache On.
Powered by Discuz! X3.5
© 2001-2023 Discuz! Team.