1.3.2 CSS样式入门
掌握了CSS选择器的应用，要选中HTML文档中的任何元素都非常容易，在实际开发中最常用的选择器是类选择器，可以根据组件的不同样式将其定义为不同的类，通过类选择器来对组件进行样式定义。
CSS提供了非常丰富的样式供开发者进行配置，包括元素背景的样式、文本的样式、边框与边距的样式、渲染的位置等。本节将介绍一些常用样式的配置方法。
1.元素的背景配置
在CSS中，与元素背景配置相关的属性都是以background开头的。使用CSS对元素的背景样式进行设置，可以实现相当复杂的元素渲染效果。常用的背景配置属性如表1-1所示。
表1-1 常用的背景配置属性
2.元素的文本配置
元素的文本配置包括对齐方式配置、缩进配置、文字间隔配置等，下面的CSS代码将演示这些文本配置属性的使用方式。
HTML标签：
<div class="text">文本配置属性 HelloWorld</div>
CSS设置：
【代码片段1-10 源码见附件代码/第1章/3.selector.html】
效果如图1-10所示。
图1-10 使用CSS对文本元素进行配置
3.边框与边距配置
使用CSS可以对元素的边框进行设置，例如设置元素的边框样式、宽度、颜色等。示例代码如下。
HTML元素：
<div class="border">设置元素的边框</div>
CSS设置：
【代码片段1-11 源码见附件代码/第1章/3.selector.html】
上面的示例代码中，border-style属性用于设置边框的样式，例如solid将其设置为实线；border-width属性用于设置边框的宽度；border-color属性用于设置边框的颜色。上面的代码运行后的效果如图1-11所示。
使用border开头的属性配置默认对元素的4个边框都进行设置，也可以单独对元素某个方向的边框进行设置，使用border-left、border-right、border-top、border-bottom开头的属性进行设置即可。
图1-11 边框设置效果
元素定位是CSS非常重要的功能，我们看到的网页之所以多姿多彩，都要归功于CSS可以灵活地对元素进行定位。
在网页布局中，CSS盒模型是一个非常重要的概念，其通过内外边距来控制元素间的相对位置，盒模型结构如图1-12所示。
图1-12 CSS盒模型示意图
可以通过CSS的height和width属性控制元素的宽度和高度，padding相关的属性可以设置元素内边距，可以使用padding-left、padding-right、padding-top和padding-bottom控制4个方向上的内边距。margin相关的属性用来控制元素的外边距，同样地，使用margin-left、margin-right、margin-top和margin-bottom控制4个方向的外边距。通过margin和padding的设置可以灵活地控制元素间的相对位置。示例如下。
【代码片段1-12 源码见附件代码/第1章/3.selector.html】
HTML元素：
<span class="sp1">sp1</span>
<span class="sp2">sp2</span>
<span class="sp3">sp3</span>
<span class="sp4">sp4</span>
CSS设置：
页面渲染效果如图1-13所示。
图1-13 控制元素内外边距
需要注意，上面的元素之所以在一行展示，是因为span标签定义的元素默认为行内元素，不会自动换行布局。
关于元素的绝对定位与浮动相关内容，不作为读者需要了解的重点，在本书后续的练习案例中，逐步会使用这些技术为读者演示。