我觉得这篇文章讲得不错, 所以直接转载过来学习, 不过我对格式进行了大致的调整。转载地址:http://blog.163.com/zzf_fly/blog/static/209589158201271311449305/
1. class是设置标签的类, class属性用于指定元素属于何种样式的类。
如样式表可以加入.content1 { color: red; background: #ff80c0 } 使用方法:class="content1" .
id是设置标签的标识。id属性用于定义一个元素的独特的样式。如一个CSS规则#content2 { font-size: larger } 使用方法为:id="content2"
概念上说不一样(下面的两句话还是比较精辟的):
class是一个样式,先定义好, 然后可以套给多个结构/内容, 便于复用。也就是说class名称可以相同。
id是一个标签,用于区分不同的结构和内容,就象你的名字, 如果一个屋子有2个人同名,就会出现混淆;id是先找到结构/内容,再给它定义样式;
2.属性的优先级问题
id的优先级要高于class, 可以自己写个例子看看。部分代码如下
-
<html>
-
<head>
-
<style type="text/css">
-
#aa
-
{
-
color:red
-
}
-
.aa
-
{
-
color:blue
-
}
-
</style>
-
</head>
-
<body>
-
<div id="aa" class="aa">I love you.</div>
-
</body>
-
</html>
3. 关于js
如果在页面中要对某个对象进行脚本操作(js),那么可以给他定义一个id,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个id来得简单.
end:
如时间紧迫,看到此处即可。
参考链接:
补充:
1、语法区别:
id对应css是用样式选择符“#”(井号)版。
class对应css是用样式选择符“.”(英文半角输入权句号)。
2、使用次数区别:
id属性,只能被一个元素调用(以“#”选择符命名CSS样式在一个页面只能使用调用一次)。在同一个页面,只可以被调用一次,在CSS里用“#”表示。
class类标记,可以用于被多个元素调用(以“.”选择符命名样式可以一个页面使用多次)是类标签,在同一个页面可以调用无数次(没限制的),在CSS里用“.”表示。
ID就像一个人的身份证,用于识别这个DIV的,Class就像人身上穿的衣服,用于定义这个DIV的样式。一般一个网页不设二个或二个以上同ID的div,但Class可以多个DIV用同一个Class。
3、语义和使用不同:
id作为元素的标签,用于区分不同结构和内容,而class作为一个样式,它可以应用到任何结构和内容上。在布局思路上,一般坚持这样的原则:id是先确定页面的结构和内容,然后再为它定义样式:而class相反先定义一类样式,然后再页面中根据需要把类样式应用到不同的元素和内容上面。
class可以在页面里面重复使用,
id由于在页面里面只能出现一次,所以不能重复使用,
所以尽量用class来写,这样能在页面里面重复引用你写的css,减小工作量和代码量。
这种情况尽量用id:页面大的模块里面,用id来区分不同的模块。
比如页面里面有这样的模块:最新新闻,推荐新闻等。就可以考虑用id来区分。
还有一点,由于id是页面中唯一的,更多的是定义来留给给页面里面的javascript用。
补充:class和id在页面里面的使用方法:
class:
<style type="text/css">
.footer{background:red;}
</style> <div class="footer">footer</div>
id: <style type="text/css">
#footer{background:red;}
</style>
<div id="footer">footer</div>
定义class的css是用点:“.”,如.footer
定义id的css是用井号“#”,如#footer
//让div居中对齐
让div内的内容(包括文字及图片)居中的代码是: text-align:center;
<style type="text/css">
刚刚入门,要记住。
.align-center{
margin:0 auto; /* 居中 这个是必须的,,其它的属性非必须 */
width:500px; /* 给个宽度 顶到浏览器的两边就看不出居中效果了 */
background:red; /* 背景色 */
text-align:center; /* 文字等内容居中 */
}
</style>