第1章 css和文档

1，元素：替换元素（img input），非替换元素（大多数span）。

2，link：rel（代表关系：stylesheet，候选样式表：alternate stylesheet）；type（text/css）；media：（all（所有表现媒体， screen，print），title（配合候选使用）。

3，@import url(sheet1.css) 需在style内使用，放在其他css规则之前。

4，向后可访问性：<style><!-- 样式 --></style>，这样较老浏览器会将style忽略，能理解css的浏览器能正常读取样式表。

5，css注释：/* */。

第2章 选择器

1，对声明分组时，一定要在各个声明的最后使用分号。

2，p.warming.help {background:red;} 只匹配class包含warming和help的p元素，如果p包含warming和其他的则不能匹配。

3，实际上，浏览器并不检查html中id的唯一性，但这会导致编写dom更困难。

4，属性选择器：h1[class] {...}

h1[class=''] {...}完全匹配

h1[class~=''] {...}部分匹配 [class^='']以什么开头 [class$='']以什么结尾 [class*='']包含什么的所有元素

*[lang|='en']特定属性选择器，会选择lang属性等于en或以en-开头的所有元素。

5，选择子元素：h1>strong；选择相邻兄弟元素h1+p（h1和p有共同父元素，最终选择p）。

6，链接伪类：未访问链接:link，访问过链接:visited（它们都是静态的），等同于<body link='' vlink=''>。

动态伪类：焦点:focus，鼠标停留:hover，激活:active。（动态伪类可以用于任何元素）

建议伪类顺序：link-visited-focus-hover-active。

选择第一个子元素（:first-child)，很容易误解，是所有第一个子元素（在下面例子中，作为第一个子元素的元素包括第一个p，第一个li和strong及em）。

 <div>

     <p>helooo</p>

     <ul>

         <li>111</li>

         <li><strong>222</strong></li>

     </ul>

     <p>

         <em>333</em>

     </p>

 </div>

根据语言选择（:lang()），如*:lang(fr){color:red;} 这是将所有法语元素变成红色。

伪元素选择器：首字母:first-letter，用户代理动态构成假象元素<p:first-letter>；

第一行:first-line；

之前和之后:before :after。

第3章 结构和层叠

1，实际上，所有样式冲突的解决都是由层叠来处理。

选择器的特殊性：id选择器（0,1,0,0）；类 属性 伪类（0,0,1,0）；各个元素和伪元素（0,0,0,1）；通配选择器（0,0,0,0）；内联样式（1,0,0,0）。

重要性：!important放在声明的结束分号之前。

2，例外：应用到body元素的背景样式可以传递到html元素（html是文档的根元素），相应的可以定义其画布。

大多数框模型属性都不能继承（包括外边距 内边距 背景 边框），继承的值没有特殊性，0特殊性比无特殊性要强。

3，声明权重由大到小：读者的重要声明>创作人员的重要声明>创作人员的正常声明>读者的正常声明>用户代理声明。

通过将伪类链接在一起，可以缓解特殊性和顺序带来的问题。

第4章 值和单位

1，函数式rgb颜色：rgb(color)，color用一个百分数（0%-100%）或者整数三元组（0-255）表示。

十六进制rgb颜色：将三个介于00-FF的十六进制数连起来，就可以设置一种颜色。

web安全颜色：在256色计算机系统上总能避免抖动的颜色。rgb值20%和51的倍数，0% 0也是，十六进制值00,33,66,99，cc，ff。

2，绝对长度单位：in cm mm pt pc。

相对长度单位：1个em定义为一种给定字体的font-size值（这个值随元素的不同而不同），ex指所用字体中小写x的高度，px非常适合用于度量图像大小（一小网格就是1像素）。

3，a{color:inherit}可以让链接使用继承的color值而非用户代理的默认样式。

4，角度值：度（deg），梯度（grad），弧度（rad），都允许度数。

时间值：ms，s，不允许负值。

频率值：Hz，MHz，不允许负值。

第5章 字体

1，serif字体：这些字体成比例，而且有上下短线；sans-serif：这些字体是成比例的，而且没有上下短线；cursive：模仿人的手写体。

2，建议在所有的font-family规则中都提供一个通用字体，这样当用户代理无法提供特定字体时，就可以选择一个候选字体，如：font-family:Times,TimesNR,...,serif，当字体名包含# ￥ 空格之类的符号时就要加上引号。

3，font-weight：normal和bold分别对应400和700，font-weight是可以继承的，让字体更粗bolder，让字体更细lighter。

4，font-size：larger和smaller缩放因子1.2（通常），百分值是根据从父元素继承的大小，与相对大小关键字一样百分号可以积累。

 p{font-size:12px;}

 em{font-size:120%;}    /* 12px*120% */

 strong{font-size:135%;}    /* 12px*120%*135% */

 <p><em><strong></strong></em></p>

5，font-style：默认值normal，斜体italic，倾斜oblique。

6，font-variant（字体变形）：默认normal，小型大写字母文本small-caps。

7，font-stretch（字体拉伸）：wider...不过现在浏览器都还不支持%>_<%。

8，font-size-adjust（调整字体大小）：目前测试只有firefox支持，x的高度除以font-size的结果称为方面值。

9，font:（font-style font-variant font-weight）（font-size font-family）前三个顺序随意，后面两个固定且必须，line-height可以加在font-size后面且用'/'隔开。

10，@font-face{font-family:'';src:url();}会延迟文档显示。

第6章 文本属性

1，text-indent应用于块级（可以是数值 百分数 inherit），可以继承。

2，text-align用于块级（left（默认） right center justify（两端对齐） inherit），可继承。

3，line-height：em ex和百分数都是相对于元素的font-size值计算的。行间距=（line-height）-（font-size），然后行间距除以2分别加在内容区的顶部和底部就是行内框。

4，vertical-align：用于行内及替换元素，无继承性，默认baseline。sub使元素变为下标，super将元素的基线相对于父元素的基线升高。

5，word-spacing：字间隔，值可为正值 负值 0（narmal）；letter-spacing：字母间隔，值可为正值 负值 0（narmal）。

6，text-transform：uppercase，lowercase，capitalize（首字母大写），none（默认）。

7，text-decoration：underline，overline（上划线），line-through（贯穿），blink（文本闪烁），不能继承（为了使装饰匹配，必须显式的声明其装饰）。

8，text-shadow：水平阴影位置 垂直阴影位置（负值就是左上方） 模糊半径 颜色。

9，white-space：normal（忽略空格换行），pre（空白符不会忽略），nowrap（不换行），pre-wrap（保留空白符换行），pre-line（合并空白符保留换行符）。

10，direction（文本方向）：ltr，rtl；行内元素只有当unicode-bidi设置为embed或bidi-override时才会应用direction。

11，word-wrap：normal（只在允许的断字点换行），break-word（在长单词或url内部进行换行）；如果这一行放不下这个单词会做到下一行。

12，word-break：break-all（允许单词内换行），keep-all（只能在半角空格或连字符处换行）；如果这一行放不下会继，，续放。

第7章 基本视觉格式化（略看的）

1，内边距不能为负值，外边距可以，边框宽度据对不能为负值，border-color如果没设则取元素内容的前景色。

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

1，margin（padding）可设置百分数值，是相对于父元素的width计算的；margin外边距会合并，padding内边距不会。

2，对于行内非替换元素：外边距通过改变元素内容在行中的起点来影响换行，margin不影响上下只影响左右；对于替换元素：margin会影响行高。

3，边框默认为none，边框宽度默认为medium（通常2px）。

4，border-style：dotted（点），dashed（虚线），double（双线），groove（3D 凹槽边框），ridge（3D 垄状边框），inset，outset（凸起）。

5，border-width：thin，medium（默认），thick，length。

6，border-color：color，transparent（透明边框）。

7，padding：对于有背景色和内边距的行内非替换元素，背景可以向元素上面和下面延伸。

8，无论替换元素是块级还是行内元素，内边距都会围绕其内容，背景色将填入该内边距（例如图片底部与文字对齐，input与文字居中对齐，而不会覆盖）。

第9章 颜色和背景

1，color是可以继承的；background-color不能继承（默认transparent），如果一个元素没有指定的颜色，那么背景应当是透明的，这样其祖先元素的背景才能可见。

2，所有的背景属性都不能继承。只要有背景图像就应该同时包含一个背景颜色。

3，background-repeat：repeat（默认），repeat-x，repeat-y，no-repeat。

4，background-position：0% 0%（默认），left，center，right，top，bottom，length。如果只出现一个关键字，则认为另外一个关键字是center。如果有两个值必须一起出现，水平值在前垂直值在后。

5，background-attachment：scroll，fixed。

第10章 浮动和定位

1，浮动元素周围的外边距不会合并，如果要浮动一个非替换元素则必须声明width。

2，浮动元素的包含块是其最接近的块级祖先元素，此外，浮动元素会生成一个块级框。

3，浮动规则：①浮动元素的左（或右）外边界不能超过其包含块的左（或右）内边界；

②浮动元素的左（或右）外边界必须是源文档中之前出现的左浮动（或右浮动）元素的右（左）外边界，除非出现浮动元素的顶端在先出现浮动元素的底端下面（这样就不会重叠）。

③左浮动元素的右外边界不会在其右边右浮动元素的左外边界的右边（不会重叠）。

④浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高。

4，负外边距可能导致浮动元素移到父元素的外面。

5，行内框与一个浮动元素重叠时，其边框背景和内容都在该浮动元素之上显示；块框与一个浮动元素重叠时，其边框和背景在该浮动元素之下显示，内容在之上。

6，clear工作原理：它会增加元素的上外边距，使之最后落在浮动元素的下面，这实际上会忽略为清除元素（设置clear的元素）顶端设置的外边距宽度。

清除区域：在元素上外边距之上增加的额外间隔，不允许任何浮动元素进入这个范围内。这意味着元素设置clear时，它的外边距并不改变。之所以向下移是因为清除区域造成的。

7，position：static（默认），元素框正常生成；

relative，元素框偏离某个距离；

absolute，元素框从文档流完全删除，相对于其包含块定位，元素定位后生成一个块级框；

fixed，元素框表现类似于absolute，不过其包含块是视窗本身。

元素可以定位到其包含块的外部。

8， 偏移属性：top，bottom（百分数相对于包含块的高度），left，right（相对于包含块的宽度）。默认值是auto。

9，min-width max-width使元素不至于太宽或太高，而且可以相对安全地混合使用不同的单位。

10，overflow：visible（默认），hidden，scroll，auto。用于块级和替换元素。

11，clip：rect(top,right,bottom,left)，auto。所有偏移都是距左上角的偏移（不允许百分数可以是负值），用于绝对定位元素。

12，visibility：visible（默认），hidden（不可见但还会影响文档布局），collapse（同于hidden）。

13，绝对定位元素的包含块是最接近的position值不为static的祖先元素；如果值过度受限，用户代理会忽略right（bottom）的值（从左向右读）。

14，z-index：auto（默认），integer。

15，固定定位：元素会完全从文档流中去除。

16，相对定位：移动走了之后，原位置空白，可以覆盖其他内容；若过度受限，一个值会重置为另一个值的相反数。

第11章 表布局

1，display：inline（默认），none，blcok，list-item，table等等。

2，border-collapse：collapse（合并边框），separate（默认分隔边框），应用于display值为table或inline-table的元素。

3，border-spacing（边框间隔）：默认为0，length（除非为separate，否则忽略该属性）。

4，empty-cells（空单元格）：show（默认），hide。

5，table-layout：auto（默认），fixed。

第12章 列表与生成内容

1，列表类型（list-style-type）：disc（默认），circle等等。

2，列表项图像（list-style-image）：none（默认），url()。

3，列表标志位置（list-style-position）：outside（默认），inside。

以上均用于display值为list-item的元素。

4，使用外边距和内边距实现缩进：ul{margin-left:0;padding-left:1em}或ul{margin-left:1em;padding-left:0}。

5，指定内容（content）：normal（默认），attr(href)。

6，生成引号（quotes）：' " '  ' " '。

7，counter-reset（设置计数器起点），counter-increment（递增一定的量），还需结合content属性和一个与计数器有关的值。

第13章 用户界面样式

1，系统字体：caption，icon，menu，message-box，small-caption，status-bar这些值只能用于font属性。

2，系统颜色：不建议使用，css3已废除。

3，光标（cursor）：auto（默认，用户代理确定最适合的）与default（系统默认的）不同，pointer（手），text（文本图标），crosshair（十字），move，url()等等。

4，轮廓样式（outline-style）：none，dotted，dashed，solid等等，轮廓与边框不同在于只能指定一个关键字，可以画在边框外面。

5，轮廓宽度（outline-width）：thin，medium（默认），thick，length。

6，轮廓颜色（outline-color）：color，invert（默认）。（outline:color style width）。

第14章 非屏幕媒体

1，media：screen，print，all等等（用于link标签中）。

css权威指南--笔记的更多相关文章

  1. css 权威指南笔记（一）

    零零散散接触css将近5年,俨然已经成为一个熟练工.如果不是换份工作,我不知道自己差的那么远:在qunar的转正review中我这种“知其然而不知其所以然” 的状况被标明,我才意识到我已停步不前近两年 ...

  2. css 权威指南笔记（ 五）结构和层叠之三种样式来源

    CSS中的样式一共有三种来源:创作人员.读者和用户代理,来源的不同会影响到样式的层叠方式 首先,创作人员(author's+style)样式应该是我们最熟悉的,如果你是一个前端开发者,那么你写的那些样 ...

  3. css 权威指南笔记（ 六)-基本视觉格式化

    块级元素 百分数:边框的宽度不能是百分数,只能是长度.基本原则是只使用百分数将无法创建完全灵活的元素布局(即所有属性都可设置). 合并垂直外边距 相邻外边距会沿着竖轴合并.两个外边距中较小的一个会被较 ...

  4. css 权威指南笔记（ 五）结构和层叠

    特殊性 重要性 !important; 继承 向上传播例外,应用到body元素的背景样式可以传递到html元素,相应对的可以定义其画布. 大多数框模型属性(包括外边距.内边距.背景.边框)都不能继承 ...

  5. css 权威指南笔记（四）选择器

    规则结构 每个规则都有两个基本部分组成:选择器和声明块.声明块由一个或多个声明组成,每个声明则是一个属性-值对. 元素选择器 声明和关键字 关键字一般由空格隔开:有一种情况例外 font属性中的  斜 ...

  6. css 权威指南笔记（三）结合css和XHTML

    link rel stylesheet alternate stylesheet(候选样式表) title type media all screen print ..... 内联样式

  7. css 权威指南笔记（二）元素

    替换元素 用来替换元素内容的部分并非有文档内容直接表示. img input 非替换元素 其内容由用户代理(通常是一个浏览器)在元素本身生成的框中显示. 块级元素 块级元素生成一个 元素框,(默认)会 ...

  8. css 权威指南笔记

    部分属性选择: 选择class 属性中包含warning的元素 [class~="warning"]{font-weight:bold} 子串匹配属性选择器: 在现代浏览器中得到支 ...

  9. CSS权威指南学习笔记系列(1)CSS和文档

    题外话:HTML是一种结构化语言,而CSS是它的补充:这是一种样式语言.CSS是前端三板斧之一,因此学习CSS很重要.而我还是菜鸟,所以需要加强学习CSS.这个是我学习CSS权威指南的笔记,如有不对, ...

随机推荐

  1. linux用户权限相关内容查看

    linux用户权限相关内容查看 1   用户信息 创建用户一个名为 webuser 的账号,并填写相应的信息: root@iZ94fabhqhuZ:~# adduser webuser Adding ...

  2. Java垃圾回收

    垃圾收集算法 引用计数 堆中的每个对象都有一个引用计数,当对象被引用时引用计数加1,当对象的引用被重新赋值或超出有效区域时引用计数减1,当一个对象被回收后,它所引用的对象的引用计算减1.当一个对象的引 ...

  3. ABP(现代ASP.NET样板开发框架)系列之4、ABP模块系统

    点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之4.ABP模块系统 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)” ...

  4. .NET基础 一步步 一幕幕[循环、逻辑语句块]

    循环.逻辑语句块   好久不写博客了,断更了好几天了,从上周五到今天,从北京到上海,跨越了1213.0公里,从一个熟悉的城市到陌生的城市,还好本人适应力比较好,还有感谢小伙伴的接风咯,一切都不是事,好 ...

  5. 前端MVVM框架设计及实现

    最近抽出点时间想弄个dom模块化的模板引擎,不过现在这种都是MVVM自带的,索性就想自己造轮子写一个简单的MVVM框架了 借鉴的自然还是从正美的Avalon开始了,我2013年写过一个关于MVC MV ...

  6. JSON.parse 与 eval() 对于解析json的问题

    1.eval()与JSOn.parse的不同 eval() var c = 1; //全局变量 var jsonstr1 = '{"name":"a",&quo ...

  7. 前端学HTTP之缓存

    前面的话 Web缓存是可以自动保存常见文档副本的HTTP设备.当Web请求抵达缓存时,如果本地有“已缓存的”副本,就可以从本地存储设备而不是原始服务器中提取这个文档.本文将详细介绍缓存的相关内容 功能 ...

  8. webapi+Task并行请求不同接口实例

    标题的名称定义不知道是否准确,不过我想表达的意思就是使用Task特性来同时请求多个不同的接口,然后合并数据:我想这种场景的开发对于对接过其他公司接口的人不会陌生,本人也是列属于之内,更多的是使用最原始 ...

  9. [SQL] SQL 基础知识梳理（一）- 数据库与 SQL

    SQL 基础知识梳理(一)- 数据库与 SQL [博主]反骨仔 [原文地址]http://www.cnblogs.com/liqingwen/p/5902856.html 目录 What's 数据库 ...

  10. 增强学习（二）----- 马尔可夫决策过程MDP

    1. 马尔可夫模型的几类子模型 大家应该还记得马尔科夫链(Markov Chain),了解机器学习的也都知道隐马尔可夫模型(Hidden Markov Model,HMM).它们具有的一个共同性质就是 ...