CSS基础笔记

CSS 指层叠样式表 (Cascading Style Sheets)解决内容与表现分离的问题。

为什么要这么做呢？这么做的目的是为了在图形浏览器中获得品牌化的外观和感觉的同时，在文本浏览器、无线设备、HTML 格式的电子邮件中，文档的结构得到保留。

所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，优先级从低到高。类似于同名覆盖，函数从写。

1. 浏览器缺省设置
2. 外部样式表
3. 内部样式表（位于 标签内部）
4. 内联样式（在 HTML 元素内部）

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。选择器通常是您需要改变样式的 HTML 元素。比如

等

每条声明由一个属性和一个值组成。属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。比如color：red；

selector {declaration1; declaration2; ... declarationN }

selector {property: value}

h1 {color:red; font-size:14px;}

如果值为若干单词，则要给值加引号，比如字体样式。一个单词比如red，可以不加。多重声明用分号隔开。
是否包含空格不会影响 CSS 在浏览器的工作效果，同样，与 XHTML 不同，CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。

对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。多个HTML元素在一起定义。

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

根据 CSS，子元素从父元素继承属性。个别的不想继承父元素属性的可以再次定义子属性实现覆盖。

strong {
     color: red;
     }

h2 {
     color: red;
     }

h2 strong {
     color: blue;
     }

上面代码表示strong元素唯独在h2元素中会被显示出蓝色。这被称为 派生选择器或者是 上下文选择器。

每个名字只能在被赋予的页面使用一次。（例如，假如你的页面包含 id 为 content 的 div，那么另外一个 div 或者其他别的元素都不能使用这个名字。相反地，class 属性可以被一遍又一遍地使用在页面中（例如，页面中的五个段落都可以使用名为 "small" 或者"footnote" 的 class 名称）。

外部样式表：你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部。

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。不要在属性值与单位之间留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ，它仅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

内部样式表：当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 内联样式：当样式仅需要在一个元素上应用一次时再使用。因为它是让内容与表现混杂在一起的，慎用。

This is a paragraph

多重样式：如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。比如内部样式表和外部样式表都有关于

的样式声明，那么不同的属性会被叠加，相同的属性会按照优先级的先后选择一个表达出来，即是内部样式表的格式会覆盖外部样式表。