CSS 基础

dvi 标签和 span 标签

这两个标签可以看成是空的容器，其中可以放置内容。

div 表示的是内容块，前后都有换行；span 在行内使用，是段落的一部分。两个标签都没有继承任何外观属性，所以可以使用 CSS 为它们定义任何所需要的样式。

div 标签表示分离的内容块，与段落和标题很像。最常用于组织任意数量的其他元素，可以在一个 div 标签中放置一个标题、几个段落和一个无序列表。div 标签适用于把网页分成不同的逻辑分区，例如横幅、页脚和侧边栏等。

span 标签用于标识行内元素：段落或标题中的单词或短语。其中还经常用到 id 和 class 属性。

HTML5 新增标签

HTML5 新增了许多不同的标签用于替代或拓展 div 标签。

• article：用于标识网页中完整独立的作品，例如一篇博客、文章、在线杂志里的一篇文章或者网页主体的内容。
• header：用于标识页头或横幅，即网页的顶部，通常包含徽标、站内导航、页面标题和标语等。
• section：用于组织相关内容，例如一本书里的一章。
• aside：用于表示与附近的内容有关的内容。例如纸质杂志的旁注可以放在 aside 标签里。
• footer：包含通产放在页脚的信息，例如版权声明、法律信息和一些站内导航链接等。一个网页不限于只使用一个 footer 元素，article 元素里可以使用 footer 元素放置于文章相关的信息，比如脚注、参考资料与引用等。
• nav：用于放置主要的导航链接。
• figure：用于标识插图。标签中可以放置一个 img 标签，以及 figcaption 标签，为 figure 标签里的图片添加图题。

支持 IE8

IE8 无法识别 HTML5 标签，如果一定要支持 IE8 ，有两种解决方案。

• 不使用 HTML5 新增的标签，继续使用 div 标签结构化 HTML。

• 在 head 标签结束前加一段内容：

  <!-- [if lt IE 9]>
  <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

  通过“IE 浏览器条件注释”把一些 js 代码嵌入网页，而且这段代码只对 IE9 之前的版本可见。使得他们加载一小段 js 代码，强制浏览器识别 HTML5 标签，并解析依附在这些标签上的 css 样式。

  这段代码只会影响浏览器显示和打印 HTML5 标签的方式，并不能让浏览器真正支持 HTML5 标签，做出该有的反应。

编写结构良好的网页的一些技巧

• 使用各级标题标识相对重要的文字。
• 使用 p 标签标识文本段落。
• 使用无序列表 ul 列出几个相关条目，例如导航链接，目录等。
• 使用有序列表 ol 列出操作步骤，或者定义一些条目的顺序。
• 如果想创建词汇表，定义术语的含义，可以使用 dl （定义列表）、dt （术语）和 dd（描述）这些标签。
• 引用的话，长的句子可以使用 blockquote 标签，在长段落中插入简短的引文可以使用 q 标签。
• 使用 cite 标签引用书名、报纸中的文章或者网站名，使用 address 标签标识和提供谋篇文章作者的联系信息（适合标识版权声明）。
• 不要使用任何仅用于改变文字或图像外观的标签和属性。
• 如果找不到合适的标签，但是想标识网页中的一个或多个元素，为其设计独特的外观，可以使用 div 和 span 标签。
• 不要滥用 div 标签。创建导航栏时，ul 是更好的选择。
• 记得关闭标签。
• 使用 W3C 的验证程序验证网页。

剖析 CSS 样式

p {color: red; font-size: 1.5em;}

• 选择符：告诉 Web 浏览器把样式应用到哪个或哪些元素上。
• 声明块：位于选择符之后，是想应用到所选元素上的全部格式指令。从 { 开始，到 } 结束。
• 声明：位于声明块之间。由两部分组成：属性和值。属性和值之间由冒号分隔，整个声明以分号结尾。
• 属性：CSS 提供了很多格式选项，称为属性，指代某种样式效果。
• 值：为 CSS 属性提供值。

样式表类型

• 行内样式，写起来浪费时间，而且更加耗费带宽。

  <h1 style="color: #fff; font-size: 3em;">

• 内部样式。

  <title>CSS</title>
  <style>
  h1 {
    color: #fff;
    font-size: 3em;
    margin: 0;
  }
  </style>
  </head>

• 外部样式。

  <link href="styles.css" rel="stylesheet">

  ​