1.3.2　CSS样式入门

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

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

1．元素的背景配置

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

表1-1　CSS背景属性配置

2．元素的文本配置

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

HTML标签：

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

CSS设置：

效果如图1-10所示。

图1-10　使用CSS对文本元素进行配置

3．边框与边距配置

使用CSS可以对元素的边框进行设置，例如设置元素的边框样式、宽度、颜色等。示例代码如下：

HTML元素：

     <div class="border">设置元素的边框</div>

CSS设置：

上面的示例代码中，border-style属性用于设置边框的样式，例如solid将其设置为实线；border-width属性用于设置边框的宽度，border-color属性用于设置边框的颜色。上面的代码运行后的效果如图1-11所示。

图1-11　边框设置效果

使用border开头的属性配置会默认对元素的4个边框都进行设置，也可以单独对元素某个方向的边框进行配置，使用border-left、border-right、border-top、border-bottom开头的属性进行设置即可。

元素定位是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的设置，可以灵活地控制元素间的相对位置。示例如下：

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标签定义的元素默认为行内元素，不会自动换行布局。

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