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. MFC 打开外部EXE文件的三种方法

    目前知道三种方式:WinExec,ShellExecute ,CreateProcess,别人已经总结的很好了<vc中调用其他应用程序的方法(函数) winexec,shellexecute , ...

  2. VxWorks多任务功能

    http://blog.chinaunix.net/uid-23741326-id-84935.html VxWorks的任务有优先级的概念,其任务调度也是基于优先级考虑的,是抢占式的,VxWorks ...

  3. 一只小蜜蜂(斐波那契dp)

    有一只经过训练的蜜蜂只能爬向右侧相邻的蜂房,不能反向爬行.请编程计算蜜蜂从蜂房a爬到蜂房b的可能路线数. 其中,蜂房的结构如下所示. Input输入数据的第一行是一个整数N,表示测试实例的个数,然后是 ...

  4. array_splice()函数 ,删除数组中的某个值

    array_splice() 这个函数是真的皮,有好多种方法,但是最后还是在PHP官方的文档找到了合理的解释的用法 花了大概半个小时 $arr = array('a','b','c','d'); ar ...

  5. Hadoop完全分别式环境搭建

    为学习大数据,需搭建Hadoop大数据环境,在此记录,以备以后查阅,同时分享出来,供需要者参考. 这里分几部分进行整理. 提纲: 一.说明和准备 二.设置免密登陆 分段网址:https://www.c ...

  6. 9.hive聚合函数,高级聚合,采样数据

    本文主要使用实例对Hive内建的一些聚合函数.分析函数以及采样函数进行比较详细的讲解. 一.基本聚合函数 数据聚合是按照特定条件将数据整合并表达出来,以总结出更多的组信息.Hive包含内建的一些基本聚 ...

  7. Installing XGBoost on Mac OSX

      0. Get gcc with open mp.  Just paste and execute the following command in your terminal, once Home ...

  8. [转]asp.net使用uploadify上传出现的IO Error问题

    原文链接:http://blog.csdn.net/w3031213101/article/details/6335878 解决方法:1.uploadify控件的自定义size必须调整大小,即属性:s ...

  9. 专题1-MMU-lesson2-深入剖析地址转化

    1.地址转化总体分析 level one fetch和level two fetch分为一级转换和二级转换. 由上图右边可以看出,首先通过TTB(Translation Table Base)寄存器找 ...

  10. MagicNotes:如何迈向工作的坦途

    MagicNotes,思绪随风飞扬,不抓住写下来明天就会忘记了. 昨晚在知乎上偶尔看到 @雨农 的关于“为什么我那么努力,吃了那么多苦,也没见那么优秀?”的一个回复,心里有所触动. 本人专科毕业3-4 ...