设为首页 - 加入收藏 - 网站地图 - RSS订阅 村姑网-www.cunguer.com
当前位置:首页 > 网页制作 > CSS > 正文

CSS中“#(井)号”、“*号”、“.”的区别于应用实例

时间:2015-12-06 16:09:20 来源:村姑网 作者:喜欢安静 阅读:99
导读:在css文件中,经常会看到#号、*号和.点,对于没有一点css阅读、开发经验的朋友来讲,这几个符号所代表的意思是什么、有什么作用,肯定是一点都不知道,那么今天我们就一起来认识一下这3个符号在css中的共同点和区别。 #(井)号、*号、.点的相同点: 他们有着...

在css文件中,经常会看到#号、*号和“.点”,对于没有一点css阅读、开发经验的朋友来讲,这几个符号所代表的意思是什么、有什么作用,肯定是一点都不知道,那么今天我们就一起来认识一下这3个符号在css中的共同点和区别。

“#(井)号”、“*号”、“.点”的相同点:

他们有着一个共同点, 就是都是用来控制网页中元素的css代码的一部分,没有了这几个符号,css代码就无法控制网页元素的显示布局,页面将会变的一团糟。

“#(井)号”、“*号”、“.”区别是什么?下面我们就用实例来讲解一下。

#(井)号:

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

HTML代码:

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


CSS代码:

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


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

*号:

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

*{
font-size:14px;
}


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

.点符号:

html代码:

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

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


css代码:

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


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

思考一下,假如2个层的ID是一样的话,会有什么样的效果呢?

《CSS中“#(井)号”、“*号”、“.”的区别于应用实例》地址:http://www.cunguer.com/article/267.html,本文来自村姑网,您身边的IT专家 www.cunguer.com,转载请注明出处,您的支持是我们创作的源泉~!