一个段落居中，你可以先定义两个类：
p.right { text-align: right} p.center { text-align: center}
然后用不在不同的段落里，只要在HTML标记里加入你定义的class参数：
注意：类的名称可以是任意英文单词或以英文开头与数字的组合，一般以其功能和效果简要命名。
类选择符还有一种用法，在选择符中省略HTML标记名，这样可以把几个不同的元素定义成相同的样式：
.center { text-align: center}
（定义.center的类选择符为文字居中排列）
这样的类可以被应用到任何元素上。下面使h1元素（标题1）和p元素（段落）都归为“center”类，这使两个元素的样式都跟随“.center”这个类选择符：
注意：这种省略HTML标记的类选择符是经后最常用的CSS方法，使用这种方法，可以很方便的在任意元素上套用预先定义好的类样式。
2.2.4.ID选择符
在HTML页面中ID参数指定了某个单一元素，ID选择符是用来对这个单一元素定义单独的样式。
ID选择符的应用和类选择符类似，只要把CLASS换成ID即可。将上例中类
8
用ID替代：
定义ID选择符要在ID名称前加上一个“#”号。和类选择符相同，定义ID选择符的属性也有两种方法。下面这个例子，ID属性将匹配所有id=\的元素：
#intro
{
font-size:110%; font-weight:bold; color:#0000ff;
background-color:transparent }
（字体尺寸为默认尺寸的110%；粗体；蓝色；背景颜色透明） 下面这个例子，ID属性只匹配id=\的段落元素： p#intro
{
font-size:110%; font-weight:bold; color:#0000ff;
background-color:transparent }
注意：ID选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。
2.2.5.包含选择符
可以单独对某种元素包含关系定义的样式表，元素1里包含元素2，这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义，例如： table a {
font-size: 12px }
在表格内的链接改变了样式，文字大小为12象素，而表格外的链接的文字仍为默认大小。
9
2.3盒模型
盒子模型是CSS的基石之一，它指定元素如何显示以及（在某种程度上）如何相互交互
页面上的每个元素都被浏览器看成是一个矩形的盒子，这个盒子由元素的内容、填充、边框和边界组成。
网页就是由许多个盒子通过不同的排列方式（上下排列，并列排列，嵌套排列）堆积而成。
2.3.1 盒模型概念
在网页设计中常常用的属性名有：内容(content)、填充(padding)、边框(border)、边界(margin)， css盒模型都具备这些属性。
图2-7 CSS盒模式
每个HTML元素都可以看作是一个装了东西的盒子
盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其它盒子之间，还有边界(magin),如图所示
默认情况下盒子的边框是无，背景色是透明，所以在默认情况下看不到盒子 在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑
10
大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。在现实生活中，假设在一个广场上，把不同大小和颜色的盒子，以一定的间隙和顺序摆放好，最后从广场上空往下看，看到的图形和结构就类似要做的网页版面设计了，如图2-8。
图2-8 CSS盒模型示意图
2.3.2 盒模型属性
边框是实的，可以看到实实在在的边框，而填充和边界都是虚的，只能看到他们对元素的影响
盒子模型中只能设置两类颜色，即边框颜色和背景颜色
盒子模型可设置三类距离，即边界距离margin，填充距离padding和边框值border
方法是按照规定的顺序，给出2个、3个或者4个属性值，它们的含义将有所区别，具体含义如下：
如果给出2个属性值，前者表示上下边框的属性，后者表示左右边框的属性； 如果给出3个属性值，前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性；
11
相关推荐：
loading