本文摘自 《CSS权威指南第三版》,只是对学习过程中自己比较生疏的部分进行了摘记,所以可能不会满足所有人的胃口,有需要的朋友建议还是读读原书,值得一读的好书。
Chp02 选择器(我只写不支持的情况,不写就表示支持。)
子选择器 >
相邻兄弟选择器 + (只能选择仅跟在后面的第一个兄弟)
例:
.second {color: red;}
.second + li {color: blue;}
<ul>
<li >First List item</li>
<li class="second">Second List item</li>
<li>Third List item</li>
<li>Forth List item</li>
</ul>
结果是只有第三个会变蓝色,第一和第四个都不会。
IE6: 不支持 子选择器> ,兄弟选择器+, 和属性选择器[]。IE6支持多重类,即div.a.b的形式。
P38--属性选择器:[attr opr value]
引入: 在CSS2中引入。
原因:类选择器和ID选择器只能在HTML,SVG,MathML中使用,其他标记语言中不能使用这些选择器,为解决这个问题,CSS2引入了属性选择器。
支持: Safari, Opera 及 所有基于Gecko的浏览器都支持, 但IE6/win和IE5/mac并不支持。 IE7全面支持所有CSS2.1属性选择器,还支持部分CSS3属性选择器。
= 完全匹配
|= 等于某值 或 以某值开头(多用于语言的匹配)
^= 以某值开头
$= 以某值结尾
~= 部分匹配,只要包含就可以
*= 包含某值
~=与*=的区别:
[title~='this'] 选择具有att属性且属性值为一用空格分隔的字词列表。
比如<img title='yes this' />
[title*='this'] 选择具有att属性且属性值为包含val的字符串的E元素。
比如<img title='thisistrue' />或<img title='yes this' />
。
比如<img title='thisistrue' />或<img title='yes this' />
P51--伪类选择器
l 动态伪类
n :link 超链接专属,未被访问过时
n :visited 超链接专属,访问过后
n :active 一个元素被用户激活时,最常见的是被点击但鼠标尚未释放时
n :hover 一个元素鼠标悬停时
n :focus 一个元素获得输入焦点时
l 静态伪类
n :first-line
n :first-letter
n :before
n :after
多个伪类之间可以组合,前提是彼此不能互斥。
IE6:只支持a标签上的动态伪类,不支持静态伪类;IE6不能正确处理多伪类组合,
如:visited:hvoer很可能处理成:hover.
IE7:支持所有元素的动态伪类,但不支持表单元素的:focus。
===================================================================
Chp03 级联
l Style行内样式:1,0,0,0
l Id: 0,1,0,0
l Class, pseudo-class,attribute selector: 0,0,1,0
l Element, pseudo-elment: 0,0,0,1
l *:通配符选择器的权重为0,但高于继承来的样式。
例如:
p {color:red; }
*{color: blue;}
则p 中em的color将是blue而非red.
因为继承来的样式不具有任何权重,甚至连0都不如,我们可以认为成负值。
根据样式来源排序(按优先级降序排列):
1.Reader important declarations
2.Author important declarations
3.Author normal declarations
4.Reader normal declarations
5.User agent declarations
6.通配符样式声明
7.Inherit style
旧式页面中的<font>等标签声明的样式,会被当作权重为0且出现在author style sheet的开头。因此任何author或reader的样式都将覆盖它,但它不会被user agent style覆盖(因为它是被放在了author style开头嘛,相当于是author style的一部分)。
Chp04 值和单位
P79 rgb(70%,30%,20%): 百分比相对于的是255,即70% = 255*0.7.
P83 Web安全色
Web安全色是指在不同平台上表现基本一致的256种颜色。使用rgb()+number时能被51带除,如rgb(0,204,51);使用rgb()+%时能被20整除,如rgb(20%,40%,60%); 使用#时能被3整除,即每种颜色取值只能在00,33,66,99,CC,FF中取,如#FC3, #369; #096;#CCF等。
P91. Url(path) :path不需要用引号包起来,且‘url’和‘(’之间不能有空格。
Chp05 Font
P95 Font Families
l Serif: 有衬线字体,如Times, Georgia, New Century Schoolbook等;
l Sans-serif: 无衬线字体,如Helvetica, Geneva, Verdana, Arial, Univers等;
l Monospace: 等宽字体, 如Courier, Courier New, Andale Mono等;
l Cursive: 手写字体,如Zapf Chancery, Author, Comic Sans等;
l Fantasy: 其他字体,注意并没有哪一种字体真正将自己定义为这种字体,只是某种字体不适合上面那几种时才会被归到这一类,这类字体并不多,少数的几个例子是Western, woodblock, Klingon等。
Font-weight
100-900: 100-400, 500-600,700-900,大多字体一般只有两个或三个级别。
Bolder: 不能超过900,即900的子元素再bolder也只能是900了。
Lighter: 不能低于100,同上。
Font-size
Xx-small,x-small,small, medium,large,x-large,xx-large, 浏览器默认值是medium.
Lager和smaller可以超越xx-small和xx-large的值。
百分比:百分比值是基于父元素的字体大小。
Font属性
使用font属性时,font-size和font-family必须出现,且必须出现在正确的位置上。
[Font-style|font-variant|font-weight] <font-size>[/line-height]<font-family>
前三个属性是可选的,且位置可以互换。
注意:font-style: italic; font: 12px serif; 将会使之前设置的italic失效。这是因为使用font时会将缺少的参数填充为默认值,因此会覆盖之前的参数。其他组合属性如background等表现也是如此(这点我已验证)。
======================================================================================
Chp06 Text Properties
l Line-height: 继承的是计算值。
Div {font-size: 10px; line-height: 1em;}
Div p {font-size: 18px;}
则div p的line-height将是10px而非18px。
要避免这种情况,可以将div line-height声明为1,这是一个缩放因子,根据当前元素的字体缩放相应的倍数。
l Vertical-align: 非继承属性,只适用于替换元素和inline元素。因此vertical-align无法影响块级元素内文本的垂直对齐方式。
浏览器支持:所有浏览器都支持 vertical-align 属性。
注意:任何的版本的 IE(包括 IE8)都不支持属性值 "inherit"。
可能的值
值 | 描述 |
baseline | 默认。元素放置在父元素的基线上。 |
sub | 垂直对齐文本的下标。 |
super | 垂直对齐文本的上标 |
top | 把元素的顶端与行中最高元素的顶端对齐 |
text-top | 把元素的顶端与父元素字体的顶端对齐 |
middle | 把此元素放置在父元素的中部(基线以上0.25em处)。 |
bottom | 把元素的顶端与行中最低的元素的底端对齐。 |
text-bottom | 把元素的底端与父元素字体的底端对齐。 |
length |
|
% | 相对于元素的 "line-height" 值。允许使用负值。 |
inherit | 规定应该从父元素继承 vertical-align 属性的值。 |
注意: 当应用于 tabel cell时,只有baseline, top, bottom和middle会被识别。
Baseline: 默认值。将元素的基线与其父元素的基线对齐。如果一个元素没有基线,如图片或input元素,则将它们的底部与父元素的基线对齐。如下图所示,图中红点为一张小图片,其底部与父元素的基线对齐了。
img {vertical-align: baseline;}
重点记忆:vertical-align会增大box height以容纳元素最高和最低的元素,而不是让它们重叠到别的行去:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Vertical align and box height</title>
<style type="text/css">
p {width: 200px;}
span {vertical-align: -200%;}
</style>
</head>
<body>
<p>This is a paragraph with a <span>span</span> which is set to vertical-align: super.</p>
</body>
</html>
- Word Spacing and Letter Spacing
Letter-spacing或word-spacing有可能被text-align:justify;影响。但是规范规定,如果letter-spacing值不为normal(即被定义过),则浏览器不能更改letter-spacing的值,则此时justify只能通过更改word-spacing的值来实现。
与line-height相似,letter-spacing和word-spacing继承的是计算值而非声明值。但与line-height不同的是,letter-spacing和word-spacing不能声明缩放因子,所以只能继承计算值。因此,如果子元素与父元素的字体大小不一致,若想显示得比较正常,子元素应重新声明letter-spacing和wod-spacing:
.father {font-size: 14px; letter-spacing: 0.1em;}
.father strong {font-size: 18px; letter-spacing: 0.1em;}
虽然都是0.1em,但计算后的值是不同的。若strong不声明,则会继承父元素的1.4px间距。Word-spacing也同理。当然,如果父元素没有显示声明过word-spacing或letter-spacing,那么子元素也没有必要声明了,这时采用的是normal,即文本的正常间距。
- font-variant与text-transform的区别:
Font-variant只能用于将字体变成小型的大写字母(即与小写字母等高的大写字母),
Text-transform用于将所有文本变成小写字母、大写字母或首字母大写。
注: 当text-transform取值为capitalize时,规范中只要求浏览器将每个单词的首字母变成大写,因此如果有一个单词为 abcDfG的话,那么结果可能会因浏览器而异,有的浏览器会简单地将它变成AbcDfG,则有的则可能将它变成Abcdfg.
- text-decoration
text-decoration可以指定多个,例如下面的超链接会同时具有上、中、下划线:
a:link {text-decoration: underline overline line-through;}
但是注意,指定多个值时这些值不能互斥,例如下面几条声明会整个会忽略,浏览器依然会采用默认的下划线样式:
a:link {text-decoration: underline overline line-through none;}
a:link {text-decoration: underline overline inherit;}
a:link {text-decoration: blink inherit;}
综合上面的测试,我认为可以同时声明的只有underline, overline 和line-through这三个值。
另外,text-decoration声明会覆盖之前的声明,例如:
a:link {text-decoration: underline line-through;}
a:link {text-decoration:overline;}
则最后的结果是只有overline,underline和line-through都会新声明覆盖了。这很像使用组合属性声明时其它未声明的值被默认值覆盖一样。
l 怪异的underline
这一条其实是text-decoration:underline; 但为了强调,我单调将它列为一条。下面通过一个具体的例子来说明:
<p>This is a paragraph, with a <span>span</span> in it.</p>
由于text-decoration是一个可继承的属性,因此如果p标签声明了text-decoration:underline;则span下面也会有下划线。这是合理的。但如果我们改变了span的color,例如p span {color: red;}.则按前景色的理论,span下面的下划线也应该变为red.但事实并非如此,因为span下面的下划线并不属于span,而是p的。
若要改变span下的下划线颜色,则要显示声明 span {text-decoration: underline; color: red;} 这时span就拥有了自己的下划线,其颜色就会随着color而变啦~!
但如果要去掉下划线怎么办呢??text-decoration:none;是做不到的!!它只能去掉span自己的下划线,但父元素的仍在,所以这看起来很诡异,但这确实是正确的行为(基于规范)。但有些浏览器在这种情况下确实会去掉span下的下划线,因为这更符合制作都的意愿(这句是作者在书中说的,但我测了最新版的FF,Chrome,Safari,Opera和各版本的IE,没看到一个浏览器这样做)。所以现在我唯一想到的能去掉span下划线的方法就是制作一个与父元素背景色相同
的小gif图片,当作span的背景通过背景定位将下划线盖住。
- text-shadow :IE9-(包括IE9)不支持
若color不指定,将使用元素的前景色,即css color属性指定的值。
可以为文本添加多个阴影:
p.para1 {color:red; text-shadow: 0 0 4px black;}
p.para2 {color:blue; text-shadow: 0 5px 5px;}
p.para3 {margin: 50px; color:green; text-shadow: 1em 1em purple, -1em -1em orange;}
- white-space
未完待续。。。