网站建设培训教程css从入门到精通.doc
《网站建设培训教程css从入门到精通.doc》由会员分享，可在线阅读，更多相关《网站建设培训教程css从入门到精通.doc（21页珍藏版）》请在冰豆网上搜索。
启搏人网站建设基础教程
网
站
建
设
培
训
教
程
CSS从入门到精通
第一章CSS简介 4
第一节：
什么是CSS?
4
什么是CSS 4
参见 4
第二节：
使用CSS的优势 4
第二章CSS入门例子 5
示例 5
第三章CSS语法 5
第一节：
外部引用CSS 5
使用link标签引用CSS 5
使用@import引用CSS 6
第二节：
内部引用CSS 6
第三节：
内联引用CSS 7
第四节：
CSS选择符--CSS的名字 7
选择符语法 7
选择符取名规则 8
常用的三种选择符 8
选择符用法总结 8
第五节：
CSS声明 9
语法 9
介绍两个常用的技巧 9
第六节：
CSS注释 10
语法 10
示例 10
第四章CSS颜色 11
CSS颜色表示方法 11
注意:
11
第五章 CSS背景 11
第一节：
CSSbackground-color属性 12
background-color--背景色,定义背景的颜色 12
示例 12
第二节：
CSSbackground-image属性 12
background-image--定义背景图片 12
示例 12
第三节：
CSSbackground-repeat属性 13
background-repeat--定义背景图片的重复方式 13
示例 13
第四节：
CSSbackground-position属性 13
background-position--定义背景图片的位置 13
示例 14
第五节:
CSSbackground-attachment属性 14
background-attachment--定义背景图片随滚动轴的移动方式 14
示例 14
第六节：
CSSbackground属性 15
background--五个背景属性可以全部在此定义 15
示例 15
第六章CSS文本 16
第一节:
CSStext-decoration属性 16
text-decoration--定义文本是否有划线以及划线的方式 16
示例 16
第二节:
CSSwhite-space属性 17
white-space--通过HTML文档的源代码的排版方式控制页面显示文本的排版方式 17
示例 17
第七章CSS字体 18
第八章CSS边框 18
第九章CSS边外补白 18
第一节:
CSSmargin属性 18
margin-top--定义上边外补白 19
margin-right--定义右边外补白 19
margin-bottom--定义下边外补白 19
margin-left--定义左边外补白 19
第十章CSS边内补白 19
padding--定义边内补白 19
padding-top--定义上边内补白 20
padding-bottom--定义下边内补白 20
padding-left--定义左边内补白 20
padding-right--定义右边内补白 20
第十一章CSS属性索引 20
第一节：
CSS2.1属性按功能索引 20
CSS盒模式 20
CSS视觉格式模型 21
CSS视觉效果 21
CSS列表 21
CSS背景 22
CSS字体 22
CSS文本 22
CSS颜色 22
第一章CSS简介
第一节：
什么是CSS?
什么是CSS
ØCSS是CascadingStyleSheets（层叠样式表）的简称.
ØCSS语言是一种标记语言,它不需要编译,可以直接由浏览器执行（属于浏览器解释型语言）.
Ø在标准网页设计中CSS负责网页内容（XHTML）的表现.
ØCSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀.
Ø可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课.
ØCSS是由W3C的CSS工作组产生和维护的.
参见
ØW3C的CSS主页http:
//www.w3.org/Style/CSS/
Ø在w3c网站上校验CSS的正确性http:
//jigsaw.w3.org/css-validator/
第二节：
使用CSS的优势
Ø内容与表现分离,有了CSS,网页的内容（XHMTL）与表现就可以分开了.
Ø使用CSS可以减少网页的代码量,增加网页的浏览速度
第二章CSS入门例子
示例
Ø定义文字的颜色
p{color:
red;}
p1{color:
blue;}
color就代表颜色,我们使用红色red为文字颜色.
你可以修改代码使用blue蓝色,yellow黄色等.学习文字的颜色
这段代码显示的结果如下：
第三章CSS语法
ØCSS语法非常简单,组成CSS语法的元素只有CSS选择符与CSS属性.
Ø每个CSS选择符由1个或多个CSS属性组成.
ØCSS是大小写敏感的,在CSS语法中推荐使用小写.
第一节：
外部引用CSS
CSS外部引用使用了外接的CSS文件,一般的浏览器都带有缓存功能,所以用户不用每次都下载此CSS文件.外部引用CSS是最好的引入CSS的方式（可以使代码量最小,表现最统一,也是标准网页设计推荐的）.
使用link标签引用CSS
示例
使用@import引用CSS
Ø示例
@importurl（
相对路径与绝对路径
加载文件的时候可以使用相对路径或者绝对路径.
绝对路径:
文件的完整路径,主页上的文件或目录在硬盘上真正的路径.
相对路径:
相对于我们查看文档的路径.
../default.html或者default.html或者../../default.html都是相对路径
Ø小结
外部引用CSS中link与@import的区别
差别1：
老祖宗的差别。
link属于XHTML标签，而@import完全是CSS提供的一种方式。
link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
差别2：
加载顺序的差别。
当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。
所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。
差别3：
兼容性的差别。
由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
差别4：
使用dom控制样式时的差别。
当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
第二节：
内部引用CSS
Ø示例
/*----------文字样式开始----------*/
/*梦之都白色12象素文字*/
.dreamduwhite12px
{
color:
white;
font-size:
12px;
}
/*梦之都黑色16象素文字*/
.dreamdublack16px
{
color:
black;
font-size:
16px;
}
/*----------文字样式结束----------*/
注意:
style标签应该在head标签内部.
第三节：
内联引用CSS
内联引用可以把CSS样式直接作用在XHTML标签中.
Ø示例
10px;color:
#FFFFFF;">
使用CSS内联引用表现段落.
第四节：
CSS选择符--CSS的名字
CSS选择符就是CSS样式的名字,当在XHTML文档中表现一个CSS样式的时候,就要用到一个CSS.怎么用呢?
这时就通过CSS选择符（CSS的名字）来指定此XHTML标签使用此CSS样式.
选择符语法
选择符名字
{
声明;
}
一个CSS选择符就定义了一个样式
比如下面这三个例子
p{font-size:
12px;}
.dreamdublue{color:
blue;}
#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选择符可以在一个页面出现多次.
选择符用法总结
·
id与class选择符在C
升级会员 