前端之旅：维基大学 CSS-Challenge 5、《精通CSS》笔记、双飞翼和圣杯布局

July 28 2016

维基大学的Challenge 5

完成了维基大学的Challenge 5，后面的挑战我不打算继续了，第6个是自己设计，第7个是模仿静态网页、第8个是CSS Zen Garden的学习。这是我放在github上的维基大学Challenge代码，以及模仿的一个模板网站找的静态页面，因为原页面结构比较混乱，所以我按照自己的方式在布局。

在做Challenge 5的时候看了两篇分别介绍 2列布局 和 3列布局的博客，不过方法都差不多，都是使用浮动来实现

读《精通CSS》

开始看《精通CSS》，已经完成1、2章，笔记整理如下

1. 基础知识

  • 有意义的标记为开发人员提供了几个重要的好处，
    • 与表现性的页面相比，有意义的页面更容易处理
    • 除了人之外，程序和其他设备也可以理解有意义的标记
    • 有意义的标记可以简便地将元素调整为你所需要的样式
  • 为元素命名class或id时，应该根据“它们是什么”来为元素命名
  • class或id区分大小写
  • 只有在绝对确定这个元素之会出现一次的情况下，才应该使用ID
  • 为了将不必要的标记减到最少，应该只在没有现有元素能够实现区域分割的情况下使用div元素
  • DTD是一组机器可读的规则，它们定义XML或HTML的特定版本中允许有什么，不允许有什么。在解析网页时，浏览器将使用这些规则检查页面的有效性并且采取相应的措施。浏览器通过分析页面的DOCTYPE声明来了解要使用哪个DTD，由此知道要使用HTML的哪个版本。
  • DOCTYPE有两种风格：严格（strict）和过渡（transitional）
  • 当浏览器厂商开始创建于标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们创建了两种呈现模式：标准模式和混杂模式。在标准模式中，浏览器根据规范呈现页面；在混杂模式中页面以一种比较宽松的向后兼容的方式显示。
  • DOCTYPE切换是浏览器用来区分遗留文档和符合标准的文档的手段

2. 为样式找到应用目标

选择器

  • 类型选择器有时候也称为元素选择器或简单选择器，用来寻找特定类型的元素。
  • 后代选择器可用来寻找特定元素或元素组的后代，ul li {}
  • 不要给太多元素指定不同的类，而应将一个类或ID应用于它们的祖先，然后使用后代选择器定位它们。
  • 伪类选择器可以根据文档结构之外的其他条件对元素应用样式。:link和:visited称为链接伪类，只能应用于锚元素，:hover和:active和:focus称为动态伪类，理论上可以应用于任何元素。通过把伪类连接在一起，可以创建更复杂的行为
  • 通用选择器用一个*号表示，一般用来对页面上所有元素应用样式。
  • 高级选择器
    • 子选择器：只选择元素的直接后代，即子元素p > span{}
    • 相邻同胞选择器：可用于定位同一个父元素下某个元素相邻的元素。h2 + p{}
    • 属性选择器：可以根据某个属性是否存在img[title] {}，或属性的值来寻找元素img[title=china] {}，关于更多使用属性值来寻找元素的方法可以查看W3School的教程

层叠

作者的样式表是由站点的开发者编写的，被认为是最重要的样式表。用户可以通过浏览器应用自己的样式，这些样式表的重要度低一级。最后是浏览器或用户代理使用的样式表，它们的重要度是最低的，所以你总是可以覆盖它们。

  • 层叠采用以下重要度次序：
    1. 标有!important的用户样式
    2. 标有!important的作者样式
    3. 作者样式
    4. 用户样式
    5. 浏览器/用户代理应用的样式

然后根据选择器的特殊性决定规则的次序，具有更特殊选择器的规则优于具有一般选择器的规则，如果两个规则的特殊性相同，那么后定义的规则优先

  • 选择器的特殊性分成4个成分等级：a、b、c、d
    • 如果样式是行内样式，那么a=1
    • b等于ID选择器的总数
    • c等于类、伪类和属性选择器的数量
    • d等于类型选择器和伪元素的数量
      最后按照abcd的顺序将计算的值列出，数字越大的就越特殊

建议：尽量保持一般性样式非常一般，特殊性样式尽可能特殊，这样就不需要覆盖特殊样式了。如果发现不得不多次覆盖一般样式，那么从更一般的规则中删除需要覆盖的声明，并且将它显示地应用于需要它的每个元素，这样做可能更简单。

最后：一种有意思的特殊性用法是在主体(body)标签上应用类或ID，这样做之后，就可以根据页面或在站点范围内覆盖样式。

继承

应用样式的元素的后代会继承样式的某些属性，直接应用于元素的任何样式总会覆盖继承而来的样式，这是因为继承而来的样式的特殊性为空。

规划、组织和维护样式表

  • 最近的浏览器基准测试已经表明，导入样式表比链接样式表要慢

  • 在使用多个CSS文件时，还有两个速度相关的问题

    • 多个文件会导致从服务器发送更多数据包，这些数据包的数量（而不是内容）会影响下载时间
    • 另外，浏览器只能从同一个域同时下载数量有限的文件

    由于这些原因，使用结构良好的单一CSS文件可以显著提高下载速度

  • 良好的代码结构和清晰的注释有助于代码的维护，在每个注释头中添加一个标志(比如@)会有助于寻找特定的样式
    作者推荐的代码结构

    • 一般性样式
      - 主体样式
- reset样式
- 链接
- 标题
- 其他元素
    • 辅助样式
      - 表单
- 通知和错误
- 一致的条目
    • 页面结构
      - 标题、页脚和导航
- 布局
- 其他页面结构元素
    • 页面组件
      - 各个页面
    • 覆盖

  • 减小CSS文件大小可以通过删除注释和空白，但最好方法可能是启用服务器端压缩GZIP

  • 样式指南是帮助维护或实现站点的好方法，通过制定一些简单的原则，可以确保站点的开发以可控制的方式进行，同时防止样式随着时间的推移变得散乱。
  • 模式组合是一个页面或一系列页面，它们使用当前的样式表显示站点上可能出现的每种每种样式排列组合，从标题级别和文本样式直到特定的内容和布局类型。这些页面可以让后端和前端开发人员方便地构建页面组合

深入理解 line-height

在百度学院的任务列表上推荐了一篇详解line-height的博客，学习了一下，文章分析的非常细致，原文请戳 《深入了解CSS的行高line-height属性》，我只做了些摘录性的笔记
可以有5种方式来定义line-height。

  1. 可以被定义为：body {line-height:normal;}，会根据自己的font-size和一个大概默认的系数来计算行高，但系数不能通过样式更改
  2. 可以被定义为：body {line-height:inherit;}
  3. 可以使用一个百分比的值：body {line-height:120%;}，这种方法会导致所有继承的元素的行高都是一样通过body的font-size计算出来的固定值，而不是通过自己的font-size计算出来的
  4. 可以被定义为一个长度值(px,em等)：body {line-height:25px;}，表现同百分比
  5. 也可以被定义为纯数字：body {line-height:1.2;}，和normal差不多，但是可定义自己期望的行高系数基于当前行的字体大小来计算。WCAG 2.0规定1.5为最佳

计算后的line-height-font-size就是可用的间距了，将其/2然后分别放到当前行的顶部和底部

上面那篇博客中还讲解了line-height应用于内容时可能发生的复杂情形，我就不搬运了

圣杯布局 & 双飞翼布局

另外还学习了圣杯和淘宝的双飞翼布局，并总结了一点异同点
相同点：

  • 使用同样的html结构，基于优先渲染主要内容的原则，会把主内容区放在前面
  • 都是多列布局
  • 同样使用浮动技术和左右负边距来布局

不同点表现在主内容被遮盖时

  • 圣杯布局对多列的wrapper采用了padding，但是会导致左右列位置发生变化，然后对左右列使用position:relative和left或right的方法纠正
  • 双飞翼布局则将在主内容区中多嵌套了一层wrapper，然后对嵌套在主内容区的wrapper使用左右margin来保证内容区想要显示的内容在正确的位置上

这是几篇介绍双飞翼布局和圣杯布局的博客：

我打算自己写一篇博客专门介绍这两种布局方式：见下一篇博客

avatar

神无

舍悟离迷，六尘不改。