zoukankan      html  css  js  c++  java
  • CSS基础知识 - ID/Class/Div/Span/Selector

    1) . 号 和 # 号

    在CSS文档中,我们常常可以看到一些符号,最常见的就是 . 号 和 # 号,那么它们分别代表什么意思呢?

    #号:标志网页上的ID,顾名思义,一个ID标志唯一的一个值,我们在数据库中也是如此,因此,ID必须是唯一的。

    .号: 标志网页上的一个Class(类),当然啦,这个Class和我们OOP中的Class不一样,请不要搞混。

    那么,# 和 . 的区别到底是什么呢?

    最重要的如下:

    一个ID名只能应用于页面上的一个元素,而同一个类名可以应用于网页上任意数量的元素。

     我们知道,我们可以在Class中添加字体,颜色和其他,然后在网页中,只要class="XXX"就可以应用该类的样式。

    于是,CSS新手们常常在几乎所有的东东上添加类,这样做是不好的,我们可以称它为“多类症”,在某种程度上,

    这和使用表格布局一样糟糕!

     

    2) Div和Span

    div就是division,代表网页中的一个部分,我们通常将主要内容包围在div中并分配ID,这样可以做到在网页中添加结构。

    span代表一个行,我们可以用它来对行内元素进行分组,你可以把它想成是ASP.NET中的label控件。

    它们的区别:

    div会自动换行,而span不会。

    有的网页新手在页面中任意应用div,这在有时候是完全没有必要的。比如下面一个例子:

    <div id="mainNav">

    <ul>
     <li><a href="#">Home</li>
     <li><a href="#">News</li>
     <li><a href="#">Contact</li>
    </ul>

    </div>

     以上这段代码是完全没有必要的,列表本来就是顶级元素,因此完全可以在列表上应用ID,如下:

    <ul id="mainNav">
     <li><a href="#">Home</li>
     <li><a href="#">News</li>
     <li><a href="#">Contact</li>
    </ul>

     

    3)常用的Selectors(选择器)

     a) 类型选择器

          - 用来寻找特定类型的元素,比如段落(p),链接(a),或者标题(h1),包括body等等。

          eg:

          p { color: black; }

          a { text-decoration: underline; }

          h1 { font-weight: bold; }

    b) 后代选择器

          - 用来寻找特定元素或者元素组的后代,它由两个选择器之间的空格表示。

          eg:

          li a { text-decoration: none; }

          在上面的例子中,只有在列表项的链接元素上才会应用样式,而段落中的链接则不受影响。

    c) ID和类选择器

          我们在上面已经讲过,id对应#,class对应.

     

     

  • 相关阅读:
    bzoj 1761: [Baltic2009]beetle 区间dp
    NOI冲刺计划
    bzoj 2107: Spoj2832 Find The Determinant III 辗转相除法
    bzoj 2482: [Spoj GSS2] Can you answer these queries II 线段树
    bzoj 1209: [HNOI2004]最佳包裹 三维凸包
    SCOI2015题解 && 考试小结
    bzoj 2806: [Ctsc2012]Cheat 后缀自动机DP
    考场上应该想到。。。。
    spoj LCS 后缀自动机
    BZOJ 1639: [Usaco2007 Mar]Monthly Expense 月度开支
  • 原文地址:https://www.cnblogs.com/davidgu/p/1507249.html
Copyright © 2011-2022 走看看