第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标签中)。