网站建设培训教程 新手入门到精通.docx

1、网站建设培训教程 新手入门到精通友情提醒：如果你还不熟悉网站建设、美工设计、内容优化、网站推广的流程，你可以选择发布悬赏任务，欢迎点此进入发布任务获得网络高手的全力协助。网站建设培训教程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常用的三种选择符

2、8选择符用法总结 8第五节：CSS 声明 9语法 9介绍两个常用的技巧 9第六节：CSS 注释 10语法 10示例 10第四章 CSS颜色 11CSS颜色表示方法 11注意: 11第五章 CSS背景 11第一节：CSS background-color 属性 12background-color - 背景色,定义背景的颜色 12示例 12第二节：CSS background-image 属性 12background-image - 定义背景图片 12示例 12第三节：CSS background-repeat 属性 13background-repeat - 定义背景图片的重复方式 13示例

3、 13第四节：CSS background-position 属性 13background-position - 定义背景图片的位置 13示例 14第五节: CSS background-attachment 属性 14background-attachment - 定义背景图片随滚动轴的移动方式 14示例 14第六节：CSS background 属性 15background - 五个背景属性可以全部在此定义 15示例 15第六章 CSS文本 16第一节: CSS text-decoration 属性 16text-decoration - 定义文本是否有划线以及划线的方式 16示例 1

4、6第二节: CSS white-space 属性 17white-space - 通过HTML文档的源代码的排版方式控制页面显示文本的排版方式 17示例 17第七章 CSS字体 18第八章 CSS边框 18第九章 CSS边外补白 18第一节: CSS margin 属性 18margin-top - 定义上边外补白 19margin-right - 定义右边外补白 19margin-bottom - 定义下边外补白 19margin-left - 定义左边外补白 19第十章 CSS边内补白 19padding - 定义边内补白 19padding-top - 定义上边内补白 20padding

5、-bottom - 定义下边内补白 20padding-left - 定义左边内补白 20padding-right - 定义右边内补白 20第十一章 CSS属性索引 20第一节：CSS2.1属性按功能索引 20CSS盒模式 20CSS视觉格式模型 21CSS视觉效果 21CSS列表 21CSS背景 22CSS字体 22CSS文本 22CSS颜色 22第一章 CSS简介第一节：什么是CSS?什么是CSS CSS是Cascading Style Sheets(层叠样式表)的简称. CSS语言是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语言). 在标准网页设计中CSS负责网

6、页内容(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可以减少网页的代码量,

7、增加网页的浏览速度第二章 CSS入门例子示例 定义文字的颜色 p color:red; p1 color:blue; color就代表颜色,我们使用红色 red 为文字颜色. 你可以修改代码使用 blue 蓝色, yellow 黄色等.学习文字的颜色 这段代码显示的结果如下：第三章 CSS语法 CSS语法非常简单,组成CSS语法的元素只有CSS选择符与CSS属性. 每个CSS选择符由1个或多个CSS属性组成. CSS是大小写敏感的,在CSS语法中推荐使用小写.第一节：外部引用CSSCSS外部引用使用了外接的CSS文件,一般的浏览器都带有缓存功能,所以用户不用每次都下载此CSS文件.外部引用CS

8、S是最好的引入CSS的方式(可以使代码量最小,表现最统一,也是标准网页设计推荐的).使用 link 标签引用CSS示例 href - 指定需要加载的资源(CSS文件)的地址URI rel - 指定链接类型 type - 包含内容的类型,一般使用type=text/css使用 import 引用CSS 示例 import url( 相对路径与绝对路径加载文件的时候可以使用相对路径或者绝对路径.绝对路径:文件的完整路径,主页上的文件或目录在硬盘上真正的路径.相对路径:相对于我们查看文档的路径./default.html或者default.html或者././default.html都是相对路径 小

9、结外部引用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提出的所以老的浏览器

10、不支持，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标签内

11、部.第三节：内联引用CSS内联引用可以把CSS样式直接作用在XHTML标签中. 示例 使用CSS内联引用表现段落.第四节：CSS 选择符 - CSS的名字CSS选择符就是CSS样式的名字,当在XHTML文档中表现一个CSS样式的时候,就要用到一个CSS.怎么用呢?这时就通过CSS选择符(CSS的名字)来指定此XHTML标签使用此CSS样式.选择符语法选择符名字 声明;一个CSS选择符就定义了一个样式比如下面这三个例子pfont-size:12px;.dreamdubluecolor:blue;#dreamduredcolor:red;dreamdublue和dreamdured都是CSS的选择

12、符,也就是CSS的名字.选择符取名规则CSS选择符可以使用英文字母的大写与小写,数字,连字号,下划线,冒号,句号.英文字母大写与小写 A-Z a-z 数字 0-9 连字号 - 下划线 _ 冒号 句号 . 提示: CSS选择符只能以字母开头.常用的三种选择符(我感觉这是初级教程中最难的地方:)xhtml标签选择符,比如 p标签选择符(代表所有的段落都使用这个CSS样式),比如 pfont-size:12px; id选择符,唯一性选择符,比如 #dreamduredcolor:red;,就是在名字前增加了一个#,id选择符在一个页面中只能出现一次,在整个网站中也最好出现一次(这样有利于程序员控制此

13、元素,有多个一样名称的元素,就无法分开不好控制了). class选择符,多重选择符,比如.dreamdubluecolor:blue;,就是在名字前增加了一个.,class选择符在一个页面中可以出现多次(注意下面的示例中class选择符的用法). 示例梦之都xhtml标签选择符梦之都id选择符梦之都class选择符梦之都class选择符2,出现了多次.一个p元素使用了两个class选择符,他们之间用空格分开,而且class选择符可以在一个页面出现多次.选择符用法总结 id与class选择符在CSS与XHTML中的用法总结CSS中的写法XHTML中的写法xhtml标签选择符pfont-size:

14、12px;id选择符#id_selectorfont-size:12px;梦之都class选择符.class_selectorfont-size:12px;梦之都第五节：CSS 声明CSS声明是由属性,冒号(:),属性值和分号(;)组成的.语法属性:属性值; 示例font-size:12px;font-size代表字体大小. 12px字体大小的值.介绍两个常用的技巧 1,选择符的名字一样,声明是可以组合的例如：选择符名字声明1;声明2; div color:black; font-size:12px; 2,明全部一样,选择符的名字也可以组合例如：选择符名字1,选择符名字2,选择符名字3声明1;

15、声明2;.dreamdudivwhite12px,h1,div color:white; font-size:12px;h1, p, div border:1px solid black;第六节：CSS 注释就像HTML教程中描述的一样,在CSS文档中注释也起到很重要的作用,可以帮助我们记起CSS的含义,加载在HTML文档的位置等.CSS注释的开始使用/*,结束使用*/语法/* 注释内容 */示例/* -文字样式开始- */* 梦之都白色12象素文字 */.dreamduwhite12px color:white; font-size:12px;/* 梦之都黑色16象素文字 */.dreamd

16、ublack16px color:black; font-size:16px;/* -文字样式结束- */第四章 CSS颜色CSS颜色表示方法 CSS预定义颜色表示法(就是使用颜色的英文):color:red;color:green;color:blue; CSS RGB颜色表示法:color:rgb(255,0,0);color:rgb(0,255,0);color:rgb(0,0,255); CSS 16进制颜色表示法:color:#ff0000;color:#00ff00;color:#1199ff; CSS 短16进制颜色表示法,属于web safe colors(网络安全色):col

17、or:#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定义背景图片

18、,background-repeat定义背景图片的重复方式,background-position定义背景图片的位置,background-attachment定义背景图片随滚动轴的移动方式.第一节：CSS background-color 属性background-color - 背景色,定义背景的颜色 取值: | transparent | inherit : 颜色表示法 transparent: 透明 inherit: 继承 初始值: transparent 继承性: 是 适用于: 所有元素 background:背景.color:颜色.示例body background-color:g

19、reen;第二节：CSS background-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);第三节：CSS background-repeat 属性background-re

20、peat - 定义背景图片的重复方式 取值: 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 backg

21、round-image:url(list-orange.png); background-repeat:repeat-y; background-position:right;第四节：CSS background-position 属性background-position - 定义背景图片的位置 取值: | | left | center | right | | top | center | bottom ? | left | center | right | top | center | bottom | inherit 水平 left: 左 center: 中 right: 右 垂直 t

22、op: 上 center: 中 bottom: 下 垂直与水平的组合 x-% y-% x-pos y-pos示例body background-image:url(list-orange.png); background-repeat:no-repeat;p background-image:url(list-orange.png); background-position:right bottom ; background-repeat:no-repeat;div background-image:url(list-orange.png); background-position:50% 2

23、0% ; background-repeat:no-repeat;background-position属性是通过平面上的x与y坐标定位的,所以通常取两个值.第五节: CSS background-attachment 属性background-attachment - 定义背景图片随滚动轴的移动方式 取值: scroll | fixed | inherit scroll: 随着页面的滚动轴背景图片将移动 fixed: 随着页面的滚动轴背景图片不会移动 inherit: 继承示例body background-image:url(list-orange.png); background-att

24、achment:fixed; background-repeat:repeat-x; background-position:center center;第六节：CSS background 属性background - 五个背景属性可以全部在此定义 取值: | | | | | inherit | | | | : 背景颜色,图像等的一个属性或多个属性 inherit: 继承示例body background:url(list-orange.png) repeat-x center;第六章 CSS文本CSS文本属性用于定义文字,空格,单词,段落的表现等.通常使用letter-spacing属性控

25、制字母之间的距离,word-spacing属性控制文字间空格的距离,text-decoration属性定义文本是否有下划线,text-transform属性控制英文的大小写,text-align属性定义文本的对齐方式,text-indent属性定义文本首行的缩进,white-space属性定义文本与文档源代码的关系.第一节: CSS text-decoration 属性text-decoration - 定义文本是否有划线以及划线的方式 取值:none | underline | overline | line-through | blink | inherit none: 定义正常显示的文本

26、 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:underline overline;