第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. 【腾讯Bugly干货分享】OCS——史上最疯狂的iOS动态化方案

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/zctwM2Wf8c6_sxT_0yZvXg 导语 在 ...

  2. ReactNative&weex&DeviceOne对比

    React Native出来有一段时间了,国内的weex和deviceone是近期发布的,我可以说从2011年就开始关注快速开发的跨平台平台技术了,接触过phoneGap.数字天堂.appcan等早期 ...

  3. [模拟电路] 2、Passive Band Pass Filter

    note: Some articles are very good in http://www.electronics-tutorials.ws/,I share them in the Cnblog ...

  4. 一步一步使用ABP框架搭建正式项目系列教程之本地化详解

    返回总目录<一步一步使用ABP框架搭建正式项目系列教程> 本篇目录 扯扯本地化 ABP中的本地化 小结 扯扯本地化 本节来说说本地化,也有叫国际化.全球化的,不管怎么个叫法,反正道理都是一 ...

  5. JavaScript 闭包深入浅出

    闭包是什么? 闭包是内部函数可以访问外部函数的变量.它可以访问三个作用域:首先可以访问自己的作用域(也就是定义在大括号内的变量),它也能访问外部函数的变量,和它能访问全局变量. 内部函数不仅可以访问外 ...

  6. try...catch..finally

    try..catch..finally try{ 代码块1 }catch(Exception e){ 代码块2 }finally{ 代码块3 } catch是抓取代码块1中的异常 代码块2是出异常后的 ...

  7. 6.LibSVM核函数

    libsvm的核函数类型(svmtrain.c注释部分): "-t kernel_type : set type of kernel function (default 2)\n" ...

  8. angular + easyui 做界面验证

    angular结合easyui这事其实并不是很合适,因为:angular的特点之一是双向绑定,页面元素与页面逻辑之间解耦:easyui是对页面元素进行封装,甚至一些组件是隐藏了原本的dom元素,初始化 ...

  9. Android线程管理之AsyncTask异步任务

    前言: 前面几篇文章主要学习了线程以及线程池的创建与使用,今天来学习一下AsyncTask异步任务,学习下AsyncTask到底解决了什么问题?然而它有什么弊端?正所谓知己知彼百战百胜嘛! 线程管理相 ...

  10. Android动画效果之初识Property Animation（属性动画）

    前言: 前面两篇介绍了Android的Tween Animation(补间动画) Android动画效果之Tween Animation(补间动画).Frame Animation(逐帧动画)Andr ...