Html css中的类与ID(混淆)
我知道我可能会问和其他人一样的问题,但我真的很困惑什么时候使用ID和类。我已经在谷歌上搜索过了,也在这里读到了一些关于Stackoverflow的帖子,但仍然对它有疑问。我知道ID在一个页面中只能使用一次,类在一个类中可以使用多个ID 下面是我练习过的CSS样式表:Html css中的类与ID(混淆),html,css,Html,Css,我知道我可能会问和其他人一样的问题,但我真的很困惑什么时候使用ID和类。我已经在谷歌上搜索过了,也在这里读到了一些关于Stackoverflow的帖子,但仍然对它有疑问。我知道ID在一个页面中只能使用一次,类在一个类中可以使用多个ID 下面是我练习过的CSS样式表: html,body{ padding:0px; margin:0px; height:100%; background-color:#E9E9E9; } .infoBoxPad{ backgr
html,body{
padding:0px;
margin:0px;
height:100%;
background-color:#E9E9E9;
}
.infoBoxPad{
background-color:#DFDFDF;
width:990px;
height:19px;
border:solid thin #CCC;
margin:auto;
display:block;
}
#info1{
float:left;
width:125px;
height:16px;
line-height:15px;
border-right:thin solid #999;
padding-left:20px;
padding-right:20px;
display:block;
}
#info2{
float:left;
width:236px;
height:15px;
line-height:15px;
border-right:thin solid #999;
padding-left:20px;
padding-right:20px;
display:block;
}
#info2-link{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000;
margin-left:11px;
margin-right:11px;
float:left;
text-decoration:none;
}
#info2-link:hover{
text-decoration:underline;
color:#03F;
}
#info3{
float:left;
width:183px;
height:16px;
line-height:15px;
padding-left:20px;
padding-right:20px;
display:block;
}
#info3-link{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000;
margin-right:15px;
float:left;
text-decoration:none;
}
#info3-link:hover{
text-decoration:underline;
color:#03F;
}
#info-text-bold{
float:left;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:600;
padding-right:20px;
color:#000;
text-decoration:none;
}
#info-text-bold1{
float:left;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:600;
padding-right:20px;
color:#000;
text-decoration:none;
}
#info-text-bold1:hover{
text-decoration:underline;
color:#03F;
}
#info1-novice{
color:#09F;
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:600;
}
#info1-novice:hover{
text-decoration:underline;
}
.header{
background-color:#FFF;
width:990px;
height:80px;
position:relative;
display:block;
margin:auto;
}
#header-logo{
margin-left:10px;
margin-top:20px;
}
.nav-bar-wrapper{
background-image:url(nav-bar.gif);
background-color:#333;
width:990px;
height:40px;
margin:auto;
}
#nav-bar{
margin:0;
padding:0;
}
#nav-bar ul{
margin:0 0 0 20px;
padding:0;
}
#nav-bar li{
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
}
#nav-bar ul li a{
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:600;
text-decoration:none;
color:#FFF;
width:105px;
height:40px;
display:block;
line-height:35px;
border-right:1px solid #FFF;
}
#nav-bar ul li:hover{
background-color:#666;
height:35px;
}
.content{
width:990px;
height:1000px;
background-color:#FFF;
position:relative;
margin:auto;
}
#earn-point{
background-image:url(earnNow.gif);
width:300px;
height:60px;
}
#content-earnpoint{
background-color:#fffbe8;
width:278px;
height:100px;
border:solid thin #F90;
display:block;
padding:10px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
/**************************************************************************************************************Left Column*/
#leftcolumn{
background-color:#FFF;
width:300px;
margin:25px 10px 0px 10px;
float:left;
}
#guessing-game{
width:278px;
height:37px;
margin-top:25px;
}
#guessing-game-image{
float:left;
margin-right:5px;
}
#guessing-game-text{
float:left;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#guessing-game-text1{
color:#00C;
text-decoration:none;
font-weight:600;
}
#guessing-game-text1:hover{
text-decoration:underline;
}
/***********************************************************************************************************Right Column*/
#rightcolumn{
background-color:#FFF;
width:640px;
margin:25px 10px 0px 0px;
float:left;
}
#advert{
width:640px;
height:80px;
margin-bottom:10px;
}
#earn-reward{
background-color:#FC3;
width:640px;
height:16px;
padding:5px;
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
line-height:14px;
}
#total-reward-points{
background-image:url(total%20reward%20points-background.gif);
width:268px;
height:184px;
margin:20px 0px 0px 0px;
padding:9px 15px 0px 15px;
border:1px thin solid;
}
#image-counter-heading{
margin:5px 10px 10px 0px;
display:inline;
}
#total-update-counter{
background-color:#F00;
width:264px;
height:33px;
margin:0px;
padding:8px 0px 5px 0px;
}
#homecounter-heading-wrapper{
width:268px;
height:48px;
margin:17px 0px 0px 0px;
display:block;
}
#homecounter-heading{
float:left;
}
#online-shopping{
width:650px;
height:30px;
margin-bottom:5px;
padding-top:15px;
padding-left:10px;
display:block;
}
#onlineshopping-logo{
margin-top:5px;
}
和html在这里:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Smile City</title>
<link href="smilecity style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="infoBoxPad">
<!--info1-->
<div id="info1"><div id="info-text-bold">Jesso</div>
<img src="novice.gif" /> <a href="#" id="info1-novice">Novice</a></div>
<!--info2-->
<div id="info2">
<a href="#" id="info2-link">Points:118</a>
<a href="#" id="info2-link">Entries:29</a>
<a href="#" id="info2-link">Exp:108</a>
</div>
<!--info3-->
<div id="info3">
<a href="#" id="info3-link">Account Setting</a>
<a href="#" id="info-text-bold1">Sign Out</a>
</div>
</div><!--End infoBoxPad-->
<div class="header">
<img src="smilecity logo.gif" id="header-logo" />
</div><!--End header-->
<div class="nav-bar-wrapper">
<div id="nav-bar">
<ul class="nav-bar">
<li><a href="#">Home</a></li>
</ul>
<ul class="nav-bar">
<li><a href="#">Join</a></li>
</ul>
<ul class="nav-bar">
<li><a href="#">Earn</a></li>
</ul>
<ul class="nav-bar">
<li><a href="#">Redeem</a></li>
</ul>
<ul class="nav-bar">
<li><a href="#">Account</a></li>
</ul>
<ul class="nav-bar">
<li><a href="#">Help</a></li>
</ul>
</div><!--End nav-bar-->
</div><!--End nav-bar-wrapper-->
<div class="content">
<!--
-->
<div id="leftcolumn">
<div id="earn-point"></div>
<div id="content-earnpoint">
<strong>Hi Jesse, </strong>here's what you can do to earn points right now:
<div id="guessing-game">
<img src="gameYellowBg.gif" id="guessing-game-image" />
<a href="#" id="guessing-game-text1">Play the Guessing Game</a> and you could win up to 105,000 points.
</div>
</div><!--End Content-earnpoint-->
<div id="total-reward-points">
<img src="counterHeading1.gif" id="image-counter-heading" />
<div id="total-update-counter"></div>
<div id="homecounter-heading-wrapper">
<img src="homeCounterHeading2.gif" id="homecounter-heading" />
<img src="checkSml_sc.jpg" id="homecounter-heading" />
</div>
</div><!--End Total reward points-->
</div><!--End Left column-->
<div id="rightcolumn">
<div id="advert"><img src="ads.jpg" /></div>
<div id="earn-reward">
<strong>Earn Rewards</strong>
</div>
<div id="online-shopping">
<img src="onlineShoppingHome.gif" id="onlineshopping-logo" />
</div><!--End Online-shopping-->
</div><!--End Right Column-->
</div><!--End Content-->
</body>
</html>
微笑之城
杰索
嗨,杰西,现在你可以做些什么来赢取积分:
你最多可以赢得105000分。
赚取奖励
我想我已经把这个css样式表搞得一团糟了,因为我使用了大量的ID。
请告诉我何时/如何使用ID和类?
提前谢谢
编辑:这张照片怎么样?这就是您定义何时使用ID和类的方式吗?
我倾向于使用ID进行定位,或者在需要通过javascript选择特定元素的情况下使用ID。类更适合于将样式应用于您将反复重用的对象 在您的情况下,标题和导航应该是一个ID。还请确保不要将类命名为与ID相同的名称,如导航栏中所示:
<div id="nav-bar">
<ul class="nav-bar">
ID指的是特定的元素,而CLASS指的是元素的类型
当你的CSS说
#searchBox{...}
您是说将有一个ID为“searchBox”的项目被调用,这就是您希望它的样式
<div id="searchBox">Search Box Content</div>
这意味着您将有多个实体,它们都属于“redBorder”类
Content1
内容2
内容3
而不是
#info1{
float:left;
width:125px;
height:16px;
line-height:15px;
border-right:thin solid #999;
padding-left:20px;
padding-right:20px;
display:block;
}
#info2{
float:left;
width:236px;
height:15px;
line-height:15px;
border-right:thin solid #999;
padding-left:20px;
padding-right:20px;
display:block;
}
<div id="info1">...</div>
<div id="info2">...</div>
#info1{
浮动:左;
宽度:125px;
高度:16px;
线高:15px;
右边框:薄实线#999;
左侧填充:20px;
右边填充:20px;
显示:块;
}
#信息2{
浮动:左;
宽度:236px;
高度:15px;
线高:15px;
右边框:薄实线#999;
左侧填充:20px;
右边填充:20px;
显示:块;
}
...
...
试一试
.info{
浮动:左;
线高:15px;
右边框:薄实线#999;
左侧填充:20px;
右边填充:20px;
显示:块;
}
#信息1{
宽度:125px;
高度:16px;
}
#信息2{
宽度:236px;
高度:15px;
}
...
...
ID应该始终是唯一的,类不需要是唯一的。就这么简单。其他的都是偏好
话虽如此,我认为尽可能多地使用儿童选择器看起来更整洁。因此,不要使用
.info2 link
而是使用#info2 a
。这样,您就不需要向所有内容添加类。您不应该有多个ID。基本上,当有疑问时,只需使用类。ID适用于需要访问的特定元素。所以它就像一个没有html的元素的父类型。至少我是这么做的。我的理念是:少用id,多用类
我的意思是,只给需要它们的元素id:表单元素、主截面元素、唯一项
至于类,我尝试提供尽可能多的有用的描述性类。关键是要确保它们的一致性和语义
如果你的id或类中需要数字,那么你可能做错了。不要为列表中的每个列表项添加标签:
<ul>
<li id="item-1"></li>
<li id="item-2"></li>
...
</ul>
...
只需为列表本身添加标签:
<ul id="special-list">
<li></li>
<li></li>
...
</ul>
...
由于您可以使用列表id(
#特殊列表
)然后是:nth-child()
,或li+li…
,访问列表中的任何项目,因此我认为类是框架,id是最后的润色。类可以一次又一次地循环使用,但id只能使用一次(我认为大多数浏览器允许您多次使用它们,这不是很有帮助)。我主要使用类来组织我的元素:
.red
{
color: rgb(255, 0, 0);
}
.underline
{
text-decoration: underline;
}
#floatRight
{
float: right;
clear: both;
padding: 30px;
}
#redBorder
{
border: 2px solid rgb(255, 0, 0);
}
正如预期的那样,这将是有效的CSS。最酷的是,您可以在一个元素中多次使用类,但id是一次性的:
<span id="floatRight" class="red underline">Hello!</span>
你好!
这将产生一个带下划线并向右浮动的红色文本块
<span id="floatRight redBorder" class="red underline">Hello!</span>
你好!
这不应该形成红色边框,因为id对于单个元素是唯一的(JavaScript使用它来查找元素)
身份证就像车牌:它们能识别某些汽车。让人们在多辆车上使用相同的车牌是没有用的,所以身份证也是一样的。你使用它们是独一无二的
我不确定这是否可以解释…类:由于共同的属性、特征、品质或特征而被视为组成一个群体的一些人或事物;善良 身份证:身份证 类=要设置样式的多个实例 id=要设置样式的唯一实例(每个文档一次)。请注意,id更快(具有渲染功能)。只要ID是具有唯一样式的唯一元素,就使用它。如果您想在其他地方应用完全相同的样式,请将其设置为类,以便只需加载一次
ID是唯一的,因为“类”一词适用于该词的每个定义中的一组事物,所以使用它。这是CSS中可重复的模式。ID标识了一个独特的对象,它不会出现在页面上的任何其他地方,而作为一个类,它只是一个你可以贴在任何东西上的东西。你对redBorder的使用让我在语义上畏缩。类不应指定样式。。。(当然也有少数例外)我很想听听您关于one.HTML是一种语义标记语言的基本原理。任何人(了解HTML)都应该能够阅读标记并理解con
.red
{
color: rgb(255, 0, 0);
}
.underline
{
text-decoration: underline;
}
#floatRight
{
float: right;
clear: both;
padding: 30px;
}
#redBorder
{
border: 2px solid rgb(255, 0, 0);
}
<span id="floatRight" class="red underline">Hello!</span>
<span id="floatRight redBorder" class="red underline">Hello!</span>