Notice网站公告
Solution解决方案
DIV CSS技术首页 > 知识中心 > DIV CSS技术 >

CSS三种选择器和规范化命名

 

CSS选择器基本有三种选择器:标签选择器、ID选择器、类选择器。
1.标签选择器
很多种不同的CSS标签组成一个完整的HTML页面,标签选择器的用处就是决定哪些标签采用那样的CSS样式。比如,style.css文件中对p这个标签样式的声明:
p{
background:red;
font-size:10px;
color:green;
}
页面中所有p标签的文字颜色是绿色,文字的大小是10px,背景颜色都是红色,如果想在后期维护中改变整个网站中p标签的文字大小,只要改一下font-size属性就好了。
2.ID选择器
ID选择器在同一个HTML里面最好只用一次,也可以用几次,不过这样不符合W3C的标准,所以建议不要在同一个html中几个标签拥有一模一样的ID选择器,就比如我们的身份证只有一个ID,没有重复的。ID选择器有很强的针对性,例如:
HTML页面代码
<p id="p_id">p标签</p>
CSS代码
#p_id{
background:red;
font-size:10px;
color:green;
}
HTML页面中的p标签ID定义为"p_id",CSS中定义ID为p_id的p标签的属性,要用#开头,这样页面中的p标签的样式就会是CSS代码定义的样式。
3.类选择器
类选择器是容易理解的,就是使页面中的一些标签拥有具有一样的样式,就像一个队伍中,每个人都是不同的,但都穿相同的衣服,手中高举花环,花环样式都是相同的,如果想让这个团队人有共同的样式,该怎么做呢!其实和ID选择器的用法类似,只是把id换做成了class,如下:
HTML页面代码
<p class="p_class">p标签</p>
CSS代码
.p_class{
background:red;
font-size:10px;
color:green;
}
HTML页面中的p标签class定义为"p_class",CSS中定义ID为p_class的p标签的属性,要用"."开头,这样页面中的p标签的样式就会是CSS代码定义的样式。
CSS选择器规范化命名
规范的命名标准也是很重要的,可以使我们更好的看懂代码,提高工作效率,无法看懂的代码会让我们或者别人的降低工作效率。其命名方法有三种:骆驼命名法,帕斯卡命名法,匈牙利命名法。
1.骆驼命名法
想骆驼的背部一样,一高一低的,所以命名也一高一低,大写英文字母就相当于骆驼背部的凸起,小写英文字母就相当于凹下去的地方,第一个字母要小写,后面的词的第一个字母用大写,例如:#beiJing  .beiJing
2.帕斯卡命名法
帕斯卡命名法是大小写英文字母的混编,和骆驼命名法很像,区别是首字母要大写,例如:#BeiJing  .BeiJing
3.匈牙利命名法
匈牙利命名法,是在名称前面加上一个或多个小写字母作为前缀,更容易理解更好认,例如:#red_beijing .red_beijing
北京网站建设公司
网林时代:北京网站建设专业机构,10年建站经验,服务客户1000多家!
网址:www.awanglin.net www.awanglin.com 点击浏览经典案例