网站建设培训教程、css从入门到精通.docx

《网站建设培训教程、css从入门到精通.docx》由会员分享，可在线阅读，更多相关《网站建设培训教程、css从入门到精通.docx（20页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网 站 建 设 培 训 教示例/*文字样式起先*/*梦之都白色12象素文字*/.dreamduwhite 12px (colonwhite;font-size: 12px;)/*梦之都黑色16象素文字*/.dreamdublack 16px (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

2、,255); CSS 16进制颜色表示法：color:#ff0000;color:#00ff00;color:# 1199ff; CSS短16进制颜色表示法，属于web safe colors(网络平安色)：color:#f00;color:#0f0;color:#00f;短16进制颜色表示法就是当16进制颜色表示法中的两个表示颜色值的数字一样的时候 的简写，比如color:#ffOOOO;就可以简写为color:#f00;田0. 运用16进制表示颜色时，要运用#标记 #rgb等价于#irggbb,例如:#fbO等价于#ffbbOO第五章CSS背景背景(background),文字颜色可以运用

3、color属性，但是包含文字的p段落,div层,page页面等的 颜色与背景图片可以运用与background等属性.通常运用 background-color 定义背景颜色,background-image 定义背景图片,background-repeat 定义背景图片的重复方式,background-position定义背景图片的位置,background-attachment定 义背景图片随滚动轴的移动方式.第一节：CSS background-colorbackground-color -背景色，定义背景的颜色 取值：color| transparent | inherit :颜色表示

4、法 transparent:透亮 inherit:继承 初始值：transparent 继承性：是 适用于：全部元素 background:背景color:颜色示例bodybackground-color:green;其次节：CSS background-image 属性background-image 定义背景图片 取值： | none | inherit none:无 inherit:继承 初始值：none 继承性：否 适用于：全部元素 background:背景.image:图片.示例body (background-imagerlChtmLtable.png);)P ( backgro

5、und-image:none;) div ( background-imagerlClist-orange.png);)第三节：CSS background-repeat 属性background-repeat -定义背景图片的重复方式 取值：repeat | repeat-x | repeat-y | no-repeat | inherit repeat:平铺整个页面，左右与上下 repeat-x:在x轴上平铺，左右 repeat-y:在y轴上平铺，上下no-repeat:图片不重复 inherit:继承 初始值：repeat 继承性：否 适用于：全部元素 background:背景. re

6、peat:重复.示例body (background-imagerlClist-orange.png*); background-repeat: no-repeat;) div(background-imageiurlClist-orange.png*);background-repeat: repeat-y; background-position:right;)第四节：CSS background-position 属性background-position 定义背景图片的位置 取值： | | left | center | right | | top | center | bottom

7、| I left | center | right | top | center | bottom | inherit 水平left:左 center:中 right:右 垂直top:上 center:中 bottom:下 垂直与水平的组合 x-% y-% x-pos y-pos示例body (background-imagerlClist-orange.png1); background-repeat: no-repeat;)background-image:url(list-orange.png); background-position:right bottom ;background-

8、repeat: no-repeat;P () divbackground-imagerlClist-orange.png);background-position:50% 20% ;background-repeat: no-repeat;)background-position属性是通过平面上的x与y坐标定位的,所以通常取两个值.CSS background-attachment 属性background-attachment -定义背景图片随滚动轴的移动方式 取值：scroll | fixed | inherit scroll:随着页面的滚动轴背景图片将移动 fixed:随着页面的滚动轴背

9、景图片不会移动 inherit:继承示例body(background-imagerKlist-orange.png);background-attachment:fixed;background-repeat: repeat-x;background-position:center center;)第六节：CSS background属性background -五个背景属性可以全部在此定义 取值： | | | | | inherit | | | | :背景颜色，图像等的一个属性或多个 属性 inherit:继承示例bodybackgroundrKlist-orange.png1) repea

10、t-x center;)第六章css文本css文本属性用于定义文字，空格，单词，段落的表现等.通常运用letter-spacing属性限制字母之间的距离,word-spacing属性限制文字间空格的距 离,text-decoration属性定义文本是否有下划线,text-transform属性限制英文的大小 写,text-align属性定义文本的对齐方式,text-indent属性定义文本首行的缩进,white-space属性 定义文本与文档源代码的关系.第一节:CSS text-decoration 属性text-decoration -定义文本是否有划线以及划线的方式 取值:none |

11、| 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-throughtext-de

12、coration:line-through;p#blink(text-decoration:blink;)p#underover(text-decoration:underline overline;)p#underoverthroughblinktext-decoration:underline overline line-through blink; )其次节：CSS white-space属性white-space -通过HTML文档的源代码的排版方式限制页面显示文本的排版方式 取值：normal | pre | nowrap | pre-wrap | pre-line | inheri

13、t normal:正常无变更（默认处理方式.文本自动处理换行.假如抵达容器边界内容会转到下 一行） pre:保持HTML源代码的空格与换行，等同与pre标签 nowrap:强制文本在一行，除非遇到br换行标签 pre-wrap:同pre属性,但是遇到超出容器范围的时候会自动换行 pre-line:同pre属性，但是遇到连续空格会被看作一个空格 inherit:继承示例p#prewhite-space:pre;第七章css字体css字体属性用于定义文字的字体，大小，粗细的表现等.通常运用font-family定义运用什么字体,font-size定义字体大小,font-style定义斜体 字,fo

14、nt-variant定义小型的大写字体,font-weight定义字体的粗细,font统肯定义字体的全部属 性.第八章CSS边框 每个内容或元素外面都可以有一个边框. 边框分为上边框(top),下边框(bottom),左边框(left),右边框(right). 每种边框有颜色(color),样式(style),宽度(width)三种属性. 假如上下左右的边框表现不一样,可以分别定义上下左右边框，假如一样可以统一运用 border属性定义.通常运用border-width属性定义边框的宽度,border-color属性定义边框的颜色,border-style属 性定义边框的样式,border属性

15、统肯定义边框样式的几个属性.第九章CSS边外补白 边框的外面可以有一层边外补白(margin),边外补白可以把块级元素分开.边外补白定义 了围绕某种元素(elements)的空白. 可以查看盒模式,了解边外补白和边内补白. 边外补白分为上边外补白(top),下边外补白(bottom),左边外补白(left),右边外补白(right). 边外补白只有宽度width 一种属性.第一节：CSS margin属性margin边外补白可以取负值;边外补白是看不到的，因为它本身是白色的.margin-top -定义上边外补白margin-right -定义右边外补白margin-bottom 定义下边外补

16、白margin-left -定义左边外补白第十章CSS边内补白 边框的里面面可以有一层边内补白(padding),边内补白定义了边框与边框里面内容的距 离. 边内补白分为上边内补白(top),下边内补白(bottom),左边内补白(left),右边内补白(right). 边内补白只有width 一种属性.padding -定义边内补白padding边内补白不行以取负值;边内补白是看不到的，因为它本身是白色的.padding-top -定义上边内补白padding-bottom 定义下边内补白padding-left -定义左边内补白padding-right -定义右边内补白第H一章css属性

17、索引第一节：CSS2.1属性按功能索引CSS盒模式 border-collapse border-color 边框颜色 border-spacing border-style 边框样式 border-top 上边框 border-right 右边框 border-bottom 下边框 border-left 左边框 border-top-color 上边框颜色 border-right-color 右边框颜色 border-bottom-color 卜边框颜色 border-left-color 左边框颜色 border-top-style 上边框样式 border-right-style 右

18、边框样式 border-bottom-style 下边框样式 border-left-style -左边框样式 border-top-width 上边框宽度 border-right-width 右边框宽度 border-bottom-width 下边框宽度 border-left-width 左边框宽度 border-width 边框宽度 border 边框全部属性 margin-right -右边外补白宽度 margin-left -左边外补白宽度css从入门到精通第一章CSS简介4第一节：什么是CSS4什么是CSS4参见4其次节：运用CSS的优势4其次章CSS入门例子4示例4第三章 CS

19、S语法5第一节：外部引用CSS5运用link标签引用CSS5运用 import 弓I 用 CSS5其次节：内部引用CSS6第三节：内联引用CSS7第四节：CSS选择符-CSS的名字7选择符语法7选择符取名规则7常用的三种选择符8选择符用法总结8第五节：CSS声明8语法9介绍两个常用的技巧9第六节：CSS注释9语法9示例10第四章CSS颜色10CSS颜色表示方法10留意：11第五章 CSS背景11第一节： CSS background-color 属性11background-color -背景色，定义背景的颜色11示例11其次节： CSS background-image 属性12backgr

20、ound-image - 定义背景图片12示例12第三节： CSS background-repeat 属性12background-repeat - 定义背景图片的重复方式12示例J13第 四节： CSS background-position 属性13background-position 定义背景图片 的位置13示例13第五节：CSS background-attachment 属性14 margin-top -上边外补白宽度 margin-bottom 下边外补白宽度 margin 边外补白 padding-top 上边内补白 padding-right 右边内补白 padding-b

21、ottom 下边内补白 padding-left 左边内补白 padding 边内补白CSS视觉格式模型 display -显示方式 position - 元素的定位 bottom下偏移属性 left -左偏移属性 right -右偏移属性 top -上偏移属性 float -元素漂移 z-index z 轴依次 direction unicode-bidi max-height -最大高度 max-width 最大宽度 min-height 最小高度 min-width 最小宽度 height -盒子高度 width -盒子宽度 clear -清除 line-height - 一段文字中每行

22、文字的间距 vertical-align 垂直对齐方式CSS视觉效果 clip - 了盒子可显示的区域 overflow -盒子中内容的显示方式 visibility -元素是否可见CSS歹!J表 list-style-image 列表图像 list-style-position 列表位置 list-style-type 列表类型 list-style -列表全部属性css背景 background-attachment -背景图片随滚动轴的移动方式 background-color 背景颜色 background-image -背景图像 background-position 背景图片的位置

23、 background-repeat -背景图片的显示方式 background 背景CSS字体 font-family 字体 font-size 字体大小 font-style 字体样式 font-variant-小型的大写字母字体 font-weight 字体粗细 font -字体全部属性CSS文本 text-align-文本对齐方式 text-decoration -文本是否有划线以及划线的方式 text-indent -文本的首行缩进 text-transform -文本的大小写状态,此属性对中文无意义 white-space 文本的格式 word-spacing -以空格间隔文字的间

24、距 letter-spacing -文本中字母的间距（中文为文字的间距）CSS颜色 color -颜色background-attachment -定义背景图片随滚动轴的移动方式14示例14第六节： CSS background 属性14background -五个背景属性可以全部在此定义14示例14第六章CSS文本15第一7?: CSS text-decoration 属性15text-decoration 定义文本是否有划线以及划线的方式15示例15其次节：CSS white-space 属性16white-space -通过HTML文档的源代码的排版方式限制页面显示文本的排版方式 16

25、示例16第七章CSS字体17第八章CSS边框17第九章CSS边外补白17第一节:CSS margin 属性17margin-top - 定义上边夕卜补白18margin-right - 定义右边外补白18margin-bottom 定义 卜边夕卜补白18margin-left 定义左边夕卜补白18第十章CSS边内补白18padding -定义边内补白18padding-top - 定义上边内补白19padding-bottom 定义下边内补白19padding-left 定义左边 内补白19padding-right - 定义右边内补白19第H-一章CSS属性索引19第一节：CSS2.1属性按

26、功能索引19CSS盒模式19CSS视觉格式模型20CSS视觉效果20CSS列表20CSS背景21CSS字体21CSS文本21CSS颜色21第一章css简介第一节：什么是css什么是CSS CSS是Cascading Style Sheets(层叠样式表)的简称. CSS语言是一种标记语言，它不须要编译，可以干脆由阅读器执行(属于阅读器说明型语 言). 在标准网页设计中CSS负责网页内容(XHTML)的表现. CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必需运用css为文 件名后缀. 可以通过简洁的更改CSS文件，变更网页的整体表现形式，可以削减我们的工作量，所以 她是每

27、一个网页设计人员的必修课. CSS是由W3C的CSS工作组产生和维护的.参见 W3C的CSS主页 在w3c网站上校验CSS的正确性其次节：运用CSS的优势 内容与表现分别，有了 CSS,网页的内容(XHMTL)与表现就可以分开了. 运用CSS可以削减网页的代码量,增加网页的阅读速度其次章CSS入门例子示例 定义文字的颜色 p coloured;pl color:blue;color就代表颜色,我们运用红色red为文字颜色.你可以修改代码运用blue蓝色,yellow黄色等.学习文字的颜色v/pl这段代码显示的结果如下：color就代表颜色,我们使用红色red为文字颜色.Q你可以修改代码使用bl

28、ue蓝色，yellow黄色等.学习文字的颜色p 1第三章CSS语法 CSS语法特别简洁，组成CSS语法的元素只有CSS选择符与CSS属性. 每个CSS选择符由1个或多个CSS属性组成. CSS是大小写敏感的，在CSS语法中举荐运用小写.第一节：外部引用CSSCSS外部引用运用了外接的CSS文件，一般的阅读器都带有缓存功能,所以用户不 用每次都下载此CSS文件.外部引用CSS是最好的引入CSS的方式（可以使代码量最小, 表现最统一,也是标准网页设计举荐的）.运用link标签引用CSS示例 href-指定须要加载的资源（CSS文件）的地址URI rel -指定链接类型 type -包含内容的类型，

29、一般运用type=text/css”运用import引用CSS 示例import url（）;相对路径与肯定路径加载文件的时候可以运用相对路径或者肯定路径.肯定路径:文件的完整路径，主页上的文件或书目在硬盘上真正的路径.就是肯定路径,/html/default.html也是肯定路径,C:vinntsystem.sys也是肯定路径 相对路径:相对于我们查看文档的路径.7default.html或者default.html或者./default.html都是相对路径 小结外部引用CSS中link与!1011的区分差别1：老祖宗的差别。link属于XHTML标签，而10011完全是CSS供应的一种方

30、式。 link标签除了可以加载CSS外，还可以做许多其它的事情，比如定义RSS,定义连接属 性等，import就只能加载CSS 了。差别2：加载依次的差别。当一个页面被加载的时候（就是被阅读者阅读的时候），link引 用的CSS会同时被加载，而10011引用的CSS会等到页面全部被下载完再被加载。所以 有时候阅读import加载CSS的页面时起先会没有样式（就是闪耀），网速慢的时候还挺明 显。差别3：兼容性的差别。，import只有在IE5以上的才能识别，而link标签无此问题。差别4：运用dom限制样式时的差别。当运用javascript限制dom去变更样式的时候，只能 运用link标签，因

31、为import不是dom可以限制的。其次节：内部引用CSS 示例/*文字样式起先*/*梦之都白色12象素文字*/.dreamduwhite 12px(color:white;font-size: 12px;)/*梦之都黑色16象素文字*/.dreamdublack 16px(color:black;font-size: 16px;)/*文字样式结束*/留意:style标签应当在head标签内部.第三节：内联引用css内联引用可以把CSS样式干脆作用在XHTML标签中. 示例运用CSS内联引用表现段落.第四节：CSS选择符“CSS的名字CSS选择符就是CSS样式的名字，当在XHTML文档中表现一

32、个CSS样式的时候，就要用到 一个CSS.怎么用呢这时就通过CSS选择符（CSS的名字）来指定此XHTML标签运用此CSS 样式.选择符语法选择符名字（声明；）一个CSS选择符就定义了一个样式比如下面这三个例子pfont-size:12px;.dreamdublue color: blue;#dreamdured color:red;dreamdublue和dreamdured都是CSS的选择符,也就是CSS的名字.选择符取名规则CSS选择符可以运用英文字母的大写与小写，数字，连字号，下划线眉号，句号.英文字母大写与小写A-Z a-z数字0-9连字号-下划线_冒号”句号.提示:CSS选择符只能

33、以字母开头.常用的三种选择符（我感觉这是初级教程中最难的地方:）xhtml标签选择符，比如p标签选择符（代表全部的段落都运用这个CSS样式），比如 p font-size: 12px;id选择符，唯一性选择符，比如#dreamduredcoloured;,就是在名字前增加了一个札id选择符 在一个页面中只能出现一次，在整个网站中也最好出现一次（这样有利于程序员限制此元素, 有多个一样名称的元素,就无法分开不好限制了）.class选择符，多重选择符，比如.dreamdubluecolor:blue;,就是在名字前增加了一个,class选择 符在一个页面中可以出现多次（留意下面的示例中class选

34、择符的用法）.示例梦之都xhtml标签选择符v/p梦之都 id 选择符v/p梦之都 class 选择符v/p梦之都 class 选择符 2,出现了多次./p一个p元素运用了两个class选择符，他们之间用空格分开，而且class选择符可以在一个页面 出现多次.选择符用法总结id与class选择符在CSS与XHTML中的用法总结CSS中的写法XHTML中的写法xhtml标签选择符pfont-size:12px;id选择符#id_selectorfont-size:12px ；）梦之都class选择符.class_selectorfont-size:1 2px; 梦之都/p第五节：CSS声明CSS

35、声明是由“属性属冒号属性值和“分号（;）”组成的.语法属性:属性值； 示例font-size: 12px;font-size代表字体大小.12px字体大小的值.介绍两个常用的技巧 1,选择符的名字一样，声明是可以组合的 例如：选择符名字声明1；声明2; div(colocblack;font-size: 12px;) 2,明全部一样，选择符的名字也可以组合例如：选择符名字1,选择符名字2,选择符名字3声明1;声明2;.dreamdudivwhite 12px,h 1 ,div (color:white;font-size: 12px;) hl, p, div( border: Ipx solid black;)第六节：css注释就像HTML教程中描述的一样，在CSS文档中注释也起到很重要的作用，可以帮助我们记起 CSS的含义，加载在HTML文档的位置等.CSS注释的起先运用/木，结束运用木/语法/*注释内容*/