CSS教程与代码索引.docx

《CSS教程与代码索引.docx》由会员分享，可在线阅读，更多相关《CSS教程与代码索引.docx（24页珍藏版）》请在冰豆网上搜索。

CSS教程与代码索引

CSS（CascadingStyleSheets）简介

在学CSS之前

学习CSS之前，首先应学会写HTML。

如果你对HTML还一无所知，请参见HTML教程。

CSS（CascadingStyleSheets）简介

当初一帮技术人员想出HTML，主要侧重于定义内容，比如

表示一个段落，

表示标题，而并没有过多设计HTML的排版和界面效果。

随着Internet的迅猛发展，HTML被广泛应用，上网的人们当然希望网页做得漂亮些，因此HTML排版和界面效果的局限性日益暴露出来。

为了解决这个问题，人们也走了不少弯路，用了一些不好的方法，比如给HTML增加很多的属性结果将代码变得很臃肿，将文本变成图片，过多利用Table来排版，用空白的图片表示白色的空间等。

直到CSS出现。

CSS可算是网页设计的一个突破，它解决了网页界面排版的难题。

可以这么说，HTML的Tag主要是定义网页的内容（Content），而CSS决定这些网页内容如何显示（Layout）。

CSS的英文是CascadingStyleSheets，中文可以翻译成串联式样式表。

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

∙内嵌样式（InlineStyle）

∙内部样式表（InternalStyleSheet）

∙外部样式表（ExternalStyleSheet）

内嵌样式（InlineStyle）

InlineStyle是写在Tag里面的。

内嵌样式只对所在的Tag有效。

20pt;color:

red">这个Style定义里面的文字是20pt字体，字体颜色是红色。

显示示例

内部样式表（InternalStyleSheet）

内部样式表是写在HTML的里面的。

内部样式表只对所在的网页有效。

H1.mylayout{border-width:

1;border:

solid;text-align:

center;color:

red}

这个标题使用了Style。

这个标题没有使用Style。

显示示例

内部样式表（InternalSytleSheet）要用到Style这个Tag，写法如下：

......

外部样式表（ExternalStyleSheet）

如果很多网页需要用到同样的样式（Styles），用什么方法呢？

将样式（Styles）写在一个以.css为后缀的CSS文件里，然后在每个需要用到这些样式（Styles）的网页里引用这个CSS文件。

比如可以用文本编辑器（NotePad）建立一个叫home的文件，文件后缀不要用.txt，改成.css。

文件内容如下：

H1.mylayout{border-width:

1;border:

solid;text-align:

center;color:

red}

然后你建立一个网页，代码如下：

这个标题使用了Style。

这个标题没有使用Style。

显示示例

使用外部（Extenal）样式表，相对于内嵌（Inline）和内部式（Internal）的，有以下优点：

∙样式代码可以复用。

一个外部CSS文件，可以被很多网页共用。

∙便于修改。

如果要修改样式，只需要修改CSS文件，而不需要修改每个网页。

∙提高网页显示的速度。

如果样式写在网页里，会降低网页显示的速度，如果网页引用一个CSS文件，这个CSS文件多半已经在缓存区（其它网页早已经引用过它），网页显示的速度就比较快。

串联（Cascading）

CSS第一个字母，是Cascading，意为串联。

它是指不同来源的样式（Styles）可以合在一起，形成一种样式。

Cascading的顺序是：

∙浏览器缺省（browserdefault）（优先级最低）

∙外部样式表（ExtenalStyleSheet）

∙内部样式表（InternalStyleSheet）

∙内嵌样式表（InlineStyle）（优先级最高）

样式（Styles）的优先级依次是内嵌（inline）,内部（internal）,外部（external）,浏览器缺省（browserdefault）。

假设内嵌（Inline）样式中有font-size:

30pt,而内部（Internal）样式中有font-size:

12pt，那么内嵌（Inline）式样式就会覆盖内部（Internal）样式。

显示示例

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

}

上面的例子是将所有正文标题（

到

）的字体颜色都变成红色。

ClassSelector

利用ClassSelector，你可以用同样的HTMLTag构成不同的样式。

比如说，你希望段落

有两种样式，一种是居中对齐，一种是居右对齐。

你就可以写如下样式：

p.right{text-align:

right}

p.center{text-align:

center}

其中right和center就是两个class。

然后你就可以引用这两个class，示例代码如下：

这一段居中显示。

这一段是居右显示。

演示示例

你也可以不用HTMLTag，直接用.加上Class名称作为一个Selector。

示例代码如下：

.center{text-align:

center}

这种通用的ClassSelector就没有Tag的局限性，可以用于不同的Tag。

比如：

这个标题居中显示。

这个段落居中显示。

演示示例

ContextualSelector

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

p em{color:

red}

Em这个Tag嵌套在P里面。

pem就叫做ContextualSelector，定义嵌套于P里的Em的样式。

这个例子表示，在P里面的用Em这个Tag标记的字体颜色是红色。

演示示例

CSS注释

为了方便你自己或者他人日后更好地理解你的CSS代码，你可以写CSS代码注释。

CSS代码注释以/*开头，以*/结束。

/* 段落样式*/

p

{

text-align:

center;

/* 居中显示*/

color:

black;

font-family:

arial

}

CSS字体属性

字体名称属性（font-family）

这个属性设定字体名称，如Arial,Tahoma,Courier等。

例句如下：

.s1{font-family:

Arial}

演示示例

字体大小属性（font-size）

这个属性可以设置字体的大小。

字体大小的设置可以有多种方式，最常用的就是pt和px（pixel）。

例句如下：

.s2{font-size:

16pt}

演示示例

字体风格属性（font-style）

这个属性有三个值可选：

normal,italic,oblique。

normal是缺省值，italic,oblique都是斜体显示。

例句如下：

.s1{font-sytle:

italic}

演示示例

字体浓淡属性（font-weight）

这个属性常用值是normal和bold，normal是缺省值。

例句如下：

bold">这段文字字体的浓淡属性（font-weight）值是bold。

演示示例

字体变量属性（font-variant）

这个属性有两个值，normal和small-caps，normal是缺省值。

small-caps表示小的大写字体。

例句如下：

 .s1{font-variant:

small-caps}

演示示例

字体属性（font）

这个属性是各种字体属性的一种快捷的综合写法。

这个属性可以综合字体风格属性（font-style），字体变量属性（font-variant），字体浓淡属性（font-weight），字体大小属性（font-size）等属性。

例句如下：

.s1{font:

italicnormalbold11ptarial}

演示示例

字体颜色（color）

字体颜色用CSS中的color属性来表示。

参见CSS常用文本属性。

CSS常用文本属性

文本对齐属性（text-align）

这个属性用来设定文本的对齐方式。

有以下值：

∙left（居左，缺省值）

∙right（居右）

∙center（居中）

∙justify（两端对齐）

示例代码如下：

.p2{text-align:

right}

演示示例

文本修饰属性（text-decoration）

这个属性主要设定文本划线的属性。

有以下值：

∙none（无，缺省值）

∙underline （下划线）

∙overline（上划线）

∙line-through（当中划线）

示例代码如下：

.p2{text-decoration:

underline}

演示示例

文本缩进属性（text-indent）

这个属性设定文本首行缩进。

其值有以下设定方法：

∙length（长度，可以用绝对单位（cm,mm,in,pt, pc）或者相对单位（em,ex,px））

∙percentage（百分比，相当于父对象宽度的百分比）

示例代码如下：

.p1{text-indent:

8mm}

演示示例

行高属性（line-height）

这个属性设定每行之间的距离。

其值有以下设定方法：

∙normal（缺省值）

∙length（长度，可以用绝对单位（cm,mm,in,pt,pc）或者相对单位（em,ex,px））

∙percentage（百分比，相当于父对象高度的百分比）

示例代码如下：

.p1{line-height:

1cm}

演示示例

字间距属性（letter-spacing）

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

∙normal（缺省值）

∙length（长度，可以用绝对单位（cm,mm,in,pt,pc）或者相对单位（em,ex,px））

示例代码如下：

.p1{letter-spacing:

3mm}

演示示例

颜色属性（color）

用颜色属性（color）可以改变文本的字体颜色。

字体颜色代码请参见HTML颜色参考（HTMLColorReference）。

示例代码如下：

.p1{color:

gray}

演示示例

CSS背景属性

背景颜色属性（background-color）

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

body{background-color:

#99FF00;}

上面的代码表示Body这个HTML元素的背景颜色是翠绿色的。

演示示例

背景图片属性（background-image）

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

url（../images/css_tutorials/background.jpg）">

上面的代码为Body这个HTML元素设定了一个背景图片。

演示示例

背景重复属性（background-repeat）

这个属性和background-image属性连在一起使用，决定背景图片是否重复。

如果只设置background-image属性，没设置background-repeat属性，在缺省状态下，图片既横向重复，又竖向重复。

∙repeat-x背景图片横向重复

∙repeat-y背景图片竖向重复

∙no-repeat背景图片不重复

body{background-image:

url（../images/css_tutorials/background.jpg）;background-repeat:

repeat-y}

上面的代码表示图片竖向重复。

演示示例

背景附着属性（background-attachment）

这个属性和background-image属性连在一起使用，决定图片是跟随内容滚动，还是固定不动。

这个属性有两个值，一个是scroll，一个是fixed。

缺省值是scroll。

body{background-image:

url（../images/css_tutorials/background.jpg）;background-repeat:

no-repeat;background-attachment:

fixed}

上面的代码表示图片固定不动，不随内容滚动而动。

演示示例

背景位置属性（background-position）

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

body{background-image:

url（../images/css_tutorials/background.jpg）;background-repeat:

no-repeat;background-position:

20px60px}

上面的代码表示背景图片的初始位置距离网页最左面20px，距离网页最上面60px。

演示示例

背景属性（background）

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

body{background:

#99FF00url（../images/css_tutorials/background.jpg）no-repeatfixed40px100px}

上面的代码表示，网页的背景颜色是翠绿色，背景图片是background.jpg图片，背景图片不重复显示，背景图片不随内容滚动而动，背景图片距离网页最左面40px，距离网页最上面100px。

演示示例

CSS边框属性

边框风格属性（border-style）

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

∙none（没有边框，无论边框宽度设为多大）

∙dotted（点线式边框）

∙dashed（破折线式边框）

∙solid（直线式边框）

∙double（双线式边框）

∙groove（槽线式边框）

∙ridge（脊线式边框）

∙inset（内嵌效果的边框）

∙outset（突起效果的边框）

演示示例：

分别使用none,dotted,dashed,solid,double,groove,ridge,inset,outset的CSS边框风格属性示例

边框宽度属性（border-width）

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

∙medium（是缺省值）

∙thin（比medium细）

∙thick（比medium粗）

∙用长度单位定值。

可以用绝对长度单位（cm,mm,in,pt, pc）或者用相对长度单位（em,ex, px）。

演示示例：

分别用medium,thin,thick和长度单位定制的CSS边框宽度属性示例

边框颜色属性（border-color）

这个属性用来设定上下左右边框的颜色。

例句如下：

.d5{border-color:

gray;border-style:

solid;}

演示示例

边框属性（border）

这个属性是边框属性的一个快捷的综合写法，它包含border-width,border-style和border-color。

例句如下：

.d1{border:

5pxsolidgray;}

演示示例 

单边边框属性

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

设定上边框属性，你可以使用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。

演示示例：

设置单边边框属性的示例

CSS边距属性

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

左边距属性（margin-left）

这个属性用来设定左边距的宽度。

示例如下：

.d1{margin-left:

1cm}

演示示例

右边距属性（margin-right）

这个属性用来设定右边距的宽度。

示例如下：

.d1{margin-right:

1cm}

演示示例请参照左边距属性示例，只要将里面的margin-left改成margin-right即可。

上边距属性（margin-top）

这个属性用来设定上边距的宽度。

示例如下：

.d1{margin-top:

1cm}

演示示例请参照左边距属性示例，只要将里面的margin-left改成margin-top即可。

下边距属性（margin-bottom）

这个属性用来设定下边距的宽度。

示例如下：

.d1{margin-bottom:

1cm}

演示示例请参照左边距属性示例，只要将里面的margin-left改成margin-bottom即可。

边距属性（margin）

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

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

示例入下：

.d1{margin:

1cm}

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

示例如下：

.d1{margin:

1cm2cm3cm4cm}

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

演示示例：

上下左右边距宽度相同

演示示例：

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

CSS间隙属性

间隙属性（padding）是用来设置元素内容到元素边界的距离。

左间隙属性（padding-left）

这个属性用来设定左间隙的宽度。

示例如下：

.d1{padding-left:

1cm}

演示示例

右间隙属性（padding-right）

这个属性用来设定右间隙的宽度。

示例如下：

.d1{padding-right:

1cm}

演示示例请参照左间隙属性示例，只要将里面的padding-left改成padding-right即可。

上间隙属性（padding-top）

这个属性用来设定上间隙的宽度。

示例如下：

.d1{padding-top:

1cm}

演示示例请参照左间隙属性示例，只要将里面的padding-left改成padding-top即可。

下间隙属性（margin-bottom）

这个属性用来设定下间隙的宽度。

示例如下：

.d1{padding-bottom:

1cm}

演示示例请参照左间隙属性示例，只要将里面的padding-left改成padding-bottom即可。

间隙属性（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列表样式属性

列表样式类型属性（list-style-type）

这个属性用来设定列表项标记（list-itemmarker