首页 / 知识

关于CSS:Div的课程与ID

2023-04-16 15:44:00

关于CSS:Div的课程与ID

Div's class vs id

当使用divs时,什么时候最好使用class vs id

最好对HTML中的字体变体或元素使用class吗? 然后将id用于结构/容器?

这一直是我一直不确定的事情,任何帮助都会很棒。


使用id标识页面上将只有一个实例的元素。例如,如果您将单个导航栏放置在特定位置,请使用id="navigation"

使用class对所有以某种特定方式表现的元素进行分组。例如,如果您希望公司名称在正文中以粗体显示,则可以使用


要理解的最重要的事情是ID必须是唯一的:页面中仅应存在一个具有给定ID的元素。因此,如果您要引用特定的页面元素,则通常是最好的用法。

如果您有多个在某种程度上相似的元素,则应使用elements类进行标识。

一个非常有用的,令人惊讶的鲜为人知的事实是,您实际上可以通过在类名称之间放置空格来将多个类应用于单个元素。因此,如果您发布的问题是由当前登录的用户写的,则可以使用进行标识。


想想大学。

1
2
<student id="JonathanSampson" class="Biology" />
<student id="MarySmith" class="Biology" />

学生证是不同的。校园中没有两个学生拥有相同的学生证。但是,许多学生可以并且将彼此共享至少一个班级。

可以将多个学生置于一个班级标题下(生物学101)。但是,将多个学生置于一个学生证下是绝对不可接受的。

通过学校对讲系统发出规则时,可以将规则传递给班级:

"Would the Biology class please wear Red Shirts tomorrow?"

1
2
3
.BiologyClass {
  shirt-color:red;
}

或者,您可以通过调用特定学生的唯一ID为其指定规则:

"Would Jonathan Sampson please wear a Green Shirt tomorrow?"

1
2
3
#JonathanSampson {
  shirt-color:green;
}

ID必须是唯一的,但在CSS中,在确定要遵循的两条冲突指令中的哪一条时,它们也具有优先权。

1
Text
1
2
#section {font-color:#fff}
.section {font-color:#000}

文字为白色。


使用ID的另一个好处是可以将其定位到定位标记中:

1
<h2 id="CurrentSale">Product I'm selling

将允许您在其他地方直接链接到页面上的该位置:

1
the Current Sale

这样做的常见用法是为博客上的每个标题提供带时间戳的ID(例如id =" date20080408"),该ID允许您专门针对博客页面的该部分。

同样重要的是要记住,id有更多受限制的命名规则,主要是它们不能以数字开头。看到类似的SO问题:什么是html中id属性的有效值


当您想将相似的样式应用于许多不同的div或元素时,这些类非常有用。当您要寻址用于格式化或使用javascript更新的特定元素时,id是很好的选择。


HTML标准本身回答了您的问题:

没有两个对象可以具有相同的ID,但是任意数量的对象可以具有相同的类。

因此,如果您只想将某些CSS样式属性应用于单个DIV,则应为ID。如果要将某些样式属性应用于多个DIV,则必须为一个类。

请注意,您可以将两者混合使用。您可以使两个DIV属于同一类,但给它们提供不同的ID。然后,您可以将通用样式应用于这两个类,并将特定于两者的样式应用于它们的ID。浏览器将首先应用类样式,然后应用ID样式,因此ID样式可以覆盖以前设置的任何类。


请记住其他一些事项:

  • 使用ASP.Net时,您无法完全控制元素的ID,因此您几乎必须使用类(请注意,这比过去更不正确了)。
  • 当您可以提供帮助时,最好两者都不用。相反,请指定元素类型及其父类型。例如,可以通过以下方式挑选出包含在div中的navarea类的无序列表:

    1
    div.NavArea ul { /* styles go here */ }

现在,您可以使用一个类应用程序为整个导航区的大部分设置逻辑分区。


ID应该是唯一的。类应该共享。因此,如果您将某些CSS格式应用于多个DIV,请使用一个类。如果只是一个(作为要求,不是偶然),请使用ID。


我想我们都知道类是什么,但是如果您将ID视为标识符而不是样式工具,那么您不会出错。尝试定位某物时,您需要一个标识符;如果您有多个具有相同ID的商品,您将无法再标识它...

在编写用于ID和CLASS的CSS时,尽可能使用最少的CSS类是有益的,并尽量不要过多使用ID,直到您必须这样做,否则,您将不断地致力于编写更强大的声明和很快就会有一个充满!important的css文件。


在哪里使用ID与类

两者之间的简单区别是,虽然一个类可以在页面上重复使用,但是一个ID在每个页面上只能使用一次。因此,最好在div元素上使用一个ID来标记页面上的主要内容,因为只有一个主要内容部分。相反,您必须使用一个类来在表上设置交替的行颜色,因为根据定义,它们将被多次使用。

ID是非常强大的工具。具有ID的元素可以是一段以某种方式操纵元素或其内容的JavaScript的目标。 ID属性可以用作内部链接的目标,用名称属性代替锚标记。最后,如果您使ID清晰且合乎逻辑,则它们可以充当文档中的一种"自我文档"。例如,如果块的开始标记具有ID,例如" main"," header"," footer",则不必在块之前添加注释来说明代码块将包含主要内容。"等


同样,您可以通过JavaScript和DOM命令(例如,GetElementById)来操纵指定ID的元素。

总的来说,我发现为所有主要结构div赋予一个ID很有用-即使最初我没有适用的任何特定CSS规则,但将来我仍具有这种功能。另一方面,对于那些可以多次使用的元素,我使用了类-例如,一个包含图像和标题的div-我可能有几个类,每个类的样式值略有不同。

但是请记住,在所有条件都相同的情况下,id规范中的样式规则优先于类规范中的样式规则。


如果您使用的是.Net Web控件,则有时只使用类会容易得多,因为.Net在运行时(使用runat =" server"的情况下)会更改Web contol div id。

使用类可让您轻松地为字体,间距,边框等使用单独的类来构建样式。我通常使用多个文件来存储单独的类型的格式信息,例如basic_styles.css用于简单的站点范围格式,ie6_styles.css用于浏览器特定的样式(在本例中为IE6)等,而template_1.css用于布局信息。

无论选择哪种方式,都应尽量保持一致以帮助维护。


我的选择余地是当CSS样式以相同方式应用于多个div时,使用类标识。如果该结构或容器实际上仅应用一次,或者可以从默认值继承其样式,那么我认为没有理由使用类标识。

因此,这取决于您的div是否为以下之一:例如,代表stackoverflow网站上答案问题的div。在这里,您将要定义" Answer"类的样式,并将其应用于每个" Answer" div。


对我来说:如果使用类时,我将在CSS中执行某些操作或为元素添加名称,并且可以在页面中的所有元素中使用。

所以我使用ID作为唯一元素

例如:

1
 

CSS:

1
2
3
4
.clear {clear:both;}
.black {color:black;}
.bold {font-weight:bold;}
.radius {border-radius:2px;}

除了id和class非常适合在单个项目上设置样式与类似的项目集相比,还需要记住另一个警告。在某种程度上,它也取决于语言。在ASP.Net中,可以放入Div并具有ID。但是,如果您使用面板而不是Div,则会丢失ID。


我想说,每当您认为要在页面上重复样式元素时,最好使用一个类。 HeaderImage,FooterBar之类的项目可以很好地用作ID,因为您只需使用一次即可,并且可以防止意外复制,因为有些编辑器会在ID重复时提醒您。

如果您要动态生成div元素,并希望将特定项目定位为格式,我也会看到它的帮助。您可以在生成时为其提供正确的ID,而不是先搜索元素然后更新其类。


id属性用于元素在文档中唯一地标识它们,而class属性可以具有由同一文档中的许多元素共享的相同值。

因此,实际上,如果每个文档中只有一个要使用样式的元素(例如,#title),请使用id。如果可以使用多个元素,请使用class。


为要在页面上进行特定操作的唯一元素使用id,为可以在页面其他部分重用的元素使用class。


id应该是页面上元素的唯一标识符,这有助于对其进行操作。应该在一个以上元素中使用的任何外部CSS定义的样式都应放在class属性上

1
 

如果要在页面上的多个位置使用该样式,请使用一个类。如果您想对单个对象进行大量自定义,例如在页面侧面说一个导航栏,则最好使用id,因为您在其他任何地方都不太可能需要这种样式组合。


类是指您可能在页面上多次使用的样式,ID是定义元素特殊情况的唯一标识符。标准规定,ID在页面中只能使用一次。因此,当您要在页面中的多个元素上使用一种样式时,应该使用类;而只想使用一次时,应该使用一个ID。

另一件事是,对于类,您可以使用带有ID的多个值(通过在每个类之间放置空格,例如" class ='blagh blah22 blah'),只能对每个元素使用ID。

为ID定义的样式将覆盖为类定义的样式,因此在中,#uniquething的样式设置将覆盖.what的样式,无论两者是否冲突。

因此,您可能应该将ID用于标题,"边栏"之类的东西,等等-每页仅出现一次的东西。


元素字体结构用于

最新内容

相关内容

猜你喜欢