CSS的基础知识
最初在HTML网页中各种样式都是使用标记来实现的，比如使用字体颜色，就可以使用<font color="颜色值"></font>来实现。如显示红色字，可以使用
<font color="red">红色字体</font>来实现。红色字体
但这种方法如果要修改字体、颜色等样式会比较繁琐，需要在网页中查询每个样式，然后逐一修改，在一个内容比较多的网页中就很不方便。而且随着网站要表现内容的丰富， 需要加入的样式描述符就越来越多，这就会使网页变得臃肿且支离破碎，编写网页变得非常不方便，加入、删除、修改样式更麻烦，所以就有人提出一种内容与样式分离的编程方法。 1994年，哈坤·利（Hakon Wium Lie）在互联网的一次会议上第一次提出了CSS的建议，次年伯特·波斯（Bert Bos）演示了支持CSS的Argo浏览器。1995年，W3C组织（World WideWeb Consortium）成立， CSS的早期研究者加入并负责研发标准，1996年12月第一份正式标准完成并称为W3C的推荐标准，1998年推出CSS2，这是普遍使用的一个标准。 1999年开始制订CSS3，2001年5月完成了工作草案，规范被分为若干个相互独立的模块，以便从CSS2逐渐向CSS3演进。
CSS是Cascading Style Sheets的缩写，含义是层叠样式表。CSS不管网页的内容，而只管样式，支持几乎所有的字体字号颜色等样式，支持基本盒子模型以进行网页布局，新版本还加入仿射变换函数及动画，并支持3D显示。 CSS包含的内容很多，包括大量属性及可选值，能实现复杂酷炫的页面效果控制。而且还可以使用编程方法设置、修改和删除样式，便于实现各种动态特效，这在学习JavaScript时再介绍。
网页中使用CSS有多种方法，最直接的是“行内样式”，就是对HTML标记直接设置style属性，其中使用CSS的样式。比如将一段文字设置为红色，可以用<span style="color:red;">红色文字</span> ， 效果为红色文字。
但这种方法并没有表现出CSS的优势，如果增加、修改、删除样式仍然需要进行每处查找并进行操作，很不方便，而且其中包含大量这种行内样式同样会很臃肿混乱，所以网页中要尽量少用，最好不用。
另一种使用CSS方法是“内嵌式”，是将CSS样式写入<head></head>之间，但样式要写入<style></style>标记中，示例：
<head>
<title>内嵌式CSS</title>
<style type="text/css">
span{
color: red;
}
</style>
</head>
之所以写入<head></head>标记中，因为这样其中的代码就不会显示出来，只会被浏览器来使用。代码中设置span标记中的文字显示为红色。
这样就可以将所有CSS代码集中在<style></style>中，修改及增删都比较方便，而网页中的代码就不包含样式说明，只有网页内容，实现了内容和样式的分离，所以使用的地方很多。
一个网站通常会包含很多页面，为了使整个网站风格统一，很多网页都有使用很多相同的样式，如果每个页面都内嵌相同的CSS，代码有很多重复，如果修改样式就需要每个页面进行修改， 这时可以将CSS写在单独的文件中，文件一般以.css为后缀，然后使用“链接式”引入HTML文件中。引入代码为：
<head>
<title>链接式CSS</title>
<link href="a1.css" type="text/css" rel="stylesheet" />
</head>
这个<link />标记要放置在<head></head>之间，其中的href属性值设置为要链接的CSS文件，type属性值固定为text/css，rel属性值固定为stylesheet， 链接样式表时type和rel属性可以省略。一般情况下，将多个网页共同使用的CSS写入一个文件中，使用链接式引入网页，而每个网页中不同的那些样式另写入一个文件随后引入，或者使用内嵌式写入。 链接式是CSS最常用的一种方式，特别是在一些比较大的网站中，多个前端编程人员可以分工负责，有人负责内容编辑，有人负责样式设置，可以互不干扰。
还有一种“导入式”样式表方法，功能与链接式相同，但是要使用import语句，这个语句要放入<style></style>中。示例：
<head>
<title>链接式CSS</title>
<style type="text/css">
@import url(a1.css);
</style>
</head>
其中的import语句也可以使用@import a1.css形式，而且两种形式中文件名可以加引号或者不加引号。样式表导入式可以一次导入多个CSS文件，而且可以加入设备描述符screen、print等，还可以使用屏幕尺寸描述符， 这样就可以在计算机、打印机及手持终端中通过使用不同的样式表来实现不同的排版效果，而页面本身就不用重新设计了。示例：
<style type="text/css">
@import url(a.css) screen and (min-device-width:800px);
@import url(b.css) screen and (max-device-width:799px);
@import url(c.css) print;
</style>
这种根据不同设备而使用不同样式表的方法，也可以通过@media语句，示例：
<style type="text/css">
@media screen{span{color: red; } }
@media print{span{color: black; } }
</style>
网页中有多种使用样式表的方法，有时其中对相同网页元素的样式设置可能是不同的，这时就有一个样式优先级问题。普通规则是：行内样式表 > 嵌入式样式表 > 外部样式， 链接式和导入式都称为外部样式，有相同样式设置时，嵌入式样式可以覆盖外部样式而使其无效，而行内样式优先级最高，可以覆盖掉其他的样式设置。而在相同级别的样式中， 比如同一个样式文件中前后对同一元素设置了两次样式，或者在<style></style>中对相同元素设置了两次样式，那么后面出现的样式有较高优先级，会覆盖掉之前的样式。
CSS中也可以使用注释语句，格式为/*和*/，放置在其中的内容就会不再有效，可以用于单行，也可以用于多行注释。示例：
p{ /*正文样式*/
font-size:12px;
text-indent: 2em;
line-height:1.5;
padding:5px;
}
其中具体含义以后再介绍。需要注意的是，如果浏览器无法识别CSS样式表中设置的属性，只会忽略，并不会报错，所以有拼写错误或格式错误就常常表现为无效，需要仔细查找问题所在。
但这种方法如果要修改字体、颜色等样式会比较繁琐，需要在网页中查询每个样式，然后逐一修改，在一个内容比较多的网页中就很不方便。而且随着网站要表现内容的丰富， 需要加入的样式描述符就越来越多，这就会使网页变得臃肿且支离破碎，编写网页变得非常不方便，加入、删除、修改样式更麻烦，所以就有人提出一种内容与样式分离的编程方法。 1994年，哈坤·利（Hakon Wium Lie）在互联网的一次会议上第一次提出了CSS的建议，次年伯特·波斯（Bert Bos）演示了支持CSS的Argo浏览器。1995年，W3C组织（World WideWeb Consortium）成立， CSS的早期研究者加入并负责研发标准，1996年12月第一份正式标准完成并称为W3C的推荐标准，1998年推出CSS2，这是普遍使用的一个标准。 1999年开始制订CSS3，2001年5月完成了工作草案，规范被分为若干个相互独立的模块，以便从CSS2逐渐向CSS3演进。
CSS是Cascading Style Sheets的缩写，含义是层叠样式表。CSS不管网页的内容，而只管样式，支持几乎所有的字体字号颜色等样式，支持基本盒子模型以进行网页布局，新版本还加入仿射变换函数及动画，并支持3D显示。 CSS包含的内容很多，包括大量属性及可选值，能实现复杂酷炫的页面效果控制。而且还可以使用编程方法设置、修改和删除样式，便于实现各种动态特效，这在学习JavaScript时再介绍。
网页中使用CSS有多种方法，最直接的是“行内样式”，就是对HTML标记直接设置style属性，其中使用CSS的样式。比如将一段文字设置为红色，可以用<span style="color:red;">红色文字</span> ， 效果为红色文字。
但这种方法并没有表现出CSS的优势，如果增加、修改、删除样式仍然需要进行每处查找并进行操作，很不方便，而且其中包含大量这种行内样式同样会很臃肿混乱，所以网页中要尽量少用，最好不用。
另一种使用CSS方法是“内嵌式”，是将CSS样式写入<head></head>之间，但样式要写入<style></style>标记中，示例：
<head>
<title>内嵌式CSS</title>
<style type="text/css">
span{
color: red;
}
</style>
</head>
之所以写入<head></head>标记中，因为这样其中的代码就不会显示出来，只会被浏览器来使用。代码中设置span标记中的文字显示为红色。
这样就可以将所有CSS代码集中在<style></style>中，修改及增删都比较方便，而网页中的代码就不包含样式说明，只有网页内容，实现了内容和样式的分离，所以使用的地方很多。
一个网站通常会包含很多页面，为了使整个网站风格统一，很多网页都有使用很多相同的样式，如果每个页面都内嵌相同的CSS，代码有很多重复，如果修改样式就需要每个页面进行修改， 这时可以将CSS写在单独的文件中，文件一般以.css为后缀，然后使用“链接式”引入HTML文件中。引入代码为：
<head>
<title>链接式CSS</title>
<link href="a1.css" type="text/css" rel="stylesheet" />
</head>
这个<link />标记要放置在<head></head>之间，其中的href属性值设置为要链接的CSS文件，type属性值固定为text/css，rel属性值固定为stylesheet， 链接样式表时type和rel属性可以省略。一般情况下，将多个网页共同使用的CSS写入一个文件中，使用链接式引入网页，而每个网页中不同的那些样式另写入一个文件随后引入，或者使用内嵌式写入。 链接式是CSS最常用的一种方式，特别是在一些比较大的网站中，多个前端编程人员可以分工负责，有人负责内容编辑，有人负责样式设置，可以互不干扰。
还有一种“导入式”样式表方法，功能与链接式相同，但是要使用import语句，这个语句要放入<style></style>中。示例：
<head>
<title>链接式CSS</title>
<style type="text/css">
@import url(a1.css);
</style>
</head>
其中的import语句也可以使用@import a1.css形式，而且两种形式中文件名可以加引号或者不加引号。样式表导入式可以一次导入多个CSS文件，而且可以加入设备描述符screen、print等，还可以使用屏幕尺寸描述符， 这样就可以在计算机、打印机及手持终端中通过使用不同的样式表来实现不同的排版效果，而页面本身就不用重新设计了。示例：
<style type="text/css">
@import url(a.css) screen and (min-device-width:800px);
@import url(b.css) screen and (max-device-width:799px);
@import url(c.css) print;
</style>
这种根据不同设备而使用不同样式表的方法，也可以通过@media语句，示例：
<style type="text/css">
@media screen{span{color: red; } }
@media print{span{color: black; } }
</style>
网页中有多种使用样式表的方法，有时其中对相同网页元素的样式设置可能是不同的，这时就有一个样式优先级问题。普通规则是：行内样式表 > 嵌入式样式表 > 外部样式， 链接式和导入式都称为外部样式，有相同样式设置时，嵌入式样式可以覆盖外部样式而使其无效，而行内样式优先级最高，可以覆盖掉其他的样式设置。而在相同级别的样式中， 比如同一个样式文件中前后对同一元素设置了两次样式，或者在<style></style>中对相同元素设置了两次样式，那么后面出现的样式有较高优先级，会覆盖掉之前的样式。
CSS中也可以使用注释语句，格式为/*和*/，放置在其中的内容就会不再有效，可以用于单行，也可以用于多行注释。示例：
p{ /*正文样式*/
font-size:12px;
text-indent: 2em;
line-height:1.5;
padding:5px;
}
其中具体含义以后再介绍。需要注意的是，如果浏览器无法识别CSS样式表中设置的属性，只会忽略，并不会报错，所以有拼写错误或格式错误就常常表现为无效，需要仔细查找问题所在。