《CSS速查手册》由会员分享，可在线阅读，更多相关《CSS速查手册（11页珍藏版）》请在金锄头文库上搜索。
1、CSS 速查 手册 (1).txt 爱人是路，朋友是树，人生只有一条路，一条路上多棵树，有钱的时候莫忘路，缺钱的时候靠靠树，幸福的时候别迷路，休息的时候靠靠树！CSS 速 查手册 (1)hve 2001 年 60 期Dreamweaver4 是现今最好的网站编辑工具之一，用它来给网页制作CSS 样式表会更简单、更方便。本教程教你如何利用 Dreamweaver4 在页面中加入 CSS，你不用死记硬背代码标记，也不用去看很厚的 CSS 手册，就可以轻松自如的在网页中运用 CSS。 不过首先你 要对 CSS有一定的了解。因此， 本教程的前面 4 章为CSS 理论知 识，主要是 对 CSS 的全面介
2、绍，希望读者看 后对 CSS的语法、结构、应用有一个全面的了解；后面4 章为 DW实战，主要是教你如何把 Dreamweaver4的 CSS 灵活运 用在网页中 。阅读此文前，你需要对 HTML有一定的了解，并会使用 Dreamweaver4。#1 一、 认识 CSSC SS 就是 Cascading Style Sheets，中文翻译为“层叠样式表” ，简称样式表，它是一种制作网页的新技术。网页设计最初是用 HTML 标记来定义页面文档及格式，例如标题、段落、表格、链 接 等，但这些标记不能满足更多的文档样式需求，为了解决这个问题，在1997 年W3C（The World Wide Web
3、Consortium）颁布HTML4 标准的同时也公布了有关样式表的第一个标准 CSS1， 自 CSS1 的版本之后，又在1998 年5 月发布了CSS2 版本，样式表得到了更多的充实。W 3C 把DHTML（Dynamic HTML）分为三个部分来实现：脚本语 言（包括JavaScript、Vbscript 等）、支持动态效果的浏览器（包括 Internet Explorer、Netscape Navigator等）和 CSS 样式表。你可以用 CSS 精确地 控制页面里每一个元素的字体样式、背景、排列方式、区域尺寸、四周加入边框等。使用 CSS 能够简化网页的格式代码，加快下载显示的速度，
4、外部链接样式可以同时定义多个页面，大大减少了重复劳动的工作量。注意：CSS 需要 IE4（Internet Explorer 4.0）和NC4（N etscape 4.0）以上的浏览器支持，有些效果需要更高版本的浏览器支持。#1 二、 语法1. 基本语法C SS 的定义是由三个部 分构成：选择符（selector），属性（properties ）和属性的取值（value）。基本格式如下：selector property: value （选择符 属性：值 ）选择符可以是多种形式，一般是你要定义样式的 HTML 标记，例如BODY、P、 TABLE，你可以通过此方法定义它的属性和值，属性和值要用
5、冒号隔开：body color: black选择符 body 是指页面主体部分，color 是控制文字颜色的属性，black 是颜色的值，此例的效果是使页面中的文字为黑色。如果属性的值是多个单词组成，必须在值上加引号，比如字体的名称经常是几个单词的组合：p font-fa mily: sans serif（定义段落字体为sans serif）如果需要对一个选择符指定多个属性时，我们使用分号将所有的属性和值分开：p text-ali gn: center; color: red（段落居中排列；并且段落中的文字为红色）为了使你定义的样式表方便阅读，你可以采用分行的书写格式：ptext- align
6、: center;color: black;fo nt-family: arial（段落排列居中，段落中文字为黑色，字体是 arial）2. 选择符组 你可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义：h1， h2， h3， h4， h5， h6 color: green （这个组里包括所有的标题元素，每个标题元素的文字都为绿色）p， table fo nt-size: 9pt （段落和表格里的文字尺寸为9 号字）效果完全等效于：p font-size: 9pt table font-size : 9pt 3. 类选择符用类选择符你能够把相同的元素分类定义
7、不同的样式，定义类选择符时，在自定类的名称前面加一个点号。假如你想要两个不同的段落，一个段落向右对齐，一个段落居中，你可以先定义两个类：p.right text-align: rightp.center text-al ign: center然后用不在不同的段落里，只要在 HTML 标记里加入你定义的class参数：这个段落向右对齐的?这个段落是居中排列的注意：类的名称可以是任意英文单词或以英文开头与数字的组合，一般以其功能和效果简要命名。类选择符还有一种用法，在选择符中省略HTML 标记名，这样可以把几个不同的元素定义成相同的样式：.center text-alig n: center（定义
8、.center 的类选择符为文字居中排列）这样的类可以被应用到任何元素上。下面我们使 h1 元素（标题 1）和 p元素（段落）都归为“ce nter”类，这使两个元素的样式都跟随“.cent er”这个类选择符：这个标题是居中排列的这个段落也是居中排列的注意：这种省略 HTML 标记的类选择符是我们今后最常用的 CSS方法，使用这种方法，我们可以很方便的在任意元素上套用预先定义好的类样式。4. ID 选择符在HTML 页面中 ID 参数指定了某个单一元素 ，ID 选择符是用来对这个单一元素定义单独的样式。ID 选择符的应用和类选择符类似，只要把 CLASS 换成ID 即可。将上例中类用 ID
9、替代：这个段落向右对齐定义 ID选择符要在ID 名称前加上一个“ #”号。和类选择符相同，定义 ID选择符的属性也有两种方法。下面这个例子，ID 属性将匹配所有id=i ntro的元素：#introfont-size:110%;fo nt-weight:bold;color:# 0000ff;background-color:transparent（字体尺寸为默认尺寸的 110%；粗体；蓝色；背景颜色透明）下面这个例子，ID 属性只匹配 id=intro的段落元素：p#introfont-size:110% ;font-weight:bold;color: #0000ff;background
10、-color:tr ansparent注意：ID 选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。5. 包含选择符可以单独对某种元素包含关系定义的样式表，元素 1 里包含元素 2，这种方式只对在元素1 里的元素2 定义，对单独的元素1 或元素 2无定义，例如：table afont-s ize: 12px在表格内的链接改变了样式，文字大小为 12 象素，而表格外的链接的文字仍为默认大小。6. 样式表的层叠性层叠性就是继承性，样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。事实上，所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把很多层嵌
11、套的样式叠加在一起，除非另外更改。例如在DIV标记中嵌套P 标记：div co lor: red; font-size:9pt这个段落的文字为红色 9 号字（P元素里的内 容会继承 DIV 定义的属性）注意：有些情况下内部选择符不继承周围选择符的值，但理论上这些都是特殊的。例如，上边界属性值是不会继承的，直觉上，一个段落不会同文档BODY 一样的上边界值。另外，当样式表继承遇到冲突时，总是以最后定义的样式为准。如果上例中定义了 P 的颜色 ：div color: red; font-size:9ptp color: blue这个段落的文字为蓝色 9 号字我们可以看到段落里的文字大小为9 号字是
12、继承 div 属性的，而 color 属性则依照最后定义的。不同的选择符定义相同的元素时，要考虑到不同的选择符之间的优先级。ID 选 择符，类选择符和 HTML 标记选择符，因为 ID 选择符是最后加到元素上的，所以优先级最高，其次是类选择符。如果想超越这三者之间的关系，可以用!important 提升 样式表的优 先权，例如：p color: #FF0000!important .blue color: #0000FF#id1 color: #FFFF0 0我们同时对页面中的一个段落加上这三种样式，它最后会依照被!important申明的 HTML 标记选 择符样式为红色文字。如果去掉!im
13、portant ，则依照优先权最高的 ID 选择符为黄色文字。7. 注释你可以在 CSS 中插入 注释来说明你代码的意思，注释有利于你或别人以后编辑和更改代码时理解代码的含义。在浏览器中，注释是不显示的。CSS 注释以 /* 开头，以 */ 结尾 ，如下：/* 定义段落样式表 */ptext-align: center; /* 文本居中排列 */color: black; /* 文字为黑色 */font-family : arial /* 字体为 arial */#1 三、 伪类动态链接伪类可以看作是一种特殊的类选择符，是能被支持 CSS 的浏览器自动所识别的特殊选择符。它的最大的用处就是可以
14、对链接在不同状态下定义不同的样式效果。1. 语法伪类的语法是在原有的语法里加上一个伪类（pseudo-class）：selector:pseudo-class property: value（选择符:伪类 属性: 值 ）伪类和类不同，是CSS 已经定义好的，不能象类选择符一样随意用别的名字，根据上面的语法可以解释为对象（选择符）在某个特殊状态下（伪类）的样式。类选择符及其他选择符也同样可以和伪类混用：selector.class:pseudo-cl ass property: value（选择符.类:伪类 属性: 值 ）2. 锚的伪类我们最常用的是 4 种 a（锚）元素的伪类，它表示动态链接在
15、 4 种不同的状态：link、visited、active、hover（未访问的链接、已访问的链接、激活链接和鼠标停留在链接上）。我们把它们分别定义不同的效果：a:link color: #FF0000; text-decoration: none /* 未访问的链接 */a:visited color: #00FF00; text-decoration: none /* 已访问的链接 */a:hover color: #FF00FF; text-decoration: unde rline /* 鼠标在链接上 */a:active color: #0000FF; text- decorati
16、on: underline /* 激活链接 */（上面这个例子中，这个链接未访问时的颜色是红色并无下划线，访问后是绿色并无下划线，激活链接时为蓝色并有下划线，鼠标在链接上时为紫色并有下划线）注意：有时这个链接访问前鼠标指向链接时有效果，而链接访问后鼠标再次指向链接时却无效果了。这是因为你把 a:hover 放在了 a:visited 的前面，这样的话由于后面的优先级高，当访问链接后就忽略了 a:hover 的效果。所以根据叠层顺序，我们在定义这些链接样式时，一定要按照 a:link， a:visited， a:hover， a:actived 的顺序书写。3. 伪类和类选择符将伪类和类组合起来用，就可以在同一个页面中做几组不同的链接效果了，例如，我们定义一组链接为红色，访问后
