最常用的方法就是用外联样式,然后通过css选择器选择不同的元素,为其加上不同的样式。
也就是说我们从事前端工作,在开发页面的过程中是肯定绕不开css选择器的,其重要性也就不言而喻了。
废话不多说,我们来看一段代码:
!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8titleTitle/titlestyle#box{width:px;height:px;background:#1b6d85;}/style/headbodydivid=box/div/body/html
得到的结果是这样的:
那么在这一段代码中,有一个style标签,里面写的就是css样式:
#box{width:px;height:px;background:#1b6d85;}
这段代码中就用到了选择器,这段代码选择了一个ID名称为box的元素,并为其加上我们想要的样式,这里面的选择器就是前面的:
#box{}前面的“#”标识符表示这个选择器将会选择ID名称,并不能选择其他的属性。
而紧跟其后的box则是代表要选择的ID属性的值。然后后面是大括号,大括号里面写的就是css样式了。这个选择器也叫ID选择器。
那么除了ID选择器以外,还有很多其他的选择器,最常见的有类选择器,如“.box{}”;
这就是一个类选择器,千万要注意,在选择器的名字前面有一个点哦!
还是来看看代码把。
之前的样式其实也可以这样写:
!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8titleTitle/titlestyle.box{width:px;height:px;background:#1b6d85;}/style/headbodydivclass=box/div/body/html
注意这段代码和上一段代码的一个区别:
其中div标签身上的ID属性被替换成了class属性,其里面的值还是没有变化,还是box。
第二个区别就是css部分,一个很小的改变:box前面的“#”变成了“.”;
那么这个点代表的就是这个选择器选择的是一个class属性
小总结一下:
#box{}/*这是ID选择器,注意前面是用井号开头的,井号代表ID*/.box{}/*这是class选择器,注意前面是用点开头的,点代表class*/
除了这两个选择器之外,还有:
标签选择器:顾名思义,也就是选择某一些标签
包含选择器:这个是一个组合选择器,由一个选择器包含住另一个选择器来实现精确查找
群组选择器:各种选择器组合在一起,选择一组元素
下面来看一下这些选择器的一个使用场景:
标签选择器:
!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8titleTitle/titlestylediv{width:px;height:px;background:#0c;}/style/headbodyh1/h1div/divdiv/divdiv/divdiv/divdiv/divp/pp/pp/pp/ph2/h2/body/html
比如这种情况,一堆的标签,当你并不想给这些标签加上任何的属性,然后你又需要选中所有的div标签那么这时候就可以使用标签选择器。
标签选择器的组成是:标签名+大括号;
注意:这个选择器前面不需要加任何的标识符。
名字也不是随便起的,名字就是标签名,代表选择某一个标签。
包含选择器:
!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8titleTitle/titlestyleh1em{color:red;}/style/headbodyh1这里是标题em重要内容/em/h1/body/html
当我们需要选择em标签的时候,其实在这个案例里面可以直接使用em{}这个标签选择器;
但是我们在正常的开发中,html结构比这个要复杂很多,那么这时候为了避免选中其他的元素,我们就需要用到包含选择器:
h1em{}这个选择器的意思是在h1标签里面选择em标签。
这个选择器也叫后代选择器。
注意:包含选择器之间一定要用空格隔开。
另外,包含选择器选择的是所有的后代,比如:
!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8titleTitle/titlestyleh1span{color:red;}/style/headbodyh1这里是标题em重要span的/span内容/em/h1/body/html
比如这里的包含选择器:
h1span{}同样能选中h1标签里面的span标签,尽管span标签被em所包含,但是依然能够选中,这一点一定要注意。
另外,包含选择器还有一种,叫子级选择器,这个选择器的写法是:
h1span{},中间不再是空格,而是一个大于号。
这个选择器的意思是在h1的子元素里面选择span元素,在上面的代码块中span元素其实算是h1标签的孙级元素,所以用这个子级元素是不能选中span标签的
注意:
h1
这里是标题em重要span的/span内容/em
/h1
在这个结构中:
用h1span{}这个选择器可以选中span元素;
如果用h1span{}这个选择器则不能选中span元素。
群组选择器:
!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8titleTitle/titlestyleh1span,h2span,pspan{color:red;}/style/headbodyh1这里是标题em重要span的/span内容/em/h1h2span这里是副标题/span/h2pspan这里是内容/span/p/body/html
比如这个结构,当我们需要同时选中不同元素所包含的span元素的时候,就可以用到群组选择器。
其实也就是多个选择器之间用逗号分隔,这样做可以节省一些代码。
这个选择器通常用在cssreset里面。
当我们需要对多个标签清除其样式的时候,就可以这样写:
styleh1,h2,h3,h4,p,dl,dd{margin:0;}/style
稍微格式化一下就可以了。