CSS入门与基础不二之选，内容十分全面，实体书已不印刷，只能下载电子版
书的背景：
国内第一本web标准的CSS布局书，2006年9月第一版，作者李超。
环境背景：
当时主流浏览器IE6与Firefox，兼容浏览器IE5/4/Opera/Mozilla，web2.0标准是XHTML1.0，为XML过渡而生，页面编码格式gb2312，使用工具Dreamweaver可视化开发。
基础篇之XHTML:
HTML结构包括头部（head）主体（body）两大部分。头部描述浏览器所需信息如<title>无标题文档</title>，主体包含所要展现的具体内容，如<h1>1级标题</h1><p>文字段落</p>。
以前头部需要申明DTD，告诉浏览器页面解析规则，这里不做赘述啦，现在的页面框架，如下
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>我的第一个网页</title> 5 <meta charset="utf-8" /> 6 </head> 7 <body> 8 <h1>Hi</h1> 9 </body> 10 </html>
HTML基本结构
基础篇之CSS：
- CSS语法组成
- 仅由选择符（Selector）、属性（Property）、值（Value）三部分组成。
- CSS选择符（器）
- 类型选择符 网页标签名作为名称的选择符。如常见的div{属性：值},p{olor:red;},span{..}，现称元素/标签选择器
- 群组选择符 对一组XHTML对象进行相对样式的指派。如h1,h2,p,span{}，现称选择器分组
- 包含选择符 对某个对象的子对象进行指派。如h1 span{}，现称后代选择器
- id及class选择符 对标签进行自定义名称。如<h1 id="title"></h1>，<div class="title"></div>
- 标签指定式选择符 想对标签指定id或class。如h1#content{}h1.title{}
- 组合选择符 无论什么样的选择符均可进行组合使用。如h1 .title{} h1 .title,#content h2{}
- 伪类及伪对象选择符 是一种特殊的类和对象，CSS会自动支持，名称不能被自定义。如a:hover{}
- 通配选择符 代替不确定的内容，使用“*”指所有文件。如*{}，以前用来替换浏览器对一些标签设定的默认样式，现解决方法css reset
现在看这些名称定义挺有趣，还有意思的一点，作者整书当中将HTML内部元素称为对象，提起对象，估计脑海中浮现的是Js语言中的对象吧。
以下是对选择器的补充
- 属性选择器 a[href] {}，对只有某个属性的元素应用样式
- 子元素选择器 h1>strong{}，与后代相比，它只选择某个元素的第一个子元素
- 相邻兄弟选择器 h1+p{}，仅接着另一个元素后的一个元素，邻居
- CSS单位
CSS指定的数值均有两种形式。一种是指定的范围，比如float属性，只能应用left,right,none,inherit四种值；另一种为数值，比如宽width：0~9999px。除了px像素单位外还有其它许多类型单位。
- em（相对字体尺寸）
- ex（相对字符高度尺寸）
- pt（点/镑point）
- pc（派卡Pica）
- in（英寸Inch）
- mm
- cm
- rgb（颜色单位红绿蓝）
- #ccc（十六进制颜色单位）
- Color Name（浏览器所支持的颜色名称，red/green/black...）
其中好些没听过~~依旧补充
- rem 主要用于移动端
- % 百分比
- rgba 在rgb的基础上增加Alpha透明通道
- 页面关联样式方法
- 行间样式表 <h1 style="font-size:12px;color:red;"></h1>，不推荐使用，最好结构样式相分离
- 内部样式表 头部中加入<style type="text/css"></style>
- 外部样式表 分为两种，link和@import，其中推荐使用link<link rel="stylesheet" href="style.css" />，import书中没有提到，在此也不做讲解啦，两者的区别有兴趣请点击
- 样式优先权
CSS中难免存在重复定义以及优先使用规则，样式优先权不可忽视的，关于CSS权重详解，请跳转吧~
顺序：!important > style > id > class > tag
CSS网页布局与定位：
- 认识div
div是个容器，主要是用来布局和嵌套
- 一列宽度自适应
将固定值改为百分比的形式就行，div默认将占据整行空间即100%的自适应
1 #layout{
2 background:#ccc;
3 width:80%;
4 height:200px;
5 }
- 二列宽度自适应
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>css两列右列宽度自适应布局</title>
5 <style type="text/css">
6 .left{
7 width: 300px;
8 background: yellow;
9 float: left;
10 }
11 .right{
12 background: gray;
13 }
14 </style>
15 </head>
16 <body>
17 <div class="left">
18 111
19 </div>
20 <div class="right">
21 222
22 </div>
23 </body>
24 </html>
两列自适应
- 三列浮动中间自知应
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>三列宽度自适应</title>
6 <style type="text/css">
7 *{
8 padding:0;
9 margin:0;
10 }
11 html,body{
12 height: 100%;
13 }
14 .left{
15 width: 300px;
16 background: yellow;
17 position: absolute;
18 top: 0;
19 left: 0;
20 height: 100%;
21 }
22 .right{
23 background: gray;
24 position: absolute;
25 top: 0;
26 right: 0;
27 width: 200px;
28 height: 100%;
29 }
30 .center{
31 background: green;
32 margin: 0 200px 0 300px;
33 height: 100%;
34 }
35 </style>
36 </head>
37 <body>
38 <div class="left">
39 左列
40 </div>
41 <div class="center">
42 中间
43 </div>
44 <div class="right">
45 右列
46 </div>
47 </body>
48 </html>
三列中间自适应
- 高度自适应
一个高度是否能百分比显示关键在于对象的父级对象
1 html,body{
2 height:100%;
3 }
4 .content{
5 width:100px;
6 height:100%;
7 background:gray;
8 }
- 盒模型
W3C对它的定义指CSS布局中的每一个元素，在浏览器的解释中，都被当做盒状物。只是浏览器对元素的一种理解方式。
注：CSS盒模型的设计当中，它的宽高由width/height/padding（内边距）/margin（外边距）/border（边框）来提供。
CSS内容排版：
- 有意思的文字样式，贴上练习代码
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>文字</title>
6 <style type="text/css">
7 html,body{
8 padding:0;
9 margin:0;
10 }
11 header:first-letter{
12 float: left;
13 font-size: 2em;
14 }
15 header p:first-line{
16 font-size: 2em;
17 }
18 p.a{
19 word-spacing:30px;
20 }
21 p.b{
22 word-spacing:-10px;
23 }
24 </style>
25 </head>
26 <body>
27 <header>
28 我就是我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的我不一样的我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的我
29 <p>YES我就是我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的</p>
30 </header>
31 <p class="a">This is some text. This is some text我就是我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的</p>
32 <p class="b">This is some text. This is some text我就是我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的我，不一样的</p>
33 </body>
34 </html>
显示效果
- 不规则的文字环绕（实现方法神奇吧）
可选了解的内容：
书中提到的浏览器兼容与解析问题，大家可以进行了解一下或直接查阅最新的一些资料
书中提到常见网站元素设计CSS的解决方案，比如圆角，横向/纵向导航，弹出式菜单等
快速预览及跳过的内容：
CSS可视化开发与调试，主要讲的是DW工具的使用。
小结：
想看看web2.0时代革新内容及了解它的历史，想要详细了解全面认识CSS，比如什么是div,span,id,class，文档流的概念，浮动布局，相对与绝对定位布局，有序与无序列表运用，更多的文字样式，水平/垂直居中，css sprite（精灵），网站换肤等及以上种种，可以看看这本书，做为起点，前端道路还很长，打好基础更好的拥抱明天，拥抱现在的web标准html5和css3吧~