1、在学 CSS 之前学习 CSS 之前，首先应学会写 HTML。如果你对 HTML 还一无所知，请参见 HTML教程。CSS(Cascading Style Sheets)简介当初一帮技术人员想出 HTML，主要侧重于定义内容，比如 表示一个段落，表示标题，而并没有过多设计 HTML 的排版和界面效果。随着 Internet 的迅猛发展，HTML 被广泛应用，上网的人们当然希望网页做得漂亮些，因此 HTML 排版和界面效果的局限性日益暴露出来。为了解决这个问题，人们也走了不少弯路，用了一些不好的方法，比如给 HTML 增加很多的属性结果将代码变得很臃肿，将文本变成图片，过多利用 Table 来排
2、版，用空白的图片表示白色的空间等。直到 CSS出现。CSS 可算是网页设计的一个突破，它解决了网页界面排版的难题。可以这么说，HTML 的 Tag 主要是定义网页的内容(Content) ，而 CSS 决定这些网页内容如何显示(Layout)。CSS 的英文是 Cascading Style Sheets，中文可以翻译成串联式样式表。CSS 按其位置可以分成三种： 内嵌样式(Inline Style) 内部样式表(Internal Style Sheet) 外部样式表(External Style Sheet)内嵌样式(Inline Style)Inline Style 是写在 Tag 里面的
3、。内嵌样式只对所在的 Tag 有效。这个 Style 定义里面的文字是 20pt 字体，字体颜色是红色。显示示例内部样式表(Internal Style Sheet) 内部样式表是写在 HTML 的里面的。内部样式表只对所在的网页有效。H1.mylayout border-width:1; border:solid; text-align:center; color:red这个标题使用了 Style。这个标题没有使用 Style。显示示例内部样式表(Internal Sytle Sheet)要用到 Style 这个 Tag，写法如下：外部样式表(External Style Sheet)如果很
4、多网页需要用到同样的样式(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)样式表，相对
5、于内嵌(Inline)和内部式(Internal)的，有以下优点： 样式代码可以复用。一个外部 CSS 文件，可以被很多网页共用。 便于修改。如果要修改样式，只需要修改 CSS 文件，而不需要修改每个网页。 提高网页显示的速度。如果样式写在网页里，会降低网页显示的速度，如果网页引用一个 CSS文件，这个 CSS 文件多半已经在缓存区 (其它网页早已经引用过它)，网页显示的速度就比较快。 串联(Cascading)CSS 第一个字母，是 Cascading，意为串联。它是指不同来源的样式(Styles)可以合在一起，形成一种样式。Cascading 的顺序是： 浏览器缺省(browser def
6、ault)(优先级最低) 外部样式表(Extenal Style Sheet) 内部样式表(Internal Style Sheet) 内嵌样式表(Inline Style)(优先级最高)样式(Styles)的优先级依次是内嵌(inline), 内部(internal), 外部(external), 浏览器缺省(browser default)。假设内嵌(Inline) 样式中有 font-size:30pt, 而内部(Internal)样式中有 font-size:12pt，那么内嵌(Inline)式样式就会覆盖内部(Internal)样式。CSS 语法基本语法一个样式(Style) 的语法
7、由三部分构成： Selector(中文叫选择器有点怪怪的，就用英文吧) ，属性 (Property)，属性值(Value)。selector property: value举个例子，下面的代码 p 就是 selector，color 就是属性，blue 就是属性值。p color:blueHTML 中所有的 Tag 都可以作为 selector。注：如果你想为 Style 加多个属性，在两个属性之间要用分号加以分隔。下面的 Style 就包含 2 个属性，一个是对齐方式居中，一个字体颜色为红，当中用分号分隔开。p text-align:center;color:red 为了提高 Style 代
8、码的可读性，你也可以分行写：ptext-align: center;color: black;font-family: arial 组合(Grouping)你也可以将相同的属性和属性值赋予多个 Selector。Selector 之间用逗号分隔。h1,h2,h3,h4,h5,h6 color: red上面的例子是将所有正文标题(到) 的字体颜色都变成红色。Class Selector利用 Class Selector，你可以用同样的 HTML Tag 构成不同的样式。比如说，你希望段落有两种样式，一种是居中对齐，一种是居右对齐。你就可以写如下样式：p.right text-align:righ
9、tp.center text-align:center其中 right 和 center 就是两个 class。然后你就可以引用这两个 class，示例代码如下：这一段居中显示。这一段是居右显示。演示示例你也可以不用 HTML Tag，直接用 .加上 Class 名称作为一个 Selector。示例代码如下：.center text-align: center 这种通用的 Class Selector 就没有 Tag 的局限性，可以用于不同的 Tag。比如：这个标题居中显示。这个段落居中显示。演示示例Contextual Selector你可以为嵌入其它 Tag 的 Tag 定义样式，示例代码
10、如下：p emcolor: redEm 这个 Tag 嵌套在 P 里面。p em 就叫做 Contextual Selector，定义嵌套于 P里的 Em 的样式。这个例子表示，在 P 里面的用 Em 这个 Tag 标记的字体颜色是红色。演示示例CSS 注释为了方便你自己或者他人日后更好地理解你的 CSS 代码，你可以写 CSS 代码注释。CSS 代码注释以 /*开头，以 */结束。/* 段落样式 */ptext-align: center;/* 居中显示 */color: black;font-family: arial CSS 字体属性字体名称属性(font-family)这个属性设定字体
11、名称，如 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)这个属性常用值是
12、normal 和 bold，normal 是缺省值。例句如下：这段文字字体的浓淡属性(font-weight)值是 bold。演示示例字体变量属性(font-variant)这个属性有两个值，normal 和 small-caps，normal 是缺省值。small-caps 表示小的大写字体。例句如下：.s1 font-variant:small-caps演示示例字体属性(font)这个属性是各种字体属性的一种快捷的综合写法。这个属性可以综合字体风格属性(font-style)，字体变量属性(font-variant)，字体浓淡属性 (font-weight)，字体大小属性(font-siz
13、e)等属性。例句如下：.s1 font:italic normal bold 11pt arial演示示例字体颜色(color)字体颜色用 CSS 中的 color 属性来表示。参见 CSS 常用文本属性。CSS 常用文本属性文本对齐属性(text-align)这个属性用来设定文本的对齐方式。有以下值： left (居左，缺省值) right (居右) center (居中) justify (两端对齐) 示例代码如下：.p2 text-align:right演示示例文本修饰属性(text-decoration)这个属性主要设定文本划线的属性。有以下值： none (无，缺省值 ) under
14、line (下划线) 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 (缺省值
15、) 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) 可以改变文本的字体颜色。字体颜色
16、代码请参见 HTML 颜色参考(HTML Color Reference)。示例代码如下：.p1color:gray演示示例CSS 背景属性背景颜色属性(background-color)这个属性为 HTML 元素设定背景颜色，相当于 HTML 中 bgcolor 属性。body background-color:#99FF00;上面的代码表示 Body 这个 HTML 元素的背景颜色是翠绿色的。演示示例背景图片属性(background-image)这个属性为 HTML 元素设定背景图片，相当于 HTML 中 background 属性。上面的代码为 Body 这个 HTML 元素设定了一个
17、背景图片。演示示例背景重复属性(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上面的代码表
18、示图片竖向重复。演示示例背景附着属性(background-attachment)这个属性和 background-image 属性连在一起使用，决定图片是跟随内容滚动，还是固定不动。这个属性有两个值，一个是 scroll，一个是 fixed。缺省值是 scroll。body background-image:url(/images/css_tutorials/background.jpg); background-repeat:no-repeat; background-attachment:fixed上面的代码表示图片固定不动，不随内容滚动而动。演示示例背景位置属性(background-
19、position)这个属性和 background-image 属性连在一起使用，决定了背景图片的最初位置。body background-image:url(/images/css_tutorials/background.jpg);background-repeat:no-repeat; background-position:20px 60px上面的代码表示背景图片的初始位置距离网页最左面 20px，距离网页最上面 60px。演示示例背景属性(background)这个属性是设置背景相关属性的一种快捷的综合写法， 包括 background-color, background-image
20、, background-repeat, backgroundattachment, background-position。body background:#99FF00 url(/images/css_tutorials/background.jpg) no-repeat fixed 40px 100px上面的代码表示，网页的背景颜色是翠绿色，背景图片是 background.jpg 图片，背景图片不重复显示，背景图片不随内容滚动而动，背景图片距离网页最左面 40px，距离网页最上面 100px。演示示例CSS 边框属性边框风格属性(border-style)这个属性用来设定上下左右边框的
21、风格，它的值如下： none (没有边框，无论边框宽度设为多大) dotted (点线式边框) dashed (破折线式边框) solid (直线式边框) double (双线式边框) groove (槽线式边框) ridge(脊线式边框) inset (内嵌效果的边框) outset (突起效果的边框)演示示例：分别使用 none,dotted, dashed, solid, double, groove, ridge, inset, outset 的 CSS 边框风格属性示例边框宽度属性(border-width)这个属性用来设定上下左右边框的宽度，它的值如下： medium (是缺省值)
22、 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和
23、border-color。例句如下：.d1 border:5px solid gray;演示示例 单边边框属性上下左右四个边框不但可以统一设定，也可以分开设定。设定上边框属性，你可以使用 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, bord
24、er-left-style, border-left-color。设定上边框属性，你可以使用 border-right, border-right-width, border-right-style, border-right-color。演示示例：设置单边边框属性的示例CSS 边距属性边距属性是用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离。左边距属性(margin-left)这个属性用来设定左边距的宽度。示例如下：.d1margin-left:1cm演示示例右边距属性(margin-right)这个属性用来设定右边距的宽度。示例如下：.d1 margin-right:1cm演示示
25、例请参照左边距属性示例，只要将里面的 margin-left 改成 margin-right 即可。上边距属性(margin-top)这个属性用来设定上边距的宽度。示例如下：.d1 margin-top:1cm演示示例请参照左边距属性示例，只要将里面的 margin-left 改成 margin-top 即可。下边距属性(margin-bottom)这个属性用来设定下边距的宽度。示例如下：.d1margin-bottom:1cm演示示例请参照左边距属性示例，只要将里面的 margin-left 改成 margin-bottom即可。边距属性(margin)这个属性是设定边距宽度的一个快捷的综合
26、写法，用这个属性可以同时设定上下左右边距属性。你可以为上下左右边距设置相同的宽度。示例入下：.d1 margin:1cm你也可以分别设置边距，顺序是上，右，下，左。示例如下：.d1 margin:1cm 2cm 3cm 4cm上面的代码表示，上边距为 1cm，右边距为 2cm，下边距为 3cm，左边距为 4cm。演示示例：上下左右边距宽度相同演示示例：上下左右边距宽度各不相同CSS 间隙属性间隙属性(padding) 是用来设置元素内容到元素边界的距离。左间隙属性(padding-left)这个属性用来设定左间隙的宽度。示例如下：.d1padding-left:1cm演示示例右间隙属性(pad
27、ding-right)这个属性用来设定右间隙的宽度。示例如下：.d1 padding-right:1cm演示示例请参照左间隙属性示例，只要将里面的 padding-left 改成 padding-right即可。上间隙属性(padding-top)这个属性用来设定上间隙的宽度。示例如下：.d1 padding-top:1cm演示示例请参照左间隙属性示例，只要将里面的 padding-left 改成 padding-top 即可。下间隙属性(margin-bottom)这个属性用来设定下间隙的宽度。示例如下：.d1padding-bottom:1cm演示示例请参照左间隙属性示例，只要将里面的 p
28、adding-left 改成 padding-bottom 即可。间隙属性(padding)这个属性是设定间隙宽度的一个快捷的综合写法，用这个属性可以同时设定上下左右间隙属性。你可以为上下左右间隙设置相同的宽度。示例入下：.d1 padding:1cm你也可以分别设置间隙，顺序是上，右，下，左。示例如下：.d1 padding:1cm 2cm 3cm 4cm上面的代码表示，上间隙为 1cm，右间隙为 2cm，下间隙为 3cm，左间隙为 4cm。演示示例：上下左右间隙宽度相同演示示例：上下左右间隙宽度各不相同CSS 盒子模式(Box ModelCSS 中有个重要的概念，就是盒子模式 (Box m
29、odel)。胡戈的“一个馒头引发的血案“中有个圆圈套圆圈娱乐城，而这个盒子模式套用这句话来说，就是方块套方块。先看看下面这个图，黑框包围的一个方块，就是一个盒子 (Box)。盒子里由外至里依次是： margin 边距 border 边框 padding 间隙 (也有人称做补丁) content (内容，比如文本，图片等 )CSS 边距属性 (margin) 是用来设置一个元素所占空间的边缘到相邻元素之间的距离。CSS 边框属性 (border) 用来设定一个元素的边线。CSS 间隙属性 (padding) 是用来设置元素内容到元素边框的距离。CSS 背景属性指的是 content 和 padd
30、ing 区域。CSS 属性中的 width 和 height 指的是 content 区域的宽和高。CSS 列表样式属性列表样式类型属性(list-style-type)这个属性用来设定列表项标记(list-item marker)的类型。有以下值： disc (缺省值，黑圆点) circle (空心圆点 ) square (小黑方块) decimal (数字排序) lower-roman (小写罗马字排序) upper-roman (大写罗马字排序) lower-alpha (小写字母排序) upper-alpha (大写字母排序) none (无列表项标记 ) 以 disc,circle,
31、square,none 作为列表项标记的列表示例以 decimal,lower-roman,upper-roman,lower-alpha,upper-alpha 作为列表项标记的列表示例列表样式位置属性(list-style-position)列表样式位置属性(list-style-position) 有两个值： outside (以列表项内容为准对齐) inside (以列表项标记为准对齐)演示示例列表样式图片属性(list-style-image)列表项标记可以用图片来表示，用列表样式图片属性(list-style-image)来设定图片。示例代码如下：ul list-style-ima
32、ge: url(/images/css_tutorials/dot02.gif)演示示例列表样式属性(list-style)这个属性是设定列表样式的一个快捷的综合写法。用这个属性可以同时设值列表样式类型属性(list-style-type)，列表样式位置属性 (list-style-position)和列表样式图片属性(list-style-image)。示例代码如下：ul list-style:circle inside url(/images/css_tutorials/dot02.gif)演示示例CSS 伪类(pseudo-class)和一般的 CSS 语法不同( 参见 CSS 语法)，
33、CSS 伪类的语法有两种。第一种：selector:pseudo-class property: value 例句：a:link color:red第二种：selector.class:pseudo-class property: value例句：a.c1:link color:red锚(a)伪类锚(a)伪类是最常用的伪类。例句如下：a:link color: #FF0000 /* 未被访问的链接 红色 */a:visited color: #00FF00 /* 已被访问过的链接 绿色 */a:hover color: #FFCC00 /* 鼠标悬浮在上的链接 橙色 */a:active co
34、lor: #0000FF /* 鼠标点中激活链接 蓝色 */演示示例也可以用 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 的顺序书写。
