`

css样式中点与井号对应class与id,两者间的区别

 
阅读更多
#对应id
点对应class
       不加对应html标签

Class与ID的区别

       一个Class是用来根据用户定义的标准对一个或多个元素进行定义的。打个比较恰当的比方就是剧本:一个Class可以定义剧本中每个人物的故事线,你可以通过CSS,Javascript等来使用这个类。因此你可以在一个页面上使用 class="Frodo" ,class="Gandalf",class="Aragorn"来区分不同的故事线。
       还有一点非常重要的是你可以在一个文档中使用任意次数的 Class。
       至于ID,通常用于定义页面上一个仅出现一次的标记。在对页面排版进行结构化布局时(比如说通常一个页面都是由一个页眉,一个报头,一个内容区域和一个页脚等组成),一般使用ID比较理想,因为一个ID在一个文档中只能被使用一次。而这些元素在同一页面中很少会出现大于一次的情况。
       归纳成一句话就是:Class可以反复使用而ID在一个页面中仅能被使用一次。有可能在很大部分浏览器中反复使用同一个ID不会出现问题,但在标准上这绝对是错误的使用,而且很可能导致某些浏览器的现实问题。
       在实际应用的时候,Class可能对文字的排版等比较有用,而ID则对宏观布局和设计放置各种元素较有用。


id是元素的名称,可以供js或其它脚本程序来访问该元素对象,而class是该元素的css类名。
id的值在整个当前网页中应该是唯一的,即某一个元素定义了id="aaa",那么这个网页中其它的元素的id就不能定义成aaa,而class则可以。

另外,形如id="aaa"定义的,在css中是这样设置其样式的:
#aaa{ 样式列表 }
而以class="bbb"形式定义的,在css中应该这样设置其样式:
.bbb{ 样式列表 }
(注意前面有一个点)


  
Margin与Padding的区别
  
       两者都是代替表格最重要的作用->分割块的好方法,区别在于Margin是不同的Tag间互相隔离的距离而Padding是同一元素中不同内容分割使用,这在表格中最看得清楚。尤其是当对一个区域加载了背景样式之后,Padding下的内容背景色会发生改变,而Margin则不会有所改变。
分享到:
评论

相关推荐

    CSS中CLASS和ID的区别.doc

    `id`选择器使用井号`#`作为前缀,如`#exampleId`,而`class`选择器则使用点`.`作为前缀,如`.exampleClass`。 其次,`id`和`class`在页面中的使用频率和唯一性有明显的差异。每个`id`在同一个HTML文档中只能被使用...

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

    ID通常用于JavaScript中的行为操作,而Class用于CSS样式的应用。 三、margin和padding的简写规则 在写CSS样式时,margin和padding的值可以简写,例如:margin: 20px 10px 5px 10px;可以简写为margin: 20px 10px 5...

    SharePoint 的CSS样式

    SharePoint,尤其是其2007版本(也称为MOSS 2007,即Microsoft Office SharePoint Server 2007),提供了丰富的CSS样式,使得开发者和管理员能够根据需求调整站点的外观和布局。 标题"SharePoint的CSS样式"指出了...

    EasyUI很全的CSS样式文件与图标

    在给定的资源中,"EasyUI 很全的 CSS 样式文件与图标" 涵盖了 EasyUI 所需的各种 CSS 样式和图标,方便开发者直接集成到项目中使用。 首先,EasyUI 的 CSS 样式文件是框架的核心部分,它们定义了各个组件的外观和...

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

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

    Css.rar_CSS simulink_class

    打开这个文件,我们可以看到一个具体的Simulink模型,其中可能包含了使用CSS样式的元素,展示了如何通过编写和应用CSS规则来定制Simulink的图形用户界面。 具体的操作步骤可能包括: 1. 创建或编辑Simulink模型。 2...

    CSS样式参考.rar

    这个名为“CSS样式参考.rar”的压缩包包含了一个名为“CSS参考.doc”的文档,很显然,它是为初学者或有经验的开发者提供的一份CSS样式指南。 **CSS基础** 1. **选择器**:CSS中的选择器用于选取我们想要样式的HTML...

    css生成控件与样式代码

    三、CSS样式控件 1. 布局控件:使用CSS可以创建各种布局,如流式布局、网格布局(CSS Grid)、Flexbox布局等,帮助开发者实现复杂的页面结构。 2. 控件样式:按钮、输入框、下拉菜单等表单元素可以通过CSS定制外观,...

    Trashycss没有class的一次性CSS库

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

    css样式表中文手册

    《CSS样式表中文手册》是一本详尽介绍CSS(Cascading Style Sheets)技术的参考资料,旨在帮助读者理解和掌握网页设计中的样式控制。CSS是一种用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的语言,...

    div+css中Class与ID的区别

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

    css样式表的一些例子

    本主题聚焦于"css样式表的一些例子",特别是与ASP(Active Server Pages)技术的结合应用。 标题中的"css样式表的一些例子"意味着我们将探讨CSS的实际应用,包括但不限于选择器的使用、属性设置、布局控制、盒模型...

    CSS样式表单美化系列

    在网页设计中,CSS(Cascading Style Sheets...以上就是CSS样式表单美化的一些核心知识点,通过这些技巧,我们可以打造出美观且易用的网页表单,提升用户体验。这个系列将深入讲解每个方面,帮助你掌握表单设计的艺术。

    div+css样式与布局实例

    - 通过类(class)或ID(id)属性,我们可以对`<div>`元素进行针对性的CSS样式设置。 2. **CSS基础** - CSS是层叠样式表,用于定义HTML或XML(包括如SVG、MathML等各种XML方言)文档的呈现。 - 基本语法包括选择...

    vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法

    本文将详细介绍如何在Vue项目中实现鼠标移入时添加一个class样式,而鼠标移出时则移除该样式(通常是添加或移除名为"active"的class),以及相关的实现方法和拓展知识。 首先,要在Vue组件中实现鼠标移入移出的...

    css样式优先选择器

    例如,在上述代码片段中,`.class1 p#id2 .class3`、`div .class2 span#id3`、`#id1 .class3`、`.class1 #id2 .class3`和`#id1 #id2`都指定了同一个元素的不同样式。为了确定哪个样式生效,我们需要计算每个选择器的...

    DW CS6 CSS样式汉化文件补丁

    在这个"DW CS6 CSS样式汉化文件补丁"中,包含的可能是一系列与CSS相关的中文语言资源文件,例如`.res`或`.xml`格式,这些文件存储了界面上的各种文本字符串。安装补丁时,用户通常需要将这些汉化文件覆盖到...

    CSS样式表帮助文档

    2. **选择器类型**:包括类选择器(.class)、ID选择器(#id)、元素选择器(element)、伪类(如:hover)和伪元素(如::before)。更高级的选择器有属性选择器、子选择器(>)、同胞选择器(~)和相邻兄弟选择器(+...

    course_css样式_

    "course_css样式_"这一主题,正是围绕CSS样式的学习与应用展开,旨在帮助我们深入理解并熟练掌握这一技术。 首先,我们要明确CSS的基本概念。CSS是一种样式表语言,用于描述HTML或XML(包括如SVG、MathML等各种XML...

    html css中id和class的区别比较

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

Global site tag (gtag.js) - Google Analytics