`
younglibin
  • 浏览: 1214037 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

CSS 中 # 和 . 的区别

    博客分类:
  • JSP
阅读更多

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

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

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

 

以上摘自网络:

 

#main和.main有什么区别:


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

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

一个Class是用来根据用户定义的标准对一个或多个元素进行定义的。打个比较恰当
的比方就是剧本:一个Class可以定义剧本中每个人物的故事线,你可以通过CSS,
javascript等来使用这个类。因此你可以在一个页面上使用class="Frodo" ,
class="Gandalf", class="Aragorn"来区分不同的故事线。还有一点非常重要的是
你可以在一个文档中使用任意次数的Class。

至于 ID,通常用于定义页面上一个仅出现一次的标记。在对页面排版进行结构化布
局时
(比如说通常一个页面都是由一个页眉,一个报头< masthead>,一个内容区域
和一个页脚等组成),一般使用ID比较理想,因为一个ID在一个文档中只能被使用
一次。而这些元素在同一页面中很少会出现大于一次的情况。

 

 

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

ID是固定标签,用#style1定义,ID="style1"
#style1定义固定标签,用于定义一个特定的元素,每个页面只能出现一次,不能反复调用。虽然现在有的网页多次调用#style1,但那是不规范的,在某些浏览器中也会无法解读造成页面出错。

 

class可以在页面里面重复使用,id由于在页面里面只能出现一次,所以不能重复使用,所以尽量用class来写,这样能在页面里面重复引用你写的css,减小工作量和代码量。

    这种情况尽量用id:页面大的模块里面,用id来区分不同的模块。比如页面里面有这样的模块:最新新闻,推荐新闻等。就可以考虑用id来区分。

    还有一点,由于id是页面中唯一的,更多的是定义来留给给页面里面的 javascript用。

    补充:class和id在页面里面的使用方法:

    class:

     <style type="text/css">

        .footer{background:red;}

     </style>

     <div class="footer">footer</div>

    id:

     <style type="text/css">

        #footer{background:red;}

     </style>

     <div id="footer">footer</div>

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

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

分享到:
评论

相关推荐

    Beginning HTML, XHTML, CSS, and JavaScript.pdf

    ### 关于《Beginning HTML, XHTML, CSS, and JavaScript》的知识点总结 #### 一、书籍基本信息 ...此外,书中提供的众多示例和参考资料也为学习者提供了极大的便利,有助于加深对这些关键技术的理解和掌握。

    浏览器CSS方面兼容手册.txt

    在Web标准中,`id`和`class`的选择器有着明显的区别。 **解决方法:** 理解并正确使用`id`和`class`的区别: - `id`在一个页面中应该是唯一的,而`class`可以多次重复使用。 - `id`的选择器权重高于`class`。 ####...

    firefox与IE对js和CSS的区别.txt

    本文将详细探讨Firefox与Internet Explorer(简称IE)在处理JS和CSS时的一些主要区别,旨在帮助开发者更好地理解这些差异,并提供相应的解决方案。 #### 二、关键知识点详解 ##### 1. `document.formName.item(...

    Delphi_Para_a_Web_II-Volume I(1).docx

    - 深入讨论了 Server Module 和 Main Module 在 uniGUI 中的作用和区别(第31页)。 #### 6. 使用 Frames 的技巧 - 探讨了如何有效地利用 Frames 来增强 Web 应用程序的功能和灵活性(第37页)。 #### 7. uniGUI ...

    傻瓜系列计算机丛书 CSS.Web.Design.for.Dummies

    这本书旨在为初学者提供一个轻松、直观的学习路径,帮助他们掌握CSS的基本概念和技巧,进而设计出美观且功能强大的网页。 ### CSS简介 CSS是一种用于描述HTML文档外观和格式的语言,它允许网页设计者独立地控制...

    html5-css面试题.doc

    在 CSS3 中,`overflow-x` 和 `overflow-y` 被引入以允许分别控制水平和垂直方向上的溢出内容处理方式。这为网页布局提供了更多的灵活性和精确度。 ### 2. 清除浮动的方法 清除浮动是前端开发中常见的需求,主要...

    2021-2022计算机二级等级考试试题及答案No.16622.docx

    根据提供的文件信息,我们可以总结出一系列重要的IT知识点,特别是针对计算机二级等级考试的相关知识点。...通过以上知识点的总结,可以帮助考生更好地理解和掌握计算机二级等级考试中的相关概念和技术。

    fecommunity#front-end-interview#4.CSS动画2

    1.CSS动画的实现方式 1. transition补间动画 2. keyframe关键帧动画 3. 逐帧动画 2.过渡动画和关键帧动画的区别 3.如何实现逐帧

    2021-2022计算机二级等级考试试题及答案No.10441.docx

    根据给定文件的信息,我们可以总结出一系列与计算机二级等级考试相关的知识点。...以上知识点涵盖了计算机二级等级考试中多个方面的内容,对于理解和掌握计算机基础理论和技术具有重要的参考价值。

    H5 面试题总结

    cookies、sessionStorage 和 localStorage 的区别 - **cookies**:存储在客户端的数据,随每个请求发送至服务器,大小有限制(约 4KB)。 - **sessionStorage**:存储在客户端的数据,仅在当前浏览器窗口或标签页...

    CSS 权威指南

    本章将介绍块级元素和内联元素的区别,以及它们在页面布局中的作用。 ##### 9. 定位 (Chapter 9) 定位技术允许开发者精确地控制元素在页面上的位置。本章将详细介绍静态定位、相对定位、绝对定位和固定定位等不同...

    CSS 面试问答(2023).docx

    CSS 与 CSS3 的区别 - **新特性**:CSS3 引入了一系列新特性,包括圆角、阴影、渐变色、动画和过渡效果等。 - **选择器**:CSS3 扩展了 CSS2 的选择器集,提供了更丰富的选择器,如属性选择器、伪类选择器等。 - *...

    2024年最新前端面试题总结(HTML5+CSS3+JS+TS4+Vue+React18)

    层叠是指在CSS中,当多个规则应用到同一个元素上时,浏览器如何决定哪些规则应该被优先应用的过程。CSS层叠机制基于以下原则: - **源顺序**:规则在样式表中的位置。 - **特异性**:选择器的特异性越高,其权重就...

    2021-2022计算机二级等级考试试题及答案No.10409.docx

    表和视图的区别 - 视图是基于表或者其他视图的一种虚拟表,可以在视图上创建索引,但是选项B中提到“表和视图上都可以创建索引”的说法是正确的,只是创建索引的具体场景和限制条件有所不同。 ### 23. 图片框的...

    《网络软件开发综合训练》作业考核练习题.docx

    - **background-color属性**:CSS中的`background-color`属性用于设置元素的背景颜色。 #### 9. 邮件链接格式 - **电子邮件链接**:正确的电子邮件链接格式应该是`xxx@xxx.com`。 #### 10. 在新窗口打开链接 - **_...

    2021-2022计算机二级等级考试试题及答案No.12191.docx

    - **函数调用**:`f1` 和 `f2` 函数分别用于返回两个参数中的较大值和较小值。在主函数中,通过组合使用这两个函数来计算最终结果。 - **字符串处理**:`len` 函数用于计算字符串长度。在中文环境下,“vb程序设计”...

    2021-2022计算机二级等级考试试题及答案No.9915.docx

    C语言标准并未规定`main`函数的具体位置,它可以在程序中的任何位置,只要确保它被正确地定义和调用即可。 **正确答案:C. 可以任意** #### 6. C++支持的数制 C++标准支持十进制、十六进制以及八进制表示,但不...

    Flex开发实例--学习必备

    - **MXML** 和 **ActionScript** 的区别在于它们各自的作用和语法: - **MXML**: 用于定义UI组件和布局。 - **ActionScript**: 用于编写业务逻辑和处理用户交互。 - 在MXML中添加注释使用 `&lt;!-- 注释 --&gt;` 格式。 ...

Global site tag (gtag.js) - Google Analytics