CSS学习手册.doc

1CSS层叠样式表
1.1CSS概念与语法
1概念
层叠样式表，控制网页样式和布局
2作用
样式定义如何显示HTML元素
样式为了解决内容与表现分离的问题
外部样式表可极大提高工作效率，外部样式通常存储在CSS文件中。
3语法
选择器{属性1:值;属性2:值;……}

选择器类型
HTML选择器P{color:red}
ID选择器#test{color:red}
类选择器.test{color:red}
属性选择器对指定属性的HTML元素设置样式
注意：IE7（以及更高版本）在规定!DOCTPE的情况下支持属性选择器
用法：
[align=center]{color:blue}
//包含指定值，适用于由空格分隔的属性值
[name~=”t1”]{color:red}
//包含指定值，适用于由连字符分隔的属性值
[name|=”t”]{color:green}

4ID选择器和类选择器区别
两个名称都可以自定义，名称不能以数字开头
ID选择器只能在HTML文档中出现一次
类选择器可以在HTML文档中出现多次
ID选择器和类选择器的自定义名称大小写敏感，推荐小写
1.2CSS用法
1直接样式表
<pstytle=“color:red”>这是一个段落,应用了改变颜色的样式表</p>//作用于单一的元素
2内部样式表
<styletype="text/css">
p{color:Red}
</style>
//所有p应用同一样式
3外部样式表
//style.css文件
P{color:Red}
<linkrel=”stylesheet”href=”style.css”type=”text/css”/>//href为路径
推荐采用外部样式表
1.4CSS样式表实际写法

*表示所有的对象
给多个元素设置样式时以逗号隔开
空格pspan加空格只有span内使用
#以P#T为例，指的是T的属性
.以p.t指的是p下的classt
1.5字体样式用法
color
font-stytle
font-weight
font-size
font-family
font-varirant
text-decoration:none
underline超链接下划线
blink闪烁
overline上划线
linethrough贯穿线
Line-height:数值+单位行高24px26em
Letteer-spacing:数值+单位字符间距0.1em
text-transform
none:默认值
capitalize:将每个单词的第一个字符转换成大写，其它无转换
uppercase:转换成大写
lowercase：转换成小写
1.6文本样式用法
文本对齐(text-align)
text-alignleftrightcenterjustify
首行缩进(text-indent)
text-indent:数值+单位
文本竖排(layout-flow)
layout-flow：horizontal
vertical-idoegraphic
文字方向(direction)段落的对齐方向
Direction:ltr
rtl
inherit
1.7背景样式用法
背景色(background-color)
background-colortransparent透明色或指定颜色
背景图片(background-image)
background-imagenone|url(图片路径）推荐使用相对路径
图片平铺(background-repeat)
background-repeat):repeat|no-repeat|repeat-x|repeat-y
图片位置(background-position)
background-position数值|英文单词
background-attachment:scroll|fixed
background样式
background:background-color||background-image||……
实现网站主页的banner效果
1.8列表样式用法
list-stytle-image:none|url(图片路径)
list-stytle-type:none|各种类型
list-stytle：list-stytle-image||list-stytle-position||list-stytle-type
1.9伪类和伪对象
伪类
-选择器：伪类{属性：值;……}
：link:hover:active:focus:first-child:first:left:right:lang
锚伪类
a:link{color:#FF0000}/*未访问的链接*/
a:visted{color:#00ff00}/*已访问的链接*/