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，用于装饰按钮、表单和表格
• 未完待续...