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 Sheet)内嵌样式(Inline
3、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 Sheet)要用到 Style 这个 Tag，写法如下：.外
4、部样式表(External Style Sheet)如果很多网页需要用到同样的样式(Styles)，用什么方法呢？将样式(Styles)写在一个以.css 为后缀的 CSS 文件里，然后在每个需要用到这些样式(Styles)的网页里引用这个 CSS 文件。比如可以用文本编辑器(NotePad)建立一个叫 home 的文件，文件后缀不要用.txt，改成.css。文件内容如下：H1.mylayout border-width: 1; border: solid; text-align: center;color:red然后你建立一个网页，代码如下：这个标题使用了Style。这个标题没有使用 Sty
5、le。显示示例使用外部(Extenal)样式表，相对于内嵌(Inline)和内部式(Internal)的，有以下优点： 样式代码可以复用。一个外部 CSS 文件，可以被很多网页共用。 便于修改。如果要修改样式，只需要修改 CSS 文件，而不需要修改每个网页。 提高网页显示的速度。如果样式写在网页里，会降低网页显示的速度，如果网页引用一个 CSS 文件，这个 CSS 文件多半已经在缓存区(其它网页早已经引用过它) ，网页显示的速度就比较快。 串联(Cascading)CSS 第一个字母，是 Cascading，意为串联。它是指不同来源的样式(Styles)可以合在一起，形成一种样式。Cascad
6、ing 的顺序是： 浏览器缺省(browser default)(优先级最低) 外部样式表(Extenal Style Sheet) 内部样式表(Internal Style Sheet) 内嵌样式表(Inline Style)(优先级最高)样式(Styles)的优先级依次是内嵌(inline), 内部(internal), 外部(external), 浏览器缺省(browser default)。假设内嵌(Inline)样式中有 font-size:30pt, 而内部(Internal)样式中有 font-size:12pt，那么内嵌(Inline)式样式就会覆盖内部(Internal)样式
7、。显示示例CSS 语法基本语法一个样式(Style)的语法由三部分构成：Selector(中文叫选择器有点怪怪的，就用英文吧)，属性(Property)，属性值(Value)。selector property: value举个例子，下面的代码 p 就是 selector，color 就是属性，blue 就是属性值。p color:blueHTML 中所有的 Tag 都可以作为 selector。注：如果你想为 Style 加多个属性，在两个属性之间要用分号加以分隔。下面的 Style 就包含 2 个属性，一个是对齐方式居中，一个字体颜色为红，当中用分号分隔开。p text-align:cen
8、ter;color:red 为了提高 Style 代码的可读性，你也可以分行写：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 构成不同的样式。比如说，你希望段落有两种样式，一种是居中对齐，一种是居右对齐。你就可以写如下
9、样式：p.right text-align:rightp.center text-align:center其中 right 和 center 就是两个 class。然后你就可以引用这两个 class，示例代码如下：这一段居中显示。这一段是居右显示。演示示例你也可以不用 HTML Tag，直接用.加上 Class 名称作为一个Selector。示例代码如下：.center text-align: center 这种通用的 Class Selector 就没有 Tag 的局限性，可以用于不同的 Tag。比如：这个标题居中显示。这个段落居中显示。 演示示例Contextual Selector你可以
10、为嵌入其它 Tag 的 Tag 定义样式，示例代码如下：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: arialCSS 字体属性字体名称属
11、性(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演示示例字体浓淡属
12、性(font-weight)这个属性常用值是 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-size)等属性。例句如下：.s1 font:italic normal bold 11pt arial演示示例字体颜色(color)字体颜色用 CSS 中的 color 属性来表示。参见 CSS 常用文本属性。CSS 常用文本属性文本对齐属性(text-align)
