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. Android Studio 配置模拟器AVD存放路径(默认在c盘,解决c盘空间不够问题)

    Android Studio 安装之后,默认的会给我们创建一个 Nexus 的模拟器, 这个模拟器的镜像文件放在了 C:\Users\Administrator\.android  中 其中的avd文 ...

  2. 24-从零玩转JavaWeb-包装类、自动装箱、自动拆箱

    一.什么是包装类 二.对基本数据类型包装的好处 三.装箱操作 四.拆箱操作 五.自动装箱 六.自动拆箱 七.字符串与基本数据类型和包装类的转换   八.包装类的缓存设计

  3. eclipse egit(分支管理 下)

    在Git的分支merge中,不可能没有代码的冲突问题,特别在跟别人分工合作时.那该怎么解决? 1.新建一个conflict分支,在dev方法下添加一句 System.out.println(“Crea ...

  4. 【原创】8. MYSQL++中的Row类型

    一.mysqlpp::Row类型 在之前的介绍中我们看到了如何通过mysqlpp::Query找到各种Result类型,然后又仔细分析了各种Result类型又是如何生成对应的Row类型(如下所示). ...

  5. python子进程模块subprocess详解与应用实例 之三

    二.应用实例解析 2.1 subprocess模块的使用 1. subprocess.call >>> subprocess.call(["ls", " ...

  6. SpringBoot15 sell01 项目创建、MySQL数据库连接、日志配置、开发热部署、商品信息模块

    项目软件版本说明: jdk: 1.8 springboot: 2.0.1 mysql: 5.7 1 项目创建 创建一个SpringBoot项目即可,创建是勾选 web jpa mysql 这三个依赖就 ...

  7. Python学习笔记_我的参考网址

    Python学习笔记, 下面记录网上搜到的可参考的网址: 一.关于Tkinter 1.Python3中tkinter模块使用方法详解 https://blog.csdn.net/Fighting_Bo ...

  8. NOIP2018 解题笔记

    D1T1 铺设道路 在场上并没有想到积木大赛这道原题. 差分之后可以把在$[l, r]$这段区间$ - 1$变成在$l$处$ - 1$,在$r + 1$处$ + 1$,然后最终目标是使$\forall ...

  9. 通过批处理操作注册表实现winform应用中Webbrowser以指定的IE版本加载网页

    通过批处理操作注册表实现winform应用中Webbrowser以指定的IE版本加载网页 rem 强制WebBrowser控件使用指定IE版本显示应用的网页 IF EXIST %windir%\Sys ...

  10. HDU 2829 Lawrence (斜率优化DP或四边形不等式优化DP)

    题意:给定 n 个数,要你将其分成m + 1组,要求每组数必须是连续的而且要求得到的价值最小.一组数的价值定义为该组内任意两个数乘积之和,如果某组中仅有一个数,那么该组数的价值为0. 析:DP状态方程 ...