Web应用基础 Lab3:CSS-层叠样式表 2009.3.6 准备知识 1对文档应用样式 样式可以通过多种方式指定。样式可以位于HTML的<head>标签中,也可以存放在外部的 CSS文件中。一个HTML可以链接多个外部的样式表 当对于一个HTML元素通过多种方式指定了多个重复样式的时候,最终那一种会生效呢?例 如我们在多个样式表中对<body>元素定义了不同背景色,那么最终呈现出的颜色应该是 那一种呢? 通常来讲,我们可以说样式通过下面的规则“层叠”为一个新的虚拟的样式表。为HTML元 素指定样式的方法共有4中,分别是 1.外部样式:在<head>元素中的<lnk>元素中指定的CSS文件 2.外部样式:在<head>元素中的<stye>元素导入指定的CSS文件 3.内部样式:在<head>元素中的<stye>元素中编写CSS代码 4.内联样式:在元素的 style属性中编写CSS代码 上面4种方式优先级如下:内联样式(4.)优先级最高;<link>样式(1.)和<stye>样式(2., 3.)按照文档中的排列顺序,越后优先级越高:<stye>内,内部样式(3.)优先级高于外部 样式(2.)。如果以同种方式引入了多个样式,则列在后面的样式优先级较高。如果多个样式 表定义的样式没有冲突,那么这些样式将全部得以保留。 上面所述的应用样式的4种方法具体方法如下: 1.链接外部样式表: <head> <link rel="stylesheet" href="style. css"type="text/css"/> </head>
Web应用基础 Lab 3: CSS – 层叠样式表 2009.3.6 准备知识 1 对文档应用样式 样式可以通过多种方式指定。样式可以位于HTML的<head>标签中，也可以存放在外部的 CSS文件中。一个HTML可以链接多个外部的样式表。 当对于一个HTML元素通过多种方式指定了多个重复样式的时候，最终那一种会生效呢？例 如我们在多个样式表中对<body>元素定义了不同背景色，那么最终呈现出的颜色应该是 那一种呢？ 通常来讲，我们可以说样式通过下面的规则“层叠”为一个新的虚拟的样式表。为HTML元 素指定样式的方法共有4中，分别是： 1. 外部样式：在<head>元素中的<link>元素中指定的CSS文件 2. 外部样式：在<head>元素中的<style>元素导入指定的CSS文件 3. 内部样式：在<head>元素中的<style>元素中编写CSS代码 4. 内联样式：在元素的style属性中编写CSS代码 上面4种方式优先级如下：内联样式(4.)优先级最高；<link>样式(1.)和<style>样式(2., 3.)按照文档中的排列顺序，越后优先级越高；<style>内，内部样式(3.)优先级高于外部 样式(2.)。如果以同种方式引入了多个样式，则列在后面的样式优先级较高。如果多个样式 表定义的样式没有冲突，那么这些样式将全部得以保留。 上面所述的应用样式的4种方法具体方法如下： 1. 链接外部样式表： … <head> … <link rel="stylesheet" href="style.css" type="text/css" /> … </head> …
2.使用内部样式表: <head> <style type="text/css"> body i background-color: red; j </style> </head> 3.导入外部样式表 <head> <style type="text/css"> import url("style. Css") </style> /head> 4.使用内联样式: <div style="color: red; margin-left: 10px">.</div> TIPS 为什么在< style>元素中定义样式或引入样式时需要将其标注为HTML注释(写在"<!-"与"->"之间)? 因为有些老式的浏览器(相当古老)不支持CSS,在读到CSS代码时无法识别而直接将其显示在页面上,所 以通过使用HTML注释将其对老式浏览器进行隐藏。而新的浏览器则都能识别HTML注释中的CSS代码 2为样式找到目标 HTML文档为样式提供了一个框架。想使用CSS将样式应用于特定的HTML元素,就必须有 方法对元素进行定位。CSS中的选择器( selector),就提供了这个功能
2. 使用内部样式表： … <head> … <style type="text/css"> <!-- body { background-color: red; } … --> </style> … </head> … 3. 导入外部样式表： … <head> … <style type="text/css"> <!-- @import url("style.css") … --> </style> … </head> … 4. 使用内联样式： … <div style="color: red; margin-left: 10px">…</div> … TIPS 为什么在<style>元素中定义样式或引入样式时需要将其标注为HTML注释(写在"<!--"与"-->"之间)？ 因为有些老式的浏览器(相当古老)不支持CSS，在读到CSS代码时无法识别而直接将其显示在页面上，所 以通过使用HTML注释将其对老式浏览器进行隐藏。而新的浏览器则都能识别HTML注释中的CSS代码。 2 为样式找到目标 HTML文档为样式提供了一个框架。想使用CSS将样式应用于特定的HTML元素，就必须有 方法对元素进行定位。CSS中的选择器(selector)，就提供了这个功能
CSS的基本语法为 selector property: va 通过选择器定位元素,为其应用{}内指定的样式,样式由若干条属性-值对组成,用分号隔 开,最后一条样式分号可选 1.元素选择器 类选择器用来查找特定类型的元素,比如段落(<p>)、标题(<h1>,<h2>,…)或锚(<a>) 元素。语法如下 element property: value;) 例如 text-align: center: font-weight: bo 这个样式将文档中所有<p>元素设为文字居中对齐并为粗体 2.类选择器 类选择器用于寻找有指定类名的元素。在类名前加"."即可。语法如下: class name I property: value; j 例如: right text-align: right; 这个样式将具有属性cass="rght"的元素的文字对齐方式设为右对齐。 3.ID选择器 类选择器用于寻找有指定ID的元素。在类名前加"#"即可。语法如下: #id property: value; H 例如: intro font-size 这个样式将具有属性d=" intro"的元素的文字大小设为20px。 4.后代选择器 将不同选择器使用空格连接,就构成了后代选择器。例如 p #intro font-size: 20px; I 指定的元素为任何<p>元素内d为ntro的元素。 main li a font-weight: bold; text-decoration: 指定的元素为 class为man的元素内所有<>元素内的<a>元素
CSS的基本语法为： selector { property: value; } 通过选择器定位元素，为其应用{}内指定的样式，样式由若干条属性-值对组成，用分号隔 开，最后一条样式分号可选。 1. 元素选择器 类选择器用来查找特定类型的元素，比如段落(<p>)、标题(<h1>, <h2>, …)或锚(<a>) 元素。语法如下： element { property: value; } 例如： p { text-align: center; font-weight: bold; } 这个样式将文档中所有<p>元素设为文字居中对齐并为粗体。 2. 类选择器 类选择器用于寻找有指定类名的元素。在类名前加"."即可。语法如下： .class_name { property: value; } 例如： .right { text-align: right; } 这个样式将具有属性class="right"的元素的文字对齐方式设为右对齐。 3. ID选择器 类选择器用于寻找有指定ID的元素。在类名前加"#"即可。语法如下： #id { property: value; } 例如： #intro { font-size: 20px; } 这个样式将具有属性id="intro"的元素的文字大小设为20px。 4. 后代选择器 将不同选择器使用空格连接，就构成了后代选择器。例如， p #intro { font-size: 20px; } 指定的元素为任何<p>元素内id为intro的元素。 .main li a { font-weight: bold; text-decoration: none; } 指定的元素为class为main的元素内所有<li>元素内的<a>元素
5.伪类选择器 有时候,希望根据文档结构之外的条件对元素应用样式,如表单元素或者链接的状态。这就 需要通过伪类选择器来完成 /*将未访问的链接设为蓝色* a: link color: blue; /*将已访问的链接设为绿色+/ a: visited[ color: green; /★将鼠标移到链接上时以及点击链接时的颜色设为红色*/ a: link[ color: red; 1 /*将表格的行在鼠标移入时的背景颜色设为红色* tr: hover background-color: red /*当激活 input元素时将其背景颜色设为黄色+ input: focus background-color: yellow; ink和: visited称为链接伪类,只能应用于锚元素(<a>)。: hover、:actⅳve和: focus称为 动态伪类,理论上可应用于任何元素。但在一些包括IE6在内的老式浏览器只注意应用于锚 链接的: active和: hover选择器,完全忽略: focus。CSS2.1版本不仅有上述伪类,更多的 伪类(但很少使用)定义可以参考W3C官方的规范。 6.高级选择器(选看) CSS2.1定义了许多其他有用的选择器。可是包括IE6在内的一些老式浏览器并不支持这 些高级选择器。不过如果使用了老浏览览器所不支持的选择器,那么相应的规则会被忽略 并不影响其他规则。由于考虑到IE6的市场占有率,采用高级选择器就意味着忽视掉大量的 访客。所以,在对于站点功能很重要的任何元素上应该避免使用这些高级选择器。 ◆子选择器和相邻同胞选择器 后代选择器选择第一个元素的所有后代,而子选择器使用">"来只选择元素的直接后代。语 法如下 parent > child property: value;) 例如对于HTML结构 <ul id="nav"> <li>Home</li> <li>Services <li>Design</li> </u1>
5. 伪类选择器 有时候，希望根据文档结构之外的条件对元素应用样式，如表单元素或者链接的状态。这就 需要通过伪类选择器来完成。 /* 将未访问的链接设为蓝色 */ a:link { color: blue; } /* 将已访问的链接设为绿色 */ a:visited { color: green; } /* 将鼠标移到链接上时以及点击链接时的颜色设为红色 */ a:link { color: red; } /* 将表格的行在鼠标移入时的背景颜色设为红色 */ tr:hover { background-color: red; } /* 当激活input元素时将其背景颜色设为黄色 */ input:focus { background-color: yellow; } :link和:visited称为链接伪类，只能应用于锚元素(<a>)。:hover、:active和:focus称为 动态伪类，理论上可应用于任何元素。但在一些包括IE6在内的老式浏览器只注意应用于锚 链接的:active和:hover选择器，完全忽略:focus。CSS 2.1版本不仅有上述伪类，更多的 伪类(但很少使用)定义可以参考W3C官方的规范。 6. 高级选择器(选看) CSS 2.1定义了许多其他有用的选择器。可是包括IE 6在内的一些老式浏览器并不支持这 些高级选择器。不过如果使用了老浏览览器所不支持的选择器，那么相应的规则会被忽略， 并不影响其他规则。由于考虑到IE 6的市场占有率，采用高级选择器就意味着忽视掉大量的 访客。所以，在对于站点功能很重要的任何元素上应该避免使用这些高级选择器。 子选择器和相邻同胞选择器 后代选择器选择第一个元素的所有后代，而子选择器使用">"来只选择元素的直接后代。语 法如下： parent > child { property: value; } 例如对于HTML结构 <ul id="nav"> <li>Home</li> <li>Services <ul> <li>Design</li> … </ul>
</1i> </u1> 如下的样式 nav li[ font-family: Tahoma: J 仅选择了id为nav的<u>下的一级<li>,而不影响嵌套在这些<l>内部的<l>元素 而相邻同胞选择器可用于定位同一个父元素下某个元素之后的元素。语法如下 element sibling property: value: 1 例如对于HTML结构 h1>Top News</h1> <p>First Paragraph</p> <p>Second Paragraph</p> 如下的样式 hl pi font-weight: bold; 仅选择了紧跟<h1>元素后的一个<p>元素而不影响之后的段落。 ◆属性选择器 属性选择器可以根据元素的某个属性是否存在或属性的值来寻找元素。属性的条件写在一对 中括号内。主要有三种属性选择方式: 简单属性选择器 [attribute]( property: value; h 选择定义了某属性(无论属性值是什么)的元素。例如 hl[title] border-bottom: 1px dotted gray: I 选择了所有带有tite属性的<h1>元素 精确属性值选择器 [attribute="value"]i property: value; 选择定义了某属性且其属性值为指定值的元素。例如 a[rel=nofollow"]i color: gray; j 选择了所有存在属性rel值为" nofollow"的<a>元素,如<arel=" nofollow"> 部分属性值选择器 w="value"][ property: value; 选择的元素定义了某属性,且将这个属性值按空格进行分隔后其中有一段恰为指定值。例如 选择了所有存在属性rel,且将rel属性值按空格分隔后其中恰有一段为" friend"的元素,如 <are=" nofollow friend">,而不匹配<arel=" friend_ colleague">。 特殊属性选择器 [attribute="value"][ property: value; 选择的元素定义了某属性,且将这个属性值按"-"进行分隔后其中第一段恰为指定值。例如
</li> … </ul> 如下的样式 #nav > li { font-family: Tahoma; } 仅选择了id为nav的<ul>下的一级<li>，而不影响嵌套在这些<li>内部的<li>元素。 而相邻同胞选择器可用于定位同一个父元素下某个元素之后的元素。语法如下： element + sibling { property: value; } 例如对于HTML结构 <h1>Top News</h1> <p>First Paragraph</p> <p>Second Paragraph</p> 如下的样式 h1 + p { font-weight: bold; } 仅选择了紧跟<h1>元素后的一个<p>元素而不影响之后的段落。 属性选择器 属性选择器可以根据元素的某个属性是否存在或属性的值来寻找元素。属性的条件写在一对 中括号内。主要有三种属性选择方式： 简单属性选择器 [attribute] { property: value; } 选择定义了某属性(无论属性值是什么)的元素。例如 h1[title] { border-bottom: 1px dotted gray; } 选择了所有带有title属性的<h1>元素。 精确属性值选择器 [attribute="value"] { property: value; } 选择定义了某属性且其属性值为指定值的元素。例如 a[rel="nofollow"] { color: gray; } 选择了所有存在属性rel值为"nofollow"的<a>元素，如<a rel="nofollow">。 部分属性值选择器 [attribute~="value"] { property: value; } 选择的元素定义了某属性，且将这个属性值按空格进行分隔后其中有一段恰为指定值。例如 a[rel~="friend"] { color: red; } 选择了所有存在属性rel，且将rel属性值按空格分隔后其中恰有一段为"friend"的元素，如 <a rel="nofollow friend">，而不匹配<a rel="friend_colleague">。 特殊属性选择器 [attribute|="value"] { property: value; } 选择的元素定义了某属性，且将这个属性值按"-"进行分隔后其中第一段恰为指定值。例如