CSS教程与代码索引.doc

1、CSS(Cascading Style Sheets)简介 在学 CSS 之前 学习 CSS 之前，首先应学会写 HTML。如果你对 HTML 还一无所知，请参见 HTML 教程 。 CSS(Cascading Style Sheets)简介 当初一帮技术人员想出 HTML，主要侧重于定义内容，比如 表示一个段落， 表示标题，而并没有过多设计 HTML 的排版和界 面效果。 随着 Internet 的迅猛发展， HTML 被广泛应用，上网的人们当然希望网页做得漂亮些，因此 HTML 排版和界面效果的局限性日益暴露出来。为了解决这个问题，人们也走了不少弯路，用了一些不好的方法，比如给 HTML

2、增加很多的属性结果将代码变得很臃肿，将文本变成图片，过多利用 Table来排版，用空白的图片表示白色的空间等。直到 CSS 出现。 CSS 可算是网页设计的一个突破，它解决了网页界面排版的难题。可以这么说， HTML 的Tag 主要是定义网页的内容 (Content)，而 CSS决定这些网页内容如何显示 (Layout)。 CSS 的英文是 Cascading Style Sheets，中文可以翻译成串联式样式表。 CSS 按其位置可以分成三种： 内嵌样式 (Inline Style) 内部样式表 (Internal Style Sheet) 外部样式表 (External Style She

3、et) 内嵌样式 (Inline Style) Inline Style是写在 Tag 里面的。内嵌样式只对所在的 Tag 有效。 这个 Style定义 里面 的文字是 20pt字体，字体颜色是红色。 显示示例 内部样式表 (Internal Style Sheet) 内部样式表是写在 HTML 的 里面的。内部样式表只对所在的网页有效。 H1.mylayout border-width:1; border:solid; text-align:center; color:red 这个标题使用了 Style。 这个标题没有使用 Style。 显示示例 内部样式表 (Internal Sytle

4、Sheet)要用到 Style这个 Tag，写法如下： . 外部样式表 (External Style Sheet) 如果很多网页需要用到同样的样式 (Styles)，用什么方法呢？ 将样式 (Styles)写在一个以 .css 为后缀的 CSS 文件里，然后在每个需要用到这些样式(Styles)的网页里引用这个 CSS 文件。 比如可以用文本编辑器 (NotePad)建立一个叫 home的文件，文件后缀不要用 .txt，改成 .css。文件内容如下： H1.mylayout border-width: 1; border: solid; text-align: center;color:re

5、d 然后你建立一个网页，代码如下： 这个标题使用了 Style。 这个标题没有使用 Style。 显示示例 使用外部 (Extenal)样式表，相对于内嵌 (Inline)和内部式 (Internal)的，有以下优点： 样式代码可以复用。一个外部 CSS 文件，可以被很多网页共用。 便于修改。如果要修改样式，只需要修改 CSS 文件，而不需要修改每个网页。 提高网页显示的速度。如果样式写在网页里，会降低网页 显示的速度，如果网页引用一个 CSS 文件，这个 CSS文件多半已经在缓存区 (其它网页早已经引用过它 )，网页显示的速度就比较快。 串联 (Cascading) CSS 第一个字母，是

6、Cascading，意为串联。它是指不同来源的样式 (Styles)可以合在一起，形成一种样式。 Cascading 的顺序是： 浏览器缺省 (browser default)(优先级最低 ) 外部样式表 (Extenal Style Sheet) 内部样式表 (Internal Style Sheet) 内嵌样式表 (Inline Style)(优先级最高 ) 样式 (Styles)的优先级依次是内嵌 (inline), 内部 (internal), 外部 (external), 浏览器缺省 (browser default)。假设内嵌 (Inline)样式中有 font-size:30pt

7、, 而内部 (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加

8、多个属性，在两个属性之间要用分号加以分隔。 下面的 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 上面的例子是将所有正 文标题 (到 )的字体颜色都变成红

9、色。 Class Selector 利用 Class Selector，你可以用同样的 HTML Tag 构成不同的样式。比如说，你希望段落有两种样式，一种是居中对齐，一种是居右对齐。你就可以写如下样式： p.right text-align:right p.center text-align:center 其中 right 和 center 就是两个 class。然后你就可以引用这两个 class，示例代码如下： 这一段居中显示 。 这一段是居右显示。 演示示例 你也可以不用 HTML Tag，直接用 .加上 Class 名称作为一个 Selector。示例代码如下： .center tex

10、t-align: center 这种通用的 Class Selector 就没有 Tag 的局限性，可以用于不同的 Tag。比如： 这个标题居中显示。 这个段落居中显示。 演示示例 Contextual Selector 你可以为嵌入其它 Tag 的 Tag 定义样式，示例代码如下： p emcolor: red Em这个 Tag 嵌套在 P里面。 p em就叫做 Contextual Selector，定义嵌套于 P里的 Em的样式。这个例子表示，在 P里面的用 Em这个 Tag 标记的字体颜色是红色。 演示示例 CSS注释 为了方便你自己或者他人日后更好地理解你的 CSS 代码，你可以写

11、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:1

12、6pt 演示示例 字体风格属性 (font-style) 这个属性有三个值可选： normal, italic, oblique。 normal是缺省值， italic, oblique都是斜体显示。例句如下： .s1 font-sytle:italic 演示示例 字体浓淡属性 (font-weight) 这个属性常用值是 normal和 bold， normal是缺省值。例句如下： 这段文字字体的浓淡属性 (font-weight)值是 bold。演示示例 字体变量属性 (font-variant) 这个属性有两个值， normal和 small-caps， normal是缺省值。 smal

13、l-caps 表示小的大写字体。例句如下： .s1 font-variant:small-caps 演示示例 字体属性 (font) 这个属性是各种字体属性的一种快 捷的综合写法。这个属性可以综合字体风格属性(font-style)，字体变量属性 (font-variant)，字体浓淡属性 (font-weight)，字体大小属性 (font-size)等属性。例句如下： .s1 font:italic normal bold 11pt arial 演示示例 字体颜色 (color) 字体颜色用 CSS 中的 color 属性来表示。参 见 CSS常用文本属性 。 CSS 常用文本属性 文本对

14、齐属性 (text-align) 这个属性用来设定文本的对齐方式。有以下值： left (居左，缺省值 ) right (居右 ) center (居中 ) justify (两端对齐 ) 示例代码如下： .p2 text-align:right 演示示例 文本修饰属性 (text-decoration) 这个属性主要设定文本划线的属性。有以下值： none (无，缺省值 ) underline (下划线 ) overline (上划线 ) line-through (当中划线 ) 示例代码如下： .p2 text-decoration: underline 演示示例 文本缩进属性 (text

15、-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 (百分比，相当于父对象高度的百分

16、比 ) 示例代码如下： .p1 line-height:1cm 演示示例 字间距属性 (letter-spacing) 这个属性用来设定字符之间的距离。 normal (缺省值 ) length (长度，可以用绝对单位 (cm, mm, in, pt, pc)或者相对单位 (em, ex, px) 示例代码如下： .p1 letter-spacing: 3mm 演示示例 颜色属性 (color) 用颜色属性 (color)可以改变文本的字体颜色。字体颜色代码请参见 HTML 颜色参考 (HTML Color Reference)。示例代码如下： .p1color:gray 演示 示例 CSS

17、背景属性 背景颜色属性 (background-color) 这个属性为 HTML 元素设定背景颜色，相当于 HTML 中 bgcolor 属性。 body background-color:#99FF00; 上面的代码表示 Body这个 HTML 元素的背景颜色是翠绿色的。 演示示例 背景图片属性 (background-image) 这个 属性为 HTML 元素设定背景图片，相当于 HTML 中 background 属性。 上面的代码为 Body这个 HTML 元素设定了一个背景图片。 演示示例 背景重复属性 (background-repeat) 这个属性和 background-im

18、age属性连在一起使用，决定背景图片是否重复。如果只设置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) 这个属性和 ba

19、ckground-image属性连在一起使用，决定图片是跟随内容滚动，还是固定不动。这个属性有两个值，一个是 scroll，一个是 fixed。缺省值是 scroll。 body background-image:url(./images/css_tutorials/background.jpg); background-repeat:no-repeat; background-attachment:fixed 上面的代码表示图片固定不动，不随内容滚动而动。 演示示例 背景位置属性 (background-position) 这个 属性和 background-image属性连在一起使用，决定

20、了背景图片的最初位置。 body background-image:url(./images/css_tutorials/background.jpg);background-repeat:no-repeat; background-position:20px 60px 上面的代码表示背景图片的初始位置距离网页最左面 20px，距离网页最上面 60px。 演示示例 背景属性 (background) 这个属性是设置背景相关属性的一种快捷的综合写法， 包括 background-color, background-image, background-repeat, backgroundattac

21、hment, background-position。 body background:#99FF00 url(./images/css_tutorials/background.jpg) no-repeat fixed 40px 100px 上面的代码表示，网页的背景颜色是翠绿色，背景图片是 background.jpg 图片，背景图片不重复显示，背景图片不随内容滚动而动，背景图片距离网页最左面 40px，距离网页最上面 100px。 演示示例 CSS 边框属性 边框风格属性 (border-style) 这个属性用来设定上下左右边框的风 格，它的值如下： none (没有边框，无论边框宽度

22、设为多大 ) dotted (点线式边框 ) dashed (破折线式边框 ) solid (直线式边框 ) double (双线式边框 ) groove (槽线式边框 ) ridge(脊线式边框 ) inset (内嵌效果的边框 ) outset (突起效果的边框 ) 演示示例：分别使用 none,dotted, dashed, solid, double, groove, ridge, inset, outset 的 CSS边框风格属性示例 边框宽度属性 (border-width) 这个属性用来设定上下左右边框的宽度，它的值如下： medium (是缺省值 ) thin (比 mediu

23、m细 ) 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

24、-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, bor

25、der-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 mar

26、gin-right:1cm 演示示例请参照左边距属性示例，只要将里面的 margin-left 改成 margin-right 即可。 上边距属性 (margin-top) 这个属性用来设定上边距的宽 度。示例如下： .d1 margin-top:1cm 演示示例请参照左边距属性示例，只要将里面的 margin-left 改成 margin-top 即可。 下边距属性 (margin-bottom) 这个属性用来设定下边距的宽度。示例如下： .d1margin-bottom:1cm 演示示例请参照左边距属性示例，只要将里面的 margin-left 改成 margin-bottom即可。 边距

27、属性 (margin) 这个属性是设定边距宽度的一个快捷的综合写法，用这个属性可以同时设定上下左右边距属性。 你可以为上下左 右边距设置相同的宽度。示例入下： .d1 margin:1cm 你也可以分别设置边距，顺序是上，右，下，左。示例如下： .d1 margin:1cm 2cm 3cm 4cm 上面的代码表示，上边距为 1cm，右边距为 2cm，下边距为 3cm，左边距为 4cm。 演示示例：上下左右边距宽度相同 演示示例：上下左右边距宽度各不相同 CSS 间隙属性 间隙属性 (padding)是用来设置元素内容到元素边界的距离。 左间隙属性 (padding-left) 这个属性用来设定

28、左间隙的宽度。示例如下： .d1padding-left:1cm 演示示例 右间隙属性 (padding-right) 这个属性用来设定右间隙的宽度。示例如下： .d1 padding-right:1cm 演示示例请参照左间隙属性示例，只要将里面的 padding-left 改成 padding-right 即可。 上间隙属性 (padding-top) 这个属性用来设定上间隙的宽度。示例如下： .d1 padding-top:1cm 演示示例请参照左间隙属性示例，只要将里面的 padding-left 改成 padding-top即可。 下间隙属性 (margin-bottom) 这个属 性

29、用来设定下间隙的宽度。示例如下： .d1padding-bottom:1cm 演示示例请参照左间隙属性示例，只要将里面的 padding-left 改成 padding-bottom即可。 间隙属性 (padding) 这个属性是设定间隙宽度的一个快捷的综合写法，用这个属性可以同时设定上下左右间隙属性。 你可以为上下左右间隙设置相同的宽度。示例入下： .d1 padding:1cm 你也可以分别设置间隙，顺序是上，右，下，左。示例如下： .d1 padding:1cm 2cm 3cm 4cm 上面的代 码表示，上间隙为 1cm，右间隙为 2cm，下间隙为 3cm，左间隙为 4cm。 演示示例：

30、上下左右间隙宽度相同 演示示例：上下左右间隙宽度各不相同 CSS 盒子模式 (Box Model) CSS 中有个重要的 概念，就是盒子模式 (Box model)。 胡戈的 “一个馒头引发的血案 “中有个圆圈套圆圈娱乐城，而这个盒子模式套用这句话来说，就是方块套方块。 先看看下面这个图，黑框包围的一个方块，就是一个盒子 (Box)。 盒子里由外至里依次是： margin 边距 border 边框 padding 间隙 (也有人称做补 丁 ) content (内容，比如文本，图片等 ) CSS 边距属性 (margin) 是用来设置一个元素所占空间的边缘到相邻元素之间的距离。 CSS 边框属

31、性 (border) 用来设定一个元素的边线。 CSS 间隙属性 (padding) 是用来设置元素内容到元素边框的距离。 CSS 背景属性指的是 content 和 padding 区域。 CSS 属性中的 width 和 height 指的是 content 区域的宽和高。 CSS 列表样式属性 列表样式类型属性 (list-style-type) 这个属性用来设定列表项标记 (list-item marker)的类型。有以下值： disc (缺省值，黑圆点 ) circle (空心圆点 ) square (小黑方块 ) decimal (数字排序 ) lower-roman (小写罗马字

32、排序 ) upper-roman (大写罗马字排序 ) lower-alpha (小写字母排序 ) upper-alpha (大写字母排序 ) none (无列表项标记 ) 以 disc,circle,square,none作为列表项标记的列表示例 以 decimal,lower-roman,upper-roman,lower-alpha,upper-alpha作为列表项标记的列表示例 列表样式位置属性 (list-style-position) 列表样式位置属性 (list-style-position)有两个值： outside (以列表项内容为准对齐 ) inside (以列表项标记为准对齐 )