精通CSS笔记-CSS代码结构和选择器

Author Avatar
KING Jan 28, 2017 Jan 28, 2017 UPDATED

CSS Mastery

结构

  1. 标签意义的重要性
    • 有意义的页面更容易处理
    • 程序和其他设备也可以理解有意义的标签，比如搜索引擎
    • 可以简便的将元素调整为所需的样式，不需要添加其他标识符，避免了不必要的代码膨胀
  2. ID和类名
    • 一个ID只能应用于页面上的一个元素（可以内嵌其他更多元素）
    • 类适合标识内容的类型和其他相识的条目
    • 不要过度使用或滥用类，更不要在每个地方都添加类，因为在文档中添加了无意义的代码
  3. 为元素命名
    • 在分配ID和类名时，尽可能保持名称与表现方式无关，如类名red这类会混乱且不易修改类名
    • 应该根据‘是什么’来命名而不应该根据‘外观如何’来命名。能使代码更有意义，避免代码和设计不同步
    • 类名和ID区分大小写，所以需要使用统一的命名约定，建议多个单词之间用连字符分隔，例如andy-budd比andyBudd清晰

  4. div和span

    • div代表部分‘divsion’，将文档分割为几个有意义的区域，所以，将主要内容包围在div中并分配content类，可以在文档中添加结构和意义

    • 应该只在没有现有元素能够实现区域分割的情况下使用div元素。如果使用主导航列表，就不需包围在div中，完全可以删除div，直接在列表上应用类

      1
      2
      3
      4
      5
      6
      7
      <div class="nav">
          <ul>
              <li>home</li>
              <li>about</li>
              <li>contact</li>
          </ul>
      </div>

    • 应该用div根据条目的意义或功能（而不是表现方式或布局）对相关条目进行分组

    • div可以对块级元素分组，而span可以对行内元素进行分组或标识
      1
      <p>Published on <span class="date">Feb 22nd, 2017</span> by <span class="author">KING</spa></p>

  5. 微格式

    • 由于HTML中缺少相应的元素，很难突出显示人、地点或日期等类型信息。为了解决这个问题，开发一套标准的命名约定和标记模式来表示这些数据。这些命名约定基于vCard或iCalendar等现有的数据格式，称为微格式’microformat‘
    • 微格式让我们可以用一种特定的方式标记数据，让程序和服务可以访问它。
  6. DOCTYPE
    • DTD（文档类型定义）是一组机器可读的规则，定义XML或HTML的特定版本中允许有什么，不允许有什么。在解析网页时，浏览器使用DTD检查页面的有效性
    • 浏览器通过分析页面的DOCTYPE声明来确定使用哪个DTD，从而知道HTML的版本
    • DOCTYPE通常需要指定DTD文件的URL，但HTML5不需要指定URL
    • 浏览器一般不读取这些文件，而是仅仅识别常见的DOCTYPE声明

选择器

  1. 常用选择器

    • 也叫元素选择器或简单选择器
    • 后代选择器用来寻找特定元素或元素组的后代
    • 结合类型（元素）、后代、ID和类可以找到绝大多数元素
    • 伪类，链接伪类（:link和:visited）只能用于锚元素（a标签）；动态伪类（:hover 、 :active和:focus）理论上可以用于任何元素

    • 通过伪类连接，可以创建更复杂的行为

      1
      a:visited:hover {color:red;}

    • *为通用选择器，作用就像通配符，匹配所有可用的元素。与其他选择器结合的时候，可以用来对某个元素的所有后代应用样式，或者跳过一级后代

  2. 高级选择器

    • 子选择器，只选择元素的直接后代，即子元素；后代选择器选择一个元素的所有后代。

      1
      #nav>li {padding-left:20px;}

    • 可以使用通用选择器模拟子选择器的效果，先在所有后代上应用预期样式，然后使用通用样式覆盖子元素的后台上的样式

      1
      2
      #nav li {padding-left:20px;}
      #nav li * {padding-left:0;}

    • 相邻同胞选择器，用于定位同一个父元素下某个元素之后的元素(根据一个元素与另一个元素的相邻关系应用样式)

      1
      h2+p {font-size:1.3em;}

    • 属性选择器，根据某个属性是否存在或属性的值来寻找元素

      1
      2
      3
      4
      5
      6
      7
      8
      9
      /* 解释某些内容，如缩写词，当鼠标悬停在具有title属性的元素上时，显示提示 */
      acronym[title] {border-bottom: 1px dotted #999;}
      acronym[title]:hover, acronym[title]:focus {cursor:help;}

      /* 使用rel属性值nofollow */
      a[rel="nofollow"] {padding-right:20px;}

      /*<a> 标签的 rel 属性用于指定当前文档与被链接文档的关系。 */
      <a href="part_12.html" rel="next" rev="prev">

    • 利用属性选择器可以用于IE6 hack，因为IE6不支持属性选择器，而其他现代浏览器支持

      1
      2
      #header {color:red;}
      [id="header"] {color:blue;}

    • 有些属性可以由多个值，此时可以使用~来表示有此属性即成立

      1
      .blogroll a[rel~="co-worker"] {color:red;}

  3. CSS3选择器

  4. 特殊性和层叠的作用

    • 通过层叠（cascade）的过程处理css样式规则之间的冲突，为每一个规则分配一个重要度，即权值。
      • 标!important的样式 能优先于任何规则
      • 相同规则特殊性，则后定义的规则优先
    • 特殊性，为每种选择器分配一个值，
    • 大基数（权重）确保非常特殊的选择器（如ID选择器）不会被大量一般选择器（如类型选择器）所超越。

    • 分为4个等级，a，b，c，d

      • 若为行内样式，a=1，权重为1000
      • b为ID选择器的总数，权重为100
      • c为类，伪类和属性选择器的数量，权重为10
      • d为类型选择器和伪元素选择器的数量，权重为1
        1
        2
        3
        4
        选择器                       特殊性         计算后的值
        style=""                    1,0,0,0        1000
        #content{}                  0,1,0,0        100
        p.comment .datepost{}       0,0,2,1        21

    • 在body上，使用类表示页面类型，使用ID标识特定页面，可以非常灵活的控制站点设计和布局，编写可维护的代码

      1
      2
      3
      4
      5
      body.news {}
      body#archive {}
      <body id="archive" class="news">
          ...
      </body>

    • 样式继承，应用样式的元素的后代会继承样式的某些属性，如颜色和字号。与层叠不同，层叠突出覆盖的特性

  5. 注释和维护样式表
    • 使用@import url(“xx.css”)导入样式表比链接样式表慢
    • 可以使用/ @group header / 这样的注释风格，作为一种简单而有效的样式表导航方法
    • 站点单一样式表的代码结构
      • 一般样式
        • 主体样式
        • reset样式
        • 链接
        • 标题
        • 其他元素
      • 辅助样式
        • 表单
        • 通知和错误
        • 一致的条目
      • 页面结构
        • 标题、页脚和导航
        • 布局
        • 其他页面结构元素
      • 页面组件
        • 各个页面
      • 特殊覆盖
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        /* @group general styles
        ------------------------*/

        /* @group helper styles
        ------------------------*/

        /* @group page structure
        ------------------------*/

        /* @group page components
        ------------------------*/

        /* @group override
        ------------------------*/