第3章. CSS基础

上一章我们介绍了HTML相关内容，并利用HTML的一些常见标签元素构造出了一篇文章，接下来学习如何使页面看上去更生动。

本章将介绍如何使用CSS（层叠样式表单的简称）来控制页面的表现，如页面元素的大小、颜色、字体的设置、位置的设置、大小、宽高尺寸等一系列设置。

目前CSS的最新版本是CSS3，但是在设备的支持上，谷歌的Chrome和苹果的Safari走在最前列，IE9以下基本都不支持，因此本书将主要讲解的还是CSS2.1规范。在本书第13章将会用到一些CSS3的规范。

1.1. 什么是CSS

CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，翻译成中文的意思是层叠样式表单，它是一种用来表现HTML文件样式的计算机语言。CSS通过“样式”来表示网页的颜色、字体、位置、大小、宽高尺寸等属性。一系列的样式组成了“样式表”。

CSS是由W3C的CSS工作组创建和维护，不需要编译，可以直接由浏览器执行的一种标记性语言。我们在网上浏览的任何一个页面都是应用了CSS样式的，没有CSS的页面很难让用户提起兴趣，犹如一个没有任何包装的产品一样，很难吸引用户的眼球。

例如我们看下面两个页面，他们的内容完全一样，图3-1是未设置CSS样式的表现效果，而图3-2是设置了CSS样式的表现效果。

图3-1

图3-2

1.2. CSS的语法结构

CSS语法由两部分组成：选择器和声明块。

l 选择器

又称为选择符，指样式所要作用于的对象。

l 声明块

由一个或多个声明组成，每一个声明由一个CSS属性和该属性的值组成。一个属性后面跟一个冒号，冒号后面是属性值，属性值写完以分号结束。

属性是CSS的核心，CSS提供了丰富的样式属性来控制HTML，例如：颜色、大小、高度、宽度、定位等。

值，就是指属性的值。如图3-3所示color：#F00；这里的#F00就是属性color的值。

图3-3

很多情况下属性值有多个关键字组成，如边框border属性：

border：#000 solid 1px;

多个关键字之间用空格隔开。

属性和属性值之间用冒号隔开，属性写完要用分号结束。冒号和分号都一定要是在英文输入法状态下输入,否则页面会出错。

有卖吗？真本书

发现宾哥 发现宾哥