css中class的应用方法

html-css017

css中class的应用方法,第1张

css中的class是我们在使用过程中的类名,但我们需要给某个标签添加样式时可以用类来命名,而类名的使用是可以重复的,简洁的说就是一个页面可以出现多个类名一样的命名,具备重复使用性,而id一个网页中只能出现一个

id的只能用一次是说同一个id在一个页面中只能出现一次,例如页面中有一个元素取id为“naviBar”,那么在这个页面中就不能再为其他元素取“naviBar”这个id了\x0d\x0aclass可以多次引用,是说在一个页面中,可以为多个元素加上同一个名称的class,例如 \x0d\x0a\x0d\x0a a\x0d\x0a b\x0d\x0a\x0d\x0a c\x0d\x0a\x0d\x0a d\x0d\x0a\x0d\x0a\x0d\x0a一般情况下,id能好用就少用,因为在js中id元素是可以直接用getElementById(id)来获取的,这需要浏览器为有id的元素分配更多的资源,所以如果元素不是要被js使用,就不用id来进行css样式定义

CSS里面ID与Class的区别是格式与用途的不同,具体有:

在CSS文件里书写时,ID加前缀"#";Class用"."

ID一个页面只可以使用一次;Class可以多次引用。

ID是一个标签,用于区分不同的结构和内容。就如函数中的变量,如果一个调用中出现两个一致的变量,就会出现混淆,系统将报错无法识别;Class是一个样式,可以套在任何结构和内容上,如同属性一致则认为是一个类。

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

CSS里面定义ID与Class格式与用途的不同具体(例子)有:

定义格式不同:

形如ID="aaa"定义的,在css中是这样设置其样式的:#aaa{ 样式列表 }

以Class="bbb"形式定义的,在CSS中应该这样设置其样式:.bbb{ 样式列表 }

用途不同:

Class元素分2种,关联的和独立的。关联的用于html的相关tag,比如:h1.redone{color:red}

<h1 class= redone>字体为红色的 <h1>

<h1>字体是黑色的 <h1>

独立的元素可以用于所有的html元素的,比如

.classname {property:value}

ID元素和独立的Class功能相似,区别是ID是唯一的而且对于javascript操作html 元素有帮助。

#idname {property: value}

归纳成一句话就是:Class可以反复使用而ID在一个页面中仅能被使用一次。有可能在很大部分浏览器中反复使用同一个ID不会出现问题,但在标准上这绝对是错误的使用,而且很可能导致某些浏览器的现实问题。

注:A、在样式表定义一个样式的时候,可以定义id也可以定义class。B、目前主流浏览器还都允许用多个相同ID,一般情况下也能正常显示,不过当你需要用JavaScript通过ID来控制Div时就会出现错误。