【前端】如何制作一个自己的网页（13）
上次，我们学习了CSS设置网页的各种样式。
我们将会继续学习两种复合CSS选择器，以及在网页分组中的2个重要元素：div和span。
示例
| <style> /* 使用h3标签选择器，设置样式 */ h3 { text-align: center; } /* 使用p标签选择器，设置样式 */ p { text-align: center; } </style> <h3>Hello!</h3> <p>夜曲编程</p> |
|
|
| 示例中，我们通过两个标签选择器，将h3和p元素，都设置为了居中对齐。 如果有更多的元素，都需要设置相同的样式，这种写法不仅导致CSS代码量增加，而且非常重复。 |
那有没有更加便捷的写法呢？
针对这种多个选择器都设置相同样式的情况。
CSS给我们提供了更加便捷的选择器：分组选择器。
分组选择器
| <style> /* 使用分组选择器设置样式 */ h3,p { text-align: center; } </style> <h3>Hello!</h3> <p>夜曲编程</p> |
|
|
分组选择器
分组选择器和普通的CSS选择器用法一致。只是使用时，需要以英文逗号,将多个选择器间隔开。比如，这里h3,p就能同时设置h3和p元素的样式。
具体代码解释：
| 逗号 逗号,表示并列关系，多个选择器不分先后顺序。 也就是说，这里的h3,p，和p,h3是一样的。 |
|
| 声明 分组选择器里的声明可以给分组选择器所选择的不同元素同时设置样式。 比如，这里的h3和p元素都被设置了居中对齐。 |
|
总结：
Ps：
分组选择器可以同时给多种元素设置相同的样式。使用时，需要以英文逗号,将多个选择器间隔开。逗号,表示并列关系，多个选择器不分先后顺序。也就是说，这里的h3,p，和p,h3是一样的。
| 不同类别的选择器，都可以通过,连接，设置相同的样式。 比如，这里的标签选择器h3和类选择器.program混合使用。
| <style> /* 使用分组选择器设置样式 */ h3,.program { font-family: cursive; font-size: 30px; } </style>
<h3>Hello!</h3> <p class="program">夜曲编程</p> <p>夜曲编程</p> |
分组选择器的出现，大幅减少了CSS的代码量。
而HTML中的div元素：能很方便地设置多种元素的样式。
| <div>一个块级元素，它可以对网页中的元素进行布局。 如图，<div>把网页划分为一块一块的区域，然后结合CSS就可以对某一区域内的多种元素设置样式。 那么，div元素究竟是如何进行网页布局的呢？ |  |
div元素
| 第13-16行，定义了一个div元素。 第6-9行，使用标签选择器，设置div元素的背景颜色为#5E80F4，对齐方式为居中对齐。 |
| <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> div { background-color: #5E80F4; text-align: center; } </style> </head> <body> <div> <h3>夜曲编程</h3> <p>网页开发</p> </div> </body> </html> |
 |
代码一步步解释：
| <div>标签 在HTML文档中，<div>标签需要放在<body>标签内。 <div>标签本身没有什么特殊的显示效果，我们把<div>标签及其包围的内容理解为网页的一个板块就行了。 div的内部元素 <div>标签内，可以有很多不同的元素。 示例中，有h3、p两种元素，它们都属于div元素的一部分。 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> div { background-color: #5E80F4; text-align: center; } </style> </head> <body> <div> <h3>夜曲编程</h3> <p>网页开发</p> </div> </body> </html> |
| div标签选择器 div标签选择器，用于设置div元素的样式。 示例中，会把<div>标签内的h3、p两种元素的背景颜色设置为#5E80F4，对齐方式设置为居中对齐。 |  |
代码总结：
宽度和高度
因为div元素用于将网页进行分块，并完成布局。
所以，除了设置颜色和文本对齐属性外，我们常常还需要设置高度和宽度属性。
高度和宽度属性的值，一般使用数值和长度单位或百分比来表示。
| 宽度和高度属性的值都可以是数值和长度单位。我们以高度为例，比如这里的height: 80px;表示高度为80像素。再次强调，px是像素，为长度单位。 |
| <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> div { background-color: #5E80F4; text-align: center; height: 80px; width: 50%; } </style> </head> <body> <div> <h3>夜曲编程</h3> <p>网页开发</p> </div> </body> </html> |
 |
简单来说，div元素是对网页进行整体布局，结合CSS，可以设置一块区域的样式。但是有时候，我们还需要对网页中的内容进行局部样式的修改。这时候就需要span。