《css权威指南》--读书笔记（一）

第一章：

1.CSS层叠（CASCADE）

1. 我们曾用过一个样式表导入到多个页面，这样能增加重构性，那么要是想包含一些专用于这些页面的特定规则，怎么办？

一是我们可以样式表中把那些专用于这些页面的特定规则都加进去。二是可以另外创建一个样式表，将这个样式表与之前的样式表一起导入到这些页面，也就是所谓的CSS层叠规则

2.替换元素

是指用来替换元素内容的部分并非由文档内容直接表示，比如img元素

还有替换元素可以使块级元素，不过通常都不是块级元素，是行内（inline）元素

3.CSS出现标记或未知属性，不正确的值

brain:2cm; /*unknown propertity*/

color:ultraviolet;  /* unknown value */

4.link属性代表

rel代表关系（relation）

一般为stylesheet，但将来可能使用其他的样式语言，所以声明使用什么语言很重要

media代表媒体

一般用的比较多的是：all，screen，print

5.候选样式表

将rel属性的值置为alternate stylesheet，表名在用户选择这个样式表时才会用于文档表现 比如

<pre name="code" class="html"><link rel="stylesheet"  type="text/css" href="stylesheet1.css" title="Default">

<link rel="alternate stylesheet"  type="text/css" href="stylesheet2.css" title="Color">

上面代码所示的title确实是link的一个属性，这个属性不经常用，但将来可能会很重要，而且使用不当，可能会有意想不到的后果。

如果浏览器能使用候选样式表，它会用link元素中的title属性值生成一个样式表

还可以分别为候选样式表指定同样的title值，在不同媒体中选择不同的表现

<pre name="code" class="html"><link rel="stylesheet"  type="text/css" href="stylesheet1.css" title="Default" media="screen">

<link rel="stylesheet"  type="text/css" href="printstyle.css" title="Default" media="print">

<link rel="alternate stylesheet"  type="text/css" href="stylesheet2.css" title="Color" media="screen"<span style="font-family: Arial, Helvetica, sans-serif;">></span>

<link rel="alternate stylesheet"  type="text/css" href="printstyle2.css" title="Color" media="print">

原因在于，如果为一个rel为stylesheet的link指定了标题，也就指定了该样式表要作为首选样式表（preferred style sheet）

再看下面

<link rel="stylesheet"  type="text/css" href="stylesheet1.css" title="Default color">

<link rel="stylesheet"  type="text/css" href="stylesheet2.css" title="Default size">

<pre name="code" class="html"><link rel="stylesheet"  type="text/css" href="stylesheet3.css" title="Default layout">

现在这三个link都指示首选样式表，因为这3个元素都出现了一个title，那么只有一个会真正作为首选样式表，另外两个会被忽略，会是哪两个？这是不确定的

书上说文档样式表一定要使用type属性，对于css文档，正确的属性值是“text/css”，话说我都一直把它忽略了。。。

6.@import指令

warnning：@import指令必须出现在样式表的开头，否则不起作用,在文档样式表和外部样式表都一样要放在。该指令不能放在内联（inline）style属性中，只能放一个声明块

</pre><pre name="code" class="css"><style type="text/css">

@import url(styles.css);//可以限制所导入的样式表用于一种或多种媒体，例如 <span style="font-family: Arial, Helvetica, sans-serif;">@import url(styles.css) all;</span>

h1{color:red;}

</style>

7.向后可访问性。

如果一个浏览无法识别<style>和</style>，它会将它忽略，但这些标记中的生命不一定被忽略，所以每次可以这么做

<style type="text/css"><!--

@import url(styles.css);//可以限制所导入的样式表用于一种或多种媒体，例如 <span style="font-family: Arial, Helvetica, sans-serif;">@import url(styles.css) all;</span>

h1{color:red;}

--></style>

第二章

1.CSS的font属性斜线（/）情况

h2{font:large/150% sans-serif;}

斜线分隔了用来设置元素的字体大小和行高的两个关键字，多个关键字的其他情况都使用空格

2.忘记分号

h1{

font:18px he;vetica;

color:purple background:auqa;

}

可能会显示紫色文本，没有淡绿色背景，但一般更有可能根本得不到紫色的h1；

好了，这是我的第一篇博客，学习之路开始了！