又遇见了CSS，第一次接触它是在牛腩新闻发布系统中，那时候，知道了它是用来帮助我们调整网页样式布局的。有了之前的实践，现在从理论出发，继续学习CSS。
对于一个网页设计者来说，都知道HTML语言是网页制作的基础。但如果希望网页能够美观、大方，并且升级方便，维护轻松，那么就必须学习CSS，CSS在其中扮演者重要的角色。
一.为什么会有CSS。
CSS的出现，与传统的HTML语言有着各种缺陷有关。主要包括：
- 维护困难，修改标记花费时间长
- 标记不足，文字间距、段落缩进等标记很难找到
- 网页过“胖”，没有统一的样式控制，体积过大
- 定位困难，整体布局页面，模块间位置混乱，过多的<table>标记。
它利用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带给我们的一种不一样的视觉体验。
1640
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
