CSS魔法(1)——魔法碰撞的前夜

Posted on May 5, 2015

本系列是自己的css学习总结以及一些思考，在于梳理自己的知识体系，同时也希望读者从中收获一些对自己有用的东西^_^。

Why CSS?

简单来讲，css解决了web页面表现和内容杂糅的问题。十几年前大多数站点使用表格布局（现在依旧存在于一些陈旧的官方网站，查看源码会发现是一锅粥），HTML标签包含表现标签，如<font><big>之类。最初的网页没有考虑太多复杂的表现，而网页设计者又不断表达出更多的内容创意，受限于当时的技术，不得不使用大量的标签与图像的堆砌，导致HTML文档承担了过于笨重的表现元素，CSS的出现则使HMTL成为纯粹的结构化文档。CSS开始变得同等重要，而HTML一方面组织着页面内容的结构和大纲，另一方面充当CSS控制外观的脚手架。CSS是易于维护的，只需要合理利用它的继承、层叠等特性就能快速而精准的确定网页文档外观，颇有四两拨千斤的味道。CSS带来了更为丰富的表现控制，而最新的CSS3标准出台，带来了更加强大的选择器、升级的色彩模式、边框和图像控制、CSS动画、flexbox布局等新特性，将WEB开发变得更加现代化。

从HTML开始

HTML的结构对网页内容结构有重要的影响，语义化，可访问性，SEO。对CSS的重要性同样不言而喻。随处使用<div>，放眼望去的成片class属性是重蹈十年前的覆辙。对着设计图直接开始构建页面是可行的，但对结构要有明确的把握。编写HTML代码时，标签的选择取决于内容的作用而非外观，即使HTML完成后外观毫无章法，交给CSS去实现好了。CSS技术在国内书籍中常被称作div+css，因为<div>标签承担了过多的块级元素的表现，<div>代表部分，它可以将文档划分为几个有意义的区域。<div>标签和<span>标签是css的最常用的hook，一个适用于块级元素，另一个适用于行内元素。HTML5带来了众多语义化的新标签元素，是时候减少满屏div的状况，毕竟新的标签元素还能更好的表现文档大纲和语义。在HTML5中还定义了微格式(microformat)，用于突出人、地点或日期等类型的信息，详见：张鑫旭-HTML5扩展之微数据与丰富网页摘要。
一些HTML的编写提示：

用标题表示文本的相对重要性。
对文本段落使用<p>标签。
对包含几个相关项目的列表，使用无序列表，如导航链接、标题。
使用有序列表来表示一个过程的步骤或一组项目的顺序。
如要创建一个术语表及其定义或描述，则要使用<dl>标签，并结合使用<dt>及<dd>标签。
对长引用使用<blockquote>标签，对短引用使用<q>标签。
利用一些生僻的标签来标记相对应的信息。如用<cite>引用书的标题、新闻报道或网站，用<address>标签来标识网页创作者的联系信息。
如果没有适当的标签，却又必须使用css改变外观，用div和span做hook。
不要滥用div标签。
用w3c检验器检测网页。
《CSS实战手册》David Sawyer McFarland

必要的背景知识

也许你对css的各种属性有一定了解，但一部分基础的东西是容易被忽视的。《CSS权威指南》指出了其中的一些细节。

替换元素和非替换元素

每个元素生成一个框，其中包含元素的内容。替换元素指标签内无具体的内容。如<img>标签，它引用外部的图像内容显示，<input>与之相似，由浏览器生成相关内容，取决于input元素的类型。大多数元素为非替换元素，标签包含的内容在元素本身生成的框中展现。

块级元素和行内元素

块级元素生成一个元素框，默认地它会填充父元素的内容区，旁边不能有其它元素。

行内元素在一个文本行内生成元素框，而不会截断这行文本。（注：其实这样的分类并不严谨，在最新的HTML5标准中，元素的分类为：Flow（流式元素）、Heading（标题元素）、Sectioning（章节元素）、Phrasing（段落元素）、Embedded（嵌入元素）、Interactive（交互元素）、Metadata（元数据元素）。参见WEB标准系列-HTML元素嵌套的详细探讨。只是在css布局中，块级元素和行内元素的分类方便区分元素的表现形式，只是会带来一些元素嵌套的出入）。

如何引入CSS

有四种方式可以在HTML文档中引入CSS样式表。

style元素

1
2
3

<style>
/* 这里是css规则 */
</style>

link标记

1	<link rel="stylesheet" href="style.css">

@import
1
2
3
<style>
@import url(style.css);
</style>
(不推荐使用，增加额外的页面请求，可能带来不可预见的问题。参见：Steve Souder的文章)
行内样式
1
<h1 style="font-size: 30px;">h1</h1>

文档类型与媒体类型

文档类型定义了浏览器解析文档的模式，现在不必考虑选择文档类型声明的版本，HMTL5的做法：

1	<!DOCTYPE html>

媒体类型是为了适应多终端设备的浏览需求的一种解决方式，让页面适应多终端，提升用户体验。

媒体类型的引用方式:

link标记

1 2	<link rel="stylesheet" href="style.css" media="screen"> <!-- 屏幕显示设备 --> <link rel="stylesheet" href="print.css" media="print"> <!-- 打印设备 -->

@import

1 2	@import url(style.css) screen; @import url(print.css) print;

@media
1
2
3
@media screen {
/* CSS 样式 */
}

关于媒体类型的更多信息将在响应式设计部分指出。

CSS魔法笔记