Maison > interface Web > tutoriel CSS > Quelle est la différence entre les paramètres de style d'identifiant et de classe en CSS ?

Quelle est la différence entre les paramètres de style d'identifiant et de classe en CSS ?

伊谢尔伦
Libérer: 2017-07-19 11:19:41
original
2045 Les gens l'ont consulté

一个Class是用来根据用户定义的标准对一个或多个元素进行定义的。打个比较恰当的比方就是剧本:一个Class可以定义剧本中每个人物的故事线,你可以通过CSS,JavaScript等来使用这个类。因此你可以在一个页面上使用class="Frodo" ,class="Gandalf", class="Aragorn"来区分不同的故事线。还有一点非常重要的是你可以在一个文档中使用任意次数的Class。

至于 ID,通常用于定义页面上一个仅出现一次的标记。在对页面排版进行结构化布局时(比如说通常一个页面都是由一个页眉,一个报头< masthead>,一个内容区域和一个页脚等组成),一般使用ID比较理想,因为一个ID在一个文档中只能被使用一次。而这些元素在同一页面中很少会出现大于一次的情况。

归纳成一句话就是:Class可以反复使用而ID在一个页面中仅能被使用一次。有可能在很大部分浏览器中反复使用同一个ID不会出现问题,但在标准上这绝对是错误的使用,而且很可能导致某些浏览器的现实问题。

在实际应用的时候,Class可能对文字的排版等比较有用,而ID则对宏观布局和设计放置各种元素较有用

class是设置标签的类,id是设置标签的标识,class属性用于指定元素属于何种样式的类。

如样式表可以加入.content1 { color: red; background: #ff80c0 } 使用方法:class="content1"

id属性用于定义一个元素的独特的样式。如一个CSS规则#content2 { font-size: larger } 使用方法:id="content2"

id是一个标签,用于区分不同的结构和内容,就象你的名字,

如果一个屋子有2个人同名,就会出现混淆;

class是一个样式,可以套在任何结构和内容上,就象一件衣服;

概念上说就是不一样的:

id是先找到结构/内容,再给它定义样式;class是先定义好一种样式,再套给多个结构/内容。

id是元素的名称,可以供js或其它脚本程序来访问该元素对象,而class是该元素的css类名。

id的值在整个当前网页中应该是唯一的,即某一个元素定义了id="aaa",那么这个网页中其它的元素的id就不能定义成aaa,而class则可以。

另外,形如id="aaa"定义的,在css中是这样设置其样式的:

#aaa{ 样式列表 }

而以class="bbb"形式定义的,在css中应该这样设置其样式:

.bbb{ 样式列表 }

一.web标准中是不容许重复ID的,比如 div id="aa" 不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他.

二.属性的优先级问题

ID 的优先级要高于class,看上面的例子

三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单.

A1:二者主要的区别在哪里呢?

  id你只能用来定义单一元素,定义二个以后。页面不会出现什么问题,但是W3检测的时候认为你页面不符合标准;class是类,同一个class可以定义多个元素。就页面效果而言,两个东西的视觉效果几乎无差别。

A2:id 选择符为什么要少用,它有有什么局限性?

  单一使用的样式用id,需要程序、js动态控制的样式用id,id在页面只能使用一次!提供少用id,因为id可能和页面嵌的程序冲突(比如名称相同等)!

A3:我该在什么时候使用ID,什么时候使用class?

  单一的元素,或需要程序、JS控制的东西,需要用id定义;重复使用的元素、类别,用class定义。

Class 在程序中称“类”,同时在CSS中也书面语也叫“类”。在CSS样式中以小写的“点”及“.”来命名如: .css5{属性:属性值;} ,而在html页面里则以class="css5" 来选择调用,命名好的CSS又叫css选择器。如: .css5{属性:属性值;} 选择器在html调用为“

我是class例子
"Si vous ne savez pas comment citer CSS, vous pouvez en apprendre davantage sur les guillemets CSS.

Et la classe (class) peut appeler la même classe un nombre incalculable de fois dans la même page HTML. Dans cet exemple, vous pouvez Vous pouvez appeler et sélectionner "css5" d'innombrables fois dans la page Web correspondante. Cela montre également que la classe est généralement utilisée pour appeler des attributs préconfigurés en CSS. Par exemple, il existe un attribut préconfiguré comme ".class01{attribut : valeur d'attribut" ici. ;}", afin que vous n'ayez pas besoin de configurer à plusieurs reprises un attribut "classe" dans une page Web, tout comme pour appeler une fonction. Au lieu de cela, il vous suffit d'écrire une sélection de classe et vous pouvez appeler la. sélection n'importe où dans la même page avec la même classe CLASS.

ID représente l'identité de la balise, et l'identifiant est utilisé dans les scripts JS Lorsque JS souhaite modifier les attributs d'une balise, JS utilisera l'identifiant. name comme identifiant unique de la balise. En d'autres termes, l'ID est simplement l'identifiant de l'élément de page, qui peut être référencé par d'autres scripts d'éléments. S'il y a deux ID dans votre page, l'effet JS aura une erreur logique. et vous ne saurez pas quel ID utiliser pour modifier son attribut de balise en CSS. L'ID n'est pas nécessairement défini pour JS, mais le même ID ne peut apparaître qu'une seule fois dans la page, et il est unique, même si nous pouvons simplement apprendre DIV+. Les passionnés de CSS appellent le même identifiant plusieurs fois dans une page, mais il n'apparaît toujours pas. La page prête à confusion, mais pour le bien du W3C et de diverses normes, nous devons également suivre le caractère unique de l'identifiant dans une page pour éviter le navigateur. problèmes de compatibilité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal