网站建设培训教程 新手入门到精通.docx
《网站建设培训教程 新手入门到精通.docx》由会员分享，可在线阅读，更多相关《网站建设培训教程 新手入门到精通.docx（22页珍藏版）》请在冰豆网上搜索。
网站建设培训教程新手入门到精通
友情提醒：
如果你还不熟悉网站建设、美工设计、内容优化、网站推广的流程，你可以选择发布悬赏任务，欢迎点此进入发布任务获得网络高手的全力协助。
网站建设培训教程
CSS从入门到精通
第一章CSS简介4
第一节：
什么是CSS?
4
什么是CSS4
参见4
第二节：
使用CSS的优势4
第二章CSS入门例子5
示例5
第三章CSS语法5
第一节：
外部引用CSS5
使用link标签引用CSS5
使用@import引用CSS6
第二节：
内部引用CSS6
第三节：
内联引用CSS7
第四节：
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选择符在CSS与XHTML中的用法总结
CSS中的写法
XHTML中的写法
xhtml标签选择符
p{font-size:
12px;}
id选择符
#id_selector{font-size:
12px;}
梦之都
class选择符
.class_selector{font-size:
12px;}
梦之都
第五节：
CSS声明
CSS声明是由"属性","冒号（:
）","属性值"和"分号（;）"组成的.
语法
属性:
属性值;
Ø示例
font-size:
12px;
font-size代表字体大小.
12px字体大小的值.
介绍两个常用的技巧
Ø1,选择符的名字一样,声明是可以组合的
例如：
选择符名字{声明1;声明2;}
div
{
color:
black;
font-size:
12px;
}
Ø2,明全部一样,选择符的名字也可以组合
例如：
选择符名字1,选择符名字2,选择符名字3{声明1;声明2;}
.dreamdudivwhite12px,h1,div
{
color:
white;
font-size:
12px;
}
h1,p,div
{
border:
1pxsolidblack;
}
第六节：
CSS注释
就像HTML教程中描述的一样,在CSS文档中注释也起到很重要的作用,可以帮助我们记起CSS的含义,加载在HTML文档的位置等.
CSS注释的开始使用/*,结束使用*/
语法
/*注释内容*/
示例
/*----------文字样式开始----------*/
/*梦之都白色12象素文字*/
.dreamduwhite12px
{
color:
white;
font-size:
12px;
}
/*梦之都黑色16象素文字*/
.dreamdublack16px
{
color:
black;
font-size:
16px;
}
/*----------文字样式结束----------*/
第四章CSS颜色
CSS颜色表示方法
ØCSS预定义颜色表示法（就是使用颜色的英文）:
color:
red;
color:
green;
color:
blue;
ØCSSRGB颜色表示法:
color:
rgb（255,0,0）;
color:
rgb（0,255,0）;
color:
rgb（0,0,255）;
ØCSS16进制颜色表示法:
color:
#ff0000;
color:
#00ff00;
color:
#1199ff;
ØCSS短16进制颜色表示法,属于websafecolors（网络安全色）:
color:
#f00;
color:
#0f0;
color:
#00f;
短16进制颜色表示法就是当16进制颜色表示法中的两个表示颜色值的数字一样的时候的简写,比如color:
#ff0000;就可以简写为color:
#f00;
注意:
Ø使用16进制表示颜色时,要使用#标记
Ø#rgb等价于#rrggbb,例如:
#fb0等价于#ffbb00
第五章CSS背景
背景（background）,文字颜色可以使用color属性,但是包含文字的p段落,div层,page页面等的颜色与背景图片可以使用与background等属性.
通常使用background-color定义背景颜色,background-image定义背景图片,background-repeat定义背景图片的重复方式,background-position定义背景图片的位置,background-attachment定义背景图片随滚动轴的移动方式.
第一节：
CSSbackground-color属性
background-color--背景色,定义背景的颜色
Ø取值:
|transparent|inherit
Ø:
颜色表示法
Øtransparent:
透明
Øinherit:
继承
Ø初始值:
transparent
Ø继承性:
是
Ø适用于:
所有元素
Øbackground:
背景.color:
颜色.
示例
body
{
background-color:
green;
}
第二节：
CSSbackground-image属性
background-image--定义背景图片
Ø取值:
|none|inherit
Ønone:
无
Øinherit:
继承
Ø初始值:
none
Ø继承性:
否
Ø适用于:
所有元素
Øbackground:
背景.image:
图片.
示例
body
{
background-image:
url（'html_table.png'）;
}
p
{
background-image:
none;
}
div
{
background-image:
url（'list-orange.png'）;
}
第三节：
CSSbackground-repeat属性
background-repeat--定义背景图片的重复方式
Ø取值:
repeat|repeat-x|repeat-y|no-repeat|inherit
Ørepeat:
平铺整个页面,左右与上下
Ørepeat-x:
在x轴上平铺,左右
Ørepeat-y:
在y轴上平铺,上下
Øno-repeat:
图片不重复
Øinherit:
继承
Ø初始值:
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;
}
第四节：
CSSbackground-position属性
background-position--定义背景图片的位置
Ø取值:
[[||left|center|right][||top|center|bottom]?
]|[[left|center|right]||[top|center|bottom]]|inherit
Ø水平left:
左center:
中right:
右
Ø垂直top:
上center:
中bottom:
下
Ø垂直与水平的组合x-%y-%x-posy-pos
示例
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;
}
background-position属性是通过平面上的x与y坐标定位的,所以通常取两个值.
第五节:
CSSbackground-attachment属性
background-attachment--定义背景图片随滚动轴的移动方式
Ø取值:
scroll|fixed|inherit
Øscroll:
随着页面的滚动轴背景图片将移动
Øfixed:
随着页面的滚动轴背景图片不会移动
Øinherit:
继承
示例
body
{
background-image:
url（'list-orange.png'）;
background-attachment:
fixed;
background-repeat:
repeat-x;
background-position:
centercenter;
}
第六节：
CSSbackground属性
background--五个背景属性可以全部在此定义
Ø取值:
[||||||||]|inherit
Ø[||||||||]:
背景颜色,图像等的一个属性或多个属性
Øinherit:
继承
示例
body
{
background:
url（'list-orange.png'）repeat-xcenter;
}
第六章CSS文本
CSS文本属性用于定义文字,空格,单词,段落的表现等.
通常使用letter-spacing属性控制字母之间的距离,word-spacing属性控制文字间空格的距离,text-decoration属性定义文本是否有下划线,text-transform属性控制英文的大小写,text-align属性定义文本的对齐方式,text-indent属性定义文本首行的缩进,white-space属性定义文本与文档源代码的关系.
第一节:
CSStext-decoration属性
text-decoration--定义文本是否有划线以及划线的方式
Ø取值:
none|[underline||overline||line-through||blink]|inherit
Ønone:
定义正常显示的文本
Ø[underline||overline||line-through||blink]:
四个值中的一个或多个
Øunderline:
定义有下划线的文本
Øoverline:
定义有上划线的文本
Øline-through:
定义直线穿过文本
Øblink:
定义闪烁的文本
示例
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;
升级会员 