CSS 语法

selector {
   property: value}//
     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;  }

我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用
     
      
我是斜体字。这是因为 strong 元素位于 li 元素内。
      
我是正常的字体。
     

CSS id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 "#" 来定义。

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

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

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

这个段落是红色。
这个段落是绿色。

CSS 类选择器

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

.center {
   text-align: center}

上面的例子中，所有拥有 center 类的 HTML 元素均为居中。

This heading will be center-aligned
This paragraph will also be center-aligned.

和 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> 标签在（文档的）头部：

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