CSS全科教程——第一部分：CSS基础
-------------近期将陆续发布自己作为学生一个学期的CSS学习资料总结-----------
1、CSS基础
1.1 CSS简介
需要具备的基础知识
在继续学习之前，你需要对下面的知识有基本的了解：
?HTML
?XHTML
CSS 概述
?CSS 指层叠样式表 (Cascading Style Sheets)
?样式定义如何显示 HTML 元素
?样式通常存储在样式表中
?把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
?外部样式表可以极大提高工作效率
?外部样式表通常存储在 CSS 文件中
?多个样式定义可层叠为一
样式解决了一个普遍的问题
HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>、<p>、<table> 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。
由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。
为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。
所有的主流浏览器均支持层叠样式表。
样式表极大地提高了工作效率
样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。
由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。
多重样式将层叠为一个
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
层叠次序
当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
1.浏览器缺省设置
2.外部样式表
3.内部样式表（位于 <head> 标签内部）
4.内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
1.2CSS语法
CSS 语法由三部分构成：选择器、属性和值：
selector {property: value}
选择器 (selector) 通常是你希望定义的 HTML 元素或标签，属性 (property) 是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）：
下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：
百分数值
百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中，这很容易：
1.9CSS 文本
CSS 文本属性可定义文本的外观
通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。
缩进文本
把 Web 页面上的段落的第一行缩进，这是一种最常用的文本格式化效果。
CSS 提供了 text-indent 属性，该属性可以方便地实现文本缩进。
通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
这个属性最常见的用途是将段落的首行缩进，下面的规则会使所有段落的首行缩进 5 em：
文本方向
如果您阅读的是英文书籍，就会从左到右、从上到下地阅读，这就是英文的流方向。不过，并不是所有语言都如此。我们知道古汉语就是从右到左来阅读的，当然还包括希伯来语和阿拉伯语等等。CSS2 引入了一个属性来描述其方向性。
direction 属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的为止。
注释：对于行内元素，只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性。
direction 属性有两个值：ltr 和 rtl。大多数情况下，默认值是 ltr，显示从左到右的文本。如果显示从右到左的文本，应使用值 rtl。
CSS 文本属性
1.10CSS 字体
CSS 字体 (font) 属性定义文本中的字体。
设置字体属性是样式表的最常见用途之一。CSS 字体属性允许您设置字体系列 (font-family) 和字体加粗 (font-weight)，您还可以设置字体的大小、字体风格（如斜体）和字体变形（如小型大写字母）。
指定字体
可以使用 font-family 属性在文档中采用某种字体系列。
使用通用字体系列
如果你希望文档使用一种 sans-serif 字体，但是你并不关心是哪一种字体，以下就是一个合适的声明：
1.11 CSS 列表
CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。
CSS 列表
从某种意义上讲，不是描述性的文本的任何内容都可以认为是列表。人口普查、太阳系、家谱、参观菜单，甚至你的所有朋友都可以表示为一个列表或者是列表的列表。
由于列表如此多样，这使得列表相当重要，所以说，CSS 中列表样式不太丰富确实是一大憾事。
列表类型
要影响列表的样式，最简单（同时支持最充分）的办法就是改变其标志类型。
例如，在一个无序列表中，列表项的标志 (marker) 是出现在各列表项旁边的圆点。在有序列表中，标志可能是字母、数字或另外某种计数体系中的一个符号。
要修改用于列表项的标志类型，可以使用属性 list-style-type：
1.12CSS 表格
CSS 表格属性允许你设置表格的布局。
CSS Table 属性
CSS 表格属性允许你设置表格的布局。（请注意，本节介绍的不是如何使用表来建立布局，而是要介绍 CSS 中表本身如何布局。）
1.13CSS 轮廓
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
CSS outline 属性规定元素轮廓的样式、颜色和宽度。
CSS 边框属性
----------第一部分：CSS基础完结，续：第二部分：CSS 框模型----------- 1 楼 matychen 2010-01-31 最近楼主很勤奋啊，发了不少帖子哦！ 2 楼 YiSingQ 2010-01-31 matychen 写道最近楼主很勤奋啊，发了不少帖子哦！
因为我还是学生，现在寒假在家，就把以前的学习内容总结下。 3 楼 qiaoakai 2010-01-31 总结的不错！！建议 做成电子书！！呵呵..... 4 楼 天梯梦 2010-01-31 这样的资料太多了 5 楼 lib 2010-02-01 楼主截图的来源都是这里吧？
http://www.w3school.com.cn/css/css_intro.asp
好像内容也很相似啊！！是巧合吗？？
6 楼 lkjxshi 2010-02-01 莫非是新哥发的贴？ 7 楼 aoliwen521 2010-02-01 我永远支持自己用心思总结的系列教程。而不是那种随便搞一篇出来的东西。 8 楼 YiSingQ 2010-02-01 lib 写道楼主截图的来源都是这里吧？
http://www.w3school.com.cn/css/css_intro.asp
好像内容也很相似啊！！是巧合吗？？
您好，你的这个网站我真的是没去过，也不知道这些资料来自那里。
不过这些CSS的总结是我这个学期课程的教学资料慢慢摘录下来的，我们上课是这样过来的，没有照搬照抄的意思！请不要误会，要是真的觉得不好，我以后保证多多改进，向你们好好学习。 9 楼 YiSingQ 2010-02-01 aoliwen521 写道我永远支持自己用心思总结的系列教程。而不是那种随便搞一篇出来的东西。
您好，这些CSS的总结是我这个学期课程的教学资料慢慢摘录下来的，我们上课是这样过来的，做实验课也是如此，没有照搬照抄的意思！请不要误会，要是真的觉得不好，我以后保证多多改进，向你们好好学习。
10 楼 aoliwen521 2010-02-01 YiSingQ 写道aoliwen521 写道我永远支持自己用心思总结的系列教程。而不是那种随便搞一篇出来的东西。
您好，这些CSS的总结是我这个学期课程的教学资料慢慢摘录下来的，我们上课是这样过来的，做实验课也是如此，没有照搬照抄的意思！请不要误会，要是真的觉得不好，我以后保证多多改进，向你们好好学习。
是你误会了。我是说支持你继续把这个css写成系列教程。
而现在很多人只是写一篇XXX的简介，内容很少。
我不喜欢那样，我希望大家都把知识和总结写的详细和深入。 11 楼 betaever 2010-02-04 精华，良好，新手，隐藏
不准了。。。。
