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中的“.”,“#”,”*“的区别和作用的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-14CSS-Module学习:轻松入门指南
- 2024-11-12CSS9资料入门指南
- 2024-11-12CSS浮动资料详解:初学者指南
- 2024-11-12CSS选择器资料详解与实战教程
- 2024-11-12CSS样式资料:初学者必备指南
- 2024-11-11CSS项目实战:从入门到上手
- 2024-11-11CSS定位项目实战:新手指南
- 2024-11-11CSS浮动项目实战:初学者指南
- 2024-11-11CSS选择器项目实战:从入门到上手
- 2024-11-11CSS样式项目实战:新手入门指南