css使用方法.docx
《css使用方法.docx》由会员分享，可在线阅读，更多相关《css使用方法.docx（53页珍藏版）》请在冰豆网上搜索。
css使用方法
CSS使用说明文档
文件类型:
培训文档编写时间:
2009.7.17
编写人员:
变更记录
变更日期
变更内容
变更章节
提出人
确认人
变更人
编写目的
介绍css的使用方法，使大家对css样式表有个深入的理解。
可做为css部分培训学习的文档试用。
名词解释
css：
又叫即层叠样式表,布局与美化网页的.
CSS语法及示例
css即层叠样式表,布局与美化网页的。
CSS语法非常简单,组成CSS语法的元素只有CSS选择符与CSS属性.
每个CSS选择符由1个或多个CSS属性组成.
CSS是大小写不敏感的,在CSS语法中推荐使用小写.
1.外部引用CSS
@importurl（
2.内部引用CSS
可以使用style标签直接把CSS文件中的内容加载到HTML文档内部.
示例
[CDATA[
/*----------文字样式开始----------*/
/*梦之都白色12象素文字*/
.dreamduwhite12px
{
color:
white;
font-size:
12px;
}
/*梦之都黑色16象素文字*/
.dreamdublack16px
{
color:
black;
font-size:
16px;
}
/*----------文字样式结束----------*/
]]>
3.内联引用CSS
内联引用可以把CSS样式直接作用在HTML标签中.
示例
10px;color:
#FFFFFF;">
使用CSS内联引用表现段落.
4.CSS选择符
CSS选择符就是CSS样式的名字,当在HTML文档中表现一个CSS样式的时候,就要用到一个CSS.怎么用呢?
这时就通过CSS选择符（CSS的名字）来指定此HTML标签使用此CSS样式.
选择符语法
选择符名字
{
声明;
}
一个CSS选择符就定义了一个样式
比如下面这三个例子
p
{
font-size:
12px;
}
.dreamdublue
{
color:
blue;
}
.dreamdu18px
{
font-size:
18px;
}
#dreamdured
{
color:
red;
}
dreamdublue和dreamdured都是CSS的选择符,也就是CSS的名字.
选择符取名规则
CSS选择符可以使用英文字母的大写与小写,数字,连字号,下划线,冒号,句号.
英文字母大写与小写A-Za-z数字0-9连字号-下划线_冒号:
句号.提示:
CSS选择符只能以字母开头.
常用的三种选择符
xhtml标签选择符,比如p标签选择符（代表所有的段落都使用这个CSS样式）,比如p{font-size:
12px;}
id选择符,唯一性选择符,比如#dreamdured{color:
red;},就是在名字前增加了一个#,id选择符在一个页面中只能出现一次,在整个网站中也最好出现一次（这样有利于程序员控制此元素,有多个一样名称的元素,就无法分开不好控制了）.
class选择符,多重选择符,比如.dreamdublue{color:
blue;},就是在名字前增加了一个.,class选择符在一个页面中可以出现多次（注意下面的示例中class选择符的用法）.
示例
梦之都xhtml标签选择符
梦之都id选择符
梦之都class选择符
梦之都class选择符2,出现了多次.
一个p元素使用了两个class选择符,他们之间用空格分开,而且class选择符可以在一个页面出现多次.
5.CSS声明
CSS声明是由"属性","冒号（:
）","属性值"和"分号（;）"组成的.
语法:
属性:
属性值;
示例
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,选择符名字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:
lightblue;
font-size:
16px;
}
h1,p,div
{
border:
1pxsolidblack;
}
通过上面的示例大家可以看出选择符组合的好处,border:
1pxsolidblack;这段代码只写了一次,就定义了三种HTML标签,这样使代码更统一,便于以后的修改,减少了代码量.
6.css注释
CSS注释的开始使用/*,结束使用*/
CSS注释语法
/*注释内容*/
示例
/*----------文字样式开始----------*/
/*梦之都白色12象素文字*/
.dreamduwhite12px
{
color:
white;
font-size:
12px;
}
/*梦之都黑色16象素文字*/
.dreamdublack16px
{
color:
black;
font-size:
16px;
}
/*----------文字样式结束----------*/
CSS属性及示例
Css的使用主要是要熟练使用css的常用属性，一些不常用的大家可以参考css手册。
下面介绍一下css的常用属性。
1背景
background属性
五个背景属性可以全部在此定义
∙取值:
[||||||||]|inherit
∙初始值:
根据五个背景属性的默认值
∙继承性:
否
∙适用于:
所有元素
前面的讲的五个背景属性完全可以使用background属性代替.
示例
body
{
background:
transparenturl（'list-orange.png'）repeat-xscrollcenter;
}
使用background解决所有问题.
body
{
background:
url（'list-orange.png'）repeat-xscrollcenter;
}
由于背景颜色background-color的默认值为transparent,所以可以省略,这个例子和上面的例子是等价的.
body
{
background:
url（'list-orange.png'）repeat-xcenter;
}
由于背景图片随滚动轴的移动方式background-attachment的默认值为scroll,所以可以省略,背景图片的位置background-position中的属性值centercenter等价于center,这个例子和上面的例子也是等价的。
1.1background-attachment
定义背景图片随滚动轴的移动方式
∙取值:
scroll|fixed|inherit
oscroll:
随着页面的滚动轴背景图片将移动
ofixed:
随着页面的滚动轴背景图片不会移动
oinherit:
继承
∙初始值:
scroll
∙继承性:
否
∙适用于:
所有元素
∙background:
背景.attachment:
附着.
示例
body
{
background-image:
url（'list-orange.png'）;
background-attachment:
fixed;
background-repeat:
repeat-x;
background-position:
centercenter;
}
1.2.background-color
背景色,定义背景的颜色
∙取值:
|transparent|inherit
o:
颜色表示法
otransparent:
透明
oinherit:
继承
∙初始值:
transparent
∙继承性:
是
∙适用于:
所有元素
∙background:
背景.color:
颜色.
背景色与前景色对应,可以定义背景的颜色.
示例
body
{
background-color:
green;
}
定义网页的背景使用绿色.
1.3.background-image
定义背景图片
∙取值:
|none|inherit
o:
URI
onone:
无
oinherit:
继承
∙初始值:
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-repeat|inherit
orepeat:
平铺整个页面,左右与上下
orepeat-x:
在x轴上平铺,左右
orepeat-y:
在y轴上平铺,上下
ono-repeat:
图片不重复
oinherit:
继承
∙初始值:
repeat
∙继承性:
否
∙适用于:
所有元素
∙background:
背景.repeat:
重复.
示例
body
{
background-image:
url（'list-orange.png'）;
background-repeat:
no-repeat;
}
div
{
background-image:
url（'list-orange.png'）;
background-repeat:
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-posy-pos
oinherit:
继承
∙初始值:
0%0%
∙继承性:
否
∙适用于:
所有元素
∙background:
背景.position:
位置.
示例
body
{
background-image:
url（'list-orange.png'）;
background-repeat:
no-repeat;
}
p
{
background-image:
url（'list-orange.png'）;
background-position:
rightbottom;
background-repeat:
no-repeat;
}
div
{
background-image:
url（'list-orange.png'）;
background-position:
50%20%;
background-repeat:
no-repeat;
}
2.文本
2.1letter-spacing
定义文本中字母的间距（中文为文字的间距）
∙取值:
normal||inherit
onormal:
正常（主要是根据用户所使用的浏览器等设备）
o:
长度表示法
oinherit:
继承
∙初始值:
normal
∙继承性:
是
∙适用于:
所有元素
∙letter:
字母.spacing:
间隔.
∙letter-spacing定义了字与字之间的距离.
∙word-spacing是控制字与字之间空格的宽度.
示例
.ls3px
{
letter-spacing:
3px;
}
.lsn3px
{
letter-spacing:
-3px;
}
正值为增大距离,负值为缩小距离.
2.2word-spacing
定义以空格间隔文字的间距（就是空格本身的宽度）
∙取值:
normal||inherit
onormal:
正常
o:
长度表示法
oinherit:
继承
∙初始值:
normal
∙继承性:
是
∙适用于:
所有元素
∙word:
词.spacing:
间隔.
示例
.ws30
{
word-spacing:
30px;
}
.wsn30
{
word-spacing:
-10px;
}
正值为增大距离,负值为缩小距离.
比较
∙letter-spacing定义了字与字之间的距离.
∙word-spacing是控制字与字之间空格的宽度.
2.3text-decoration
定义文本是否有划线以及划线的方式
∙取值:
none|[underline||overline||line-through||blink]|inherit
onone:
定义正常显示的文本
o[underline||overline||line-through||blink]:
四个值中的一个或多个
▪underline:
定义有下划线的文本
▪overline:
定义有上划线的文本
▪line-through:
定义直线穿过文本
▪blink:
定义闪烁的文本
oinherit:
继承
∙初始值:
none
∙继承性:
否
∙适用于:
所有元素
∙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:
underlineoverline;
}
p#underoverthroughblink
{
text-decoration:
underlineoverlineline-throughblink;
}
2.4text-transform
定义文本的大小写状态,此属性对中文无意义
∙取值:
capitalize|uppercase|lowercase|none|inherit
ocapitalize:
首字母大写
ouppercase:
大写
olowercase:
小写
onone:
正常无变化
oinherit:
继承
∙初始值:
none
∙继承性:
是
∙适用于:
所有元素
∙text:
文本.transform:
转换.
p#capitalize
{
text-transform:
capitalize;
}
p#uppercase
{
text-transform:
uppercase;
}
p#lowercase
{
text-transform:
lowercase;
}
2.5text-align
定义文本的对齐方式
∙取值:
left|right|center|justify|inherit
oleft:
左对齐
oright:
右对齐
ocenter:
居中
ojustify:
对齐每行的文字
oinherit:
继承
∙初始值:
如果是ltr就为left,如果是rtl就为right
∙继承性:
是
∙适用于:
所有元素
∙text:
文本.align:
排列.示例：
p#left
{
text-align:
left;
}
p#right
{
text-align:
right;
}
p#center
{
text-align:
center;
}
p#justify
{
text-align:
justify;
}
2.6text-indent
定义文本首行的缩进（在首行文字之前插入指定的长度）
∙取值:
||inherit
o:
长度表示法
o:
百分比表示法
oinherit:
继承
∙初始值:
0
∙继承性:
是
∙适用于:
所有元素
∙text:
文本.indent:
缩进.
p
{
text-indent:
58%;
}
如果段落p的父级元素是body，那么段落p第一行的缩进总是相对于body元素的58%（什么是父级元素我将在CSS高级教程中介绍）.
p#indent
{
text-indent:
2em;
}
p#unindent
{
text-indent:
-2em;
}
正值向后缩,负值向前进.
2.7white-space
通过HTML文档的源代码的排版方式控制页面显示文本的排版方式
∙取值:
normal|pre|nowrap|pre-wrap|pre-line|inherit
onormal:
正常无变化（默认处理方式.文本自动处理换行.假如抵达容器边界内容会转到下一行）
opre:
保持HTML源代码的空格与换行,等同与pre标签
onowrap:
强制文本在一行,除非遇到br换行标签
opre-wrap:
同pre属性,但是遇到超出容器范围的时候会自动换行
opre-line:
同pre属性,但是遇到连续空格会被看作一个空格
oinherit:
继承
∙初始值:
normal
∙继承性:
是
∙适用于:
所有元素
∙white:
白色.space:
间隔,距离.
p#pre
{
white-space:
pre;
}
3.字体
3.1font-family
定义使用什么字体
∙取值:
[[|][,|]*]|inherit
o[[|][,|]*]:
字体名
▪family-name:
一系列字体名称
▪generic-family:
一般性字体名称,取值:
serif,sans-serif,cursive,fantasy,monospace
oinherit:
继承
∙初始值:
根据用户计算机的默认字体
∙继承性:
是
∙适用于:
所有元素
∙font:
字体.family:
家族.
示例
p#songti
{
font-family:
"宋体";
}
p#Arial
{
font-family:
Arial;
}
p
{
font-family:
"宋体",Arial;
}
比如中文的宋体,英文的Arial,可以定义多种字体连在一起,使用,（逗号）分隔
3.2font-size
定义字体的大小
∙取值:
||||inherit
o
升级会员 