`

CSS “点 ”“井号”的含义and ID class区别

阅读更多

body{
       font-family: Arial,sans-serif;
       color: #333333;
       line-height: 1.166;       
       margin: 0px;
       padding: 0px;
}

#masthead{
       margin: 0;
       padding: 10px 0px;
       border-bottom: 1px solid #cccccc;
       width: 100%;
}

.feature img{
       float: left;
       padding: 0px 10px 0px 0px;
       margin: 0 5px 5px 0;

#对应id
.对应class
不加对应html 标签
1.Class与ID的区别
  
  一个Class是用来根据用户定义的标准对一个或多个元素进行定义的。打个比较恰当的比方就是剧本:一个Class可以定义剧本中每个人物的故事线,你可以通过CSS,Javascript等来使用这个类。因此你可以在一个页面上使用class="Frodo" ,class="Gandalf",class="Aragorn"来区分不同的故事线。还有一点非常重要的是你可以在一个文档中使用任意次数的Class。
  
  至于ID,通常用于定义页面上一个仅出现一次的标记。在对页面排版进行结构化布局时(比如说通常一个页面都是由一个页眉,一个报头,一个内容区域和一个页脚等组成),一般使用ID比较理想,因为一个ID在一个文档中只能被使用一次。而这些元素在同一页面中很少会出现大于一次的情况。
  
  归纳成一句话就是:Class可以反复使用而ID在一个页面中仅能被使用一次。有可能在很大部分浏览器中反复使用同一个ID不会出现问题,但在标准上这绝对是错误的使用,而且很可能导致某些浏览器的现实问题。
  
  在实际应用的时候,Class可能对文字的排版等比较有用,而ID则对宏观布局和设计放置各种元素较有用。
  
  2.Margin与Padding的区别
  
  两者都是代替表格最重要的作用->分割块的好方法,区别在于Margin是不同的Tag间互相隔离的距离而Padding是同一元素中不同内容分割使用,这在表格中最看得清楚。尤其是当对一个区域加载了背景样式之后,Padding下的内容背景色会发生改变,而Margin则不会有所改变。
分享到:
评论

相关推荐

    Head first HTML with CSS and XHTM

    《Head First HTML with CSS and XHTML》会介绍选择器的概念,如何使用类(class)、ID以及元素选择器来定位网页中的特定部分,并通过设置颜色、字体、边距等属性来调整样式。同时,读者还将学会使用浮动(float)、...

    CSS Quick Syntax Reference

    3. Class and id selectors 4. Attribute selectors 5. Pseudo selectors 6. Relationship selectors 7. Specificity 8. Colors 9. Units 10. CSS properties 11. Text 12. Spacing 13. Font 14. Background 15. ...

    HTML&CSS; design and build websites.rar

    选择器可以是元素名、类(`.class_name`)、ID(`#id_name`)或其他更复杂的组合。CSS还支持盒模型(Box Model),包括内容、内边距、边框和外边距,以及布局模式如流式布局、网格布局和 Flexbox。CSS3引入了更多的...

    Beginning_HTML_with_CSS_and_XHTML_Modern_Guide_and_Reference代码

    选择器如`class`和`id`允许我们精确地定位到HTML元素,然后应用样式。例如,`.myClass`选择具有特定类名的元素,`#myID`选择具有唯一ID的元素。CSS属性如`color`、`font-size`、`background-color`等定义了元素的...

    head first html and css 第二版源码

    例如,类选择器(.class_name)、ID选择器(#id_name)和伪类(如:hover)等,这些是实现交互性和动态效果的关键。 总的来说,即使没有电子书,这些源码也能提供大量学习材料。你可以逐行阅读代码,尝试理解每个...

    CSS实战精粹源代码 pro css techniques

    10. **CSS组织与模块化**:BEM(Block Element Modifier)命名法、SMACSS(Scalable and Modular Architecture for CSS)和原子设计原则等方法可以帮助我们编写更有序、可复用的CSS。 《pro css techniques》中的源...

    精通CSS 第三版

    从基础的选择器如类选择器(.class)、ID选择器(#id)到更复杂的伪类(:hover)和属性选择器([attr=value]),理解它们的用法和优先级是至关重要的。 2. **盒模型(Box Model)**:理解CSS的盒模型对于布局至关重要...

    CSS简单教案

    - **ID选择器**:以井号`#`开头,如`#unique-id`,选择特定ID的元素。 - **属性选择器**:如`[attr=value]`,选择具有特定属性和值的元素。 **3. CSS盒模型** 盒模型是CSS布局的核心,包括内容(content)、内边距...

    css简单背景实例

    例如,类选择器(`.class-name`)、ID选择器(`#id-name`)、元素选择器(`div`)等,可以精确地控制元素的样式。 6. **层叠规则**:CSS的“级联”特性意味着样式可以从多处来源继承,包括浏览器默认样式、外部样式...

    HTML and CSS Design and Build Websites

    本书详细解释了如何使用选择器(如ID、Class、元素选择器)来定位并应用样式到特定的HTML元素上。通过实际案例,读者可以学习到如何使用CSS属性来调整边距、填充、背景、边框、文字样式等。 此外,书中还介绍了CSS...

    HTML/CSS壁纸.zip

    基础的CSS选择器包括类选择器(`.class-name`)、ID选择器(`#id-name`)、元素选择器(`element`)和后代/子选择器(`element element`或`element > element`)。CSS属性涵盖了广泛的主题,如颜色(`color`)、背景...

    CSS权威指南第四版.7z

    选择器用于指定要应用样式的元素,如ID选择器(#id)、类选择器(.class)和标签选择器(element)。属性定义了元素的视觉表现,如颜色、字体或布局,而值则指定了属性的具体效果。 CSS的布局管理是其核心内容之一...

    Head First HTML与CSS 第2版

    1. **选择器**:通过选择器,如元素名、类名、ID名(`.class`、`#id`),可以指定要应用样式的元素。 2. **属性**:如`color`(颜色)、`font-size`(字体大小)、`background-color`(背景色)等,定义元素的样式。...

    css3.0 manual 手册

    CSS3.0引入了更强大的选择器,如类选择器(.class)、ID选择器(#id)、伪类(:hover、:active、:focus等)和伪元素(::before、::after)。此外,还有基于属性的选择器,例如`[attr=value]`,以及兄弟选择器(~)和...

    css经典学习笔记.zip

    选择器用于指定要应用样式的元素,如`p`代表所有的段落,`.class`代表具有特定类名的元素,`#id`则对应ID为特定值的元素。声明块由花括号包围,内含一组属性:值对,如`color: red;`设置文本颜色为红色。 二、选择...

    精通CSS精通CSS

    2. 选择器:选择器用于定位HTML元素,如`#id`(ID选择器)、`.class`(类选择器)和`element`(元素选择器)等。 3. 属性与值:CSS提供众多属性来控制元素的样式,如`color`、`font-size`、`background-color`等,值...

    详细的HTML+CSS+JavaScript网页设计.pdf

    - **自定义CSS属性**:使用CSS变量来存储颜色、尺寸等值,方便统一管理和调整。 #### 四、JavaScript交互功能 JavaScript为网页添加交互性,使其更加动态和有趣。以下是该网页中可实现的JavaScript功能: - **...

    Head.First.HTML.with.CSS.and.XHTML

    #### 知识点一:XHTML与CSS的关系 - **XHTML(可扩展超文本标记语言)**:一种基于XML的标记语言,用于构建网页结构。 - **CSS(层叠样式表)**:一种样式表语言,用于定义网页的表现形式,包括布局、颜色、字体等...

    CSS学习帮助文档(chm格式)

    这可以通过使用BEM(Block Element Modifier)、SMACSS(Scalable and Modular Architecture for CSS)或原子CSS等方法来实现。 **浏览器兼容性** 了解CSS在不同浏览器中的兼容性至关重要,因为不是所有特性在所有...

Global site tag (gtag.js) - Google Analytics