`
fsk215
  • 浏览: 40558 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ID、CLASS、STYLE区别

    博客分类:
  • CSS
阅读更多
ID、CLASS、STYLE区别 (
解释:                
1.<DIV align=名称
作用:水平对齐方式
名称:center,left,right,justify
分别表示 居中,左对齐,右对齐,两端对齐

2.<DIV style=CSS语句
作用:设置样式
CSS语句,比如:
<DIV style="border:1px solid #F4BF20;padding:5px 0px 5px 0px ;margin-bottom:12px;"></div>
3.<DIV id=名称
作用:赋予ID值
名称:这名称可以自己定,比如myDiv,然后通过document.getElementByIdx("myDiv")可以获得这个DIV层对象,从而对它进行动态操作.
另外,如果这个id名称在CSS中被定义的话,这个DIV层将会套用该CSS样式,比如CSS中有这样的定义:
<style type="css/text">
#myDiv {float:left;margin-left:10px;background:#FFFFFF;}
</style>

4.<DIV class=名称
作用:套用CSS样式
这里的名称一般在CSS中有定义,否则没有意义.
比如<div class=div1>则在CSS中有div1所对应的样式:
<style type="css/text">
.div1 {margin:13px 0 7px 0;height:1px;}

</style>
---------------------
3,4的区别是:
<DIV id=
<DIV class=
通过id可以较好地获取DIV层,以便对它进行操作,可以在定议的ID设置CSS
通过CSS可以套用CSS样式,CSS样式不仅在网页中应用,在其它文件中也有用到,比如XML方面.
在CSS中定义为:
<style type="css/text">
#idName {}
.className {}
</style>
----------------
区别
<DIV align=
<DIV style=
<div align="center">
相当于<div style="text-align: center;">
也就是说align="center"只是HTML里的标记,
通过CSS的样式(style)完全可以实现,而且CSS样式的功能远不止"将区块对齐"。  
优先级实验:
<style>
p{font-size:20pt}
#ss{font-size:30pt}
.sss{font-size:40pt}
</style>
<p id="ss" class="sss"   style="font-size:50">按时地方按时地方按时地方按时地方按时地方</p>
结果:
显示50PT大小的字,去掉style后显示30PT字,无论是调整p,#ss,.sss的次序还是改变id,class属性的次序,结果都一样
结论:
优先级次序:style>#ss>.sss>p
 
用法区别:
A1:二者主要的区别在哪里呢?
id你只能用来定义单一元素,定义二个以后。页面不会出现什么问题,但是W3检测的时候认为你页面不符合标准;class是类,同一个class可以定义多个元素。就页面效果而言,两个东西的视觉效果几乎无差别。

A2:id 选择符为什么要少用,它有有什么局限性?
单一使用的样式用id,需要程序、js动态控制的样式用id,id在页面只能使用一次!提供少用id,因为id可能和页面嵌的程序冲突(比如名称相同等)!

A3:我该在什么时候使用ID,什么时候使用class?
单一的元素,或需要程序、JS控制的东西,需要用id定义;重复使用的元素、类别,用class定义。
分享到:
评论

相关推荐

    Javascript获取标签ID改变style属性的代码

    在探讨如何使用JavaScript获取标签ID并改变其style属性之前,我们需要了解几个关键的Web开发知识点,包括HTML元素的ID属性、JavaScript中的DOM操作以及CSS样式的应用方式。以下将详细阐述这些概念,并结合给定的代码...

    css id,class命名与seo

    在网页设计中,CSS(Cascading Style Sheets)用于控制页面布局和视觉表现。SEO(Search Engine Optimization)是搜索引擎优化的缩写,旨在提高网站在搜索引擎中的可见性和排名。将CSS与SEO结合,通过合理的ID和...

    学习vue.js中class与style绑定

    在Vue.js中,`class`和`style`的绑定是数据绑定的一种常见需求,它允许我们根据组件的状态动态地改变元素的样式。Vue.js提供了`v-bind`指令来实现这一功能,大大增强了模板的灵活性。 首先,让我们看下`v-bind:...

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

    在CSS中,class和id是定义样式时经常使用的两种选择器,它们在网页中扮演着不同的角色,掌握它们的使用方式和区别对于前端开发者来说至关重要。 class,中文意为“类”,在CSS中作为选择器时,用于选取具有相同...

    css中style和class的加载顺序示例介绍

    在CSS(层叠样式表)中,`style`和`class`都是用于定义元素的样式,但它们在加载和应用顺序上有所不同。本示例主要探讨`style`内联样式和`class`类选择器在HTML元素上的优先级和加载顺序。 首先,让我们了解一下...

    JavaScript更改class和id的方法

    而class和id的更改则像是沙漠里一片平静的绿洲,浏览器们在这里和谐相处。思考这个例子: p { color: #000000; /* black */ } p.emphasis { color: #cc0000; /* red */ } &lt;p id=”test”&gt;Test&lt;/p&gt; 最初,该段落

    前端开源库-style-scope

    &lt;div class="my-component style-scope--unique-id"&gt; &lt;!-- ... --&gt; ``` 在这里,`style-scope--unique-id`就是组件的样式作用域标识符,用于将对应的CSS规则绑定到这个组件上,这样样式就不会影响到其他组件。 ...

    html css中id和class的区别比较

    #### 四、ID与Class的主要区别 1. **唯一性与重复性**: - **ID**:在整个文档中必须唯一。 - **Class**:可以在同一个文档中多次使用。 2. **使用场景**: - **ID**:主要用于布局和页面结构的定义,如定义一个...

    JavaScript操作class和style样式代码详解

    在深入了解JavaScript操作class和style样式之前,我们需要先了解class和style在HTML文档中表示什么以及如何使用JavaScript进行操作。 ### HTML中class和style的基本概念 在HTML中,class是HTML元素的一个属性,...

    vue绑定class与行间样式style详解

    在Vue中,动态绑定class和style是实现组件样式灵活控制的关键。下面将详细讲解Vue中如何绑定class和行间样式style。 ### 一、绑定class属性的方式 1. **通过数组的方式绑定多个class** 在Vue中,可以使用数组形式...

    vue计算属性+vue中class与style绑定(推荐)

    本篇文章将深入探讨Vue计算属性以及如何在模板中绑定`class`和`style`。 ### Vue 计算属性 计算属性是Vue中用于处理复杂逻辑的一种机制。当在模板中放入大量逻辑时,会导致模板过于臃肿,不易于理解和维护。为了...

    js 改变背景(backgroundImage)和 类名称(class)

    在这个例子中,当用户点击id为"myButton"的按钮时,id为"targetElement"的元素的背景图像会变为"new-image.jpg",同时类名"activeClass"会根据当前状态进行切换。 总结来说,JavaScript提供了强大的能力来动态地...

    详解vue.js之绑定class和style的示例代码

    yleBind', data: { theColor: 'blue', theSize: 16 }, methods: { bigger: function() {...通过以上示例,你将能够熟练掌握在Vue.js中如何使用v-bind指令来实现class和style的动态绑定,从而更好地控制组件的视觉表现。

    动态添加style元素

    例如,如果有一个id为`myContainer`的元素,可以使用`document.getElementById('myContainer').appendChild(styleElement)`。 4. 为了使动态添加的样式立即生效,可能需要调用`document.body.style.zoom = 0;`或者`...

    DHTMLET - Cascading Style Sheet 2.0 中文手册

    3. **类选择器**:使用`.class名`,匹配所有具有指定类的元素。 4. **后代选择器**:使用空格分隔,如`div p`,匹配所有在`div`元素内的`p`元素。 5. **子元素选择器**:使用`&gt;`,如`div &gt; p`,匹配`div`的直接子...

    老生常谈jquery id选择器和class选择器的区别

    实例如下: &lt;!...&lt;...link href="style.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css"/&gt; [removed][removed] &lt;script type="text/javascript

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

    由于它们的唯一性,`ID`选择器的优先级高于其他类型的选择器,这意味着如果一个元素同时被`ID`和`class`选择器定义,`ID`的样式将会覆盖`class`的样式。 相反,`class` 是一种可以重复使用的类别,同一个`class`...

Global site tag (gtag.js) - Google Analytics