css使用方法.docx
- 文档编号:9233504
- 上传时间:2023-02-03
- 格式:DOCX
- 页数:53
- 大小:45.09KB
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
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标签选择符
一个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属性
五个背景属性可以全部在此定义
∙取值:
[
∙初始值:
根据五个背景属性的默认值
∙继承性:
否
∙适用于:
所有元素
前面的讲的五个背景属性完全可以使用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
背景色,定义背景的颜色
∙取值:
o
颜色表示法
otransparent:
透明
oinherit:
继承
∙初始值:
transparent
∙继承性:
是
∙适用于:
所有元素
∙background:
背景.color:
颜色.
背景色与前景色对应,可以定义背景的颜色.
示例
body
{
background-color:
green;
}
定义网页的背景使用绿色.
1.3.background-image
定义背景图片
∙取值:
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]]|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|
onormal:
正常(主要是根据用户所使用的浏览器等设备)
o
长度表示法
oinherit:
继承
∙初始值:
normal
∙继承性:
是
∙适用于:
所有元素
∙letter:
字母.spacing:
间隔.
∙letter-spacing定义了字与字之间的距离.
∙word-spacing是控制字与字之间空格的宽度.
示例
.ls3px
{
letter-spacing:
3px;
}
.lsn3px
{
letter-spacing:
-3px;
}
正值为增大距离,负值为缩小距离.
2.2word-spacing
定义以空格间隔文字的间距(就是空格本身的宽度)
∙取值:
normal|
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
定义文本首行的缩进(在首行文字之前插入指定的长度)
∙取值:
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
定义使用什么字体
∙取值:
[[
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
定义字体的大小
∙取值:
o
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- css 使用方法