第5章 CSS基本概念.docVIP

第5章 CSS基础概念 课前导读 前面我们介绍了CSS的作用、局限性及在网页中使用CSS的方法，在深入介绍CSS属性之前我们首先介绍CSS选择符以及CSS常用属性值。CSS选择符非常重要，熟练掌握CSS选择符的使用，可以使CSS样式定义更加高效，更加准确。 本章重点 在本章我们将重点学习： CSS选择符 CSS伪类 CSS伪元素 5.1 CSS选择符 通过前面的例4-2我们已经看到，一个普通的CSS样式定义语句具有如下的形式： li{color:red;font-style:italic;} 这一语句中，我们又把它分为两个部分，我们称“li”为选择符，而称花括号部分为“样式声明”。在样式声明中“color”以及“font-style”称为CSS属性，而“red”和“italic”分别是上述属性对应的属性值。 明确了这几个概念之后，本章我们首先来介绍选择符。选择符的作用是指定页面元素，以便将随后声明的CSS样式作用于该页面元素上。选择符有多种形式并且也存在诸如优先级及继承顺序等规则。需要注意的是选择符同HTML标记一样不区分大小写，我们建议使用小写字母。 5.1.1 标记选择符 语法：Tag{…} 版本：CSS1 兼容性：IE4+ , NS4+ 标记选择符是直接以页面中的HTML标记作为标识的选择符，例如以下的CSS样式声明均采用了标记选择符。 h1{color:red;} body{margin:2px;} p{font-family:Arial;} input{border-width:1px;} 在声明了上述CSS样式之后，整个网页中的h1，body，p及input标记就具有了定制的样式。 5.1.2 类选择符 语法：.Class{…} 版本：CSS1 兼容性：IE4+ , NS4+ 类选择符是以“.”号开头，以HTML标记中的class属性值做为选择标识的选择符。前面在HTML语言部分我们已经看到绝大多数的HTML标记都具有class属性，因此类选择符是比较常用的选择符形式。 例5-1：类选择符 html headtitleCSS选择符/title/head body style type=text/css !-- .menu{font-weight:bold;} .news{font-style: italic;} div.music{border:1ps solid #000;width:200px;} -- /style div class=menu这是class=menu的div元素/div p class=news这是class=news的p元素/p span class=music这是class=music的span元素/span div class=music这是class=music的div元素/div /html 例5-1中，我们还使用了一个比较特殊的选择符“div.music”，这个选择符同样也属于类选择符，它的含义是class属性为“music”的div元素。 该例运行结果如图5-1。我们看到class属性为“menu”的元素使用了粗体；class属性为“news”的元素使用了斜体。但是class属性同样为“music”的div元素和span元素显示却不相同，只有div元素应用了该边框样式。 图5-1 类选择符 5.1.3 ID选择符 语法：#ID{…} 版本：CSS1 兼容性：IE4+, NS4+ ID选择符同类选择符非常类似，它以“#”符号开头，以HTML标记中的id属性做为选择标识的选择符。同样，大部分的HTML标记都具有id属性，因此ID选择符是也是比较常用的选择符形式。例如： #NavBar{color:red;} #LeftBar{font-family:Arial;} #Content{width:600px;} #Copyright{background-color:#DDDDDD;} 在经过上述声明之后，我们就可以通过如下方式使用了： div id=”NavBar”这是NavBar部分/div p id=”Content”这是Content部分/p ID选择符可不可以像上例中“div.music”那样的写为“div#music”呢？答案是不可以。严格来讲HTML元素的id属性值应是整个页面范围内的唯一标识符，也就是说ID值在一个页面中不应重复，因此ID选择符应该能够准确并且唯一地指定某一个元素，这样一来诸如“div#music”的写法是没有意义的。 5.1.4 选择符分组 语法：Selector1, Selector1,…{…} 版本：CSS1 兼容性：IE4+, NS4+ 选择符分组是指可以将具有相同CSS声明的选择符合并，以便简化声明代码。方法是将多个选择符以“，”分隔。例