css中的id和css的区别

在样式表定义一个样式的时候，可以定义id也可以定义class。

1、在CSS文件里书写时，ID加前缀"#"；CLASS用"."

2、id一个页面只可以使用一次；class可以多次引用。

3、ID是一个标签，用于区分不同的结构和内容，就象名字，如果一个屋子有2个人同名，就会出现混淆；class是一个样式，可以套在任何结构和内容上，就象一件衣服；

4、从概念上说就是不一样的：id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。

目前的浏览器还都允许用多个相同ID，一般情况下也能正常显示，不过当你需要用JavaScript通过id来控制div时

时间： 2024-10-20 07:17:04

css中的id和css的区别的相关文章

css中使用id和class 的不同

在 CSS 中,类选择器以一个点号显示: .center {text-align: center} 在上面的例子中,所有拥有 center 类的 HTML 元素均为居中. 在下面的 HTML 代码中,h1 和 p 元素都有 center 类.这意味着两者都将遵守 ".center" 选择器中的规则. <h1 class="center"> This heading will be center-aligned </h1> <p clas

CSS中的id选择器和class选择器简单介绍

<!-- CSS中选择器 CSS有两种选择器id和class,总之如果说你想在HTML元素中设置CSS属性, 你要在元素中设置id和class选择器.那么我们现在来一个一个的介绍这两中选择器 id选择器: HTML中的元素属性用id来设置id选择器,CSS中的id选择器是用"#"来定义的 比如: #para1 { text-align:center; color:red; } 这样就定义了一个选择器,什么是选择器,在网上查的是说需要改变的HTML元素,很正确,在一开始我们的内部样

彻底弄懂css中单位px和em的区别(转)

国内的设计师大都喜欢用px,而国外的网站大都喜欢用em,那么两者有什么区别,又各自有什么优劣呢? 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位: 3. Firefox能够调整px和em,但是96%以上的中国网民使用IE浏览器(或内核). px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS2.0手册) em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为

css中margin和padding的用法区别

谈到css中的margin和padding这两个我们几乎每个页面都会用到的属性,我们有必要先来了解一下margin和padding 1.什么是margin和padding 谈到margin和padding我们就有必要了解一下css盒模型 (Box Model) 根据上面的这张图我们可以很清晰的看到,margin用来设置外边距,padding用来设置内边距 啥是外边距和内边距,我们看下w3c上面的官方说明: css外边距: 围绕在元素边框的空白区域是外边距.设置外边距会在元素外创建额外的“空白”.

css中单位 px、em 的区别【转载】

原文:http://www.admin10000.com/document/6267.html 在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝色理想,ChinaUI等都是使用了px作为字体单位.只有百度好歹做了个可调的表率.而 在大洋彼岸,几乎所有的主流站点都使用em作为字体单位,也就是可调的.没错,px比em更加容易使用,大部分读者不知道em为何物或者它相当于多少 px.国外人士如此重视网站易用性(Accessibility),不仅因为其根生蒂固的人文精神,直接原因可能是因 为有

CSS中@import与link的具体区别

我们知道在网页中引用外部CSS有两种方式:@import和link 我们也经常听到有人说要使用link来引入CSS更好,但是你知道为什么吗? 继续往下看 link:link就是把外部CSS与网页连接起来. @importimport文字上与link的区别就是它可以把在一个CSS文件中引入其它几个CSS文件. 为什么使用@import大部分使用@import方式的人是因为旧的浏览器是不支持@import方式的,这意味着我们可以使用@import来引入只让现代浏览器解析的CSS样式.另一个主要的原因

css中双冒号和单冒号区别

:——是指的伪类 ::——是指的伪元素 1.字面意思: 伪类,1.css中有类选择器,某些元素并未定义类名,就可以通过伪类赋予样式,如:[:nth-child(n)]:2.伪类可以应用于元素执行某种状态,如:[:hover]鼠标经过元素时 伪元素,创建一个新元素应用于文档,但是并不存在于文档中. 常见的伪元素选择器:  ::first-letter 选择元素文本的第一个字(母).  ::first-line 选择元素文本的第一行.  ::before 在元素内容的最前面添加新内容.  ::aft

css中的相对定位与绝对定位的区别

1.绝对定位 position: absolute;绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素).如果元素没有已定位的祖先元素,那么它的位置则是相对于最初的包含块(body). 绝对定位与文档流无关,所以它们可以覆盖页面上其他的元素,可以通过z-index属性来控制这些层的对方顺序. 2.相对定位 position: relative;相对定位:相对定位是相对于元素在文档中的初始位置: 注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来

CSS中的height与line-height的区别

<p class='text'>高与行高的区别</p> 那么我要想让这些字上下居中那么可以用宽度和行高控制 .text{ height:25px; line-height:25px; } 什么是行高? 行高不是每行直接的间距 行高指的是文本行的基线间的距离. 就是每行文字下边与下一行文字的下基线之间距离 原文地址:https://www.cnblogs.com/sui776265233/p/9403690.html