id:用来定义页面中大的样式,如栏目划分,顶部,正文,底部等;用#top的形式来定义;

class:用来定义一些比较细节的样式,如具体的一个菜单,一行文字等,用.text的形式来定义。

定义HTML中的标签,如ul,img,p等时,直接写:img{}

class是样式组,用.style定义,class="style": 
.style定义样式组,可以被反复调用,就是说你一个页面里,可以有多个元素用同一个style;

ID是固定标签,用#style1定义,ID="style1"

#main和.main有什么区别:

#main 定义的是ID为"main"这个元素的样式
.main 的意思是新建一个名为"main"的样式
#main 只能定义ID为"main"这个元素的样式
.main 一但定义以后,可以让其他的元素来调用,方法为class="main"

用#定义CSS样式,在调用时必须用ID,用.定义CSS样式,在调用时必须用CLASS。用#定义的样式,一般都是定义结构框架,一些大的容器,且在同一个页面只能出现一次;而.定义的样式,一般都是起修饰作用或多次重复的样式。还一点就是在同一个层里同时出现ID和CLASS样式,ID更优先于CLASS。

简单来说: #main是定义具体对象main的专有属性;.main是定义抽象对象的共有属性main。比较广泛的用途是#用于定义网页框架;.用于定义各个网页元素。#main中的main只能在网页中出现一次,而.main中的main可以出现无数次。

使用范例

class:

.footer{background:red;}

footer

id:

#footer{background:red;}

footer

定义class的css是用点:“.”,如.footer

定义id的css是用井号“#”,如#footer

CSS中#和.的区别的更多相关文章

  1. CSS中"!important"的使用

    本篇文章使用最新的IE10以及firefox与chrome测试(截止2013年5月27日22:23:22) CSS的原理: 我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < ...

  2. CSS中!important的优先级

    本篇文章使用最新的IE10以及firefox与chrome测试(截止2013年5月27日22:23:22) CSS的原理: 我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < ...

  3. CSS中!important的使用 转

    本篇文章使用最新的IE10以及firefox与chrome测试(截止2013年5月27日22::) CSS的原理: 我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < 元素 ...

  4. css中单位px、pt、em和rem的区别

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px :像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS ...

  5. 彻底弄懂css中单位px和em,rem的区别

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 -1. IE无法调整那些使用px作为单位的字体大小: -2. 国外的大部分网站能够调 ...

  6. CSS中的class与id区别及用法

    转自http://www.divcss5.com/rumen/r3.shtml及http://www.jb51.net/css/35927.html 我们平常在用DIV CSS制作Xhtml网页页面时 ...

  7. CSS中单位px和em,rem的区别

    PX特点: 1 IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...

  8. CSS中margin和padding的区别

    在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 下面讲解 padding和ma ...

  9. css中px,em和rem的区别

    css中px,em和rem的区别 今天,突然间发现一个特别有意思的问题,就是无意间看到一个网站中的em并不是16px,下面展开了对于px和em以及rem的探究. 首先,px是绝对长度单位,是相对于显示 ...

随机推荐

  1. C++深度解析教程学习笔记(4)C++中的新成员

    1. 动态内存分配 (1)C++通过 new 关键字进行动态内存申请,是以类型为单位来申请空间大小的 (2)delete 关键字用于内存释放 ▲注意释放数组时要加[],否则只释放这个数组中的第 1 个 ...

  2. ___pInvalidArgHandler already defined in LIBCMTD.lib(invarg.obj)

    vs2013编译项目时出错,网上很多的解决方案全都是垃圾,根本不能用 不过也有不是垃圾的,就是下面这个: 关于采用静态链接编译生成EXE库函数重复定义问题 看了好多关于类似LIBCMT.lib(inv ...

  3. c# 类型化变量的var,和javascript一样的使用

    .net framework推出var关键字,注意是关键字,不是什么新类型,只是编译器抛给我们的“语法糖” 1.object是所有类型的父类型,object a=1;和var a=1:的区别在于前一个 ...

  4. strstr and strpos

    啥也不说  直接上代码: <?php $email = 'name@example.com'; $domain = strstr($email, '@'); echo $domain; // 打 ...

  5. SpringBoot17 FastJson配置、Druid配置

    1 FastJson配置 1.1 FastJson基础知识 点击前往 1.2 SpringBoot整合FastJson 点击前往 1.2.1 导入FastJson依赖 <!--fastjson- ...

  6. 575. Distribute Candies 平均分糖果,但要求种类最多

    [抄题]: Given an integer array with even length, where different numbers in this array represent diffe ...

  7. Python 网络爬虫 009 (编程) 通过正则表达式来获取一个网页中的所有的URL链接,并下载这些URL链接的源代码

    通过 正则表达式 来获取一个网页中的所有的 URL链接,并下载这些 URL链接 的源代码 使用的系统:Windows 10 64位 Python 语言版本:Python 2.7.10 V 使用的编程 ...

  8. rosbag数据记录及转换图片、视频

    博客转载自: https://blog.csdn.net/u012706484/article/details/78495896 rosbag常见的使用参数和配置 1.查看.bag中包含的信息 : r ...

  9. Apache htpasswd命令

    一.简介 htpasswd是apache的一个工具,该工具主要用于建立和更新存储用户名.密码的文本文件,主要用于对基于http用户的认证. 二.语法 Usage: htpasswd [-cimBdps ...

  10. oracle数据库之数据插入、修改和删除

    作为一合格的测试人员对数据库的单表查询.多表查询.分组查询.子查询等等这些基本查询方法还是要会的.不然到企业中,容易被一些人鄙视,或者说如果数据库学不好,表查不明白,那么对自己能力来说也是一种侮辱,因 ...