第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. EQueue 2.3.2版本发布（支持高可用）

    前言 前段时间针对EQueue的完善终于告一段落了,实在值得庆祝,自己的付出和坚持总算有了成果.这次新版本主要为EQueue实现了集群功能,基本实现了Broker的高可用.另外还增加了很多实用的功能, ...

  2. ABP(现代ASP.NET样板开发框架)系列之22、ABP展现层——导航栏设置

    点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之22.ABP展现层——导航栏设置 ABP是“ASP.NET Boilerplate Project (ASP.NE ...

  3. C++ std::forward_list

    std::forward_list template < class T, class Alloc = allocator > class forward_list; Forward li ...

  4. Python3 登陆网页并保持cookie

    网页登陆 网页登陆的原理都是,保持一个sessionid在cookie然后,根据sessionid在服务端找到cookie进行用户识别 python实现 由于python的简单以及丰富的类库是开发网络 ...

  5. 打印Lua的Table对象

    小伙伴们再也不用为打印lua的Table对象而苦恼了, 本人曾也苦恼过,哈哈 不过今天刚完成了这个东西, 以前在网上搜过打印table的脚本,但是都感觉很不理想,于是,自己造轮子了~ 打印的效果,自己 ...

  6. 存储程序(2)——MYSQL

    1.触发器 触发器是与特定数据表相关联的存储过程,当相应的数据表被INSERT.DELETE或UPDATE语句修改时,触发器将自动执行.触发器可以被设置成在这几种语句处理每个数据行之前或之后触发.触发 ...

  7. 从零开始编写自己的C#框架（21）——添加分类类型页面

    页面权限与页面控件权限经过简单的调试后,终于启用起来了,以后大家添加新页面时,就必须按照本章介绍的方法,将你新增的页面注册到系统中,这样才能访问与进行相关操作. 下面讲讲如何创建一个分类类型的页面. ...

  8. 前端开发工具vue.js开发实践总结

    最近有很长时间没有更新博客了,换了公司,全部的心思都放在项目上了.通过这次项目的上线,让我感受最深的是前后端分离后,前端页面的模块化管理,以及前端页面的数据邦定.在接触vue.js之前,我之前端要用到 ...

  9. 读书笔记--SQL必知必会07--创建计算字段

    7.1 计算字段 字段(field),基本与列(column)含义相同. 利用计算字段可以直接从数据库中检索出转换.计算或格式化过的数据. 计算字段不实际存在于数据库表中,是运行时在SELECT语句内 ...

  10. 安卓Design包之AppBar和Toolbar的联用

    前面讲了Design包的的CoordinatorLayout和SnackBar的混用,现在继续理解Design包的AppBar; AppBarLayout跟它的名字一样,把容器类的组件全部作为AppB ...