仓酷云

标题: 来一发CSS教程:CSS挑选符的用法和实例 [打印本页]
作者: 若天明    时间: 2015-1-15 23:31
标题: 来一发CSS教程:CSS挑选符的用法和实例
有了CSS，我们不再需要用FONT标签或者透明的1pxGIF图片来控制标题，改变字体颜色，字体样式等等
网页制造poluoluo文章简介：固然之前已有很多关于CSS选择符的文章在收集上呈现，不外我仍是筹办以本人的体例来写一写，这也是一种取得兴趣的路子。以是我小小的总结了一下css1及css2选择符（本文的CSS选择符都为css1及css2）的用法及实例，但愿对人人有些许匡助。
　　整天都要与款式打交道的伴侣，信任对CSS选择符(CSSSelectors)都不会生疏。不外关于刚打仗大概还不是很熟习css的伴侣来讲，可以找到一份关于CSS选择符的相干例子汇合，仍是会有必定匡助的。
　　固然之前已有很多关于CSS选择符的文章在收集上呈现，不外我仍是筹办以本人的体例来写一写，这也是一种取得兴趣的路子。以是我小小的总结了一下css1及css2选择符（本文的CSS选择符都为css1及css2）的用法及实例，但愿对人人有些许匡助。
　　做这之前，固然得将一切CSS选择符列出来先。
CSS选择符(CSSSelectors-CSS1andCSS2)


　　如今已将一切的CSS选择符都枚举出来了，迁就对每一个选择符做独自的注释和举例。关于以下的这些例子，有些只是复杂的使用实例，有些还供应了对照例子，使得能够分明的看出该种选择符的利用局限和办法。
范例选择符(TypeSelectors)
　　语法：E1

　　申明：有的时分我们也将它叫做标签选择符，由于它是间接用html标志来做选择符举行操纵。今朝一切支流扫瞄器均撑持该选择符，属于CSS1选择符。

　　实例：
　　div{color:#F00;}
　　<div>这里是测试内容</div>
包括选择符(DescendantSelectors)
　　语法：E1E2

　　申明：选择一切被E1包括的E2，这里的E1和E2便可所以html标志，也能够是class或id。今朝一切支流扫瞄器均撑持该选择符，属于CSS1选择符。

　　实例：
　　divem{color:#F00;}
　　.testem{color:#F00;}
　　<div>这里是<em>测试</em>内容</div>
　　<divclass="test">这里是<em>测试</em>内容</div>
ID选择符(IDSelectors)
　　语法：#sID

　　申明：以DOM中作为工具的独一标识符的ID作为选择符。今朝一切支流扫瞄器均撑持该选择符，属于CSS1选择符。

　　实例：
　　#test{color:#F00;}
　　<divid="test">这里是测试内容</div>
类选择符(ClassSelectors)
　　语法：.className

　　申明：其效果同等于E1[class~=className]。能够为工具的class属性指定多于一个值(className)，其办法是用空格将每一个className离隔。今朝一切支流扫瞄器均撑持该选择符，属于CSS1选择符。

　　实例：
　　.test{color:#F00;}
　　.test2{font-size:14px;}
　　<divid="test">这里是测试内容</div>
　　<divid="testtest2">这里是测试内容</div>
分组选择符(GroupingSelectors)
　　语法：E1,E2,E3

　　申明：将一样的界说使用于多个选择符，能够将选择符以逗号分开的体例并为组。今朝一切支流扫瞄器均撑持该选择符，属于CSS1选择符。

　　实例：
　　.test,p{color:#F00;}
　　<divid="test">这里是测试内容</div>
　　<p>这里是测试内容</p>
通配选择符(UniversalSelectors)
　　语法：*

　　申明：选定DOM中的一切工具。今朝一切支流扫瞄器均撑持该选择符，属于CSS2选择符。

　　实例：
　　*{color:#F00;}
　　<div>这里是测试内容</div>
　　<p>这里是测试内容</p>
子选择符(ChildSelectors)
　　语法：E1>E2
　　申明：选择一切作为E1子工具的E2，不包含孙辈和更深的干系。非IE内核扫瞄器和IE7及以上扫瞄器撑持，属于CSS2选择符。

　　实例：
　　.test>strong{color:#F00;}
　　<divclass="test">
　　　<strong>测试的内容</strong>
　　　<p>这是<strong>测试的内容</strong>哦！</p>
　　　<strong>测试的内容</strong>
　　</div>
相邻选择符(AdjacentSelectors)
　　语法：E1+E2
　　申明：选择紧跟在工具E1以后的一切E2工具(E1与E2需布局级别不异)。非IE内核扫瞄器和IE7及以上扫瞄器撑持，属于CSS2选择符。

　　实例：
　　p+p{color:#F00;}
　　<p>测试的内容1</p>
　　<p>测试的内容2</p>
　　<div>测试的内容3</div>
　　<p>测试的内容4</p>
　　<p>测试的内容5</p>
　　<div><p>测试的内容6</p></div>
属性选择符(AttributeSelectors)
　　语法：（属性选择符详细再分为4种分歧的体现体例）
　　1.E1[attr]
　　2.E1[attr=value]
　　3.E1[attr~=value]
　　4.E1[attr|=value]
　　申明：
　　1.选择具有attr属性的E1
　　2.选择具有attr属性且属性值即是value的E1
　　3.选择具有attr属性且属性值为一用空格分开的字词列表，个中一个即是value的E1。
　　4.选择具有attr属性且属性值为一用连字符分开的字词列表，由value入手下手的E1
　　非IE内核扫瞄器和IE7及以上扫瞄器撑持，属于CSS2选择符。

　　实例：
　　div[title]{color:#f00;}
　　<divtitle="测试的内容">测试的内容</div>

　　div[class=a]{color:#f00;}
　　<divclass="a">测试的内容</div>
　　<divclass="ab">测试的内容</div>

　　div[class~=a]{color:#f00;}
　　<divclass="a">测试的内容</div>
　　<divclass="ab">测试的内容</div>

　　div[title|=a]{color:#f00;}
　　<divtitle="a">测试的内容</div>
　　<divtitle="abc">测试的内容</div>
　　<divtitle="a-b-c">测试的内容</div>
伪类选择符(CSSPseudo-ClassesReference)
　　语法：（伪类选择符共有10种）
　　1.Selector:link{sRules}
　　2.Selector:visited{sRules}
　　3.Selector:hover{sRules}
　　4.Selector:active{sRules}
　　5.Selector:focus{sRules}
　　6.Selector1Selector2:first-child{sRules}
　　7.Selector:first{sRules}
　　8.Selector:left{sRules}
　　9.Selector:right{sRules}
　　10.Selector:lang{sRules}

　　申明：
　　1.设置a工具在未被会见前的款式表属性。默许值由扫瞄器决意。关于无href属性（特征）的a工具，此伪类不产生感化。
　　2.设置a工具在其链接地点已被会见过期的款式表属性。默许值由扫瞄器决意。界说网页过时工夫或用户清空汗青纪录将影响此伪类的感化。关于无href属性（特征）的a工具，此伪类不产生感化。
　　3.设置工具在其鼠标悬停时的款式表属性。在CSS1中此伪类仅可用于a工具。且关于无href属性（特征）的a工具，此伪类不产生感化。在CSS2中此伪类能够使用于任何工具。
　　4.设置工具在被用户激活（在鼠标点击与开释之间产生的事务）时的款式表属性。在CSS1中此伪类仅可用于a工具。且关于无href属性（特征）的a工具，此伪类不产生感化。在CSS2中此伪类能够使用于任何工具。而且:active形态能够和:link和:visited形态同时产生。
　　5.设置工具在成为输出核心（该工具的onfocus事务产生）时的款式表属性。
　　6.设置工具（Selector1）的第一个子工具（Selector2）的款式表属性。
　　7.设置页面庞器第一页利用的款式表属性。仅用于@page划定规矩。
　　8.设置页面庞器位于装订线右边的一切页面利用的款式表属性。仅用于@page划定规矩。
　　9.设置页面庞器位于装订线右侧的一切页面利用的款式表属性。仅用于@page划定规矩。
　　10.设置工具利用特别言语的内容款式表属性。
　　
　　:link,:visited,:hover,:active属于CSS1，今朝一切支流扫瞄器均撑持a工具的该4种伪类选择符，非IE扫瞄器和IE7及以上扫瞄器还撑持非a工具的:hover,:active；:focus,:lang属于CSS2，非IE中心扫瞄器及IE8撑持。

　　实例：
　　a:link{color:#f00;}
　　a:visited{color:#666;}
　　a:hover{color:#F60;text-decoration:none;}
　　a:active{color:#000;}
　　<ahref="http://blog.doyoe.com/">css探究之旅</a>

　　input:focus,a:focus{background:#f00;/*点击或按TAB键取得核心时失效*/}
　　<ahref="http://blog.doyoe.com/">css探究之旅</a>
　　<inputtype="text"/>

　　divem:first-child{color:#f00;}
　　<div><em>web</em>前端开辟<em>威望指南</em></div>
伪工具选择符(CSSPseudo-ElementsReference)
　　语法：（伪工具选择符共有4种）
　　1.Selector:first-letter
　　2.Selector:first-line
　　3.Selector:before
　　4.Selector:after

　　申明：
　　1.设置工具内的第一个字符的款式表属性。此伪工具仅感化于块元素。内联元素要利用该伪工具，必需先设定工具具有块元素的表状。
　　2.设置工具内的第一行的款式表属性。此伪工具仅感化于块工具。内联工具要利用该伪工具，必需先设定工具具有块元素的表状。
　　3.用来和content属性一同利用，设置在工具前（根据工具树的逻辑布局）产生的内容。
　　4.用来和content属性一同利用，设置在工具后（根据工具树的逻辑布局）产生的内容。

　　这几个伪工具选择符都为属于CSS2选择符，个中:first-letter和:first-line今朝一切支流扫瞄器均撑持；:before和:after非IE中心扫瞄器及IE8撑持。

　　实例：
　　div:first-letter{color:#f00;}
　　<div>我是一只丑小鸭，伊啊伊啊哟</div>

　　div:first-line{color:#f00;}
　　<div>我是一只丑小鸭，伊啊伊啊哟</div>

　　div:before{content:"web";}
　　<div>前端开辟</div>

　　div:after{content:"...";}
　　<div>年夜段的笔墨</div>

　　待修正完美。。。
</p>
样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。
作者: 灵魂腐蚀    时间: 2015-1-17 22:59
AdobeDreamweaver(前称MacromediaDreamweaver)是Adobe公司的著名网站开发工具。
作者: 愤怒的大鸟    时间: 2015-1-24 20:35
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。
作者: 谁可相欹    时间: 2015-2-2 14:47
经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.
作者: 变相怪杰    时间: 2015-2-8 01:18
所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.
作者: 精灵巫婆    时间: 2015-3-7 10:50
还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
作者: 兰色精灵    时间: 2015-3-15 03:41
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。
作者: 因胸联盟    时间: 2015-3-21 20:16
经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.



欢迎光临 仓酷云 (http://ckuyun.com/) Powered by Discuz! X3.2