CSS 权威指南 CSS实战手册 第四版（阅读笔记）

前言：

　　对于程序员,学习是无止境的,知识淘换非常快,能够快速稳固掌握一门新技术,是一个程序员应该具备的素质.这里将分析本人一点点不成熟的心得.

　　了解一门语言,了解它的概念非常重要,但是一些优秀的设计思想需要细心和大量实践才能慢慢参悟,在这之前需要做的是能够运用它来开发,那么了解一些基础特性非常有必要,通常这些特性是需要经验积累,从各种坑中累计出来,但是还有一种看似很笨却很有效的学习方法.那就是将别人的经验记录下来,有事没事都拿出来看看,集合开发中的经验,这会非常有效.

 

流式布局 http://blog.html.it/layoutgala/index.html

更多模板http://templated.co

布局工具http://www.pagecolumn.com

重置样式http://Nicolas.github.io/normalize.css | https://github.com/necolas/normalize.css/

 

寻找 web 字体

http://www.theleagueofmoveabletype.com 由几个设计师发起，第一批提供自制的免费字体供别人在网站中使用的站点之一

http://www.exljbris.com 提供经典的免费字体

http://openfontlibrary.org 提供了400多个免费字体，而且都可以在网站中使用

http://www.fontsquirrel.com 这是web字体领域具有里程碑意义的网站，提供字体数量超过一千个。除此之外，Font Squirrel 还提供了在线工具，能把TrueType或OpenType字体转换成其他格式，包括 EOT\SVG和WOFF，以及WOFF2

http://google.com/fonts 这是Google提供的一个简单且免费的web字体服务。

 

编写HTML时兼顾CSS

    简单的HTML对搜索引擎友好。不能在HTML中直接控制网页的外观，只能吧HTML当作结构化内容的工具，内容的外观由CSS负责。

    IE8不支持H5

    不要使用table布局网页，CSS能实现相同的效果，并简单许多

    不要滥用BR进行段落换行，浏览器会插入间隔，有时并不需要这种行为

    HTML遵守一定的规则，例如

使用字体

　　font-family: Arial, Helvetica, sans-serif Web浏览器首先会检查电脑有没有安装Arial字体，如果没有坚持Helvetica以此类推

　　衬线字体适合显式大段文本，大多数人觉得衬线（字形笔画末端的装饰细节）能有效的把一个字母引向后一个字母，利于阅读

　　常见的：Times、Times New Roman、Georgia

　　无衬线字体通常显式标题与中文，外观简洁明了

　　常见的：Arial、Helvetica、Verdana

使用Web字体

　　@font-face指令，告诉浏览器字体的名称和下载地址

　　@font-face{

　　　　font-family:"League Gothic";

　　　　src:url('fonts/League)Gothic-web font.woff');

　　}

　　font-family属性，指定Web字体的方式与指定电脑中已安装字体的方式一样

修改字号

　　常用字号单位px、关键字、em、rem、%

　　使用像素 px

　　这种值与浏览器设置完全无关，在不同电脑与浏览器显式的文字大小一致，最为常用

　　使用关键字、百分比、em

　　这三种设定字号的方式，其工作原理是在浏览器预设字号的基础上增大或减少，也就是说，如果样式表中没有设定字号，Web浏览器会使用预设的字号，大多数浏览器非标题里的文本字号是16像素，这是基准字号

　　关键字 CSS提供了七个字号关键字，这些关键字在基准字号的基础上调整字号大小

　　xx-small、x-small、small、medium、large、x-large、xx-large

　　百分比 百分数与关键字一样，根据浏览器基准字号调整文本大小，不过精确度更高，如果基号是16px那么100%就是16px

　　em 与百分比原理相同，em一词源于纸张印刷业 1em等价于100% 0.5em 等于 50%

　　rem root em简称，字号的大小基于根元素而定（html）大多数情况基于基准字号而定

六

字符间距和单词间距

　　letter-spacing、word-specing 调整字符和单词之间的距离。增加间距让标题看起来更稳重庄严。如果想减少字符间距，要使用负值。

为文本添加阴影

　　text-shadow 属性需要四个信息：更想偏移值（阴影距离文本左边或右边多远），纵向偏移值（阴影距离文本上边或下边多远），阴影的模糊成都和投影的颜色

　　添加多个投影在一个投影后加上逗号

　　IE9及之前版本不支持投影

 调整行间距

　　line-height 属性能让段落中的行稀疏或紧凑。浏览器一般默认把 line-height 属性的值设置为 120%，因此，比这个值小的百分数让各行更紧凑（上部），比这个值大的百分数让各行更稀疏（下部）

　　设置行高时也可以使用 px 、 em 、 % 作为单位。一般来说 % 或 em 比 px 好，因为前两个单位会随着font-size属性的值而变化。

　　浏览器确定行与行之间的距离时，会从行高中减去字号大小。相减之后得到的结果叫行距。

　　只使用数字设定行间距，数字后面没有单位（如em或px）。遇到这种值时，浏览器会拿它乘以字号，确定行高是多少

　　设定行高时最好别用em和%这两单位，而是直接使用数值

　　

 

选择器

*选择器分组

     多个元素以逗号分隔可以同时应用这些样式。

*链接选择器

     选择器并排中间无空格和逗号，那么该样式仅应用于同时存在该选择器的元素比如(#div.div)

*属性选择器（XML文档中特别有用）

     简单属性选择器div[class](表示拥有class属性的div)，指定属性值选择器

     div[class="div"](表示class属性等于div的元素) 具体属性选择器，必须与值完全匹配，此处考虑到前后有空格时，就无法匹配

     img[alt] 这个特例更适用于测试，而不是设计

     img[alt][id][class]属性选择器链接表示时，选择满足所以规则的元素

     div[class~=value]部分匹配选择器，仅满足部分条件就可选择该元素，可应用于所有属性

*子串匹配属性选择器（最低至IE7提供对该系列属性支持）

类型                                        描述

[foo^="bar"]                          选择foo属性值以“bar”开头的所有元素

[foo$="bar"]                           选择foo属性值以“bar”结尾的所有元素

[foo*="bar"]                           选择foo属性值中包含字符串“bar”的所有元素

 

*特定属性选择器

*[lang|="en"]{color:white;}     该选择器匹配以en开头或者等于en的所有元素，这种熟悉选择器最常见的用途是匹配语言值。

 

*兄弟选择器

h1 + p{margin-top:0;}           该选择器匹配h1标签后面所有段落元素

 

*伪类选择器

a:link                                     所有未访问过的锚

a:visited                                 所有已访问过的锚

:first-child                              选择元素的第一个子元素

:lang()                                   lang类似熟悉选择器的|=选择器。伪类比属性选择器稍微健壮一些，在需要语言特定的样式时，大多数情况下伪类是更好的选择。

 

 

*动态伪类

伪类名                                    描述

:focus                                    指示当前拥有的输入焦点的元素

:hover                                    指示鼠标指针停留在那个元素上

:active                                    指示被用户输入激活的元素

     伪类动态元素顺序很重要link-visited-focus-hover-active

 

*结合伪类                              

a:link:hover{color:red;}                                 鼠标未点击的锚链接，当鼠标悬停时，该元素将应用红色字体    

a:visited:hover:lang(de){color:maroon;}         鼠标点击过的锚链接，当鼠标移动上去，该元素是以

 

*伪元素选择器

p:first-letter{color:red;}             这个规则会影响元素中第一个字母。

p:first-line                                这个规则会影响元素中第一个文本行。

所有伪类元素都必须放在出现该伪元素的选择器的最后面。比如p:first-line em就是不合法的。

 

总结：

     通过根据文档的语言来使用选择器，可以创建丰富的CSS规则。我们可以构建只应用少数元素的简单规则，对大量类似元素应用样式也同样简单。由于可以对选择器和规则分组，这使样式表相当简洁，而且分成灵活，相应缩小文件的大小，缩短下载时间。

 

二：结构和层叠

特殊性

     可以使用多种不同的方法选择元素。开发中可能同一个元素可以用多个规则来选择，每个规则都有自己的选择器。这种情况特殊性高者胜出。

     加0，1，0，0。选择器给定的ID属性值。

     加0，0，1，0。选择器给定的类属性值/属性选择或伪类。

     加0，0，0，1。选择器给定的元素和伪类元素。

     加1，0，0，0。内联样式。

     加0，0，0，0。通配选择器。

     

重要性

     p.dark{color:#333 !important; background: white !important;}

     !important 总是放在声明的最后，即分号之前，并且每个属性只能单独设置。

     !important 没有特殊性的特殊性值，与非重要声明分开考虑。如果重要声明与非重要声明冲突，胜出的总是重要声明。

 

继承

     某元素被声明某值，这个值会沿树向下传播到后代元素，并一直继续，知道再没有后代元素继承这个值为止。值绝对不会向上传播。

     HTML中，对于向上传播有一特例：应用到BODY元素的背景样式可以传递到HTML元素（html是文档的根元素），相应地可以定义其画图。

     一般来说，影响元素页面中所在的位置的属性，以及元素内边距、外边距、背景、边框都不会被继承

     继承的值没有特殊性，甚至连0特殊性都没有

     Web浏览器渲染标签时会继承各自内部样式

     通常不使用浏览器内部样式，这样网站在不同浏览器会有不同表现

     

层叠

     如果特殊性相等的两个规则同时应用到同一个元素，最终样式应用取决于靠后的样式，越靠后权重越大。

     冲突中的声明通过这个层叠过程排序，并由此确定最终的文档表示。这个过程的核心是选择器及相关声明的特殊性，以及继承机制。

     忽略特指度 !important

     有选择的覆盖重叠样式，可选择行内样式或者在某文件之后链接覆盖样式

      避免使用ID选择器，因为特制度过高不易覆盖

 

三：文本属性

文本缩进

     p{text-indent:3em;} 这个规则会使所有段落的首行缩进3EM

字体间隔

     p{letter-spacing:1}这个规则会使所有段落文本两端对齐

行高

     line-height

     line-height:1em属性继承自父类时，属性值是根据父类计算，导致子类不能正常显示，通常解决方案是指定一个数，由它设置缩放因子(line-height:1)。

垂直对齐

     vertical-align:sub;下标对齐

     vertical-align:super:上标对齐

     vartical-aling:middle;元素居中对齐

字体间距

     word-spacing:0.5em;词组间隔会以空格为分割线增加文本间空格距离

文本转换

      text-transform

文本装饰

      text-decoration

 

定位

     relative:元素框偏移某个距离。元素仍保持未定位前的形状，它原本所占的空间仍然保留。

     absolute:元素框从文档流完全删除。

     fixed:元素框表现类似于将position设置为absolute，不过包含块是视窗本身。

 

 

 透明度

filter:alpha(opacity=50);
 -moz-opacity:0.5;
 -khtml-opacity: 0.5;

 opacity: 0.5;

 

 

第七章  基本视觉格式化

 

 

基本框

     CSS假设每个元素都有一个或多个矩形框，各个元素框中心有个内容区，这个内容区周围有可选的内边距、边框、外边距，为什么是可选，因为它们的高度可以设置为0

     内容区的背景（某种颜色或平铺图像）也会应用到内边距

     外边距通常是透明的，因此可以看到父元素的背景

     内边距不能是负值，但是外边距可以

     边框的颜色如果没有设定，那么将取元素内容区的前景色（如果一个段落的文本是白色，那么该段落的所有边框都是白色，除非显式声明了另一种边框色）

     边框与内容和内边距有相同的背景

     边框的宽度绝对不能为负

     不同类型的元素（块级元素、行内元素、浮动元素、定位元素）格式化时存在着差别，分别有各自不同的表现

 

包含块

     每个元素都相对于其包含块摆放，包含块就是元素的"布局上下文"

 

正常流

     传统HTML文档中的文本布局就是从上到下从左向右显式

 

非替换元素

     如果元素的内容包含在文档中，则称之为非替换元素

 

替换元素

     指用作为其他内容占位符的一个元素（IMG标签、INPUT标签等）

     改变替换元素的宽度：元素的高度会随之增加，如果一个替换元素的width不同于其固有宽度，那么height值也会随之比例变化，除非height显式设置特定值，反之height也一样

 

块级元素

     段落、标题DIV之类的元素，这些元素在正常流中，会在其框之前和之后生成“换行”

     

行内元素

     span之类的元素，不会在之前或之后生成“行分隔符”

 

根元素

     为文档树顶端的元素，HTML文档中，就是元素html

 

水平格式化——块级元素

     CSS中元素的宽度是从左内边距到右内边距的距离

     正常流中块级元素框的水平部分总和就等于父元素的width

 

水平属性——块级元素

     水平格式化的“7大属性”margin-left border-left padding-left width padding-right border-right margin-right这些属性与块级框的水平布局有关

     水平格式化的“7大属性”只有三个属性可以设置auto值（margin-left、margin-right、width），其余都必须设置特定的值

     如果设置width、margin-left、margin-right中的某个值为auto，余下两个属性指定特定的值，那么设置auto的属性会确定所需要的长度来等于父类元素宽度

     如果3个属性都设置特定的值，即没有任何一个属性设置为auto那么，用户代理将把右外边距重置为auto值“填补”所需的距离

     如果设置margin-left与margin-right的值为auto并且显式设置 width 那么元素会设置为相等的长度，因此元素在父元素中居中

     如果margin-left或者margin-right与width同时存在auto值，那么外边距取值会被减为0

     通过指定负外边距得到更宽的子元素，因为外边距可以为负数，并且“7大属性”相加总和一定是父元素的width

     如果为了满足内容元素总和比父类元素还宽，并且设置固定的margin-right值，由于元素水平属性过分受限时有一个规则，要求重置右外边距，这也会得到一个负右外边距

 

垂直格式化——块级元素

     一个元素的默认高度由其内容决定

     高度还会受到内容宽度的影响，段落越窄，相应就会越高，以便容纳其中所有的内联内容

     CSS中，可以对任何块级元素设置显式高度

     如果假设高度大于显示内容所需高度，多余高度会产生一个视觉效果，好像有额外的内边距一样

     如果架设高度小于显式内容所需高度，浏览器会提供某种方法来查看所有内容，而不是增加元素框的高度，也许是加一个滚动条

     

垂直属性——块级元素

     垂直格式化的“7大属性”margin-top border-top padding-top height padding-bottom border-bottom margin-bottom这些属性与块级框的垂直布局有关

     垂直格式化的“7大属性”只有三个属性可以设置auto值（margin-top、margin-bottom、height），其余都必须设置特定的值

     垂直格式化的“7大属性”的值等于元素包含块的 height ，这往往是块级元素父元素的 height 值（因为块级元素的父元素几乎都是块级元素）

     如果正常流中一个块级元素的margin-top或margin-bottom设置为auto，它会自动计算为0，因此它没有外边距，同时也不能垂直居中

     height 必须设置为 auto 或者是某种类型的非负值

     如果一个块级正常流元素的 height 设置为一个百分数，这个值则是包含块的 height 的一个百分数

垂直属性——块级元素—— auto 高度

     如果块级正常流元素设置 height: auto 显示时其高度将恰好足以包含其内联内容的行盒，会在段落设置一个边框，并认为没有内边距，下边框在文本最后一行下面，上边框在文本第一行的上面

     如果块级正常流元素的高度设置为 auto ，而且只有块级子元素，其默认高度将是从最高块级子元素的外边框边界到最低块级元素外边框边界之间的距离，因此子元素的外边距会“超出”包含这些子元素的元素（这种行为在下面进行解释）。不过，如果块级元素有上内边距或下内边距，或者有上边框或者下边框，其高度则是从最高子元素上外边距边界到最低子元素的下外边距边界之间的距离

     在上例中，将边框改为内边距，对DIV高度的作用还是一样：同样把段落的外边距包含在内

 

合并垂直外边距

     垂直格式化的另一个重要方面是垂直相邻外边距的合并，这种合并行为只应用于外边距。

     两个外边距中较小的一个会被较大的一个合并

 

基本的术语和概念

     匿名文本 是指所有未包含在行内元素中的字符串，空格也是匿名文本的一部分，因为空格与其他字符一样都是正常的字符

     EM框   em框在字体中定义，也称为字符框。实际的字形可能比EM框更高或更矮，font-size 的值确定了各个EM框的高度

     内容区 内容区可以是元素中各字符的em 框串在一起构成的框，也可以是由元素中字符字形描述的框。在替换元素中，内容区就是元素的固有高度再加上可能有的外边距、边框或内边距

     行间距 行间距是 font-size 值和 line-height 值之差。这个差实际上要分为两半，分别应用到内容区的顶部和底部。行间距只应用于非替换元素

     行内框 这个框通过向内容区增加行间距来描述。对于非替换元素，元素行内框的高度刚好等于 line-height 的值。对于替换元素，元素行内框的高度则恰好等于内容区的高度，因为行间距不应用到替换元素

     行框     这是包含该行中出现的行内框的最高点和最低点的最小框。换句话说行框的上边界要位于最高行框的上边界，而行框的底边要放在最低行内框的下边界

 

• 内容区类似于一个块级元素的内容框
• 行内元素的背景应用于内容区及所有内边距
• 行内元素的边框要包围内容区及所有内边距和边框
• 非替换元素的内边距、边框和外边距对行内元素或其生成的框没有垂直效果，也就是说，它们不会影响元素行内框的高度（也不会影响包含该元素的行框的高度）
• 替换元素的外边距和边框确实会影响该元素行内框的高度，相应的，也可能影响包含该元素的行框的高度

 

行内元素

     行内框在行中根据其vertical-align 属性值垂直对齐

 

行内格式化

     行的高度（或行框的高度）由其组成元素和其它内容（如文本）的高度确定

     line-height实际上只影响行内元素和其它行内内容，而不影响块级元素

     只需为块级元素创建 line- height 规则，不必显式的为其所有行内元素声明 line- height

     块级元素上声明 line-height 会为该块级元素的内容设置一个最小行框高度

     行内元素的边框边界由font-size而不是line-height控制

     内边距、外边距和边框都可以应用于行内非替换元素，这些方面不会影响行框的高度

     可以为行内元素指定内边距，这会把边框从文本本身拉开

     外边距不会应用到行内非替换元素的顶端和底端，它们不影响行框的高度，不过，行内元素的两端则是另一回事

     替换元素没有自己的基线

     为行内替换元素增加内边距、边框和外边距会增大其行内框

     负外边距是使行内替换元素挤入其他行的唯一办法

 

Vertical-align

• top将元素行内框的顶端与包含该元素的行框的顶端对齐
• bottom将元素行内框的底端与包含该元素的行框的底端对齐
• text-top将元素行内框的顶端与父元素内容区的顶端对齐
• text-bottom将元素行内框的底端与父元素内容区的底端对齐
• middle将元素行内框的垂直中心与父元素基线上0.5ex处的一点对齐
• super将元素的内容区和行内框上移。上移的距离未指定，可能因用户代理的不同而不同
• sub与super相同，只不过元素会下移而不是上移

 

管理line-height

     通过为元素设置一个 line-height，就提高了行框的总高度，line-height 使用值 1em ，元素的 line-height 将设置为与font-size大小相等

 

缩放行高

     设置 line-height的最好办法是使用一个原始数字值。因为这个数会成为缩放因子，而该因子是一个继承值而非计算值

     如果上述方法不希望生成太多行间距，可以为他另外指定 line-height值为1.0获得与font-size完全相等

 

行内块元素 inline-block

• 是一个混合产物，块级元素和行内元素的混合
• 行内块元素作为一个行内框与其他元素和内容相关
• 它就像图像一样放在一个问本行中
• 行内块元素会作为替换元素放在行中
• 行内块元素的底端默认地位于文本行的基线上，而且内部没有行分隔符
• 行内块元素内部会像块级元素一样设置内容的格式
• 如果增加height属性，比周围内容高，这些属性会使行高增加

 

第八章 内边距、边框和外边距

height

• 应用于块级元素和替换元素
• 无继承性
• 百分数相对于包含块的 height 计算

margin

• 应用于所有元素
• 无继承性
• 百分数相对于包含块的 width 计算

 

第十章 浮动与定位

float

• 无继承性
• 应用于所有元素
• 会以某种方式将浮动元素从文档的正常流中删除，不过它还是会影响布局
• 一个元素浮动时，其他内容会“环绕”该元素
• 浮动元素周围的外边距不会合并，如果其它元素与此图像相邻（这表示水平相邻和垂直相邻），而且这些元素也有外边距，那么这些外边距不会与浮动图像的外边距合并
• 元素比作有塑料边的纸片，图像周围的塑料边（外边距）绝对不会与其他浮动元素周围的塑料边重叠
• 浮动一个非替换元素（包括块级元素），则必须为该元素声明一个width，否则浏览器可能使用最小值（也许CSS新规范有新的规定）
• 要得到正常的非浮动行为，必须有 none 虽然默认值就是不浮动
• 浮动元素会生成一个块级框，不论这个元素本身是什么（也许是行内元素）
• 浮动元素的左（或右）外边界不能超出其包含块的左（或右）内边界
• 两个或者多个浮动元素向一个方向浮动时，并不会覆盖，依次摆放
• 左浮动元素的右边界不会在其右边右浮动元素的左外边界的右边
• 一个浮动元素的顶端不能比其父元素的内顶端更高
• 浮动元素的顶端也不可能比之前出现的浮动元素的顶端更高
• 如果浮动元素周围有其它元素，那个元素的背景色和边框会延伸到浮动元素的后面

 

position

• relative 元素框偏移某个距离，元素仍保持其未定位前的形状，他原本所占的空间仍保留
• absolute 元素框从文档流完全删除，并相对于其包含块定位，元素原先正常文档流所占空间会关闭，元素定位后生成一个块级框
• static 元素框正常生成，块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中
• fixed 元素框的表现类将position设置为absolute，不过包含块是视窗本身
• “根元素”的包含块由用户代理建立，根元素就是html有些浏览器会使用body作根元素，多数浏览器初始包含块是一个视窗大小矩形
• 非根元素，如果其position是relative或static，包含块则由最近的块级框、表单元格或行内块祖先框的内容边界构成
• position值是absolute,包含块设置为最近的position值不是static的祖先元素（可以是任何类型）
• • 如果这个祖先是块级元素，包含块则设置为该元素的内边距边界，就是由边框界定的区域
  • 如果这个祖先是行内元素，包含块则设置为该祖先元素的内容边界
  • 如果没有祖先，元素的包含块定义为初始包含块
• 元素可以定位到其包含块的外面，也就是说明“包含块”一词实际上应该是“定位上下文”
• top 描述了定位元素上外边距边界离其包含块的顶端多远。如果 top 为正值，会把定位元素的上外边距边界下移，若为负值，则会把定位元素的上外边距移到其包含块的顶端之上
• 偏移定位元素的外边距边界时，带来的影响是元素的所有一切（包括外边距、边框、内边距和内容）都会在定位的过程中移动
• 可以为定位元素设置外边距、边框、内边距和内容，兵包含在偏移属性定义的区域内
• 偏移属性定义了距离包含块相应边的偏移
• 如果使用top、right、bottom、left来描述元素4个边的放置位置，那么元素的高度和宽度将由这些偏移隐含确定
• 如果使用top、right、bottom、left来描述元素4个边的放置位置，那么元素的高度和宽度对布局没有任何作用，除非向元素增加了外边距、边框、内边距
• 定位元素的 width 和 height 的默认值是 auto

 

流式布局和固定宽度布局

• 浮动三栏布局，设置其宽度为百分数
• 设置max-width控制最大宽度
• CSS样式命名以及属性以用途为主，比如相同样式的多组标签可以用群组选择器，同意控制方便管理

 

影响式布局

• 相关书籍 responsive web design

 

响应式布局基础

•      移动浏览器不会显示100%大的页面。如果这么做，大多数高于屏幕的像素将放不下，一次只能看到页面的一部分。其实手机浏览器会缩小网页，以便在屏幕中能放得下，但是响应式网页就是为了改善网页在手机中的外观，所以不希望被缩小，导致文本太小而难以阅读
• 简单方法就能覆盖浏览器的这种行为 <meta name="viewport" content=" width=device-width" > viewport指代浏览器的显示区域，device把浏览器设为手机宽度
• 图片响应布局 img { max-width:100% } 这个样式把图像的最大宽度设为容器宽度的100%（这里max-width与width有何区别？）解释：max-width权重大于width 当遇到width干扰时不会受影响
• 去掉浮动导航栏转化行内块级元素是居中显示这些按钮的唯一方式

使用Skeleton栅格系统

• Skeleton提供基础的栅格样式外还有额外的CSS，用于装饰按钮、表单和表格
• 未完待续...