前端学习笔记03，CSS

CSS 简介

内容整理自w3school
当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？（4有最高优先权）
1.浏览器缺省设置
2.外部样式表
3.内部样式表（位于标签内部）
4.内联样式（在 HTML 元素内部）
下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。

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

定义一个红色文字的居中段落。

p {text-align:center; color:red;}

是否包含空格不会影响 CSS 在浏览器的工作效果，同样，与 XHTML 不同，CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。
那个浏览器大战的血腥年代里，这种情况就未必会发生，那时候对标准的支持并不是企业的优先选择。比方说，Netscape 4 就不支持继承，它不仅忽略继承，而且也忽略应用于 body 元素的规则。IE/Windows 直到 IE6 还存在相关的问题，在表格内的字体样式会被忽略。我们又该如何是好呢？
你可以通过使用我们称为 “Be Kind to Netscape 4” 的冗余法则来处理旧式浏览器无法理解继承的问题。

body  {
     font-family: Verdana, sans-serif;
     }

p, td, ul, ol, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }

如果你不希望 “Verdana, sans-serif” 字体被所有的子元素继承，又该怎么做呢？比方说，你希望段落的字体是 Times。没问题。创建一个针对 p 的特殊规则，这样它就会摆脱父元素的规则：

body  {
     font-family: Verdana, sans-serif;
     }

td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }

p  {
     font-family: Times, "Times New Roman", serif;
     }

希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：

li strong {
    font-style: italic;
    font-weight: normal;
  }

CSS id 选择器

id 选择器
下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：

#red {color:red;}
#green {color:green;}

下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。


<p id="red">这个段落是红色。p>
<p id="green">这个段落是绿色。p>

在现代布局中，id 选择器常常用于建立派生选择器。

#sidebar p {
    font-style: italic;
    text-align: right;
    margin-top: 0.5em;
    }

上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落。

id 选择器即使不被用来创建派生选择器，它也可以独立发挥作用：
#sidebar { border: 1px dotted #000; padding: 10px; }
根据这条规则，id 为 sidebar 的元素将拥有一个像素宽的黑色点状边框，同时其周围会有 10 个像素宽的内边距（padding，内部空白）。老版本的 Windows/IE 浏览器可能会忽略这条规则，除非你特别地定义这个选择器所属的元素：

div#sidebar {
    border: 1px dotted #000;
    padding: 10px;
    }

ID 选择器特点:
- 在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。
- ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。
- 类似于类，可以独立于元素来选择 ID。有些情况下，您知道文档中会出现某个特定 ID 值，但是并不知道它会出现在哪个元素上，所以您想声明独立的 ID 选择器。例如，您可能知道在一个给定的文档中会有一个 ID 值为 mostImportant 的元素。您不知道这个最重要的东西是一个段落、一个短语、一个列表项还是一个小节标题。您只知道每个文档都会有这么一个最重要的内容，它可能在任何元素中，而且只能出现一个。在这种情况下，可以编写如下规则：

#mostImportant {color:red; background:yellow;}

请注意，类选择器和 ID 选择器可能是区分大小写的。这取决于文档的语言。HTML 和 XHTML 将类和 ID 值定义为区分大小写，所以类和 ID 值的大小写必须与文档中的相应值匹配。

CSS 类选择器

在 CSS 中，类选择器以一个点号显示：

.center {text-align: center}

注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
- 类选择器可以结合元素选择器来使用。
例如，您可能希望只有段落显示为红色文本：

p.important {color:red;}

CSS 类选择器/CSS 类选择器详解

在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔。

class="important warning">
This paragraph is a very important warning.

我们假设 class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class 中同时包含 important 和 warning 的所有元素还有一个银色的背景。就可以写作：

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}

通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。
重要事项：在 IE7 之前的版本中，不同平台的 Internet Explorer 都不能正确地处理多类选择器。

CSS 属性选择器

只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。
属性和值选择器 - 多个值
下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：

[title~=hello] { color:red; }

下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：

[lang|=en] { color:red; }

CSS 选择器参考手册


选择器 描述
[attribute]             用于选取带有指定属性的元素。
[attribute=value]       用于选取带有指定属性和值的元素。
[attribute~=value]      用于选取属性值中包含指定词汇的元素。
[attribute|=value]      用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]      匹配属性值以指定值开头的每个元素。
[attribute$=value]      匹配属性值以指定值结尾的每个元素。
[attribute*=value]      匹配属性值中包含指定值的每个元素。

如何创建 CSS

外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在（文档的）头部：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
head>

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。
不要在属性值与单位之间留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ，它仅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。
内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用