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