css权威指南学习笔记

桃扇骨 2022-09-18 11:00 237阅读 0赞

本文摘自 《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

旧式页面中的等标签声明的样式，会被当作权重为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"。

可能的值

<table> 
 <tbody> 
 <tr> 
 <td> 值 </td> 
 <td> 描述 </td> 
 </tr> 
 <tr> 
 <td> baseline </td> 
 <td> 默认。元素放置在父元素的基线上。 </td> 
 </tr> 
 <tr> 
 <td> sub </td> 
 <td> 垂直对齐文本的下标。 </td> 
 </tr> 
 <tr> 
 <td> super </td> 
 <td> 垂直对齐文本的上标 </td> 
 </tr> 
 <tr> 
 <td> top </td> 
 <td> 把元素的顶端与行中最高元素的顶端对齐 </td> 
 </tr> 
 <tr> 
 <td> text-top </td> 
 <td> 把元素的顶端与父元素字体的顶端对齐 </td> 
 </tr> 
 <tr> 
 <td> middle </td> 
 <td> 把此元素放置在父元素的中部(基线以上0.25em处)。 </td> 
 </tr> 
 <tr> 
 <td> bottom </td> 
 <td> 把元素的顶端与行中最低的元素的底端对齐。 </td> 
 </tr> 
 <tr> 
 <td> text-bottom </td> 
 <td> 把元素的底端与父元素字体的底端对齐。 </td> 
 </tr> 
 <tr> 
 <td> length </td> 
 <td> &nbsp; </td> 
 </tr> 
 <tr> 
 <td> % </td> 
 <td> 相对于元素的&nbsp;"line-height"&nbsp;值。允许使用负值。 </td> 
 </tr> 
 <tr> 
 <td> inherit </td> 
 <td> 规定应该从父元素继承&nbsp;vertical-align&nbsp;属性的值。 </td> 
 </tr> 
 </tbody> 
</table>

注意： 当应用于 tabel cell时，只有baseline, top, bottom和middle会被识别。

Baseline: 默认值。将元素的基线与其父元素的基线对齐。如果一个元素没有基线，如图片或input元素，则将它们的底部与父元素的基线对齐。如下图所示，图中红点为一张小图片，其底部与父元素的基线对齐了。

img \{vertical-align: baseline;\}

![SouthEast][]

**重点记忆：**vertical-align会增大box height以容纳元素最高和最低的元素，而不是让它们重叠到别的行去：

<!DOCTYPE html>

<html>

<head>

<title>Vertical align and box height</title>

p \{width: 200px;\}

span \{vertical-align: -200%;\}

</style>

</head>

<body>

This is a paragraph with a span which is set to vertical-align: super.

</body>

</html>

![SouthEast 1][]

*  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用于将所有文本变成小写字母、大写字母或首字母大写。

![SouthEast 2][]

![SouthEast 3][]

注： 当text-transform取值为capitalize时，规范中只要求浏览器将每个单词的首字母变成大写，因此如果有一个单词为 abcDfG的话，那么结果可能会因浏览器而异，有的浏览器会简单地将它变成AbcDfG,则有的则可能将它变成Abcdfg.

*  text-decoration

![SouthEast 4][]

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; 但为了强调，我单调将它列为一条。下面通过一个具体的例子来说明：

This is a paragraph, with a span in it.

由于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）不支持

![SouthEast 5][]

若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;\}

![SouthEast 6][]

*  white-space

![SouthEast 7][]

未完待续。。。

[SouthEast]: /images/20220828/3d7a20d4baf2408f8774947334a35be4.png
[SouthEast 1]: /images/20220828/908654cb78204e1381c9643eb95bbe90.png
[SouthEast 2]: /images/20220828/b8d37684a29c4b56b4d8d8f87570b23a.png
[SouthEast 3]: /images/20220828/74592b6f17bf4898a8906b55c6fc484b.png
[SouthEast 4]: /images/20220828/fe3aab42c256415196f7f8332c26b510.png
[SouthEast 5]: /images/20220828/9ad81c7362ce49cfa1dd49320dc993d3.png
[SouthEast 6]: /images/20220828/cfdbeda70c8c42c7bd394e59e4112981.png
[SouthEast 7]: /images/20220828/f782d4f45b7c4b9688f190d801a05607.png