第二个灵魂 发表于 2015-1-16 00:23:07

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
Element
Element
Element
Element选择具有attr属性的E1例子
input{border:1px#000solid;}
Element选择具有attr属性且属性值即是value的元素例子
input{border:1pxredsolid;}
Element选择具有attr属性且属性值为一用空格分开的字词列表,个中一个即是value的Element。这里的value不克不及包括空格例子
input{color:red;}
Element选择具有attr属性且属性值为一用连字符(-)分开的字词列表,必需是以value入手下手的元素。例子
input{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)、每一个属性选择符(形如等)、每一个伪类(形如: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>bodytabletrtdul>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>
每个声明内只能有一个属性,如果属性值中含有空格用双引号括起来例,在一个声明块内可以有多个声明,每个声明用分号隔开。

变相怪杰 发表于 2015-1-18 06:30:26

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

小妖女 发表于 2015-1-25 22:47:39

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

蒙在股里 发表于 2015-2-4 13:19:36

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

愤怒的大鸟 发表于 2015-2-28 08:51:39

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

飘飘悠悠 发表于 2015-3-9 22:10:44

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

只想知道 发表于 2015-3-17 02:10:28

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

不帅 发表于 2015-3-23 17:40:51

这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时,就要多花时间对其产生初步的印象。此外,多操作也是非常重要的。
页: [1]
查看完整版本: DIV教程之手写款式表:CSS语法全攻略(上)