DIV教程之手写款式表：CSS语法全攻略（上）

CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。
保持可视化编纂器写CSS
假如有看上篇的例子的CSS时，你大概会问，我在DW中要如何做才干有像上面如许的CSS呢？
.test1,.test2{color:Purple!important;color:blue;}
手写，在DW也有代码区，并且是有智能提醒的，即是半手动写，自己一向用TopStyle，除对中文的撑持不是很好外，各方面都不错。在学C#的那段工夫，发明VS.NET写CSS也很不错，就是有点年夜。
为何不克不及用可视化编纂器写CSS呢？来由很复杂，手写CSS能够写良多可视化编纂器写不出的款式，刚入手下手手写大概会不年夜习气，但是共同智能提醒，写熟了是不会比可视化编纂器点的慢。
想学好CSS就要学会承受各类扫瞄器的优待（固然做某些特定只需针对只要IE用户的网站破例），在承受扫瞄器的优待的第一步是保持可视化编纂器。假如不克不及保持，前面的良多器材你就只能看看。
各类范例的选择符
为何要呈现分歧的选择符呢？团体以为是主是模块化跟重用性。
上面的Element暗示元素。
通配选择符
*
像良多言语一样*代表一切，一样平常入手下手我会在一个CSS的入手下手时做上面如许的界说：如许界说是把一切的元素的margin跟padding界说为0。例子
*{margin:0;padding:0;}
*也是能够像上面如许用的：把div元素下的一切元素界说。
div*{color:#94439F;}
如许界说时要当心使用，像上面如许的界说是用乘的。例子
ul*{font-size:120%;}
以是人人在用通配选择符呈现百分比的界说时要当心。
范例选择符
Element
这个是人人最最经常使用的吧，说Element大概人人不会晓得，看上面的。例子
p{color:blue;}
固然偶然HTML也弄弄出格的，自界说元素是个中的一种，例子
rotui/:aoao{color:#123456;}
包括选择符也有人叫派生选择符
Element1Element2
像方才的明显div*就是，固然还能够像上面如许。例子
pstrong{color:blue;}
子工具选择符
Element>Element
这个跟包括选择符有甚么分歧呢？他只对他的子一级元素无效（IE6还不撑持）。例子
p>span{color:red;}
相邻选择器
Element+Element
只对相邻的元素，也就是下一个元素的界说（IE6还不撑持）。例子
p+p{border:1pxredsolid;}
ID选择符
#IDName
Element#IDName
间接界说HTML的ID名。例子
#csser{border:1px#000solid;}
类选择符
.className
Element.className
这两个有甚么分歧呢，前一个是界说一切class="className"。例子
.rotui{border:1px#000solid;}
属性选择符
Element[attr]
Element[attr=value]
Element[attr~=value]
Element[attr|=value]
Element[attr]选择具有attr属性的E1例子
input[value]{border:1px#000solid;}
Element[attr=value]选择具有attr属性且属性值即是value的元素例子
input[type=password]{border:1pxredsolid;}
Element[attr~=value]选择具有attr属性且属性值为一用空格分开的字词列表，个中一个即是value的Element。这里的value不克不及包括空格例子
input[value~="aoao"]{color:red;}
Element[attr|=value]选择具有attr属性且属性值为一用连字符（-）分开的字词列表，必需是以value入手下手的元素。例子
input[value|="rotui"]{color:blue;}
PS:以上的IE扫瞄器看不到.
选择符分组
Element1,Element2
将一样的界说使用于多个选择符，能够将选择符以逗号分开的体例并为组。不但只是元素，下面所说的八类选择符跟上面的都能够使用。例子
th,td{color::1pxredsolid;}
伪类选择符
Element:link
Element:visited
Element:hover
Element:active
Element:focus
Element:first-child
Element:lang
固然另有界说打印的:first:left:right，这里只先容屏幕上的。例子:link,:visited,:hover,:active这四类是罕见到的，由于IE的a元素撑持他。例子:focus工具在成为输出核心（该工具的onfocus事务产生）时呈现（IE不撑持）。例子
input:focus{color:blue;}
:first-child包括选择符内里的第一个元素的界说。例子divp:first-child{background-color:#ccc;}
:lang()对已指明言语的元素举行界说。例子p:lang(en){color:Blue;}

伪工具
Element:first-letter
Element:first-line
Element:before
Element:after
:first-letter首字界说，很好了解，就是第一个字。例子
.letter:first-letter{font-size:300%;}

:first-line首行界说，第一行会无效果，换行符（<br/>）也能够支解第一行。例子.letter:first-line{color:red;}
:before和:after在元素之前（before）跟以后（after）共同content属性增加内容。例子
em:before{content:"我来自CSS";}
em:after{content:"我也是CSS里出来的";}

选择符的优先权
那样多个选择符，我安知道哪一个优先权高呢？上一篇只讲到important进步优先权，如今再说说选择符的优先权，old9兄的blog已有了一篇讲到，这里援用一下，也好偷下懒起首就是CSS划定规矩的specificity(特别性)，CSS2.1有一套关于specificity的盘算体例，用一个四位的数字串(CSS2是三位)来暗示，终极specificity越高的划定规矩越特别，在优先级判断时也就越有上风。关于specificity的详细盘算在各类情形下的数字加成有以下一样平常划定规矩：
每一个ID选择符(#someid)，加0,1,0,0。每一个class选择符(.someclass)、每一个属性选择符(形如[attr=”"]等)、每一个伪类(形如:hover等)加0,0,1,0
每一个元素或伪元素(:firstchild)等，加0,0,0,1其他选择符包含全局选择符*，加0,0,0,0。相称于没加，不外这也是一种specificity，前面会注释。举一些例子吧：
h1{color:red;}
/*只要一个一般元素加成，了局是0,0,0,1*/
bodyh1{color:green;}
/*两个一般元素加成，了局是0,0,0,2*/
――后者胜出

h2.grape{color:purple;}
/*一个一般元素、一个class选择符加成，了局是0,0,1,1*/
h2{color:silver;}
/*一个一般元素，了局是0,0,0,1*/
――前者胜出

html>bodytabletr[id=”totals”]tdul>li{color:maroon;}
/*7个一般元素、一个属性选择符、两个其他选择符，了局是0,0,1,7*/
li#answer{color:navy;}
/*一个ID选择符，一个一般选择符，了局是0,1,0,1*/
――后者胜出
除specificity另有一些其他划定规矩
文内的款式优先级为1,0,0,0，以是一直高于内部界说。这里文内款式指形如<divstyle=”color:red”>blah</div>的款式，而内部界说指经过<link>或<style>标签订义的划定规矩。
有!important声明的划定规矩高于统统。
假如!important声明抵触，则对照优先权。
假如优先权一样，则依照在源码中呈现的按次决意，厥后者居上。
由承继而失掉的款式没有specificity的盘算，它低于统统其他划定规矩(好比全局选择符*界说的划定规矩)。
关于经过@import载进的内部款式，因为@import必需呈现在一切其他划定规矩界说之前(如不是，则扫瞄器应当疏忽之)，以是依照后发先至准绳，一样平常优先权抵触时是占上风的。
这里必要提一下IE，IE是能够辨认地位毛病的@import的，但不管@import在甚么中央，它都以为是位于一切其他划定规矩界说之前的，这大概会激发一些误解。
看来一篇写不完了，属性留鄙人篇再说吧（这岁首多混个页的流量也不简单）！
</p>
每个声明内只能有一个属性，如果属性值中含有空格用双引号括起来例，在一个声明块内可以有多个声明，每个声明用分号隔开。

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。