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

/友情提醒：如果你还不熟悉网站建设、美工设计、内容优化、网站推广的流程，你可以选择发布悬赏任务，欢迎点此进入发布任务获得网络高手的全力协助。网站建设培训教程从入门到精通\o"1-3"\h\z\u第一章简介264068164\h4第一节：什么是264068165\h4什么是264068166\h4参见264068167\h4第二节：使用的优势264068168\h4第二章入门例子264068169\h5示例264068170\h5第三章语法264068171\h5第一节：外部引用264068172\h5使用标签引用264068173\h5使用引用264068174\h6第二节：内部引用264068175\h6第三节：内联引用264068176\h7第四节：选择符的名字264068177\h7选择符语法264068178\h7选择符取名规则264068179\h8常用的三种选择符264068180\h8选择符用法总结264068181\h8第五节：声明264068182\h9语法264068183\h9介绍两个常用的技巧264068184\h9第六节：注释264068185\h10语法264068186\h10示例264068187\h10第四章颜色264068188\h11颜色表示方法264068189\h11注意:264068190\h11第五章背景264068191\h11第一节：属性264068192\h12背景色,定义背景的颜色264068193\h12示例264068194\h12第二节：属性264068195\h12定义背景图片264068196\h12示例264068197\h12第三节：属性264068198\h13定义背景图片的重复方式264068199\h13示例264068200\h13第四节：属性264068201\h13定义背景图片的位置264068202\h13示例264068203\h14第五节:属性264068204\h14定义背景图片随滚动轴的移动方式264068205\h14示例264068206\h14第六节：属性264068207\h15五个背景属性可以全部在此定义264068208\h15示例264068209\h15第六章文本264068210\h16第一节:属性264068211\h16定义文本是否有划线以及划线的方式264068212\h16示例264068213\h16第二节:属性264068214\h17通过文档的源代码的排版方式控制页面显示文本的排版方式264068215\h17示例264068216\h17第七章字体264068217\h18第八章边框264068218\h18第九章边外补白264068219\h18第一节:属性264068220\h18定义上边外补白264068221\h19定义右边外补白264068222\h19定义下边外补白264068223\h19定义左边外补白264068224\h19第十章边内补白264068225\h19定义边内补白264068226\h19定义上边内补白264068227\h20定义下边内补白264068228\h20定义左边内补白264068229\h20定义右边内补白264068230\h20第十一章属性索引264068231\h20第一节：2.1属性按功能索引264068232\h20盒模式264068233\h20视觉格式模型264068234\h21视觉效果264068235\h21列表264068236\h21背景264068237\h22字体264068238\h22文本264068239\h22颜色264068240\h22第一章简介第一节：什么是什么是是(层叠样式表)的简称.语言是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语言).在标准网页设计中负责网页内容()的表现.文件也可以说是一个文本文件,它包含了一些标记文件必须使用为文件名后缀.可以通过简单的更改文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课.是由W3C的工作组产生和维护的.参见W3C的主页在w3c网站上校验的正确性第二节：使用的优势内容与表现分离,有了,网页的内容()与表现就可以分开了.使用可以减少网页的代码量,增加网页的浏览速度第二章入门例子示例定义文字的颜色<> <""""> p{;}p1{;} <> <> <p>就代表颜色,我们使用红色为文字颜色.<> <p1>你可以修改代码使用蓝色,黄色等.学习文字的颜色<1> <><>这段代码显示的结果如下：第三章语法语法非常简单,组成语法的元素只有选择符与属性.每个选择符由1个或多个属性组成.是大小写敏感的,在语法中推荐使用小写.第一节：外部引用外部引用使用了外接的文件,一般的浏览器都带有缓存功能,所以用户不用每次都下载此文件.外部引用是最好的引入的方式(可以使代码量最小,表现最统一,也是标准网页设计推荐的).使用标签引用示例<> <""""""/><>指定需要加载的资源(文件)的地址指定链接类型包含内容的类型,一般使用""使用引用示例<> <"">();<><> 相对路径与绝对路径加载文件的时候可以使用相对路径或者绝对路径.绝对路径:文件的完整路径,主页上的文件或目录在硬盘上真正的路径.就是绝对路径也是绝对路径也是绝对路径相对路径:相对于我们查看文档的路径.或者或者都是相对路径小结外部引用中与的区别差别1：老祖宗的差别。属于标签，而完全是提供的一种方式。标签除了可以加载外，还可以做很多其它的事情，比如定义，定义连接属性等，就只能加载了。差别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），引用的会同时被加载，而引用的会等到页面全部被下载完再被加载。所以有时候浏览加载的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。差别3：兼容性的差别。由于是2.1提出的所以老的浏览器不支持，只有在5以上的才能识别，而标签无此问题。差别4：使用控制样式时的差别。当使用控制去改变样式的时候，只能使用标签，因为不是可以控制的。第二节：内部引用示例<"">/*文字样式开始*//*梦之都白色12象素文字*/12{ ; :12;}/*梦之都黑色16象素文字*/16{ ; :16;}/*文字样式结束*/<>注意标签应该在标签内部.第三节：内联引用内联引用可以把样式直接作用在标签中.示例<p":10;:;"> 使用内联引用表现段落.<>第四节：选择符的名字选择符就是样式的名字,当在文档中表现一个样式的时候,就要用到一个.怎么用呢这时就通过选择符(的名字)来指定此标签使用此样式.选择符语法选择符名字{ 声明;}一个选择符就定义了一个样式比如下面这三个例子p{:12;}{;}{;}和都是的选择符,也就是的名字.选择符取名规则选择符可以使用英文字母的大写与小写,数字,连字号,下划线,冒号,句号.英文字母大写与小写数字0-9连字号-下划线_冒号"句号.提示:选择符只能以字母开头.常用的三种选择符(我感觉这是初级教程中最难的地方:)标签选择符,比如p标签选择符(代表所有的段落都使用这个样式),比如p{:12;}选择符,唯一性选择符,比如{;},就是在名字前增加了一个选择符在一个页面中只能出现一次,在整个网站中也最好出现一次(这样有利于程序员控制此元素,有多个一样名称的元素,就无法分开不好控制了).选择符,多重选择符,比如{;},就是在名字前增加了一个选择符在一个页面中可以出现多次(注意下面的示例中选择符的用法).示例<p>梦之都标签选择符<><p"">梦之都选择符<><p"">梦之都选择符<><p"18">梦之都选择符2,出现了多次.<>一个p元素使用了两个选择符,他们之间用空格分开,而且选择符可以在一个页面出现多次.选择符用法总结与选择符在与中的用法总结

中的写法中的写法标签选择符p{:12;}<p><>选择符{:12;}<p"">梦之都<>选择符{:12;}<p"">梦之都<>第五节：声明声明是由"属性","冒号(:)","属性值"和"分号(;)"组成的.语法属性:属性值;示例:12;代表字体大小.12字体大小的值.介绍两个常用的技巧1,选择符的名字一样,声明是可以组合的例如：选择符名字{声明1;声明2;}{ ; :12;}2,明全部一样,选择符的名字也可以组合例如：选择符名字1,选择符名字2,选择符名字3{声明1;声明2;}121{ ; :12;}h1,p,{:1;}第六节：注释就像教程中描述的一样,在文档中注释也起到很重要的作用,可以帮助我们记起的含义,加载在文档的位置等.注释的开始使用/*,结束使用*/语法/*注释内容*/示例/*文字样式开始*//*梦之都白色12象素文字*/12{ ; :12;}/*梦之都黑色16象素文字*/16{ ; :16;}/*文字样式结束*/第四章颜色颜色表示方法预定义颜色表示法(就是使用颜色的英文):;;;颜色表示法:(255,0,0);(0,255,0);(0,0,255);16进制颜色表示法:0000;0000;1199;短16进制颜色表示法,属于(网络安全色):00;0f0;00f;短16进制颜色表示法就是当16进制颜色表示法中的两个表示颜色值的数字一样的时候的简写,比如0000;就可以简写为00;注意:使用16进制表示颜色时,要使用#标记等价于,例如0等价于00背景背景(),文字颜色可以使用属性,但是包含文字的p段落层页面等的颜色与背景图片可以使用与等属性.通常使用定义背景颜色定义背景图片定义背景图片的重复方式定义背景图片的位置定义背景图片随滚动轴的移动方式.第一节：属性背景色,定义背景的颜色取值:<>||<>:颜色表示法:透明:继承初始值:继承性:是适用于:所有元素:背景:颜色.示例{ ;}第二节：属性定义背景图片取值:<>||:无:继承初始值:继承性:否适用于:所有元素:背景:图片.示例{ ('');}p{ ;}{ ('');}第三节：属性定义背景图片的重复方式取值:||||:平铺整个页面,左右与上下:在x轴上平铺,左右:在y轴上平铺,上下:图片不重复:继承初始值:继承性:否适用于:所有元素:背景:重复.示例{ (''); ;}{ (''); ; ;}第四节：属性定义背景图片的位置取值:[[<>|<>|||][<>|<>|||]]|[[||][||]]|水平:左:中:右垂直:上:中:下垂直与水平的组合示例{ (''); ;}p{ ('');; ;}{ ('');:50%20%; ;}属性是通过平面上的x与y坐标定位的,所以通常取两个值.第五节:属性定义背景图片随滚动轴的移动方式取值:||:随着页面的滚动轴背景图片将移动:随着页面的滚动轴背景图片不会移动:继承示例{ ('');; ; ;}第六节：属性五个背景属性可以全部在此定义取值:[<><><><><>]|[<><><><><>]:背景颜色,图像等的一个属性或多个属性:继承示例{ ('');}第六章文本文本属性用于定义文字,空格,单词,段落的表现等.通常使用属性控制字母之间的距离属性控制文字间空格的距离属性定义文本是否有下划线属性控制英文的大小写属性定义文本的对齐方式属性定义文本首行的缩进属性定义文本与文档源代码的关系.第一节:属性定义文本是否有划线以及划线的方式取值|[]|:定义正常显示的文本[]:四个值中的一个或多个:定义有下划线的文本:定义有上划线的文本:定义直线穿过文本:定义闪烁的文本示例{;}{;}{;}{;}{;}{;}第二节:属性通过文档的源代码的排版方式控制页面显示文本的排版方式取值:|||||:正常无变化(默认处理方式.文本自动处理换行.假如抵达容器边界内容会转到下一行):保持源代码的空格与换行,等同与标签:强制文本在一行,除非遇到换行标签:同属性,但是遇到超出容器范围的时候会自动换行:同属性,但是遇到连续空格会被看作一个空格:继承示例{ ;}第七章字体字体属性用于定义文字的字体,大小,粗细的表现等.通常使用定义使用什么字体定义字体大小定义斜体字定义小型的大写字体定义字体的粗细统一定义字体的所有属性.第八章边框每个内容或元素外面都可以有一个边框.边框分为上边框(),下边框(),左边框(),右边框().每种边框有颜色(),样式(),宽度()三种属性.如果上下左右的边框表现不一样,可以分别定义上下左右边框,如果一样可以统一使用属性定义.通常使用属性定义边框的宽度属性定义边框的颜色属性定义边框的样式属性统一定义边框样式的几个属性.第九章边外补白边框的外面可以有一层边外补白(),边外补白可以把块级元素分开.边外补白定义了围绕某种元素()的空白.可以查看盒模式,了解边外补白和边内补白.边外补白分为上边外补白(),下边外补白(),左边外补白(),右边外补白().边外补白只有宽度一种属性.第一节:属性边外补白可以取负值;边外补白是看不到的,因为它本身是白色的.定义上边外补白定义右边外补白定义下边外补白定义左边外补白第十章边内补白边框的里面面可以有一层边内补白(),边内补白定义了边框与边框里面内容的距离.边内补白分为上边内补白(),下边内补白(),左边内补白(),右边内补白().边内补白只有一种属性.定义边内补白边内补白不可以取负值;边内补白是看不到的,因为它本身是白色的.定义上边内补白定义下边内补