DIV中ID和class的使用有什么不同

刚入门的朋友可能会问,我什么时候使用id什么时候使用class,读完下文或许你就应该明白ID和class的区别。

class是设置标签的类

id是设置标签的标识

class属性用于指定元素属于何种样式的类。

如样式表可以加入

.title {

font-size: 14px;

font-weight: bold;

}

使用方法:class="title"

id属性用于定义一个元素的独特的样式。
 
        如一个CSS规则:

#container

{
        width: 1004px;
        margin: 0 auto;
        text-align: left;
        }

使用方法:id="container" ,id是一个标签,用于区分不同的结构和内容,就象你的名字,如果一个屋子有2个人同名,就会出现混淆;

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

概念上说就是不一样的:
        id是先找到结构/内容,再给它定义样式;class是先定义好一种样式,再套给多个结构/内容。

呵呵 上面说的已经很明白了,无论id还是class都能轻松实现特别效果,简单方便,希望对这方面不熟的人能有所启示。

时间: 2024-09-17 10:37:46

DIV中ID和class的使用有什么不同的相关文章

jquery-jQuery中如何匹配div中id格式一样的span标签值?

问题描述 jQuery中如何匹配div中id格式一样的span标签值? jQuery中如何匹配div中id格式一样的span标签值?比如: <div id=""show_baseInfo""> <span >提现银行:</span> <span id=""show_bankCard"">1</span> <span >持卡人:</span> &

DIV+CSS中id和class的使用原则

本文向大家描述一下DIV CSS中id与class使用原则,在前面的文章里讨论过很多DIV CSS布局的技巧,我们在用CSS来控制网页布局时我们可能都会遇到一个问题:当定义一个属性时,是使用id,还是使用class?这里和大家说明一下,相信本文介绍一定会让你有所收获. DIV CSS中id与class使用原则 在51cto.com前面的文章里讨论过很多DIV CSS布局的技巧.在用CSS来控制网页布局时我们可能都会遇到一个问题:当定义一个属性时,是使用id,还是使用class?今天51cto.c

html-本人菜鸟一枚,请教大神一个关于CSS中ID和类选择器不能用,而标签选择器能用的问题

问题描述 本人菜鸟一枚,请教大神一个关于CSS中ID和类选择器不能用,而标签选择器能用的问题 FIREFOX浏览器,代码如下: HTML代码片段: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> @import url(template/default/styl

html中设置让div中的内容超出后自动显示滚动条

 在html页面中,我们有时需要让div中的内容超出后自动显示滚动条,我们可以这样设置: 代码如下: <div class="classlist"> <div class="autoScroll"> <asp:RadioButtonList ID="rblClasses" runat="server" DataTextField="className" DataValueFie

CSS中id和class的区别和用法

在一个网页里ID只能使用一次.当然即使一个id在一个网页内被使用多次,其CSS样式仍然可以实现生效,但是一般规定W3C标准是使用一次.因为ID在html里可以赋予html标签特殊的属性如一下JS动作.表单传值等特性所以区别于一个class可以使用多少的次,而一个CSS 命名的id只能使用一次避免一些特定动作.传的表单值的兼容性特性错误即使没有其它JS脚本动作.表单传值特性但是我们也一定执行一个页面只能使用一次. id 选择器以 "#" 来定义,命名CSS选择器. 定义命名css id选

解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)

本篇文章是对在Jquery中把一段html代码动态写入到DIV中的实现方法进行了详细的分析介绍,需要的朋友可以参考下   复制代码 代码如下: nav1 = "<div style='width:145px;height:62px;float:left;background:url(login_image/index/on_1.jpg);font-size:18px;color:white;line-height:65px;' id='left_tab" +  "<

如何获取鼠标在div中的相对位置

  如何获取鼠标在div中的相对位置,其实是很简单,下有个不错的示例,感兴趣的朋友可以参考下  代码如下: <HEAD>  <TITLE> JS获取DIV相对坐标</TITLE>  <script type="text/javascript"><!--  function getX(obj){  var parObj=obj;  var left=obj.offsetLeft;  while(parObj=parObj.offset

JS在可编辑的div中的光标位置插入内容的方法

 首先要让DIV启用编辑模式 代码如下: <div contenteditable=true id="divTest"></div> 通过设定contenteditable=true开启div的编辑模式.这样DIV就可以跟文本框一样输入内容了. 不扯话题了.下面说怎么获取或设置光标位置.   2个步骤: ① 获取DIV中的光标位置 ② 改变光标位置 代码如下: var cursor = 0; // 光标位置  document.onselectionchange

js-无法给div中的span标签赋值

问题描述 无法给div中的span标签赋值 html中的布局是这样的 <div class="box"> <div class="user_box"> <div class="user_head"><img src="" width="50" height="50" id="imge"></div> <