css两端对齐

CSS教程

第⼀节CSS(CascadingStyleSheets)简介

当初⼀帮技术⼈员想出HTML，主要侧重于定义内容，⽐如

表⽰⼀个段落，

表⽰标题，⽽并没有过多设计HTML的排版和界⾯效果。

随着Internet的迅猛发展，HTML被⼴泛应⽤，上⽹的⼈们当然希望⽹页做得漂亮些，因此HTML排版和界⾯效果的局限

性⽇益暴露出来。为了解决这个问题，⼈们也⾛了不少弯路，⽤了⼀些不好的⽅法，⽐如给HTML增加很多的属性结果

将代码变得很臃肿，将⽂本变成图⽚，过多利⽤Table来排版，⽤空⽩的图⽚表⽰⽩⾊的空间等，直到CSS出现。

CSS可算是⽹页设计的⼀个突破，它解决了⽹页界⾯排版的难题。可以这么说，HTML的Tag主要是定义⽹页的内容

(Content)，⽽CSS决定这些⽹页内容如何显⽰(Layout)。CSS的英⽂是CascadingStyleSheets，中⽂可以翻译成串联

式样式表。

CSS按其位置可以分成三种：

内嵌样式(InlineStyle)

内部样式表(InternalStyleSheet)

外部样式表(ExternalStyleSheet)

1、内嵌样式(InlineStyle)

InlineStyle是写在Tag⾥⾯的。内嵌样式只对所在的Tag有效。

这个Style定义

⾥⾯的⽂字是20pt字体，字体颜⾊是红⾊。

2、内部样式表(InternalStyleSheet)

内部样式表是写在HTML的⾥⾯的。内部样式表只对所在的⽹页有效。

内部样式表(InternalSytleSheet)要⽤到Style这个Tag，写法如下：

例⼦代码：

这个标题使⽤了Style。

这个标题没有使⽤Style。

3、外部样式表(ExternalStyleSheet)

如果很多⽹页需要⽤到同样的样式(Styles)，⽤什么⽅法呢？

将样式(Styles)写在⼀个以.css为后缀的CSS⽂件⾥，然后在每个需要⽤到这些样式(Styles)的⽹页⾥引⽤这个CSS⽂件。

⽐如可以⽤⽂本编辑器(NotePad)建⽴⼀个叫home的⽂件，⽂件后缀不要⽤.txt，改成.css。⽂件内容如下：

ut{border-width:1;border:solid;text-align:center;color:red}

然后你建⽴⼀个⽹页，代码如下：

type="text/css">

这个标题使⽤了Style。

这个标题没有使⽤Style。

使⽤外部(Extenal)样式表，相对于内嵌(Inline)和内部式(Internal)的，有以下优点：

样式代码可以复⽤。⼀个外部CSS⽂件，可以被很多⽹页共⽤。

便于修改。如果要修改样式，只需要修改CSS⽂件，⽽不需要修改每个⽹页。

提⾼⽹页显⽰的速度。如果样式写在⽹页⾥，会降低⽹页显⽰的速度，如果⽹页引

⽤⼀个CSS⽂件，这个CSS⽂件多半已经在缓存区(其它⽹页早已经引⽤过它)，⽹页

显⽰的速度就⽐较快。

4、串联(Cascading)

CSS第⼀个字母，是Cascading，意为串联。它是指不同来源的样式(Styles)可以合在⼀起，形成⼀种样式。

Cascading的顺序是：

1)浏览器缺省(browserdefault)(优先级最低)

2)外部样式表(ExtenalStyleSheet)

3)内部样式表(InternalStyleSheet)

4)内嵌样式表(InlineStyle)(优先级最⾼)

样式(Styles)的优先级依次是内嵌(inline),内部(internal),外部(external),浏览器缺省(browserdefault)。假设内嵌(Inline)样式中

有font-size:30pt,⽽内部

(Internal)样式中有font-size:12pt，那么内嵌(Inline)式样式就会覆盖内部(Internal)样式。

这个段落的内嵌样式(InlineStyle)覆盖(overwrite)

了内部样式表(InternalStyleSheet)，显⽰的字体

⼤⼩是30pt，⽽

不是12pt。

第⼆节CSS语法基本语法

⼀个样式(Style)的语法由三部分构成：选择器(Selector)，属性(Property)，属性值(Value)。

selector{property:value}

举个例⼦，下⾯的代码p就是selector，color就是属性，blue就是属性值。

p{color:blue}

HTML中所有的Tag都可以作为selector。

注：如果你想为Style加多个属性，在两个属性之间要⽤分号加以分隔。下⾯的Style就包2个属性，⼀个是对齐⽅式居中，⼀

个字体颜⾊为红，当中⽤分号分隔开。

p{text-align:center;color:red}

为了提⾼Style代码的可读性，你也可以分⾏写：

p

{

text-align:center;

color:black;

font-family:arial

}

组合(Grouping):你也可以将相同的属性和属性值赋予多个Selector。Selector之间⽤逗号分隔。下⾯的例⼦是将所有正⽂标题(

到

)的字体颜⾊都变成红⾊。

h1,h2,h3,h4,h5,h6

{

color:red

}

1、ClassSelector

利⽤ClassSelector，你可以⽤同样的HTMLTag构成不同的样式。⽐如说，你希望段落

有两种样式，⼀种是居中对齐，⼀种是居右对齐。你就可以写如下样式：{text-align:right}

{text-align:center}

其中right和center就是两个class。然后你就可以引⽤这两个class，⽰例代码如下：

这⼀段居中显⽰。

这⼀段是居右显⽰。

你也可以不⽤HTMLTag，直接⽤.加上Class名称作为⼀个Selector。⽰例代码如下：

.center{text-align:center}

这种通⽤的ClassSelector就没有Tag的局限性，可以⽤于不同的Tag。⽐如：

这个标题居中显⽰。

这个段落居中显⽰。

2、ContextualSelector

你可以为嵌⼊其它Tag的Tag定义样式，⽰例代码如下：

pem{color:red}

Em这个Tag嵌套在P⾥⾯。pem就叫做ContextualSelector，定义嵌套于P⾥的Em的样式。这个例⼦表⽰，在P⾥⾯的⽤Em

这个Tag标记的字体颜⾊是红⾊。

这个段落中⽤em强调的字是红⾊的。

这个标题中⽤em强调的字不是红⾊的。

3、CSS注释

为了⽅便你⾃⼰或者他⼈⽇后更好地理解你的CSS代码，你可以写CSS代码注释。CSS代码注释以/*开头，以*/结束。

/*段落样式*/

p

{

text-align:center;

/*居中显⽰*/

color:black;

font-family:arial

}

第三节CSS字体属性字体名称属性(font-family)这个属性设定字体名称，如Arial,Tahoma,Courier等。例句如下：

.s1{font-family:Arial}

1、字体⼤⼩属性(font-size)

这个属性可以设置字体的⼤⼩。字体⼤⼩的设置可以有多种⽅式，最常⽤的就是pt和px(pixel)。例句如下：

.s2{font-size:16pt}

2、字体风格属性(font-style)

这个属性有三个值可选：normal,italic,oblique。normal是缺省值，italic,oblique都是斜体显⽰。例句如下：

.s1{font-sytle:italic}

3、字体浓淡属性(font-weight)

这个属性常⽤值是normal和bold，normal是缺省值。例句如下：

这段⽂字字体的浓淡属性(font-weight)值是bold。

4、字体变量属性(font-variant)

这个属性有两个值，normal和small-caps，normal是缺省值。small-caps表⽰⼩的⼤

写字体。例句如下：

.s1{font-variant:small-caps}

5、字体属性(font)

这个属性是各种字体属性的⼀种快捷的综合写法。这个属性可以综合字体风格属性(font-style)，字体变量属性(font-variant)，

字体浓淡属性(font-weight)，字体⼤⼩属性(font-size)等属性。例句如下：

.s1{font:italicnormalbold11ptarial}

例⼦代码：

这段⽂字的字体风格(font-style)属性值是italic，字体变量(font-variant)属性值是normal，字体浓淡(font-weight)属性值是bold，

字

体⼤⼩(font-size)属性值是11pt，字体名称(font-family)属性值是Arial。

这段⽂字的字体风格(font-style)属性值是normal，字体变量(font-variant)属性值是small-caps，字体浓淡(font-weight)属性值是

normal，字体⼤⼩(font-size)属性值是14pt，字体名称(font-family)属性值是

Courier。

6、字体颜⾊(color)

字体颜⾊⽤CSS中的color属性来表⽰。

第四节CSS常⽤⽂本属性

1、⽂本对齐属性(text-align)

这个属性⽤来设定⽂本的对齐⽅式。有以下值：

left(居左，缺省值)

right(居右)

center(居中)

justify(两端对齐)

⽰例代码如下：

.p2{text-align:right}

2、⽂本修饰属性(text-decoration)

这个属性主要设定⽂本划线的属性。有以下值：

none(⽆，缺省值)

underline(下划线)

overline(上划线)

line-through(当中划线)

⽰例代码如下：

.p2{text-decoration:underline}

3、⽂本缩进属性(text-indent)

这个属性设定⽂本⾸⾏缩进。其值有以下设定⽅法：

length(长度，可以⽤绝对单位(cm,mm,in,pt,pc)或者相对单位(em,ex,px))percentage(百分⽐，相当于⽗对象宽度的百分

⽐)

⽰例代码如下：

.p1{text-indent:8mm}

4、⾏⾼属性(line-height)

这个属性设定每⾏之间的距离。其值有以下设定⽅法：

normal(缺省值)

length(长度，可以⽤绝对单位(cm,mm,in,pt,pc)或者相对单位(em,ex,px))percentage(百分⽐，相当于⽗对象⾼度的百分

⽐)

⽰例代码如下：

.p1{line-height:1cm}

5、字间距属性(letter-spacing)

这个属性⽤来设定字符之间的距离。

normal(缺省值)

length(长度，可以⽤绝对单位(cm,mm,in,pt,pc)或者相对单位(em,ex,px))

⽰例代码如下：

.p1{letter-spacing:3mm}

6、颜⾊属性(color)

⽤颜⾊属性(color)可以改变⽂本的字体颜⾊。字体颜⾊代码请参见HTML颜⾊参考(HTMLColorReference)。⽰例代码如下：

.p1{color:gray}

第五节CSS背景属性

1、背景颜⾊属性(background-color)

这个属性为HTML元素设定背景颜⾊，相当于HTML中bgcolor属性。

body{background-color:#99FF00;}

上⾯的代码表⽰Body这个HTML元素的背景颜⾊是翠绿⾊的。

2、背景图⽚属性(background-image)

这个属性为HTML元素设定背景图⽚，相当于HTML中background属性。

上⾯的代码为Body这个HTML元素设定了⼀个背景图⽚。

3、背景重复属性(background-repeat)

这个属性和background-image属性连在⼀起使⽤，决定背景图⽚是否重复。如果只设置background-image属性，没设置

background-repeat属性，在缺省状态下，图⽚既横向重复，⼜竖向重复。

repeat-x背景图⽚横向重复

repeat-y背景图⽚竖向重复

no-repeat背景图⽚不重复

body{background-image:url(../images/css_tutorials/);

background-repeat:repeat-y}

上⾯的代码表⽰图⽚竖向重复。

4、背景附着属性(background-attachment)

这个属性和background-image属性连在⼀起使⽤，决定图⽚是跟随内容滚动，还是固定不动。这个属性有两个值，⼀个是

scroll，⼀个是fixed。缺省值是scroll。

body{background-image:url(../images/css_tutorials/);

background-repeat:no-repeat;background-attachment:fixed}

上⾯的代码表⽰图⽚固定不动，不随内容滚动⽽动。

5、背景位置属性(background-position)

这个属性和background-image属性连在⼀起使⽤，决定了背景图⽚的最初位置。

body

{

background-image:url(../images/);background-repeat:no-repeat;background-position:20px60px

}

上⾯的代码表⽰背景图⽚的初始位置距离⽹页最左⾯20px，距离⽹页最上⾯60px。

6、背景属性(background)

这个属性是设置背景相关属性的⼀种快捷的综合写法，包括background-color,background-image,background-repeat,

backgroundattachment,background-position。

body

{

background:#99FF00url(../images/)no-repeatfixed40px100px

}

上⾯的代码表⽰，⽹页的背景颜⾊是翠绿⾊，背景图⽚是图⽚，背景图⽚不重复显⽰，背景图⽚不随内容滚动

⽽动，背景图⽚距离⽹页最左⾯40px，距离⽹页最上⾯100px。

第六节CSS边框属性

1、边框风格属性(border-style)

这个属性⽤来设定上下左右边框的风格，它的值如下：

none(没有边框，⽆论边框宽度设为多⼤)

dotted(点线式边框)

dashed(破折线式边框)

solid(直线式边框)

double(双线式边框)

groove(槽线式边框)

ridge(脊线式边框)

inset(内嵌效果的边框)

outset(突起效果的边框)

演⽰⽰例：分别使⽤none,dotted,dashed,solid,double,groove,ridge,inset,outset的CSS边框风格属性⽰例

这个div的CSS边框风格(border-style)属性缺省值是none。

这个div的CSS边框风格(border-style)属性是none。

这个div的CSS边框风格(border-style)属性是solid。

这个div的CSS边框风格(border-style)属性是dotted。

这个div的CSS边框风格(border-style)属性是dashed。

这个div的CSS边框风格(border-style)属性是double。

这个div的CSS边框风格(border-style)属性是groove。

这个div的CSS边框风格(border-style)属性是ridge。

这个div的CSS边框风格(border-style)属性是inset。

这个div的CSS边框风格(border-style)属性是outset。

2、边框宽度属性(border-width)

这个属性⽤来设定上下左右边框的宽度，它的值如下：

medium(是缺省值)

thin(⽐medium细)

thick(⽐medium粗)

⽤长度单位定值。可以⽤绝对长度单位(cm,mm,in,pt,pc)或者⽤相对长度单位(em,ex,px)。

演⽰⽰例：分别⽤medium,thin,thick和长度单位定制的CSS边框宽度属性⽰例

这个div的CSS边框宽度(border-width)属性缺省值是medium。

这个div的CSS边框宽度(border-width)属性值是thin。

这个div的CSS边框宽度(border-width)属性值是thick。

这个div的CSS边框宽度(border-width)属性值是10px。

这个div的CSS边框宽度(border-width)属性值是5mm。

3、边框颜⾊属性(border-color)

这个属性⽤来设定上下左右边框的颜⾊。例句如下：

.d5{border-color:gray;border-style:solid;}

4、边框属性(border)

这个属性是边框属性的⼀个快捷的综合写法，它包含border-width,border-style和border-color。例句如下：

.d1{border:5pxsolidgray;}

5、单边边框属性

上下左右四个边框不但可以统⼀设定，也可以分开设定。

设定上边框属性，你可以使⽤border-top,border-top-width,border-top-style,border-top-color。

设定下边框属性，你可以使⽤border-bottom,border-bottom-width,border-bottom-style,border-bottom-color。

设定左边框属性，你可以使⽤border-left,border-left-width,border-left-style,border-left-color。

设定上边框属性，你可以使⽤border-right,border-right-width,border-right-style,border-right-color。

例⼦代码：

单个边框属性：

设置上边框⽤border-top

设置下边框⽤border-bottom

设置左边框⽤border-left

设置右边框⽤border-right

第七节CSS边距属性

边距属性是⽤来设置页⾯中⼀个元素所占空间的边缘到相邻元素之间的距离。

1、左边距属性(margin-left)

这个属性⽤来设定左边距的宽度。⽰例如下：

.d1{margin-left:1cm}

2、右边距属性(margin-right)

这个属性⽤来设定右边距的宽度。⽰例如下：

.d1{margin-right:1cm}

3、上边距属性(margin-top)

这个属性⽤来设定上边距的宽度。⽰例如下：

.d1{margin-top:1cm}

4、下边距属性(margin-bottom)

这个属性⽤来设定下边距的宽度。⽰例如下：

.d1{margin-bottom:1cm}

5、边距属性(margin)

这个属性是设定边距宽度的⼀个快捷的综合写法，⽤这个属性可以同时设定上下左右边距属性。

你可以为上下左右边距设置相同的宽度。⽰例⼊下：

.d1{margin:1cm}

你也可以分别设置边距，顺序是上，右，下，左。⽰例如下：

.d1{margin:1cm2cm3cm4cm}

上⾯的代码表⽰，上边距为1cm，右边距为2cm，下边距为3cm，左边距为4cm。

⽰例：上下左右边距宽度相同

没有margin

上⾯两个div没有设置边距属性(margin)，仅设置了边框属性(border)。

外⾯那个div的border设为红⾊，⾥⾯那个div的border属性设为灰⾊。

和上⾯两个div的CSS属性设置唯⼀不同的是，下⾯两个div中，⾥⾯的那个div设置了边距属性(margin)，边距为1厘⽶，表⽰

这个div上下左右的边距都为

1厘⽶。

margin设为1cm

⽰例：上下左右边距宽度各不相同

没有margin

上⾯两个div没有设置边距属性(margin)，仅设置了边框属性(border)。

外⾯那个div的border设为红⾊，⾥⾯那个div的border属性设为灰⾊。

和上⾯两个div的CSS属性设置不同的是，下⾯两个div中，⾥⾯的那个div设置了边距属性(margin)，设定上边距为0.5cm，右

边距为1cm，下边距为2.5cm，

左边距为1.5cm。

上下左右边距宽度各不同

第⼋节CSS间隙属性

间隙属性(padding)是⽤来设置元素内容到元素边界的距离。

1、左间隙属性(padding-left)

这个属性⽤来设定左间隙的宽度。⽰例如下：

.d1{padding-left:1cm}

⽰例代码：

这个单元格的CSS左间隙属性(padding-left)为2厘⽶。

2、右间隙属性(padding-right)

这个属性⽤来设定右间隙的宽度。⽰例如下：

.d1{padding-right:1cm}

⽰例请参照左间隙属性⽰例，只要将⾥⾯的padding-left改成padding-right即可。

3、上间隙属性(padding-top)

这个属性⽤来设定上间隙的宽度。⽰例如下：

.d1{padding-top:1cm}

⽰例请参照左间隙属性⽰例，只要将⾥⾯的padding-left改成padding-top即可。

4、下间隙属性(margin-bottom)

这个属性⽤来设定下间隙的宽度。⽰例如下：

.d1{padding-bottom:1cm}

⽰例请参照左间隙属性⽰例，只要将⾥⾯的padding-left改成padding-bottom即可。

5、间隙属性(padding)

这个属性是设定间隙宽度的⼀个快捷的综合写法，⽤这个属性可以同时设定上下左右间隙属性。

你可以为上下左右间隙设置相同的宽度。⽰例⼊下：

.d1{padding:1cm}

你也可以分别设置间隙，顺序是上，右，下，左。⽰例如下：

.d1{padding:1cm2cm3cm4cm}

上⾯的代码表⽰，上间隙为1cm，右间隙为2cm，下间隙为3cm，左间隙为4cm。

第九节CSS盒⼦模式(BoxModel)

CSS中有个重要的概念，就是盒⼦模式(Boxmodel)。

先看看下⾯这个图，⿊框包围的⼀个⽅块，就是⼀个盒⼦(Box)。

盒⼦⾥由外⾄⾥依次是：

margin边距

border边框

padding间隙(也有⼈称做补丁)

content(内容，⽐如⽂本，图⽚等)

CSS边距属性(margin)是⽤来设置⼀个元素所占空间的边缘到相邻元素之间的距离。

CSS边框属性(border)⽤来设定⼀个元素的边线。

CSS间隙属性(padding)是⽤来设置元素内容到元素边框的距离。

CSS背景属性指的是content和padding区域。

CSS属性中的width和height指的是content区域的宽和⾼。

第⼗节CSS列表样式属性

1、列表样式类型属性(list-style-type)

这个属性⽤来设定列表项标记(list-itemmarker)的类型。有以下值：

disc(缺省值，⿊圆点)

circle(空⼼圆点)

square(⼩⿊⽅块)

decimal(数字排序)

lower-roman(⼩写罗马字排序)

upper-roman(⼤写罗马字排序)

lower-alpha(⼩写字母排序)

upper-alpha(⼤写字母排序)

none(⽆列表项标记)

例⼦代码:

⾁类

蔬菜

⽔果

⾁类

蔬菜

⽔果

⾁类

蔬菜

⽔果

⾁类

蔬菜

⽔果

2、列表样式位置属性(list-style-position)

列表样式位置属性(list-style-position)有两个值：

outside(以列表项内容为准对齐)

inside(以列表项标记为准对齐)

3、列表样式图⽚属性(list-style-image)

列表项标记可以⽤图⽚来表⽰，⽤列表样式图⽚属性(list-style-image)来设定图⽚。

⽰例代码如下：

ul{list-style-image:url(../images/css_tutorials/)}

4、列表样式属性(list-style)

这个属性是设定列表样式的⼀个快捷的综合写法。⽤这个属性可以同时设值列表样式类型属性(list-style-type)，列表样式位置

属性(list-style-position)和列表样式图⽚属性(list-style-image)。⽰例代码如下：

ul{list-style:circleinsideurl(../images/css_tutorials/)}

例⼦代码：

茶

咖啡

可乐

第⼗⼀节CSS伪类(pseudo-class)

和⼀般的CSS语法不同(参见CSS语法)，CSS伪类的语法有两种。

第⼀种：selector:pseudo-class{property:value}

例句：a:link{color:red}

第⼆种：:pseudo-class{property:value}

例句：a.c1:link{color:red}

1、锚(a)伪类

锚(a)伪类是最常⽤的伪类。例句如下：

a:link{color:#FF0000}/*未被访问的链接红⾊*/

a:visited{color:#00FF00}/*已被访问过的链接绿⾊*/

a:hover{color:#FFCC00}/*⿏标悬浮在上的链接橙⾊*/

a:active{color:#0000FF}/*⿏标点中激活链接蓝⾊*/

⽰例代码：

站长⽹站长学院⽹站-⽹页教程与

代码的中⽂站点

2、⽤HTML的class属性来设定伪类。

例句如下：

a.c1:link{color:#FF0000}/*未被访问的链接红⾊*/

a.c1:visited{color:#00FF00}/*已被访问过的链接绿⾊*/

a.c1:hover{color:#FFCC00}/*⿏标悬浮在上的链接橙⾊*/

a.c1:active{color:#0000FF}/*⿏标点中激活链接蓝⾊*/

⽰例代码：

站长⽹站长学院⽹站-⽹页教程与代码的中⽂站点

魔兽世界中的可爱玩家

注：由于CSS优先级的关系(后⾯⽐前⾯的优先级⾼)，在写a的CSS时，⼀定要按照a:link，a:visited，a:hover，a:actived的

顺序书写。