1. 认识CSS
CSS，CascadingStyle Sheets，层叠式样表。它用于描述一个HTML元素在浏览器中的呈现方式。使用CSS主要目的是为了解决表现元素样式问题、节约工作量，提高代码的重用率。
2. CSS基础
2.1 语法
CSS的语法由两部分组成：选择器和一组属性声明，这类似一个java的class的定义（并且进行了“初始化”）。
selector { property1: value1; property2:value2}CSS的注释语法与C语言一致采用“/* 这是一个注释 */”的语法，而不支持C++的“//”语法。
CSS的语法只在样式表内部生效，相对的HTML的语法对CSS是不生效的（包括注释）。这也是避免将CSS采用内联方式使用的一个原因。
2.2 选择器
选择器的意义是选择所有具有这样的或具有这样的属性的元素，并赋予其声明中的样式。
一个选择器可以是既有的HTML元素（的标签名），可以是自己定义的class或者id来对html既有元素进行非全局的修饰。
如
p { color:red }会导致所有的段落（你没有其他的修饰的话）都会变为红色。而使用你自己的id或class只会将你需要的段落变为红色。
一个id用于修饰单个唯一的元素。声明时使用“#xx {}“。而使用时使用元素的属性“id=”xx””。id、class等属性是所有html元素的全局属性。
而一个class适用于修饰多个元素，声明是使用”.xx”，使用时”class=”xx”。
一个由#、.开头的id、class是公用的，也就是任意一个类别的元素都可以使用它。我们也可以指定id或class只能被某些元素使用。声明方法是”elementName#id”或者”elementName.class”。
selectors的声明与使用有着一定的规范，就如同任何一个语言中变量名、类名一样。下表是CSS1中的规范：
| Selectors | Example | Description |
| .class | .menu | 选择所有class=”menu”的元素。 |
| #id | #name | 选择所有id=”name”的元素。 |
| * | * | 选择所有的元素（即使没有class或id的属性） |
| element | p | 选择所有的段落元素 |
| element1, element2 | h1, p | 选择所有的h1和p元素 |
| elementp elementc | div, p | 选择所有的在div内的p元素 |
| :link | a:link | 选择所有未访问的超链接 |
| :visited | a:visited | 选择所有访问过的超链接 |
| :hover | a:hover | 选择或有鼠标移动到上面的超链接 |
| :active | a:active | 选择所有鼠标正在点击的超链接 |
| :first-letter | p:first-letter | 选择所有段落的第一个字 |
| :first-line | p:first-line | 选择所有段落的第一行 |
注：一个选择器不能以数字开头。
选择器可以复合使用，如a.home:link选择的是所有未访问的类为home的超链接。这些将在后续学习。
关于id和class的区别：
a. 一个id从理论上只允许选择一个元素，尽管现在浏览器仍支持修饰多个元素，但这是一种较差的习惯，并且会导致js选择id时出现错误。因此我们只用id修饰单个元素。
b. 一个元素至多有一个id，但是可以有多个class来修饰。这就好比一个人只允许有一个皮肤，但是可以穿多件衣服（也许这么比喻并非十分妥帖）。
2.3 使用方法
CSS可以被三种方式使用：外部、内部、内联。
外部的引入CSS可以将CSS与html文档分开，不仅压缩了文档尺寸，更使得文档利于维护。使用一个外部的CSS文档可以在头文件中添加下列代码
<link rel=”stylesheet” type=”text/CSS” href=”./my.css”/>意思是这是一个外部链接，这个链接是文档的样式表，它的类型是text/CSS，位置在./my.CSS。
内部的定义CSS同样在<head>部位完成。
<style>
/* 从style开始都属于样式表的部分，这里面定义样式表的内容 */
</style>外部的使用和内部的使用CSS就好比C++中在头文件和源文件中书写类定义一样，显然将它们分开更具有可维护性和可读性，当然一些小的CSS定义在文档中也是可以的。
内联的方式并不被推荐，因为这破坏了内容与表现分离的原则，并且不利于维护。
<p style=”background-color: red“>It is not agood style.</p>关于CSS的继承与重载：
CSS的确和类有许多相似之处，它可以通过重叠覆盖的方式进行继承和重载。比如：
<head>
<link rel=”stylesheet” type=”text/CSS” href=”./my.CSS”/>
<style>
p
{
color: red;
text-align: center;
}
p
{
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<p style=”color:blue”>这个是一个蓝色的段落，字号为20像素，对齐方式为居中</p>
</body>继承和重载的顺序是从上到下的，如果没有此属性则会被添加，如果有则被覆盖。在这个例子中，外部的CSS中如果有p相关的描述也会被style继承或者覆盖。如果link写在style之下，则是style中的描述被外部CSS继承或者覆盖。而他们都会被body中p的样式继承或覆盖。
3. CSS样式
3.1 背景
3.2 文本
3.3 字体
3.4 链接
3.5 列表
3.6 表格
4. CSS箱模型
4.1 介绍
4.2 边框
4.3 外框
4.4 页边距
2306
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
