- Html5 入门教程系列(1)– 总览：http://www.ningmop.com/15024.html
- Html5 入门教程系列(2)–javascript 介绍：http://www.ningmop.com/15025.html
- Html5 入门教程系列(3)–CSS 第一部分：http://www.ningmop.com/15026.html
- Html5 入门教程系列(4)–CSS 第二部分：http://www.ningmop.com/15027.html
- Html5 入门教程系列(5)–WebSocket：http://www.ningmop.com/15028.html
说起html5，可能是近 1 - 2 年最火的技术词汇之一了，由于市场需求爆增，人才也趋之若鹜。上一篇 CSS 第一部分，介绍了 CSS 的基本书写方法、基本语法、选择器、优先级、继承性等主要特性。本篇以几个常见的 css 属性为例，介绍具体的 css 属性及其含义。
色彩
在 css 中色彩用于指定元素前景颜色、元素背景颜色等，色彩的表示方法主要有四种：
- 字面值。如
color:black表示将前景色设置为黑色。字面值使用常用的英文单词，这种表示方法能表示的颜色有限，很少用 - RGB 三色组合。如
color:rgb(255,0,0)表示将前景色设置为红色。关于 RGB 是什么这里就不多说了。RGB 还有一种变种RGBA即增加一个alpha值(0~1)，表示透明度，如background-color:rgb(255,0,0,0.5)表示背景色红色，但有 50% 的透明度。 - HSL 组合。HSL 即色相、饱和度、亮度（Hue, Saturation, Lightness），色彩的总量跟 RGB 是一致的。具体参考HSL 和 HSV 色彩空间。与 RGB 一样，HSL 也有 HSLA 版本。
- 16 进制 RGB。如
color:#ff0000与color:rgb(255,0,0)是等价的。其实就是分别加RGB上的十进制数字转成 16 进制，并连起来写，用前导#开头。这种表示方法用途比价广泛，主要是因为很多绘图软件都会提供颜色的 16 进制表示法，比较容易复制。另外，16 进制的文本次长度比 10 进制表示法更短一些。当 RGB 三个值相同时，我们还可以对 16 进制表示法进一步简写。如：color:#f00跟color:#ff0000是等价的。
下表给出一些对比示例，大家可以参考：
带 alpha 透明度和不带透明度的对比（下图的背景是白色，所以透明后显得偏粉）：
字体
字体千千万万，在 Web 标准中，字体分为 5 类，见下表：
- monospace: 一种等宽字体，如
Courier New - serif: 有衬线字体，意思是在字的笔画开始、结束的地方有额外的装饰。如
Times New Roman - sans serif: 没有衬线的字体。如
Arial - cursive: 手写体
- fantasy: 艺术体
在 css 中指定字体可以使用上述 5 类的类名，也可以指定具体的字体。例如：
p.font-1:first-child {
font-family: "Courier New",monospace;
}在上面的代码中，指定了字体为 Courier New 和monospace，那么浏览器会优先选择 Courier New，如果用户客户端刚好没有这个字体，那么选择一个系统中存在的monospace 字体，比如 windows 下可能是Consolas。
由于字体是否可用，取决于用户浏览器是否支持，所以一般而言，在设置字体的时候需要设置一串字体，从左到右，优先级逐渐降低，浏览器会尽可能的选择优先级更高的字体。而出于保险起见，5 类类名字体通常垫底起到保底的作用。比如下面是某网站的全局字体设置
body {<span class="nl">font-family</span><span class="p">:</span> <span class="n">Helvetica</span> <span class="n">Neue</span><span class="p">,</span><span class="n">Helvetica</span><span class="p">,</span><span class="n">Arial</span><span class="p">,</span><span class="n">PingFang</span> <span class="n">SC</span><span class="p">,</span><span class="n">Hiragino</span> <span class="n">Sans</span> <span class="n">GB</span><span class="p">,</span><span class="n">WenQuanYi</span> <span class="n">Micro</span> <span class="n">Hei</span><span class="p">,</span><span class="n">Microsoft</span> <span class="n">Yahei</span><span class="p">,</span><span class="nb">sans-serif</span><span class="p">;</span>
}
除了依赖浏览器支持的字体外，在 CSS3 中，可以通过引用外部字体文件，使浏览器下载特定的字体文件从而支持特殊字体。可以在 css 中使用 @font-face 来声明一个外部字体：
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=3.2.1');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), <span class="sx">url('../fonts/fontawesome-webfont.woff?v=3.2.1')</span> <span class="n">format</span><span class="p">(</span><span class="s2">'woff'</span><span class="p">),</span>
<span class="sx">url('../fonts/fontawesome-webfont.ttf?v=3.2.1')</span> <span class="n">format</span><span class="p">(</span><span class="s2">'truetype'</span><span class="p">),</span>
<span class="sx">url('../fonts/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1')</span> <span class="n">format</span><span class="p">(</span><span class="s2">'svg'</span><span class="p">);</span>
}
.icon {
font-family: FontAwesome;
}
可以看到，一个字体可以由多种不同的文件来提供，为了最大限度做到浏览器兼容，一般按照上面的字体声明方式提供多种选择，这样浏览器可以根据自身的支持情况选择使用哪种类型的文件。上面的代码声明了一个叫 FontAwesome 的字体，一旦声明，可以像使用普通字体一样使用 font-family 设置。
以前我们在 web 中使用小图标的时候，通常通过引入 img 来做。这种方式有个缺点是，图片本身不是矢量的，随着放大和缩小，会有锯齿或模糊。如今，流行的做法是采用字体文件来描述图标，这样的图标相对体积更小，而且基于矢量描述，可随意放大缩小。比较常用的图标字体库有：fontawesome、阿里妈妈图标定制 等。
字号
在 web 中表示字号最常用的方式是 px 单位，这与很多图形或字处理软件的概念类似，不过，在现代 web 开发中，你需要了解其他的单位：
- in: 是指英尺，1 英尺 =2.54cm
- px: 像素单位，96 像素 = 1 英尺
- em: 一个相对像素单位，用来表示当前元素和它的父元素的字体大小的倍数关系，如果父元素是
10px，那么1.5em相当于10x1.5=15px大小 - rem: 一个相对像素单位，与
em不同之处在于rem总是相对根元素进行计算的 - pt: 表示一个点的计量单位，72 点 = 1 英尺
- cm: 厘米
这里重点讲一下 em 和rem，默认情况下，浏览器会已 16px 作为默认的字体大小，于是 1em 和1rem默认都是 16px 大小。em和 rem 都是倍数值。在 Web 页面初期制作中，我们都是使用 px 来设置我们的文本，因为他比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的 Web 页面时，他改变了浏览器的字体大小，这时会使用我们的 Web 页面布局被打破。这样对于那些关心自己网站可用性的用户来说，就是一个大问题了。因此，这时就提出了使用 em 来定义 Web 页面的字体。
body {<span class="nl">font-size</span><span class="p">:</span><span class="m">10px</span><span class="p">;</span>
}
p {
<span class="nl">font-size</span><span class="p">:</span><span class="m">1.4em</span><span class="p">;</span>
}
上面的代码，假设 p 是body的直接子节点，那么 p 的大小将计算为 1.4x10px=14px。em 是根据父元素进行倍数计算的。而 rem 也是倍数计算，但是不同点在于参考的是 root 元素，在 html 中 root 元素就是 <html>。rem 作为 em 的补充，其实更好用，因为，我们往往无法确定 父元素 到底是多大，因为父元素本身可能也是计算出来的。如果能以一个确切的一致的标准来计算可能更为精确，所以 rem 作为 px 和em的中间
解决方案，有时更好用一些。
行元素和块元素
Html 元素有很多，但是都可以归为两类:行元素 和块元素 。html 文档是个类xml 的文档，元素在被渲染时，根据 xml 的前后关系，包含该关系等，按照从上到下，从左到右的顺序的。块元素 大部分情况下总是占据一整行，而 行元素 总是在一行中从左到右渲染，超出一行后通常会换行。常见的块元素如 p div 等，常见的行元素如 span strong 等，例如：
<style type="text/css"><span class="nt">p</span><span class="p">{</span> <span class="nl">background</span><span class="p">:</span><span class="no">red</span><span class="p">;}</span>
<span class="nt">div</span><span class="p">{</span><span class="nl">background</span><span class="p">:</span><span class="no">yellow</span><span class="p">;}</span>
<span class="nt">span</span><span class="p">{</span> <span class="nl">background</span><span class="p">:</span><span class="no">blue</span><span class="p">;</span><span class="nl">color</span><span class="p">:</span><span class="no">white</span><span class="p">;}</span>
<span class="nt">strong</span><span class="p">{</span><span class="nl">background</span><span class="p">:</span><span class="no">green</span><span class="p">;</span><span class="nl">color</span><span class="p">:</span><span class="no">white</span><span class="p">;}</span>
</style>
<p>块级元素 p </p><div>块级元素 div </div><span>行内元素 span </span><strong>行内元素 strong </strong>
行元素 和块元素 除了在渲染规则上有差别外，还有别的区别，比如 块元素 可以设置宽高，具有盒子模型（下面会提到盒子模型），而行元素不具备。然而，元素到底是 行元素 ，还是 块元素，并不绝对，我们可以通过 css 改变默认的行为：
display: block; //元素被强制设置为块元素
display: inline; // 元素被强制设置为行元素
display: inline-block; // 元素按照行元素渲染，但是仍然具有块元素的的盒子模型
display: table-cell; // 偶尔会用到的，元素会变成类似 table 中td的行为
display: none; // 不显示元素，而且元素不会占据任何空间。区别于visibility:hidden盒子模型
理解 行元素 和块元素 ，其实是为了盒子模型打基础的。讨论盒子模型只针对 块元素:
上图描述的块元素的一些要素，称为盒子模型。我们详细来看一看：
- 矩形：一个块元素可以看成一个矩形
- 边框(border)：深色的是矩形的边框，边框默认是 0 宽度的，所以默认看不到边框，我们可以通过设置 border 的一系列属性来改变边框的外观和宽度，甚至是圆角
- 内边距(padding)：从边框到内容中的留白部分称为内边距，通过设置 padding，可以使内容不至于过于贴近边框
- 外边距(margin)：从边框向外遇到另一个块元素或者视图边界之间的留白称外边距，通过设置 margin，可以使不同块元素之间留有一定的空间，不至于过于紧凑。
- 宽度和高度(width、height)：默认情况下，块元素的宽度和高度计算的时候，只计算内容的宽度和高度（不包含内边距、边框的宽度和外边距）。这一点读者要注意，因为如果我们在进行一些布局的时候，宽高计算需要比较精确的话，即使块元素的边框只有 1px 的宽度，也是会影响你的预想的。
通常，我们习惯改变默认的宽高的计算模型，通过设置box-sizing
box-sizing:content-box: 默认行为，只计算内容box-sizing:border-box: 同时计算内容、内边距、边框的和box-sizing:padding-box: 同时计算内容、内边距的和
我们常用的是上述的第二种，并且总在最开始进行全局设置：
html {
box-sizing:border-box;
margin:0;
padding:0;
}上述代码还同时设置了 margin 和padding为 0 是因为，不同的浏览器对块元素都有一个默认的边距设定了，为了使得我们的布局在不同的浏览器中具有相同的表现，会进行这种reset。
浮动
接着讨论块元素（因为块元素最常用，并且布局大多靠块元素）。上面提到了块元素的渲染特点是必然占据整行的，这将导致我们只能从上到下的进行布局，左右结构布局困难：
从上图可以看到，即使我们设置了 div 的宽度，块元素总是默认从上到下占据一整行的渲染，即使右侧有空白也不会尝试填充。
好在有浮动 (float) 机制，使得我们可以让块元素呈现出左右的形态。
基于上面这张图，添加代码:
#div2 {
float:left;
}
我们让绿色的 div2 向左浮动，仔细观察结果，是不是觉得 div2 好像 被浮起来了，而且由于浮起来了，div2 原来占据的行空间被黄色的 div3 占据了! 因此，看上去 div3 被 div2 遮住了上半部分。后面的 div4 仍然贴住 div3，所以也一起移上去了点。
如果设置向右浮动：
#div2 {
float:right;
}
我们让绿色的 div2 向右浮动，这个时候，div2 跑到了屏幕右边直到遇到浏览器的视图右边界，而 div3 和 div4 的行为跟前一个例子一样，仍然占据了 div2 原先的行空间。
我们可以得出一个浅显的认知，浮动就是将某个元素浮起来，放到另一个层里面，并且向左或向右移动，直到遇到某种边界。在 Html 中有一个标准文档流，即正常的块元素从上到下的渲染空间。还有一个用于浮动元素渲染的浮动文档流，浮动元素总是被浮起来，放到这个浮动流中，并可以向左向右直到遇到某种阻力，上面的例子阻力就是 div2 的容器的边界。我们再来看：
#div2 {
float:left;
}#div3 {
float:left;
}
同时设置了绿色的 div2 和黄色的 div3 为浮动，按照上面的理论，div2 被拉入浮动流，并向左直到碰到边界。这个浮动流的上边界是 div2
原先的上边界，因为是由于 div2 的浮动所产生的浮动层；div3 也被拉入到 div2 创造出来的浮动流，于是 div3 的上边界跟 div2 一致，并且开始向左浮动，但是由于 div3 跟 div2 在同一个层中，div3 先碰到了 div2，使得无法继续向左，遇到了阻力，所以，div3 紧跟在了 div2 右边。而 div4 能，好似发现他两个大哥突然消失了一样，向上顶替了老二的位置。于是部分被 div2 遮住了。
可以看到利用浮动就可以让 块元素 产生左右布局的效果。
