CSS基础

CSS 指层叠样式表 (Cascading Style Sheets)

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。 selector {declaration1; declaration2; ... declarationN } 属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。 selector {property: value} h1 {color:red; font-size:14px;} p { color: #ff0000; } p { color: rgb(255,0,0); } p { color: rgb(100%,0%,0%); } 如果值为若干单词，则要给值加引号 p {font-family: "sans serif";} CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。

选择器的分组 你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。 h1,h2,h3,h4,h5,h6 {color: green;}

继承：子元素从父元素继承属性，打破继承的方法是重复子元素重复定义，与c中的全局变量相似。 body {font-family: Verdana, sans-serif;} p  {font-family: Times, "Times New Roman", serif;}

派生选择器：通过依据元素在其位置的上下文关系来定义样式，派生选择器允许你根据文档的上下文关系来确定某个标签的样式，如希望列表中的 strong 元素变为斜体字，而不是通常的粗体字： li strong {font-style: italic; font-weight: normal;}

id 选择器：id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 "#" 来定义。 id 属性为red 的元素显示为红色，而 id 属性为 green 的元素显示为绿色。 #red {color:red;} #green {color:green;}

id 选择器和派生选择器 #sidebar p {font-style: italic;text-align: right;margin-top: 0.5em;}

类选择器：类选择器以一个点号显示，类名的第一个字符不能使用数字！ .center {text-align: center}

class 也可被用作派生选择器 .fancy td {color: #f60;background: #666;} 类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。（名为 fancy 的更大的元素可能是一个表格或者一个 div）

属性选择器，下面的例子为带有 title 属性的所有元素设置样式： [title]{color:red;}

属性和值选择器，下面的例子为 title="W3School" 的所有元素设置样式： [title=W3School]{border:5px solid blue;}

属性和值选择器 - 多个值，包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值： [title~=hello] { color:red; } 带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值： [lang|=en] { color:red; }

外部样式表引用：外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存，不要在属性值与单位之间留有空格。

内部样式表，不一定在

中

内联样式

<#p style="color: sienna; margin-left: 20px"> This is a paragraph </p>

多重样式 外部：h3 {color: red;text-align: left; font-size: 8pt;} 内部：h3 {text-align: right; font-size: 20pt; }

最终样式：color: red; text-align: right; font-size: 20pt;