《CSS网站布局实录》读书笔记

从Web标准、HTML标记、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

现在看这些名称定义挺有趣。

以下是对选择器的补充

- 属性选择器 a[href] {}，对只有某个属性的元素应用样式

- 子元素选择器 h1>strong{}，与后代相比，它只选择某个元素的第一个子元素

- 相邻兄弟选择器 h1+p{}，仅接着另一个元素后的一个元素，邻居

CSS单位

CSS指定的数值均有两种形式。一种是指定的范围，比如float属性，只能应用left,right,none,inherit四种值；另一种为数值，比如宽width：0~9999px。除了px像素单位外还有其它许多类型单位。

- em（相对字体尺寸）em会继承父级元素的字体大小
- ex（相对字符高度尺寸）

<!DOCTYPE html>
<html>
<head><title>11</title><meta charset="utf-8" /><style type="text/css">html{font-size: 12px;}.a{font-size: 2em;}.b{font-size: 2em;}</style>
</head>
<body><div class="a">字体24px<div class="b">字体48px</div></div>
</body>
</html>

em demo

- pt（点/镑point）
- pc（派卡Pica）
- in（英寸Inch）
- mm
- cm
- rgb（颜色单位红绿蓝）
- #ccc（十六进制颜色单位）
- Color Name（浏览器所支持的颜色名称，red/green/black...）

其中一些没听过~~依旧补充

- rem 主要用于移动端
- % 百分比
- rgba 在rgb的基础上增加Alpha透明通道
- deg 度（css3旋转）
- s 秒（动画执行的时间）
- vw 相对于视口宽度
- vh 相对于视口高度

页面关联样式方法

- 行间样式表 <h1 style="font-size:12px;color:red;"></h1>，不推荐使用，最好结构样式相分离
- 内部样式表头部中加入<style type="text/css"></style>
- 外部样式表分为两种，link和@import，其中推荐使用link<link rel="stylesheet" href="style.css" />，import在此不做讲解，两者的区别有兴趣请点击

样式优先权

CSS中难免存在重复定义以及优先使用规则，样式优先权不可忽视的
顺序：!important > style > id > class > tag

详情请移步我以前收集的资料:《CSS权重》

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>