1.3.2　CSS样式入门

掌握了CSS选择器的应用，要选中HTML文档中的任何元素都非常容易，在实际开发中最常用的选择器是类选择器，可以根据组件的不同样式将其定义为不同的类，通过类选择器来对组件进行样式定义。

CSS提供了非常丰富的样式供开发者进行配置，包括元素背景的样式、文本的样式、边框与边距的样式、渲染的位置等。本节将介绍一些常用样式的配置方法。

1.元素的背景配置

在CSS中，与元素背景配置相关的属性都是以background开头的。使用CSS对元素的背景样式进行设置，可以实现相当复杂的元素渲染效果。常用的背景配置属性如表1-1所示。

2.元素的文本配置

元素的文本配置包括对齐方式配置、缩进配置、文字间隔配置等，下面的CSS代码将演示这些文本配置属性的使用方式。

HTML标签：

     <div class="text">文本配置属性 HelloWorld</div>

CSS设置：

【代码片段1-10　源码见附件代码/第1章/3.selector.html】

效果如图1-10所示。

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开头的属性进行设置即可。

元素定位是CSS非常重要的功能，我们看到的网页之所以多姿多彩，都要归功于CSS可以灵活地对元素进行定位。

在网页布局中，CSS盒模型是一个非常重要的概念，其通过内外边距来控制元素间的相对位置，盒模型结构如图1-12所示。

可以通过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所示。

需要注意，上面的元素之所以在一行展示，是因为span标签定义的元素默认为行内元素，不会自动换行布局。

关于元素的绝对定位与浮动相关内容，不作为读者需要了解的重点，在本书后续的练习案例中，逐步会使用这些技术为读者演示。