又遇见了CSS，第一次接触它是在牛腩新闻发布系统中，那时候，知道了它是用来帮助我们调整网页样式布局的。有了之前的实践，现在从理论出发，继续学习CSS。 对于一个网页设计者来说，都知道HTML语言是网页制作的基础。但如果希望网页能够美观、大方，并且升级方便，维护轻松，那么就必须学习CSS，CSS在其中扮演者重要的角色。 一.为什么会有CSS。 CSS的出现，与传统的HTML语言有着各种缺陷有关。主要包括：
- 维护困难，修改标记花费时间长
- 标记不足，文字间距、段落缩进等标记很难找到
- 网页过“胖”，没有统一的样式控制，体积过大
- 定位困难，整体布局页面，模块间位置混乱，过多的<table>标记。
二.CSS是什么。
CSS（Cascading Style Sheet），层叠样式表，它是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
CSS的引入就是为了使得HTML语言能够更好地适应页面的美工设计。
CSS以HTML语言为基础，提供了丰富的格式化功能，并且网页设计者可以针对各种可视化浏览器设置不同的样式风格。
三.怎么使用CSS控制页面。
使用CSS控制页面，不仅仅只是一种方法，行内样式、内嵌式、链接式和导入式都属于方法之一。下面一一学习一下。
1.行内样式
它利用style属性，设置不同的CSS样式，各样式之间互不影响，分别显示自己的样式效果。
总结：最为简单的方法，但由于需要为每一个标记设置style属性，后期维护成本高，网页容易过胖。
2.内嵌式
它将CSS写在<head>与</head>之间，并且用<style>和</style>标记进行声明。
总结：所有的CSS代码集中在一个区域，方便后期维护。但对于拥有很多页面的网站，对于不同页面都希望采用同样的风格，就比较麻烦。
3.链接式
HTML文件：
CSS文件：
它将HTML代码与CSS代码分离。
总结：使用频率最高，最为实用的方法。将HTML页面本身与CSS样式风格分离为两个或多个文件，实现页面框架HTML代码和美工CSS代码的完全分离，前期制作和后起维护都十分方便。后台技术人员和美工设计者可以很好地分工合作。对于同一个CSS文件，可以链接到多个HTML文件中，甚至可以链接到整个网站的所有页面，使得网站整体风格统一，后期维护的工作量也大大减少。
4.导入样式
常用的有以上几种@import语法，可以选择任意一种放在<style>与</style>标记之间。
总结：与链接样式表功能基本相同，语法和运作方式上略有区别。采用import方式导入的样式表，在HTML文件初始化时，会被导入HTML文件内，作为文件一部分。而链接样式表是在HTML的标记需要格式时才以链接的方式引入。
最大的用处可以让一个HTML文件导入很多的样式表。
四种方式，如果同时出现在HTML文件中，那么就会根据优先级来对网页样式进行布局。行内样式的优先级最高，其次是链接式，再次是内嵌式，最后是导入式。
五.体验CSS
1.简单的页面框架
<html>
<head>
<title>体验CSS</title>
</head>
<body>
<div>CSS简介</div>
<div>
层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标
准通用标记语言的一个子集）等文件样式的计算机语言。
CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设
计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级
的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力
，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根
据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。
</div>
</body>
</html>
2.插入图片
<div>
<img src="bike.jpg" border="0">
层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标
准通用标记语言的一个子集）等文件样式的计算机语言。
.......
</div>
3.加入CSS控制
<head>
<title>体验CSS</title>
<style>
body{
padding:0px;
margin:0px;
background-color:#FFFF99; /*设置背景颜色*/
}
#title{
font-size:19px; /*字号*/
font-weight:bold; /*粗体*/
text-align:center; /*居中*/
padding:15px; /*间距*/
background-color:#FFFFCC; /*背景色*/
boder:1px solid #FFFF00; /*边框*/
}
#content{
padding:6px; /*间距*/
font-size:13px; /*字号*/
line-height:130%; /*行间距*/
}
</style>
</head><span style="font-family:KaiTi_GB2312;font-size:18px;">
</span>
4.控制图片
img{
float:left; /*图文混排*/
filter:alpha
(opacity=100,finishopacity=0,style=2); /*渐变效果*/
}
这样，加入一个简单的CSS文件，就制作出了和第一张完全不一样的网页效果，看着确实清新了很多。没做之前，总觉得要在HTML文件中再加上个CSS文件，那会是多么复杂。现在做完了，发现其实还是很简单的，真正领略了CSS带给我们的一种不一样的视觉体验。