1、CSS简介 CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在HTML文档中，而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，缩短浏览器的加载时间。 CSS的各个版本CSS有各种版本，所以知道要使用哪个版本是很重要的。CSS 1 在1996年末成为推荐标准，其中包含非常基本的属性，比如字体，颜色、
2、空白边。CSS2 在此基础上添加了高级概念（比如浮动和定位）以及高级的选择器（比如子选择器、相邻同胞选择器和通用选择器）。在编写本书时，CSS2仍然是CSS的最新版本，尽管它早在1998年就已经成为推荐标准。 万维网联盟（W3C）的行动非常缓慢，所以尽管CSS3的开发工作在新千年开始之前就开始了，但是距离最终的发布还有相当长的路要走，为提高开发和浏览器实现的速度，CSS3被分割成模块，这些模块可以独立发布和实现。CSS3包含一些令人兴奋的新特性，包括一个用于多列布局的模块，但是，选择器模块最接近于完成，可能在2006年成为推荐标准。 因为预期从CSS2到CSS3的发布之间时间会很长，2002年
3、人们启动了CSS2.1的开发。这是CSS2的修订版，它计划纠正一些错误，并且更精确地描述CSS的浏览器实现。CSS2.1正在逐渐接近完成，但是可能在2006年年底之前无法实现，然而，它更准确地反映了CSS当前的状态。 层叠样式表解决了一个普遍的问题HTML 标签原本被设计为用于定义文档内容。通过使用 、 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。 由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HT
4、ML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。 为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。 所有的主流浏览器均支持层叠样式表。 层叠式表的特点1、便于页面的修改。 2、便于页面风格的统一。 3、减少网页的体积。 层叠样式表极大地提高了工作效率样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和
5、外观。 由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。1 CSS历史1994年哈坤利提出了CSS的最初建议；伯特波斯（Bert Bos）当时正在设计一个叫做Argo的浏览器，他们决定一起合作设计CSS。 当时已经有过一些关于样式表语言的建议了，但CSS是第一个含有“层叠”的主意的。在CSS中，一个文件的样式可以从其他的样式表中继承下来。读者在有些地方可以使用他自己更喜欢的样式，在其他地方去继
6、承，或“层叠”作者的样式, 这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合各人的爱好。 哈坤于1994年在芝加哥的一次会议上第一次提出了CSS的建议，1995年他与波斯一起再次提出这个建议。当时W3C刚刚建立，W3C对CSS的发展很感兴趣，它为此组织了一次讨论会。哈坤、波斯和其他一些人（比如微软的托马斯雷尔登）是这个项目的主要技术负责人。1996年底，CSS已经完成。1996年12月CSS要求的第一版本被出版。 1997年初，W3C内组织了专门管CSS的工作组，其负责人是克里斯里雷。这个工作组开始讨论第一版中没有涉及到的问题，于是1998年5月出版了CSS的第二版。到2007年为止
7、，第三版还未完备。 使用CSS布局的优点采用CSS布局相对于传统的TABLE网页布局而具有以下3个显著优势： 1：表现和内容相分离将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。这样的页面对搜索引擎更加友好。 2：提高页面浏览速度对于同一个页面视觉效果，采用CSS布局的页面容量要比TABLE编码的页面文件容量小得多，前者一般只有后者的1/2大小。浏览器就不用去编译大量冗长的标签。 3：易于维护和改版你只要简单的修改几个CSS文件就可以重新设计整个网站的页面。 4: 使用CSS布局更符合现在的W3C标准.ps：W3C组织并不是ISO 国际标准组织成员 感性体验CSS 什么
8、是CSS呢？你可能急迫的想知道答案。但是空泛的文字描述意义不大，让我们先来一点感性体验吧。 是一个普普通通的网页。然而通过给这个文件添加的CSS规则，我们可以得到十分美观的网页。 这还不是全部，不改动HTML，只是通过添加不同的CSS规则，我们就可以得到各种不同样式的网页： 什么是CSS* CSS是Cascading Style Sheets(层叠样式表)的简称. * CSS语言是一种标记语言,它不需要编译,可以直接由浏览器解释执行(属于浏览器解释型语言). CSS的作用* 在标准网页设计中CSS负责网页内容(XHTML)的表现. * CSS文件也可以说是一个文本文件,它包含了一些CSS标记,
9、CSS文件必须使用css为文件名后缀. * 可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课. * CSS是由W3C的CSS工作组产生和维护的。 为什么叫层叠？ 在页面显示的过程中，有很多的样式作用在页面元素上，这些样式来自不同的地方。浏览器自己有默认的样式，网页作者有自己写的样式，用户也可能有自己的样式， 但是最终显示的样式是其中之一，它们之间产生了冲突，CSS通过一个称为层叠（cascade）的过程处理这种冲突。层叠给每个规则分配一个重要度：作者的样式表被认为是最重要的，其次是用户的样式表，最后是浏览器或用户代理使用的默认样式表
10、。为了让用户有更多的控制能力，可以通过将任何规则指定为!important来提高它的重要度，让它优先于任何规则，甚至优先于作者加上!important标志的规则。 因此，层叠采用以下重要度次序：标为!important的用户样式标为!important的作者样式作者样式用户样式浏览器/用户代理应用的样式。 然后，根据选择器的特殊性决定规则的次序。具有更特殊选择器的规则优先于具有比较一般的选择器的规则。如果两个规则的特殊性相同，那么后定义的规则优先。 由此可见，层叠是指不同的优先级的构成的层的叠加。 如何将样式表加入到网页可以用以下四种方式将样式表加入您的网页。而最接近目标的样式定义优先权越高。
11、高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。例外请参阅 !important 声明。 定义内部样式块对象你可以在你的HTML文档的和标记之间插入一个.块对象。 定义方式请参阅样式表语法。示例如下： 文档标题 请注意，这里将style对象的type属性设置为text/css，是允许不支持这类型的浏览器忽略样式表单。 内联定义 (Inline Styles)内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下： This is a paragraph 导入样式（Import Styles）与链入外部样式的功能基本相同，只是语法和实现方式上有差别 文档标
12、题 import url(css.css); import url(csss.css) ;/单引号也可以 import css,css; import css.css;/单引号也可以 以上几种形式都可以。 几种方式的优先级内联样式优先级最高，其次是链接样式，再次是内嵌式，最后是导入样式 CSS的语法:CSS的定义是由三个部分构成: 选择符(selector)，属性(properties)和属性的取值(value)。 css语法: selector property: value (选择符 属性:值) 说明: 选择符是可以是多种形式，一般是你要定义样式的HTML标记，例如BODY、P、TABLE
13、，你可以通过此方法定义它的属性和值，属性和值要用冒号隔开: 例子:body color: black，此例的效果是使页面中的文字为黑色。 如果属性的值是多个单词组成，必须在值上加引号，比如字体的名称经常是几个单词的组合: 例子:p font-family: sans serif (定义段落字体为sans serif) 如果需要对一个选择符指定多个属性时，我们使用分号将所有的属性和值分开: 例子:p text-align: center; color: red (段落居中排列;并且段落中的文字为红色) 2. 选择符组 你可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式
14、重复定义: h1, h2, h3, h4, h5, h6 color: green (这个组里包括所有的标题元素，每个标题元素的文字都为绿色) p, table font-size: 9pt (段落和表格里的文字尺寸为9号字) 效果完全等效于: p font-size: 9pt table font-size: 9pt 3. 类选择符 用类选择符你能够把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。假如你想要两个不同的段落，一个段落向右对齐，一个段落居中，你可以先定义两个类: p.right text-align: right p.center text-alig
15、n: center 然后用不在不同的段落里，只要在HTML标记里加入你定义的class参数: 这个段落向右对齐的 这个段落是居中排列的 类选择符还有一种用法，在选择符中省略HTML标记名，这样可以把几个不同的元素定义成相同的样式: .center text-align: center (定义.center的类选择符为文字居中排列) 这样的类可以被应用到任何元素上。下面我们使h1元素(标题1)和p元素(段落)都归为“center”类，这使两个元素的样式都跟随“.center”这个类选择符: 这个标题是居中排列的 这个段落也是居中排列的 注意:这种省略HTML标记的类选择符是我们经后最常用的CSS
16、方法，使用这种方法，我们可以很方便的在任意元素上套用预先定义好的类样式。 4. ID选择符 在HTML页面中ID参数指定了某个单一元素，ID选择符是用来对这个单一元素定义单独的样式。 ID选择符的应用和类选择符类似，只要把CLASS换成ID即可。将上例中类用ID替代,ID只能在一个页面中出现一次,而class可以多次运用. ccs这个段落向右对齐 定义ID选择符要在ID名称前加上一个“#”号。和类选择符相同，定义ID选择符的属性也有两种方法。下面这个例子，ID属性将匹配所有id=intro的元素: #intro font-size:110%; font-weight:bold; color:#
17、0000ff; background-color:transparent (字体尺寸为默认尺寸的110%;粗体;蓝色;背景颜色透明) 下面这个例子，ID属性只匹配id=intro的段落元素: p#intro font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent 注意:ID选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。 5. 包含选择符 可以单独对某种元素包含关系定义的样式表，元素1里包含元素2，这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义，例如: t
18、able a font-size: 12px 在表格内的链接改变了样式，文字大小为12像素，而表格外的链接的文字仍为默认大小。 6. 样式表的层叠性 层叠性就是继承性，样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。事实上，所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把很多层嵌套的样式叠加在一起，除非另外更改。例如在DIV标记中嵌套P标记: CSSdiv color: red; font-size:9pt 这个段落的文字为红色9号字 (P元素里的内容会继承DIV定义的属性) 注意:有些情况下内部选择符不继承周围选择符的值，但理论上这些都是特殊的。例如，上
19、边界属性值是不会继承的，直觉上，一个段落不会同文档BODY一样的上边界值。 另外，当样式表继承遇到冲突时，总是以最后定义的样式为准。如果上例中定义了P的颜色: div color: red; font-size:9pt p color: blue 这个段落的文字为蓝色9号字 我们可以看到段落里的文字大小为9号字是继承div属性的，而color属性则依照最后定义的。 不同的选择符定义相同的元素时，要考虑到不同的选择符之间的优先级。ID选择符，类选择符和HTML标记选择符，因为ID选择符是最后加上元素上的，所以优先级最高，其次是类选择符。如果想超越这三者之间的关系，可以用!important提升样
20、式表的优先权，例如: p color: #FF0000!important .blue color: #0000FF #id1 color: #FFFF00 我们同时对页面中的一个段落加上这三种样式，它最后会依照被!important申明的HTML标记选择符样式为红色文字。如果去掉!important，则依照优先权最高的ID选择符为黄色文字。 7. 注释:/* . */ 你可以在CSS中插入注释来说明你代码的意思，注释有利于你或别人以后编辑和更改代码时理解代码的含义。在浏览器中，注释是不显示的。CSS注释以/* 开头，以*/ 结尾，如下: /* 定义段落样式表 */ p text-align:
21、 center; /* 文本居中排列 */ ccscolor: black; /* 文字为黑色 */ font-family: arial /* 字体为arial */ css可以用任何写文本的工具进行开发,如文本工具,dreamweaver开发 css也是一种语言,这种语言要和html或者xhtml语言相结合才起作用, css简单来说就是用来美化网页用的,用css语言来控制网页的外观 举个例子 xhtml部分: 主页 留言 论坛 此时在页面上的表达形式是一个竖向列表,这样不够美观, 可以css来改善这个列表为一个横向导航条和超链接 css部分: ullist-style:none;margi
22、n:0px;padding:0px ul limargin:0px;padding:0px;float:left; ul li adisplay:block;width:100px;height:30px;background:#efefef;color:#333;text-decoration:none;text-align:center ul li a:hoverbackground:#333;color:#fff; 添加上css后,这个列表变成横向的导航条了,超级链接是淡色背景,灰色字体,没有下划线,高度是30像素,宽度是100像素 当我们鼠标经过这个超级链接时候,变成灰色背景,白色字体
23、 在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。 它的作用可以达到： （1）在几乎所有的浏览器上都可以使用。 （2）以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。 （3）使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。 （4）你可以轻松地控制页面的布局 。 （5）你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS
24、文件中相应的行，那么整个站点的所有页面都会随之发生变动。 想一想，没有使用CSS前我们是如何控制字体的颜色和大小以及所使用的字体的？我们一般使用HTML标签来实现，代码非常烦琐。 很难想象，如果在一个页面里需要频繁地更替字体的颜色大小，最终生成的HTML代码的长度一定臃肿不堪。 说实话，CSS就是为了简化这样的工作诞生的，当然其功能决非这么简单。 CSS是通过对页面结构的风格控制的思想，控制整个页面的风格的。 式样单放在页面中，通过浏览器的解释执行，是完全的文本，任何懂得HTML的人都可以掌握，非常的容易。甚至对一些非常老的浏览器，也不会产生页面混乱的现象。 CSS的一大优点是它的图片传输速度
25、比较完全的HTML网页要快一点。 关于CSS的参考资料，网上有很多讨论CSS的社区，但是要系统学习CSS，选择一本好书还是非常有必要的，推荐阅读CSS三剑客之一CSS实战手册 CSS具有两面性。就像它在格式化文本、导航栏、图片以及其他小小的网页方面很棒一样，当你准备好布局完整的网页时，它真正可怕的一面也展现出来了。 CSS布局有两种风格绝对定位和浮动。绝对定位让你把一个元素以像素级的精确性定位在网页的任何位置或者理论上是这样。这种整体控制令人兴奋，就如你将在下一章中所看到的，但是实际上很难实现。这就是大量网页使用基于浮动的布局的原因，也是本章的主题。 详细讲解CSS规范化命名的三种通用命名规则
26、 骆驼式命名法： 正如它的名称所表示的那样，是指混合使用大小写字母来构成变量和函数的名字。例如，下面是分别用骆驼式命名法和下划线法命名的同一个函数： printEmployeePaychecks()； print_employee_paychecks()； 第一个函数名使用了骆驼式命名法，函数名中的每一个逻辑断点都有一个大写字母来标记；第二个函数名使用了下划线法，函数名中的每一个逻辑断点都有一个下划线来标记。 骆驼式命名法近年来越来越流行了，在许多新的函数库和Microsoft Windows这样的环境中，它使用得相当多。另一方面，下划线法是c出现后开始流行起来的，在许多旧的程序和UNIX这样
27、的环境中，它的使用非常普遍。 匈牙利命名法： 广泛应用于象Microsoft Windows这样的环境中。Windows 编程中用到的变量（还包括宏）的命名规则匈牙利命名法，这种命名技术是由一位能干的 Microsoft 程序员查尔斯- 西蒙尼(Charles Simonyi) 提出的。 匈牙利命名法通过在变量名前面加上相应的小写字母的符号标识作为前缀，标识出变量的作用域，类型等。这些符号可以多个同时使用，顺序是先m_（成员变量）， 再指针，再简单数据类型，再其它。 例如：m_lpszStr, 表示指向一个以0字符结尾的字符串的长指针成员变量。 匈牙利命名法关键是：标识符的名字以一个或者多个小
28、写字母开头作为前缀；前缀之后的是首字母大写的一个单词或多个单词组合，该单词要指明变量的用途。 帕斯卡（pascal）命名法： 与骆驼命名法类似。只不过骆驼命名法是首字母小写，而帕斯卡命名法是首字母大写，如： DisplayInfo(); string UserName; 二者都是采用了帕斯卡命名法。在C#中，以帕斯卡命名法和骆驼命名法居多。 三种命名规则的小结： MyData 就是一个帕斯卡命名的示例 而myData是一个骆驼命名法,它第一个单词的第一个字母小写,后面的单词首字母大写,看起来像一个骆驼 而iMyData是一个匈牙利命名法,它的小写的i说明了它的型态,后面的和帕斯卡命名相同,指示
29、了该变量的用途. CSS样式解决了一个普遍的问题 HTML 标签原本被设计为用于定义文档内容。通过使用 、 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。而文档布局希望通过浏览器来完成，而不使用任何的格式化标签。 由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。 为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。 所有的主流浏览器均支
