Css中的“.”,“#”,”*“的区别和作用

2022/7/4 23:24:13

本文主要是介绍Css中的“.”,“#”,”*“的区别和作用,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

一、“.”,“#”,”*“作用

1.#:

#号的作用是控制对应div的css样式,具体事例如下:

HTML代码:

<div id="jinghao">
</div>

CSS代码:

#jinghao{
background:#F00;
height:20px;
width:500px;}

上面的代码运行后,你会发现,页面中出现一个高20px,宽500px,红色背景的一个层,它可以表明#号是控制id为“jinghao”的这个DIV的,也就是说css中#号是控制和他同名的网页元素的。

2.*号:

*号是css中的通配符,意思是所有的标签都有的属性,表示所有的标签都遵循的统一样式。例如:

*{
font-size:14px;
}

上面的*号设置了页面中所有文字大小后面在没有单独设置的情况下为14像素。

3.“.”点符号:

html代码:

<div class="dian">第一个层
</div>

<div class="dian">第二个层
</div>

css代码:

.dian{
background:#000;
height:20px;
color:#FFF;
width:500px;}

运行上面的代码你会发先,“第一个层”和“第二个层”拥有的是相同的css属性。

二、“.”,“#”,”*“的区别

当然有有,最简单的说#是id属性而.是class属性。
1,在css样式表中书写时,id选择符前面应该加前缀符号‘#’,而class选择符前面应该加前缀符号‘.’。
2,id属性一般在一个页面中只可以使用一次,而class可以被多次引用。
3,id作为元素的标签,用于区分不同结构和内容,而class作为一个样式,它可以应用到任何结构和内容上。
4,在布局思路上,一般坚持这样的原则:id是先确定页面的结构和内容,然后再为它定义样式:而class相反,它先定义好一类样式,然后再页面中根据需要把类样式应用到不同的元素和内容上面。
5,目前浏览器都能允许在同一个页面内出现多个相同属性值的id,一般情况下也能正常显示,不过当使用javascript通过id来控制元素时就会出现错误。
6,在实际应用时,class更多的被应用到文字版块以及页面修饰等方面,而id更多地被用来实现宏伟布局和设计包含块,或包含框的样式。



这篇关于Css中的“.”,“#”,”*“的区别和作用的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程