- CSS3+DIV网页样式与布局从入门到精通（微课精编版）
- 前端科技编著
- 1581字
- 2021-03-31 19:11:10
2.1 元素选择器
元素选择器包括标签选择器、类选择器、ID选择器和通配选择器。
2.1.1 标签选择器
视频讲解
标签选择器也称为类型选择器，直接引用HTML标签名称。一般利用标签选择器规定标签的默认样式。
【示例】本示例演示了如何在文档中定义一个标签样式。通过标签选择器，统一定义网页中段落文本的样式为：字体大小为12像素，字体颜色为红色。实现上述默认段落文本效果，可以利用标签选择器定义如下样式。
在网页设计中，常用标签选择器设计网页默认显示效果，或者统一常用元素的基本样式。标签选择器在CSS样式表中容易管理，因为它们都与标签同名。
2.1.2 类选择器
视频讲解
类选择器以一个点（.）前缀开头，然后跟随一个自定义的类名。类选择器能够为网页对象定义不同的样式，实现不同元素拥有相同的样式，相同元素的不同对象拥有不同的样式。
应用类样式可以使用class属性来实现，HTML所有元素都支持该属性，只要在标签中定义class属性，然后把该属性值设置为事先定义好的类选择器的名称即可。
【示例1】本示例完整演示了如何使用类样式设计段落文本效果。利用类选择器为页面中3个相邻的段落文本对象定义不同的样式，其中第1和第3段文本的字体大小为12像素、颜色为红色，第2段文本的字体大小为18像素、颜色为红色。
第1步，启动Dreamweaver，新建一个网页，在<body>标签内输入以下3段段落文本。
<p>问君能有几多愁，恰似一江春水向东流。</p>
<p>剪不断，理还乱，是离愁。别是一般滋味在心头。</p>
<p>独自莫凭栏，无限江山，别时容易见时难。流水落花春去也，天上人间。</p>
第2步，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表。
第3步，通过标签选择器将所有段落文本的字体大小定义为12像素，字体颜色定义为红色，代码如下。
p {
font-size:12px; /* 字体大小为12像素 */
color:red; /* 字体颜色为红色 */
}
第4步，如果仅定义第2段文本的字体大小为18像素，这时就可以使用类选择器。假设定义一个18像素大小的字体类，代码如下。
.font18px { font-size:18px;}
第5步，在第2段段落标签中引用font18px类样式，代码如下。
<p>问君能有几多愁，恰似一江春水向东流。</p>
<p class="font18px">剪不断，理还乱，是离愁。别是一般滋味在心头。</p>
<p>独自莫凭栏，无限江山，别时容易见时难。流水落花春去也，天上人间。</p>
第6步，在浏览器中预览的效果如图2.1所示，此时可以看到3段文本的显示样式，其中第2段文本被单独放大显示。
图2.1 类选择器应用效果
【示例2】本示例演示了如何在对象中应用多个样式类。class属性可以包含多个类，因此可以设计复合样式类。用户可以按如下步骤上机练习体验。
第1步，复制示例1中文档，并在内部样式表中定义3个类：font18px、underline和italic。
第2步，在段落文本中分别引用这些类，其中第2段文本标签引用了3个类，代码如下，演示效果如图2.2所示。
图2.2 多类引用应用效果
2.1.3 ID选择器
视频讲解
ID选择器以井号（#）作为前缀，接着是一个自定义的ID名。应用ID选择器可以使用id属性来实现，HTML所有元素都支持该属性，只要在标签中定义id属性，然后把该属性值设置为事先定义好的ID选择器的名称即可。
【示例1】本示例演示了如何在文档中设置ID样式。
第1步，启动Dreamweaver，新建一个网页，在<body>标签内输入<div>标签。
<div id="box">问君能有几多愁，恰似一江春水向东流。</div>
第2步，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表。然后为该盒子定义固定宽和高，并设置背景图像，以及边框和内边距大小，代码如下。
第3步，在浏览器中预览，则显示效果如图2.3所示。
图2.3 ID选择器的应用效果
也可以为ID选择器指定标签范围。采用这种方法能够提高该样式的优先级。
【示例2】针对上面示例，在ID选择器前面增加一个<div>标签，这样div#box选择器的优先级会大于#box选择器的优先级。在同等条件下，浏览器会优先解析div#box选择器定义的样式，代码如下。
注意，也可以使用这种方式限制类选择器的应用范围，并增加其优先级。
2.1.4 通配选择器
视频讲解
如果HTML所有元素都需要定义相同的样式，这时不妨使用通配选择器。通配选择器是固定的，它使用星号（*）来表示。
【示例】针对上面示例中清除边距样式，可以使用下面方式来定义。
* {
margin: 0;
padding: 0;
}