《CSS样式表文档分享.doc

CSS 样式表全攻略 前言 CSS 是 Cascading Style Sheets （层叠样式表）的缩写，它原来是Netscape首次推出的，鉴于其无可争议的优势最终成为WEB 页面包装打扮的最佳手段！　　 我曾在书店看到一本厚厚的CSS专著，而本篇教材仅靠几页文字，称为“CSS全攻略”实在有点不妥，但让我自信的是：本篇教材基本囊括了CSS 资料和运用的方方面面，无论你以前自觉或不自觉地在使用CSS，都可以在本篇小文中得到补益！ 　　 尤其是： 　　 《老康蓝屋》近期的改版，以及CSS在XML、Flash上的尝试使我对CSS的作用、能力有了全新体验和理解，在此基础上，结合比较翔实的资料撮合而成的心得体会对初学者或者熟练者都是有益的。 很难想象，一个“网页高手”会不知道CSS，或者在他的网页上没用上CSS！况且，现代网页制作技术日新月异，CSS扮演着越来越重要的角色，随着新设计理念不断注入，传统的HTML已经越来越难以胜任。 　　 一个相当普遍的例子是，你一定注意到大多数商业网站的“三栏式”布局：左栏（一些排行榜、统计等其它信息）、右栏（站点内容、介绍等信息）及正文区（还可分出多个区），外加页顶（广告、站标及一些点击数，登录入口等信息）；页脚（版权信息）。 　　 整个版面能随着浏览者的不同分辩率自动填满整个屏幕并随着内容自动延伸，这样的布局几乎成了一种标准，知道怎样做的吗？ 　　 你可能想到用“表格”定位，这无疑是最普遍的做法，我以前也一直用FW“画”页面，再用“切片”形成栏区，但不能自动扩充到全屏幕，更艰难的是各栏的伸展协调。 　　 就是没想到用CSS来布局？！ 　　 看看下面这个例子： ? 　　 右边的图是本例去除CSS样式表时在浏览器中显示的情况： 　　 而仅仅靠了一个CSS，就完成了整个“三栏式”页面的布局，这个CSS定义了顶栏、左、中、右及底栏的样式，另外还有一个body的全局样式。 　　 有了这个CSS，页面变成了如下图所示的模样，你也可点击如下链接观看全屏幕的实例： 一个三栏式页面 　　 这个页面文件名叫web.htm它的样式表是web.css，有兴趣的朋友可以下载。 　　 下面，我们就从CSS最基础的部分开始...... ? 一个体现CSS能力的综合例子 　　 现在，我们已经初步认识到，CSS样式表是一种制作网页的优秀技术，并且已经被新版的浏览器全面支持。　　 CSS已经成为网页设计必不可少的技术之一，它包括了字型、字距、行距、对象定位、滤镜特效等手段。　　 CSS能使难以驾驭的html如同平面印刷技术一样容易运用。它是网页设计时一个可遵循的风格，一个通用的表达、呈现方式。　　 DW是第一个融合CSS新技术的网页编辑器，新版DW更是一个全面整合了CSS能力，提供了一个绝佳的CSS样式工作平台。　　 在DW MX 2004中操作CSS，不仅仅是“工作”，简直是个享受哦！　　 本篇教材会让你充分体验这一切...... 本区块全部用CSS定义......　 ? ? CSS基础我们先来手写一个最简单的CSS，比如，网络上盛行一种9磅“宋体”，固定行间距，无下划线链接的黑色字体，它的样式代码如下： style type=text/css.pt9 {font-family: 宋体;color: #000000;font-size: 9pt;line-height: 150%;text-decoration: none;}/style ←样式标识←样式名，也称之为“选择符”，前面有个“.”，又叫“类选择符”（后面详述）←字体类型，为“宋体”←文字颜色，为“黑色”←字体字号，为“9磅” ←行高，为文字高的1.5倍，即行与行间相距半个字高←文字装饰，为“无” 从上面可以看出，CSS样式的格式其实很简单，最基本的结构就是： 选择符{ 属性: 值 }　　上例的样式定义了一个“选择符”为“pt9”的“类”样式，其中包括5个属性，“花括弧”内是样式内容，属性名与值用“:”隔开，每条属性用“;”结束，当然，属性是内建的“关键词”，而属性值有时可有多种表示方法，比如颜色值有5种表达方式等等（下面有介绍）。 　　 如果一个选择符下有多个属性，也可以这样写： 　　 选择符 { 属性1: 值1; 属性2: 值2 } 　　不算复杂哦？不过我得事先声明，在以后的教程中你可以知道，实际上CSS样式根本无需你手工书写，只要几个设置就自动生成的，尽管如此，对于入门者，知道些原理是绝对必要的！　　这话我能接受，但上例你说简单，而我有不少疑问啊，其中就是这“.pt9”命名规则，为什么要用“.”？为什么要命名为“pt9”？等等，要说明这些，