网页CSS样式设计要点(一)

第一章概述

一、CSS简介
1、CSS是Cascading Style Sheets(层叠样式表单)的简称。通常所称的CSS是指CSS1,即层叠样式表单1级。

2、编辑CSS文档：与编辑HTML的方法一样。有如下3种：

用常见的超文本编辑器来实现，如Frontpage,Dreamweaver；
用任何不带格式的文本编辑器来编写，后缀名为.htm或.html，如记事本、写字板；
用任何不带格式的文本编辑器来编写，后缀名为.css。
第二章 CSS初步了解

1、将样式与HTML结合：共有四种方法。

在文档<HEAD>中用<Style type="text/css"></style>定义；
使用<LINK>元素链接到外部的样式表单。<LINK REL="stylesheet" href="style1.css">；
在<BODY>内部的元素中使用<STYLE>定义CSS，如<H3 Style="">；
使用CSS "@import"标记来导入样式表单；
2、选择符

　　在h3{font-family:arial}里h3是选择符。font-family是属性，arial是属性值。属性和属性值之间以冒号分隔。如果要定义多个属性，属性与属性之间以分号隔开。要为一个属性定义多个属性值，则用逗号隔开。

　　任何一个html标记都可以作为选择符。但是有时用class和id更方便。class总以.号开头，id以#开头。class和id用法差不多，用id给选择符一个独有的名字，在调用script时会更容易。但是，如果使用样式表单而不使用script，用class比id好。

3、使CSS更容易和更强大

　　有几种方法使CSS更容易和更强大：

使用上下文关联的选择符：如strong em{color:red}
选择符编组：如h1,strong em,td{color:blue;}
简化编码：如em{font:12pt/14pt bolder arial,helvetical}
使用锚伪类：如a:link{color:red}，选择附中的元素类型可以省略而使用缺省值如:link{color:red}
4、定位

　　使用元素的position属性，有绝对定位（absolute）和相对定位（relative）。

5、3D层技术

　　使用z-index属性。

6、特殊效果

　　包括剪切（clip）、溢出（overflow）、可见性（visibility）属性。剪切属性可以让一些被覆盖的对象显示出来，溢出属性用来指定如果对象放在一个比它小的边框中该怎样处理，可见性属性可以控制一个对象是否看得见——这些是制作特效的好办法。

第三章 CSS进一步学习

1、注释语句：/*在这里加入注释*/

2、伪类：

选择附中的元素类型可以省略而使用缺省值如:link{color:red}
伪类可以被用在关联选择符里：a:link img{border:solid blue}
伪类可以与通用类组合：a.external:visited{color:blue}
3、首行和首字伪元素：

　　首行伪元素：p:first-line{font-style:small-caps} 首字伪元素：p:first-letter{font-style:small-caps}

　　选择符里的伪元素：p.initial:first-letter{color:red}

4、层叠顺序的具体规则：

如果选择符与元素匹配，那么声明发生作用；如果没有适用的声明，用继承值；如果没有继承值，用默认值。
标注“!important”的比未标注的级别高；
作者的样式表单覆盖读者的样式表单，读者的覆盖UA的。
按选择符的指数来排列。（略）
按顺序排列，后一个执行的胜出。
第四章 CSS属性

一、字体属性
　　与字体有关的属性包括：font-family,font-style,font-variant,font-weight,font-size,font。执行顺序是：font-style,font-variant,font-weight,font-size

1、font-family:如果字体的名称中含有空格，那么要加上双引号。

2、font-style:normal|italic|oblique

3、font-variant:normal|small-caps

4、font-weight:normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900

　　normal相当于400，bold相当于700

5、font-size:absolute-size|relative-size|length|percentage

　　font属性可以一次定义前边提到的所有的字体属性。

二、颜色和背景属性
1、color:一般指前景色。

2、background-color:背景色。

3、background-image:

　　body{background-image:url(marble.jpg)}

4、background-repeat:repeat|repeat-x|repeat-y|no-repeat

　　body{background-image:url(marble.jpg);background-repeat:repeat-y}

5、background-attachment:scroll|fixed

　　设置文字在背景图案上面滚动，背景图案保持固定不动用fixed.

6、background-position:percentage|length{1,2}|top|center|bottom|left|center|right

7、background:background-color|background-image|background-repeat|background-attachment|background-position

　　可以一次设置前面的所有的有关背景的属性。如body{background:white url(bg.jpg)}

三、文本属性
1、word-spacing:normal|length

2、letter-spacing:normal|length

3、text-decoration:none|underline|overline|line-through|blink

　　这个属性用来对齐图片效果特别好。如image{vertical-align:baseline}

5、text-transform:capitalize|uppercase|lowercase|none

capitalize:每个单词的第一个字母大写。
uppercase:所有字都大写。
lowercase:所有字都小写。
6、text-align:left|right|center|justify

7、text-indent:length|percentage

　　适用于块级元素，定义文本首行的缩进方式。如p{text-indent:1cm}

8、line-height:normal|number|length|percentage

四、容器属性
1、margin-top:length|percentage|auto

　　如body{margin-top:0}

2、margin-right:同上

3、margin-bottom:同上

4、margin-left:同上

5、margin:length|percentage|auto {1,4}

　　前四个属性都可以用margin来定义。如果给出的值少于四个，那么缺失的部分就取其对边的值。

6、padding-top:length|percentage

7、padding-right:同上

8、padding-bottom:同上

9、padding-left:同上

10、padding:length|percentage {1,4}

　　前面四个属性都可以用padding来定义。如果给出的值少于四个，那么缺失的部分就取其对边的值。

11、border-top-width:thin|medium|thick|length

12、border-right-width:同上

13、border-bottom-width:同上

14、border-left-width:同上

15、border-width:thin|medium|thick|length {1,4}

　　前面四个属性都可以用border-width来定义。可以一次给出一个、两个、三个或者四个border-width值。如果给出的值少于四个，那么缺失的部分就取其对边的值。如h1{border-width:thick thin medium}

16、border-color:<color> {1,4}

　　如果只给出一个值，那么四条边框的颜色都一样。否则缺失边的颜色从对边获取。

dotted:点组成的虚线。
dash:短线组成的虚线。
double:双线。
groove:3D沟槽状边框。
ridge:3D脊状的边框。
inset:3D内嵌边框（颜色较深）。
outset:3D外嵌边框（颜色较浅）。
18、border-top:border-top-width|border-style|color

　　一个元素顶边的宽度、样式和颜色都可以border-top一次指定。

19、border-right:同上

20、border-bottom:同上

21、border-left:同上

22、border:border-width|border-style|color

　　要一次设置一个元素所有边框的宽度、样式和颜色，可以使用border。border只能使四条边框都相同。

23、width:length|percentage|auto

24、height:length|auto

25、float:left|right|none

　　适用float元素可以使文字环绕在一个元素的四周。比html中的align属性应用范围更广，不仅仅是图片和表格，所有的元素都可以使用float属性。

26、clear:none|left|right|both

　　与float相对应。如果为right,则元素的右边不会放进任何对象。

更多的网页CSS样式设计要点(一)请到论坛查看: http://BBS.TC711.COM

【双击滚屏】【评论】【收藏】【打印】【关闭】来源：互联网日期：2008-2-13