<style>
#main{
background: #000;
border: 1px solid #AAAAAA;
padding: 10px;
color: #fff;
width: 100px;
}
</style>
<div id="main">
Welcome
</div>
Run Code Online (Sandbox Code Playgroud)
在这里,我给了一个id
到div
元素,它的应用相关的CSS它.
要么
<style>
.main{
background: #000;
border: 1px solid #AAAAAA;
padding: 10px;
color: #fff;
width: 100px;
}
</style>
<div class="main">
Welcome
</div>
Run Code Online (Sandbox Code Playgroud)
现在,这里我给class
的div
,它也做同样的工作对我来说.
那么Id和类之间的确切区别是什么?id
我应该何时使用以及何时应该使用class
.?我是CSS和网页设计的新手,在处理这个问题时有点困惑.
lc.*_*lc. 204
如果要在整个页面/站点中一致地设置多个元素,请使用类.当您拥有或可能将来拥有多个共享相同样式的元素时,类非常有用.示例可以是用于相关链接的"评论"或某种列表样式的div.
另外,给定元素可以有多个与之关联的类,而一个元素只能有一个id.例如,你可以给一个div两个类,它们的样式都会生效.
此外,请注意,除了视觉类之外,类通常还用于定义行为风格.例如,jQuery表单验证器插件大量使用类来定义元素的验证行为(例如,是否需要,或者定义输入格式的类型)
类名的示例有:标记,注释,工具栏按钮,警告消息或电子邮件.
如果页面上有一个元素,则使用该ID将采用该样式.请记住,ID必须是唯一的.在您的情况下,这可能是正确的选项,因为可能只有页面上的一个"主"div.
id的示例包括:main-content,header,footer或left-sidebar.
记住这个的一个好方法是类是一种项目,id是页面上项目的唯一名称.
sur*_*ers 63
id
s是独一无二的
id
id
class
es不是唯一的
class
在多个元素上使用相同的元素.class
在同一元素上使用多个es.Javascript关心
JavaScript人员可能已经更加了解class
es和id
s 之间的差异.JavaScript取决于只有一个具有任何特定的页面元素id
,否则getElementById
无法使用常用的函数.
Roh*_*zad 22
有关此更多信息,请单击此处.
例
<div id="header_id" class="header_class">Text</div>
#header_id {font-color:#fff}
.header_class {font-color:#000}
Run Code Online (Sandbox Code Playgroud)
(请注意,CSS使用前缀#表示ID和.对于类.)
但是 HTML 5中不推荐使用color
HTML 4.01 <font>
标记属性.在CSS中没有"font-color",样式是color
如此,上面应该是:
例
<div id="header_id" class="header_class">Text</div>
#header_id {color:#fff}
.header_class {color:#000}
Run Code Online (Sandbox Code Playgroud)
文字是白色的.
小智 10
ID必须是唯一的 - 在html文档中不能有多个具有相同ID的元素.类可用于多个元素.在这种情况下,您可能希望使用"主"ID,因为它(可能)是唯一的 - 它是"主"div,用作其他内容的容器,只有一个.
如果你有一堆菜单按钮或其他一些你想要重复样式的元素,你可以将它们全部分配到同一个类,然后设置该类的样式.
几乎所有人都说使用ID作为一次性元素,使用类作为多用途元素.
这是一个快速,简化的示例,将HTML和HEAD标记作为读取
<body>
<div id="leftCol">
You will only have one left column
</div>
<div id="mainContent">
Only one main content container, but.....
<p class="prettyPara">You might want more than one pretty paragraph</p>
<p>This one is boring and unstyled</p>
<p class="prettyPara">See I told you, you might need another!</p>
</div>
<div id="footer">
Not very HTML5 but you'll likely only have one of these too.
</div>
</body>
Run Code Online (Sandbox Code Playgroud)
此外,正如其他答案中所提到的,ID很好地暴露于javascript,类更少.然而,像jQuery这样的现代javascript框架也可以利用javascript类
归档时间: |
|
查看次数: |
403794 次 |
最近记录: |