css使用方法.docx

1、css使用方法 CSS使用说明文档文件类型: 培训文档 编写时间: 2009.7.17 编写人员: 变更记录变更日期变更内容变更章节提出人确认人变更人编写目的介绍css的使用方法，使大家对css样式表有个深入的理解。可做为css部分培训学习的文档试用。名词解释css：又叫即层叠样式表, 布局与美化网页的.CSS语法及示例css即层叠样式表, 布局与美化网页的。CSS语法非常简单,组成CSS语法的元素只有CSS选择符与CSS属性.每个CSS选择符由1个或多个CSS属性组成.CSS是大小写不敏感的,在CSS语法中推荐使用小写.1.外部引用CSS import url( 2.内部引用CSS可以使用s

2、tyle标签直接把CSS文件中的内容加载到HTML文档内部.示例3.内联引用CSS内联引用可以把CSS样式直接作用在HTML标签中.示例 使用CSS内联引用表现段落.4.CSS选择符CSS选择符就是CSS样式的名字,当在HTML文档中表现一个CSS样式的时候,就要用到一个CSS.怎么用呢?这时就通过CSS选择符(CSS的名字)来指定此HTML标签使用此CSS样式.选择符语法选择符名字 声明;一个CSS选择符就定义了一个样式比如下面这三个例子p font-size:12px;.dreamdublue color:blue;.dreamdu18px font-size:18px;#dreamdur

3、ed color:red;dreamdublue和dreamdured都是CSS的选择符,也就是CSS的名字.选择符取名规则CSS选择符可以使用英文字母的大写与小写,数字,连字号,下划线,冒号,句号.英文字母大写与小写 A-Z a-z 数字 0-9 连字号 - 下划线 _ 冒号 : 句号 . 提示: CSS选择符只能以字母开头.常用的三种选择符xhtml标签选择符,比如 p标签选择符(代表所有的段落都使用这个CSS样式),比如 pfont-size:12px; id选择符,唯一性选择符,比如 #dreamduredcolor:red;,就是在名字前增加了一个#,id选择符在一个页面中只能出现一

4、次,在整个网站中也最好出现一次(这样有利于程序员控制此元素,有多个一样名称的元素,就无法分开不好控制了). class选择符,多重选择符,比如.dreamdubluecolor:blue;,就是在名字前增加了一个.,class选择符在一个页面中可以出现多次(注意下面的示例中class选择符的用法). 示例梦之都xhtml标签选择符梦之都id选择符梦之都class选择符梦之都class选择符2,出现了多次.一个p元素使用了两个class选择符,他们之间用空格分开,而且class选择符可以在一个页面出现多次.5.CSS声明CSS声明是由属性,冒号(:),属性值和分号(;)组成的.语法:属性:属性值

5、;示例font-size:12px;font-size代表字体大小. 12px字体大小的值. 下面介绍两个常用的技巧1,选择符的名字一样,声明是可以组合的例如:选择符名字 声明1;选择符名字 声明2;选择符名字 声明3;可以组合为:选择符名字 声明1; 声明2; 声明3;示例div color:black;div font-size:12px;与下面的是等价的div color:black; font-size:12px;2,声明全部一样,选择符的名字也可以组合选择符名字1 声明1; 声明2;选择符名字2 声明1; 声明2;选择符名字3 声明1; 声明2;可以组合为:选择符名字1,选择符名字2

6、,选择符名字3 声明1; 声明2;示例.dreamdudivwhite12px color:white; font-size:12px;h1 color:white; font-size:12px;div color:white; font-size:12px;与下面的是等价的.dreamdudivwhite12px,h1,div color:white; font-size:12px;CSS的语法是比较简单的,声明也比较直接,难点是选择符的名字,有很多种变化,高级教程中我将详细介绍.示例h1 color:red;p color:black; font-size:12px;div color:

7、lightblue; font-size:16px;h1, p, div border:1px solid black;通过上面的示例大家可以看出选择符组合的好处,border: 1px solid black;这段代码只写了一次,就定义了三种HTML标签,这样使代码更统一,便于以后的修改,减少了代码量.6.css注释CSS注释的开始使用/*,结束使用*/CSS注释语法/* 注释内容 */示例/* -文字样式开始- */* 梦之都白色12象素文字 */.dreamduwhite12px color:white; font-size:12px;/* 梦之都黑色16象素文字 */.dreamdub

8、lack16px color:black; font-size:16px;/* -文字样式结束- */CSS属性及示例Css的使用主要是要熟练使用css的常用属性，一些不常用的大家可以参考css手册。下面介绍一下css的常用属性。1背景background属性 五个背景属性可以全部在此定义 取值: | | | | | inherit 初始值: 根据五个背景属性的默认值 继承性: 否 适用于: 所有元素 前面的讲的五个背景属性完全可以使用background属性代替.示例body background:transparent url(list-orange.png) repeat-x scrol

9、l center;使用background解决所有问题.body background:url(list-orange.png) repeat-x scroll center;由于背景颜色background-color的默认值为transparent,所以可以省略,这个例子和上面的例子是等价的.body background:url(list-orange.png) repeat-x center;由于背景图片随滚动轴的移动方式background-attachment的默认值为scroll,所以可以省略,背景图片的位置background-position中的属性值center cente

10、r等价于center,这个例子和上面的例子也是等价的。1.1 background-attachment 定义背景图片随滚动轴的移动方式 取值: scroll | fixed | inherit o scroll: 随着页面的滚动轴背景图片将移动 o fixed: 随着页面的滚动轴背景图片不会移动 o inherit: 继承 初始值: scroll 继承性: 否 适用于: 所有元素 background:背景.attachment:附着. 示例body background-image:url(list-orange.png); background-attachment:fixed; bac

11、kground-repeat:repeat-x; background-position:center center;1.2. background-color背景色,定义背景的颜色 取值: | transparent | inherit o : 颜色表示法 o transparent: 透明 o inherit: 继承 初始值: transparent 继承性: 是 适用于: 所有元素 background:背景.color:颜色. 背景色与前景色对应,可以定义背景的颜色.示例body background-color:green;定义网页的背景使用绿色.1.3. background-im

12、age定义背景图片 取值: | none | inherit o : URI o none: 无 o inherit: 继承 初始值: none 继承性: 否 适用于: 所有元素 background:背景.image:图片. 示例body background-image:url(html_table.png);p background-image:none;div background-image:url(list-orange.png);1.4. background-repeat定义背景图片的重复方式 取值: repeat | repeat-x | repeat-y | no-repe

13、at | inherit o repeat: 平铺整个页面,左右与上下 o repeat-x: 在x轴上平铺,左右 o repeat-y: 在y轴上平铺,上下 o no-repeat: 图片不重复 o inherit: 继承 初始值: repeat 继承性: 否 适用于: 所有元素 background:背景.repeat:重复. 示例body background-image:url(list-orange.png); background-repeat:no-repeat;div background-image:url(list-orange.png); background-repea

14、t:repeat-y; background-position:right;1.5. background-position定义背景图片的位置 取值: | | left | center | right | | top | center | bottom ? | left | center | right | top | center | bottom | inherit o 水平 left: 左；center: 中；right: 右；o 垂直 top: 上； center: 中； bottom: 下；o 垂直与水平的组合 x-% y-% x-pos y-pos o inherit: 继承 初

15、始值: 0% 0% 继承性: 否 适用于: 所有元素 background:背景.position:位置. 示例body background-image:url(list-orange.png); background-repeat:no-repeat;p background-image:url(list-orange.png); background-position:right bottom ; background-repeat:no-repeat;div background-image:url(list-orange.png); background-position:50% 2

16、0% ; background-repeat:no-repeat;2.文本2.1 letter-spacing 定义文本中字母的间距(中文为文字的间距) 取值: normal | | inherit o normal: 正常(主要是根据用户所使用的浏览器等设备) o : 长度表示法 o inherit: 继承 初始值: normal 继承性: 是 适用于: 所有元素 letter:字母.spacing:间隔. letter-spacing定义了字与字之间的距离. word-spacing是控制字与字之间空格的宽度. 示例.ls3px letter-spacing:3px;.lsn3px let

17、ter-spacing:-3px;正值为增大距离,负值为缩小距离.2.2 word-spacing定义以空格间隔文字的间距(就是空格本身的宽度) 取值: normal | | inherit o normal: 正常 o : 长度表示法 o inherit: 继承 初始值: normal 继承性: 是 适用于: 所有元素 word:词.spacing:间隔. 示例.ws30 word-spacing:30px;.wsn30 word-spacing:-10px; 正值为增大距离,负值为缩小距离.比较 letter-spacing定义了字与字之间的距离. word-spacing是控制字与字之间

18、空格的宽度. 2.3 text-decoration定义文本是否有划线以及划线的方式 取值:none | underline | overline | line-through | blink | inherit o none: 定义正常显示的文本 o underline | overline | line-through | blink: 四个值中的一个或多个 underline: 定义有下划线的文本 overline: 定义有上划线的文本 line-through: 定义直线穿过文本 blink: 定义闪烁的文本 o inherit: 继承 初始值: none 继承性: 否 适用于: 所有

19、元素 text:文本.decoration:装饰. 示例p#underline text-decoration:underline;p#overline text-decoration:overline;p#line-through text-decoration:line-through;p#blink text-decoration:blink;p#underover text-decoration:underline overline;p#underoverthroughblink text-decoration:underline overline line-through blink

20、;2.4 text-transform定义文本的大小写状态,此属性对中文无意义 取值:capitalize | uppercase | lowercase | none | inherit o capitalize: 首字母大写 o uppercase: 大写 o lowercase: 小写 o none: 正常无变化 o inherit: 继承 初始值: none 继承性: 是 适用于: 所有元素 text:文本.transform:转换. p#capitalize text-transform:capitalize;p#uppercase text-transform:uppercase;

21、p#lowercase text-transform:lowercase;2.5 text-align 定义文本的对齐方式 取值: left | right | center | justify | inherit o left: 左对齐 o right: 右对齐 o center: 居中 o justify: 对齐每行的文字 o inherit: 继承 初始值: 如果是ltr就为left,如果是rtl就为right 继承性: 是 适用于: 所有元素 text:文本.align:排列.示例：p#left text-align:left;p#right text-align:right;p#ce

22、nter text-align:center;p#justify text-align:justify;2.6 text-indent 定义文本首行的缩进(在首行文字之前插入指定的长度) 取值: | | inherit o : 长度表示法 o : 百分比表示法 o inherit: 继承 初始值: 0 继承性: 是 适用于: 所有元素 text:文本.indent:缩进. p text-indent:58%;如果段落p的父级元素是body，那么段落p第一行的缩进总是相对于body元素的58%(什么是父级元素我将在CSS高级教程中介绍).p#indent text-indent:2em;p#un

23、indent text-indent:-2em;正值向后缩,负值向前进.2.7 white-space通过HTML文档的源代码的排版方式控制页面显示文本的排版方式 取值: normal | pre | nowrap | pre-wrap | pre-line | inherit o normal: 正常无变化(默认处理方式.文本自动处理换行.假如抵达容器边界内容会转到下一行) o pre: 保持HTML源代码的空格与换行,等同与pre标签 o nowrap: 强制文本在一行,除非遇到br换行标签 o pre-wrap: 同pre属性,但是遇到超出容器范围的时候会自动换行 o pre-line:

24、 同pre属性,但是遇到连续空格会被看作一个空格 o inherit: 继承 初始值: normal 继承性: 是 适用于: 所有元素 white:白色.space:间隔,距离. p#pre white-space:pre;3.字体3.1 font-family定义使用什么字体 取值: | , | * | inherit o | , | * :字体名 family-name: 一系列字体名称 generic-family: 一般性字体名称,取值:serif,sans-serif,cursive,fantasy,monospace o inherit:继承 初始值: 根据用户计算机的默认字体 继承性: 是 适用于: 所有元素 font:字体.family:家族. 示例p#songti font-family:宋体; p#Arial font-family:Arial; p font-family:宋体,Arial;比如中文的宋体,英文的Arial,可以定义多种字体连在一起,使用,(逗号)分隔3.2 font-size定义字体的大小 取值: | | | | inherit o abso