CSS选择器共有三种:标签选择器、ID选择器、类选择器。
【标签选择器】
一个完全的HTML页面是有良多分歧的标签构成,而标签选择器,则是决意哪些标签接纳响应的CSS款式,(在年夜情况中你大概出于分歧的地位,可是不论怎样,你老是穿戴统一套衣服,这件衣服就是由标签选择器事前给你限制好的,不论走到那里都是这身衣服)好比,在style.css文件中对p标签款式的声明以下:则页面中一切p标签的背景都是#900(白色),笔墨巨细均是12px,色彩为#090(绿色),这在前期保护中,假如想改动全部网站中p标签背景的色彩,只必要修正background属性就能够了,就这么简单!
- p{
- font-size:12px;
- background:#900;
- color:090;
- }
【ID选择器】
ID选择器在某一个HTML页面中只能利用一次(固然也能够用好几回,不外就不切合W3C尺度了,那页面也就不是尺度页面喽~,我们的目标不就是为了做尺度的页面么,以是倡议人人不要在统一个html页面中多个标签具有配合的ID),就像在你所处的情况中,你只要一个ID(身份证),不成能反复!信任人人也能看出来,ID选择器更具有针对性,如:
先给某个HTML页面中的某个p标签起个ID,代码以下:在CSS中界说ID为one的p标签的属性,就必要用到#,代码以下:
- <pid="one">此处为p标签内的笔墨</p>
如许页面中的某个p就会是CSS中界说的款式。
- #one{
- font-size:12px;
- background:#900;
- color:090;
- }
【类选择器】
这类选择器更简单了解了,就是使页面中的某些标签(能够是分歧的标签)具有不异的款式,就像国庆中某个方阵中,一定都是分歧的人,却均穿白色衣服,手中高举花环,款式都是一样的,假如想让这一类人都有配合的款式,该怎样做呢~呵呵,和ID选择器的用法相似,只不外把id换做class,以下:假如我还想让div标签也有不异的款式,怎样办呢?加上一样的class就能够了,以下
- <pclass="one">此处为p标签内的笔墨</p>
如许页面中但凡加上class="one"的标签,款式都是一样的喽~CSS界说的时分和ID选择器差未几,只不外把#换成.,以下
- <divclass="one">此处为p标签内的笔墨</div>
增补:一个标签能够有多个类选择器的值,分歧的值用空格分隔,如:
- .one{
- font-size:12px;
- background:#900;
- color:090;
- }
如许我们能够将多个款式用到统一个标签中,固然也能够,ID和class一块用
- <divclass="oneyellowleftStyle">此处为p标签内的笔墨</div>
- <divid="div1"class="oneyellowleftStyle">此处为p标签内的笔墨
- </div>
【通用选择器】
到这里,前三种基础的选择器说完了,可是还必要给人人先容一个CSS选择器中功效最壮大可是用的起码的一种选择器“通用选择器”壮大的地方是由于他对父级中的一切HTML标签举行款式界说,可对具有配合款式的标签款式举行界说(有点小学数学中的提取公因式),如许能够年夜年夜精简代码;既然有这么壮大的功效为何是用的起码呢,一样仍是由于他的壮大,他是对父级元素内的一切标签举行界说,以是只需你界说了,那末父级内里的一切的标签,甭管有无需要,也都相称于加上了通用选择器内里的代码了,能这么说人人不克不及够完整了解,不妨,我给人人举个例子,请看上面
- *{此处为CSS代码}
人人运转一下下面的例子,div1内里的两个标签是否是款式一样,这就是通用选择器的壮大的地方,不论内里有几个标签城市将款式加到一切标签内,假如div1内里得一切的标签都有一部分不异的CSS代码,那末能够把这部分代码提掏出来,用通用选择器来界说,如许能够年夜年夜缩减代码,可是假如div1内里只需有一个和其他元素没有不异的代码,就不克不及用通用选择器来界说,这也就是CSS通用选择器不天真的一点。如今人人分明为何通用选择器是选择器内里功效最壮大的但又是用的起码的选择器了吧~~呵呵
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <htmlxmlns="http://www.w3.org/1999/xhtml">
- <head>
- <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
- <title>无题目文档</title>
- <styletype="text/css">
- <!--
- #div1*{
- background:#eee;/*设置DIV1内里一切的元素背景均为灰色*/
- color:#333;/*设置置DIV1内里一切的元素的字体色彩均为玄色*/
- }
- -->
- </style>
- </head>
- <body>
- <divid="div1">
- <p>这里是p标签地区</p>
- <div>这里是a标签地区</div>
- </div>
- <divid="div2">
- <p>这里是p标签地区</p>
- <div>这里是a标签地区</div>
- </div>
- </body>
- </html>
关于通用选择器另有一个不能不提的用法,就是为了包管作出的页面可以兼容多种扫瞄器,以是要对HTML内的一切的标签举行重置,会将上面的代码加到CSS文件的最顶端为何要这么用呢,由于每种扫瞄器都自带有CSS文件,假如一个页面在扫瞄器加载页面后,发明没有CSS文件,那末扫瞄器就会主动挪用它自己自带的CSS文件,可是分歧的扫瞄器自带的CSS文件又都纷歧样,对分歧标签订义的款式纷歧样,假如我们想让做出的页面可以在分歧的扫瞄器显现出来的效果都是一样的,那末我们就必要对对HTML标签重置,就是下面的代码了,可是如许也有欠好的中央,由于HTML4.01中有89个标签,以是相称于在页面加载CSS的时分,先对这89个标签都加上了{margin:0;padding:0;},在这里我不倡议人人这么做,由于89个标签中必要重置的标签是很多数,没有需要将一切的标签都重置,必要哪些标签重置就让哪些标签重置就能够了,以下
- *{margin:0;padding:0;}
假如还必要dl、dt、dd标签重置,那就在下面加上就能够了,以下
- body,div,p,a,ul,li{margin:0;padding:0;}
用到那些就写那些,这点也能够看作权衡页面重构师制造页面程度的上下,和是不是专业的一个方面到这里人人更应当分明这句话“通用选择器是功效最壮大可是用的起码的选择器”了吧~^_^
- body,div,p,a,ul,li,dl,dt,dd{margin:0;padding:0;}
OK!选择器的内容我向人人应当都分明了,前面就持续解说一下“选择器的个人声
明”和“选择器的嵌套”
欢迎光临 仓酷云 (http://ckuyun.com/) | Powered by Discuz! X3.2 |