精通 CSS - 高级 Web 标准解决方案 8. 布局

所有 CSS 布局技术的根本都是 3 个基本概念：定位、浮动和外边距操纵。

8.1 计划布局

布局时先做一些计划可以避免很多问题。

  1. 先把页面规划为大的结构性区域，比如容器、页眉、内容区域和页脚。
  2. 然后，将注意力转移到内容区域本身，开始建立网格结构。
  3. 最后，在各个内容区域中寻找不同的布局结构。

结构设计完之后，可以开始关注不同类型的内容。
查看每个内容块的结构，看看不同的类型中是否有共同的模式。
找出模式并确定命名规约之后，最好马上开始定义将使用的元素。

精通 CSS - 高级 Web 标准解决方案 7. 对表单和数据表格应用样式

本章主要讲了两个标签 <table> （表格）和 <fieldset> （表单）。

不过这两个元素在实际使用中已经越来越少见了。

7.1 对数据表格应用样式

7.1.1 表格特有的元素

  • summary 类似于图像的 alt 属性
  • caption 表格的标题
  • thead、tbody、tfoot 表格逻辑部分
  • col、colgroup 对表格列定义或分组（支持的浏览器并不多）
精通 CSS - 高级 Web 标准解决方案 6. 对列表应用样式和创建导航条

6.1 基本列表样式

<ul>
    <li>Winterfell</li>
    <li>A Knight of the Seven Kingdoms</li>
    <li>The Long Night</li>
    <li>The Last of the Starks</li>
    <li>The Bells</li>
    <li>The Iron Throne</li>
</ul>
精通 CSS - 高级 Web 标准解决方案 5. 对链接应用样式

5.1 简单的链接样式

a {
    color: red;
}
精通 CSS - 高级 Web 标准解决方案 4. 背景图像效果

4.1 背景图像基础

body {
    background-image: url(/img/pattern.gif);
    background-repeat: repeat;
    background-position: left center;
}
精通 CSS - 高级 Web 标准解决方案 3. 可视化格式模型

你需要掌握的 3 个最重要的 CSS 概念是 浮动、定位 和 盒模型。

3.1. 盒模型概述

盒模型是 CSS 的基石之一，它指定元素如何显示以及（在某种程度上）如何相互交互。
页面上的每个元素都可以看做一个矩形框，这个框由元素的内容、内边距、边框和外边距组成。

内边距（padding）出现在内容区域（content）的周围。背景会应用于内容和内边距组成的区域。
添加边框（border）会在内边距的区域外添加一条线（可以是实线、虚线或点线）。
外边距（margin）是透明的，一般用于控制元素之间的间隔。
CSS 2.1 还包含 outline 属性。轮廓绘制在元素框之上，不影响元素的大小和定位。轮廓有助于修复 bug，因为它不影响页面的布局。IE 8 及以上支持。

精通 CSS - 高级 Web 标准解决方案 2. 为样式找到应用目标

要想使用 CSS 样式应用于特定的 HTML 元素，需要想办法找到这个元素。在 CSS 中，执行这一任务的样式规则部分称为 选择器（selector）。

常用选择器

  1. 类型选择器（也称 元素选择器 或 简单选择器）

    寻找特定类型的元素；

    p { color: black; }
h1 { font-weight: bold; }

  2. 后代选择器

    寻找特定元素或元素组的后代；

    blockquote p { padding-left: 2em; }

  3. ID 选择器

    寻找具有指定 ID 的元素；

    #intro { font-weight: bold; }

    <p id="intro">Happy Birthday Andy</p>

  4. 类选择器

    .date-posted { color: #ccc; }

    <p class="date-posted">24/3/2009</p>

  5. 伪类

    根据文档结构之外的其他条件对元素应用样式；

    /* makes all unvisited links blue */
a:link { color: blud; }

/* makes all visited links green */
a:visited { color: green; }

/* makes links red when hovered or activated.
focus is added for keyborad support */
a:hover, a:focus, a:active { color: red; }

/* makes table rows red when hovered over */
tr:hover { backgrounp-color: red; }

/* makes input elements yellow when focus is applied */
input:focus { background-color: yellow; }

    :link、:visited 称为 链接伪类，只能用于锚元素。
    :hover、:active、:focus 称为 动态伪类，理论上可以用于任何元素。

    可以把伪类连接在一起，创建更复杂的行为。

    /* makes all visited linkes olive on hover */
a:visited:hover { color: olive; }

  6. 通用选择器

    作用就像通配符，匹配所有可用元素；
    通用选择器一般用来对页面上的所有元素应用样式；
    与其他选择器结合使用时，用来对某个元素的所有后代应用样式；

    * {
    padding: 0;
    margin: 0;
}

  7. 子选择器

    选择元素的直接后代，即 子元素。
    IE7 和更高版本都支持子选择器；

    #nav>li {
    background: url(folder.png) no-repeat left top;
    padding-left: 20px;
}

  8. 相邻同胞选择器

    用于定位同一个父元素下某个元素之后的元素。

    h2 + p {
    font-size: 1.4em;
    font-weight: bold;
    color: #777;
}

  9. 属性选择器

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

    /* 选择具有 title 属性的 acronym 元素 */
acronym[title] {
    border-bottom: 1px dotted #999;
}
/* 鼠标悬停时指针改为问号 */
acronym[title]:hover, acronym[title]:focus {
    cursor: help;
}
/* 选择 rel 属性为 nofollow 的链接 */
a[rel="nofollow"] {
    background: url(nofollow.gif) no-repeat right center;
    padding-right: 20px;
}
/* 选择 rel 属性值之一为 co-worker 的链接 */
a[rel~="co-workder"] {
    background: url(co-worker.gif) no-repeat left center;
}

  10. 结合使用选择器

    #main-content h2 { font-size: 1.8em; }
#secondary-content h2 { font-size: 1.2em; }

    <div id="main-content">
    <h2>Articles</h2>
    ...
</div>
<div id="secondary-content">
    <h2>Latest news</h2>
    ...
</div>
精通 CSS - 高级 Web 标准解决方案 1. 基础知识

学习 CSS（层叠样式表）最好的一种方式是直接开始使用它。
修改别人的代码是很好的起步方法。

1. 设计代码的结构

  • 使用有意义的标签；

  • 次优方案是使用现有元素，并添加 ID 和类名给它们赋予额外的意义；

    ID 用于标识页面上的特定元素，而且必须是唯一的；
    类名可以应用于页面上任意多个元素；

  • 为元素命名；

    应该根据“它们是什么”来为元素命名，而不应该根据“它们的外观如何”来命名；
    写类名和 ID 名时，需要注意区分大小写；
    使用同一的命名规约；

  • ID 还是类

    类应用于概念上相似的元素；
    ID 应用于不同的唯一的元素；

  • div 和 span

    div 代表 部分（division），可以将文档分割为几个有意义的区域；
    应使用 div 根据条目的意义或功能对相关条目进行分组；
    div 可以对块级元素进行分组；
    span 可以用来对行内元素进行分组或标识；

  • 微格式（microformat）

    • hCalendar 用于日期、日历和时间
    • hCard 用于人和组织
    • XFN 用于人之间的关系
    • hProduct 用于产品说明
    • hRecipe 用于原料和烹饪步骤
    • hReview 用于产品和事件审查
    • hAtom 用于博客帖子等片段式内容
    • 等

  • 不同的 HTML 和 CSS 版本

    • CSS

      CSS1 1996 年末成为标准推荐，包含非常基本的属性，如字体、颜色、外边距；
      CSS2 1998 年发布，添加了高级概念（比如浮动和定位）以及高级的选择器（如子选择器、相邻同胞选择和通用选择器）；
      CSS3 包含很多模块，部分模块已发布、部分仍处于草案或最后公告状态；

    • HTML

      HTML 4.01 1999 年末成为推荐标准；
      HTML 4.01 的 XML 版被命名为 XHTML 1.0；与 HTML 4.01 之间的主要差异是它遵守 XML 编码约定。所有的 XHTML 属性必须包含引号，所有元素必须是封闭的。
      XHTML 1.1 比 XHTML 1.0 更接近 XML。XHTML 1.0 可以作为 HTML 文档，而 XHTML 1.1 页面是作为 XML 发送给浏览器的。这意味着 XHTML 1.1 页面即使只包含一个错误，浏览器也不会显示页面。
      XHTML 2 开发缓慢且过时，HTML 5 正式成为 W3C 项目时停止了开发；
      HTML 5 相对较新，是一个不断变动的规范草案；引入了新的结构性元素（如 heacer、nav、article、section和footer）；包含一批新的表单特性，简化了 Web Application 的开发；