`

CSS中ID与CLASS的区别

阅读更多

id:用来定义页面中大的样式,如栏目划分,顶部,正文,底部等;用#top的形式来定义

class:用来定义一些比较细节的样式,如具体的一个菜单,一行文字等,用.text的形式来定义

定义HTML中的标签,如ul,img,p等时,直接写:img{}

 

以上摘自网络:

 

#main和.main有什么区别:


#main 定义的是ID为"main"这个元素的样式
.main 的意思是新建一个名为"main"的样式
#main 只能定义ID为"main"这个元素的样式
.main 一但定义以后,可以让其他的元素来调用,方法为class="main"

用#定义CSS样式,在调用时必须用ID,用.定义CSS样式,在调用时必须用CLASS。用
#定义的样式,一般都是定义结构框架,一些大的容器,且在同一个页面只能出现一
次;而且.定义的样式,一般都是起修饰作用或多次重复的样式。还一点就是在同一
个层里同时出现ID和CLASS样式,ID更优先于CLASS。

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

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

 

 

class是样式组,用.style定义,class="style":
.style定义样式组,可以被反复调用,就是说你一个页面里,可以有多个元素用同一个style;

ID是固定标签,用#style1定义,ID="style1"
#style1定义固定标签,用于定义一个特定的元素,每个页面只能出现一次,不能反复调用。虽然现在有的网页多次调用#style1,但那是不规范的,在某些浏览器中也会无法解读造成页面出错。

 

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

分享到:
评论

相关推荐

    CSS中CLASS和ID的区别.doc

    首先,从语法上看,`id`和`class`的选择器在CSS文件中以不同的符号表示。`id`选择器使用井号`#`作为前缀,如`#exampleId`,而`class`选择器则使用点`.`作为前缀,如`.exampleClass`。 其次,`id`和`class`在页面中...

    div+css中Class与ID的区别

    "div+css中Class与ID的区别" 在 HTML 和 CSS 中,Class 和 ID 是两个常用的选择器,用于选择和样式化网页元素。然而,这两个选择器有着根本的区别,了解它们的差异非常重要。 首先,让我们从 Class 开始。Class 是...

    CSS网页布局ID和Class类的命名介绍

    本篇文章主要讲解了CSS网页布局中的ID和Class类的命名规则和使用原则。对于开发者来说,命名规则是一项非常重要的技能,因为它可以影响到整个网站的可读性、可维护性和可扩展性。 一、类名命名规则 类名命名规则...

    html css中id和class的区别比较

    首先,`id` 和 `class` 在 CSS 样式表中的表示方式不同。`id` 选择器前缀是 `#` 符号,例如 `#header`,而 `class` 选择器前缀是 `.` 符号,如 `.main-content`。这种差异使得开发者能快速区分两者,便于编写和阅读...

    css id,class命名与seo

    将CSS与SEO结合,通过合理的ID和Class命名,可以增强页面的可读性,帮助搜索引擎更好地理解网页内容,从而提升SEO效果。下面我们将详细讨论CSS ID和Class的命名策略以及其与SEO的关系。 1. CSS ID命名: - `wrap`...

    详细了解CSS中的class与id区别及用法

    &lt;title&gt;DIVCSS中CLASS与ID实例 .css5 { width: 100px; height: 100px; border: 1px solid #000; float: left; } .css5_class { background: #FFF; } /* 背景白色 */ #css5_id { background: #FF0000; } /* ...

    CSS常用Class名

    整理了一些CS中常用Class名,包括class、id 、css文件名的常用命名规则

    大家看了就明白了css样式中类class与标识id选择符的区别小结

    Css 样式中类 class 与标识 id 选择符的区别小结 Css 样式中类 class 与标识 id 选择符是两个基本的选择符,它们都是用来在 HTML 元素中应用样式的,但是它们之间存在着一些关键的区别。 类选择符(Class) 类选择...

    css中id和class的定义格式、使用技巧及选择

    而以class=bbb形式定义的,在css中应该这样设置其样式:.bbb{ 样式列表 }(注意前面有一个点) ID与CLASS的使用技巧 1. 子级的命名的包含父命名中的部分为开头。这样方便在编写CSS时明确层次关系。2. CLASS中的子级...

    HTML、CSS里面关于 id、class、name 属性的区别和用法.docx

    HTML、CSS中关于id、class和name属性是网页开发中的基础概念,它们各自有着不同的用途和应用...在CSS中,class和id用于定位和应用样式,而在JavaScript和服务器交互中,name和id则扮演着传递数据和标识元素的重要角色。

    HTML、CSS里面关于 id、class、name 属性的区别和用法.pdf

    HTML、CSS 中的 id、class 和 name 属性都是用来标识和区分网页元素的重要特性,但它们各有不同的用途和应用场景。 1. **id 属性** - **唯一性**:id 是文档中每个元素的唯一标识符,必须在整个文档内保持唯一,不...

    Trashycss没有class的一次性CSS库

    而"Trashy.css"是一个独特的一次性CSS库,正如其标题“Trashycss没有class的一次性CSS库”所示,它与传统的CSS库有所不同,它不依赖于类选择器(`class`)。这个库是由JavaScript开发人员创建的,主要针对那些需要...

    JQUERY选择器 id选择器<br> 2)  $('.class')  css选择器,class类名<br>

    2) $('.class') css选择器,class类名 3) $('element') 标签选择器,例如p,h1,div 4) $('*') 全选择器,可选择所有的html标签(影响范围较大甚用) 5) $('sele1,sele2') 用‘,'逗号隔开可以选择...

    Class与ID区别 margin和padding区别 CSS学习笔记

    CSS学习笔记 - Class与ID区别、margin和padding区别 在CSS学习中,有两个非常重要的概念:Class与ID和margin与padding。虽然它们都是CSS中的基本概念,但是许多初学者却不知道它们的区别和使用场景。 Class与ID...

    CSS2.0 中文手册

    1. **选择器**:CSS2.0中的选择器包括标签选择器、类选择器、ID选择器、属性选择器和伪类等。例如,`p`用于选取所有段落,`.class`用于选取具有特定类的元素,`#id`用于选取具有特定ID的元素。此外,组合选择器如`E ...

    css中文手册 css样式表

    **CSS中文手册与CSS样式表** CSS(Cascading Style Sheets)是一种用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档呈现的样式语言。它控制着网页的布局,让网页的设计更加丰富多样,使内容和表现分离,...

    CSS网页布局中ID与class的理解

    总之,理解和熟练运用`ID`与`class`是CSS布局中的关键技能。`ID`提供了独一无二的标识,适合用于定义特定的、不重复的样式;而`class`则支持样式重用,方便构建模块化的网页布局。通过灵活运用这两种选择器,开发者...

Global site tag (gtag.js) - Google Analytics