<html>
<head>
<style>
.div1{
width:600px
height:200px
font-size:13px
}
.div select{
width:200px
}
.div select option{
width:150px
height:30px
}
</head>
<body>
<div class='div1'>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</div>
</body>
</html>
本文讨论另一个重要的CSS特征：选择器，它可以用来在一个页面内选择元素风格化Web页。选择器类型CSS样式有多种方式实现元素选择。各种各样的选择方法包括通过通用选择器，类型选择器，类选择器，ID选择器，祖先选择器，子孙选择器，邻接兄弟选择器和属性选择器进行选择。这里我们将分别来看一下这几种方法（邻接兄弟和属性除外，我们将在下周进行讨论）。注意：浏览器对CSS选择器的支持是不一致的，不过你可以利用网上的说明来检测某个选择器是否能在你的目标浏览器使用。通用通用选择器允许你在整个页面中使用样式。基本上说来，一个样式并不指定具体的元素，类等，所以它适用于页面内的所有元素。这对设置颜色，字体等来说十分有用。通用选择器可用于页面上的所有元素，但是他们可以被某些具体的选择器覆盖。CSS规范中指出可以使用星号（*）来表示一个通用选择器。列表A演示了如何使用通用选择器来为页面设定背景和默认的字体。类型风格化元素的一种最常用方法是通过它的类型。也就是说一个特定的元素拥有自己定义的样式，且这个样式可用于该类型的所有元素而不管元素在页面上的位置。列表B中的例子演示了用一个类型选择器来风格化页面中的所有段元素。使用这种类型选择器，叶面内的所有段落元素（除非被更多特定选择器覆盖）拥有特定的页边距和红色文本。现在你也可以自己建立CSS类来处理页面上的特定元素风格化问题。类在决定一个样式覆盖什么内容时，类选择器比类型选择器有更多的控制。由类选择器定义的样式可以用于具有类属性的所有元素，不管该元素在页面中的位置。它可以很好的控制那些元素接受样式。列表C中的例子演示了使用类只格式化页面中的第一段。所以第一段的是锯齿状的字体，而接下来的段落与此不同。类选择器不能使用HTML 保留的元素如heading，p，h1等等。你还可以通过用空格分开的方法对同一个元素使用多个类。列表D演示了使用多个类来风格化一个特定的段落。你可以将类选择器和类型选择器结合在一起使用，来风格化拥有分配的类的某些元素。在这个场景中，当定义样式时，元素名有一个由空格隔开的类名。列表E中的例子演示了这样的技巧，即仅拥有赋予的特定类名的段元素才风格化为某种方式，而拥有相同类名的头部风格化为另一种形式。CSS即层叠样式表（Cascading Style Sheets），是一种用来表现HTML或XML等文件样式的计算机语言。
CSS样式主要包含以下三种类型：
1、行内样式（内嵌样式）：结构的内部，即写在标签内的样式；写在标签的开始部分内部，style属性当中。
例：<标记 style="样式的属性名1：样式的属性值1；属性名2：属性值2；......"></标记>
2、内部样式（内联样式）：写在HTML页面内部，存放于head标记当中，样式写在style标记内。
例：<style>选择器 {属性名：属性值；属性名：属性值；......}</style>
3、外部样式（外联样式）：写在css文件内。
例：<link type="text/css" rel="stylesheet" href="css/main.css" />
扩展资料：
使用CSS样式的优点：
CSS有助于实现负责任的Web设计。CSS对开发者构建Web站点的影响很大，并且这种影响可能是无止境的。将网页的大部分甚至是全部的表示信息从HTML或XML文件中移出，并将它们保留在一个样式表中有诸多优点，如降低文件大小、节省网络带宽以及易于维护等。
此外，站点的表现信息和核心内容相分离，使得站点的设计人员能够在短暂的时间内对整个网站进行各种各样的修改。
CSS简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量（因为重复设置的格式将被只保存一次）。
只要修改保存着网站格式的CSS样式表文件就可以改变整个站点的风格特色，在修改页面数量庞大的站点时，显得格外有用。这就避免了一个个网页的修改，大大减少了工作量。
参考资料来源：百度百科-CSS
