第3章. CSS基础 上一章我们介绍了HTML相关内容,并利用HTML的一些常见标签元素构造出了一篇文章,接下来学习如何使页面看上去更生动。 本章将介绍如何使用CSS(层叠样式表单的简称)来控制页面的表现,如页面元素的大小、颜色、字体的设置、位置的设置、大小、宽高尺寸等一系列设置。 目前CSS的最新版本是CSS3,但是在设备的支持上,谷歌的Chrome和苹果的Safari走在最前列,IE9以下基本都不支持,因此本书将主要讲解的还是CSS2.1规范。在本书第13章将会用到一些CSS3的规范。 1.1. 什么是CSSCSS是英语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; 多个关键字之间用空格隔开。 属性和属性值之间用冒号隔开,属性写完要用分号结束。冒号和分号都一定要是在英文输入法状态下输入,否则页面会出错。
|