CSS 笔记
CSS 语法
selector {property: value} //<!--在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。--> h1 {color:red; font-size:14px;} //<!--在每行只描述一个属性，这样可以增强样式定义的可读性--> p { text-align: center; color: black; font-family: arial; }
派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。
比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：
li strong { font-style: italic; font-weight: normal; }
<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p> <ol> <li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li> <li>我是正常的字体。</li> </ol>
CSS id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 "#" 来定义。
下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：
#red {color:red;} #green {color:green;}
下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。
<p id="red">这个段落是红色。</p> <p id="green">这个段落是绿色。</p>
CSS 类选择器
在 CSS 中，类选择器以一个点号显示：
.center {text-align: center}
上面的例子中，所有拥有 center 类的 HTML 元素均为居中。
<h1 class="center"> This heading will be center-aligned </h1> <p class="center"> This paragraph will also be center-aligned. </p>
和 id 一样，class 也可被用作派生选择器：
.fancy td { color: #f60; background: #666; }
上面这个例子中，类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。（名为 fancy 的更大的元素可能是一个表格或者一个 div）
CSS 属性选择器
为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
为带有 title 属性的所有元素设置样式： [title] { color:red; } 为 title="W3School" 的所有元素设置样式： [title=W3School] { border:5px solid blue; } 设置表单的样式 input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial; } input[type="button"] { width:120px; margin-left:35px; display:block; font-family: Verdana, Arial; }
外部样式表
外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部：
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
