`

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样式风格定义

    系统默认提供的CSS样式风格定义 说 明:在《动易网站管理系统》中,CSS样式风格定义是可以自己自由定义的,也说是说您可以自由添加N多个自定义的风格,然后在各频道的版式模板中调用就行了。下面提供的是系统默认...

    SharePoint 的CSS样式

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

    div+css tab样式

    2. 设置CSS样式: ```css .tab-btn:not(.active) { display: none; } .tab-content:not(.active) { display: none; } .tab-btn.active { /* 添加激活状态的样式 */ } .tab-content.active { /* 显示激活...

    大家看了就明白了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样式表对下面的内容进行的布局设计.zip

    - **选择器**:如类选择器(`.class`)、ID选择器(#id)、元素选择器(`div`)等,用来选取需要样式的`<div>`元素。 - **属性**:如`display`(决定元素如何显示)、`width`和`height`(设定宽高)、`margin`和`padding...

    经典的CSS样式

    经典CSS样式往往能精确控制盒模型,确保元素间的间距和布局美观。 2. **响应式设计**:随着移动设备的普及,响应式设计成为经典CSS的重要部分。通过媒体查询@media,可以为不同屏幕尺寸和设备提供适应性的布局。 3...

    Trashycss没有class的一次性CSS库

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

    DW CS6 CSS样式汉化文件补丁

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

    Css样式的简单应用分析

    除了基本的元素选择器,还有类选择器(`.class`)、ID选择器(`#id`)、属性选择器(`[attribute]`)等。更高级的选择器,如伪类(`:hover`、`:active`、`:focus`等)和伪元素(`::before`、`::after`等),可以帮助...

    CSS常用Class名

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

    css样式

    这些工具通常通过修改系统设置或利用API来实现,与CSS样式的关系在于,它们都关注于用户界面的外观和交互。 总的来说,CSS样式是构建现代网页和应用程序视觉呈现的关键技术,涉及众多细节和高级特性。深入理解和...

    css样式表的一些例子

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

    CSS样式表单美化系列

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

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

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

    css样式优先选择器

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

    CSS样式生成器

    **CSS样式生成器详解** CSS(Cascading Style Sheets)是一种用于定义网页中元素外观、布局和结构的语言。CSS样式生成器是Web开发者用来快速创建和编辑CSS规则的工具,帮助非专业人士或初学者简化CSS代码的编写过程...

    course_css样式_

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

Global site tag (gtag.js) - Google Analytics