首頁 >web前端 >html教學 >從零開始CSS（一 2016/9/21）

從零開始CSS（一 2016/9/21）

WBOY原創: 2016-09-22 08:42:151117瀏覽

1.基礎語法

CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。

<span style="color: #800000;">selector </span>{<span style="color: #ff0000;">declaration1; declaration2; ... declarationN </span>}

選擇器通常是需要改變樣式的 HTML 元素。

每個聲明由一個屬性和一個值組成。

屬性（property）是您希望設定的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開。

<span style="color: #800000;">selector </span>{<span style="color: #ff0000;">property</span>:<span style="color: #0000ff;"> value</span>}

下面這行程式碼的作用是將 h1 元素內的文字顏色定義為紅色，同時將字體大小設為 14 像素。

在這個範例中，h1 是選擇器，color 和 font-size 是屬性，red 和 14px 是值。

<span style="color: #800000;">h1</span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">red</span>;<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;">14px</span>;}

大多數樣式表包含不只一條規則，而大多數規則包含不只一個聲明。多重聲明和空格的使用使得樣式表更容易被編輯：

<span style="color: #800000;">body </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> #000</span>;<span style="color: #ff0000;">
  background</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
  margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
  font-family</span>:<span style="color: #0000ff;"> Georgia, Palatino, serif</span>;
  }

2.高階語法

① 選擇器的分組。你可以將選擇器分組，這樣，被分組的選擇器就可以分享相同的聲明。用逗號將需要分組的選擇器分開。在下面的例子中，我們對所有的標題元素進行了分組。所有的標題元素都是綠色的。

<span style="color: #800000;">h1,h2,h3,h4,h5,h6 </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> green</span>;
  }

② 繼承

根據 CSS，子元素從父元素繼承屬性。但是它並不總是按此方式工作。看看下面這條規則：

<span style="color: #800000;">body </span>{<span style="color: #ff0000;">
     font-family</span>:<span style="color: #0000ff;"> Verdana, sans-serif</span>;
     }

根據上面這條規則，網站的 body 元素將使用 Verdana 字體（假如訪客的系統中存在該字體的話）。

透過 CSS 繼承，子元素將繼承最高級元素（在本例中是 body）所擁有的屬性（這些子元素諸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的規則，所有 body 的子元素都應該顯示 Verdana 字體，子元素的子元素也是一樣。並且在大部分的現代瀏覽器中，也確實是這樣的。

3.CSS 派生選擇器

透過依據元素在其位置的上下文關係來定義樣式，你可以使標記更加簡潔。

在下面的例子中，只有 li 元素中的 strong 元素的樣式為斜體字，無需為 strong 元素定義特別的 class 或 id，程式碼更加簡潔。

<span style="color: #800000;">li strong </span>{<span style="color: #ff0000;">
    font-style</span>:<span style="color: #0000ff;"> italic</span>;<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;"> normal</span>;
  }

<span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">><</span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用<span style="color: #0000ff;"></</span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><</span><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>我是斜体字。这是因为 strong 元素位于 li 元素内。<span style="color: #0000ff;"></</span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>我是正常的字体。<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span>

4 ID選擇器

id 選擇器可以為標示特定 id 的 HTML 元素指定特定的樣式。 id 選擇器以 "#" 來定義。

下面的兩個 id 選擇器，第一個可以定義元素的顏色為紅色，第二個定義元素的顏色為綠色：

<span style="color: #800000;">#red </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">red</span>;}<span style="color: #800000;">
#green </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">green</span>;}

<span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="red"</span><span style="color: #0000ff;">></span>这个段落是红色。<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="green"</span><span style="color: #0000ff;">></span>这个段落是绿色。<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

① id 選擇器與衍生選擇器

在現代佈局中，id 選擇器常用於建立派生選擇器。

上面的樣式只會套用於出現在 id 是 sidebar 的元素內的段落。這個元素很可能是 div 或是表格單元，儘管它也可能是一個表格或其他區塊級元素。

<span style="color: #800000;">#sidebar p </span>{<span style="color: #ff0000;">
    font-style</span>:<span style="color: #0000ff;"> italic</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> right</span>;<span style="color: #ff0000;">
    margin-top</span>:<span style="color: #0000ff;"> 0.5em</span>;
    }

② 單獨的選擇器

id 選擇器即使不被用來創建派生選擇器，它也可以獨立發揮作用：

<span style="color: #800000;">#sidebar </span>{<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> 1px dotted #000</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 10px</span>;
    }

5.類選擇器

在 CSS 中，類別選擇器以一個點號顯示：

在下面的範例中，所有擁有 center 類別的 HTML 元素均為居中。

<span style="color: #800000;">.center </span>{<span style="color: #ff0000;">text-align</span>:<span style="color: #0000ff;"> center</span>}

在下面的 HTML 程式碼中，h1 和 p 元素都有 center 類別。這意味著兩者都將遵守 ".center" 選擇器中的規則。

<span style="color: #0000ff;"><</span><span style="color: #800000;">h1 </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="center"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
This heading will be center-aligned
</span><span style="color: #0000ff;"></</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="center"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
This paragraph will also be center-aligned.
</span><span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

① 和 id 一樣，class 也可用作為派生選擇器：

類別名為 fancy 的較大的元素內部的表格單元都會以灰色背景顯示橘色文字。（名為 fancy 的更大的元素可能是一個表格或一個 div）

<span style="color: #800000;">.fancy td </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #f60</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #666</span>;
    }

② 元素也可以基於它們的類別而選擇：

類別名為 fancy 的表格單元將是帶有灰色背景的橘色。

<span style="color: #800000;">td.fancy </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> #f60</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #666</span>;
    }

6.CSS 屬性選擇器

對具有指定屬性的 HTML 元素設定樣式，可以為擁有指定屬性的 HTML 元素設定樣式，而不僅限於 class 和 id 屬性。

① 屬性選擇器

為所有帶有 title 屬性的元素設定樣式：

<span style="color: #800000;">[title]
</span>{<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;">red</span>;
}

② 屬性和值選擇器

為 title="W3School" 的所有元素設定樣式：

<span style="color: #800000;">[title=W3School]
</span>{<span style="color: #ff0000;">
border</span>:<span style="color: #0000ff;">5px solid blue</span>;
}

③ 属性和值选择器 - 多个值

为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：

<span style="color: #800000;">[title~=hello] </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;">red</span>; }

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

<span style="color: #800000;">[lang|=en] </span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;">red</span>; }

7.如何插入CSS

当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种：外部，内部，内联。

① 外部样式表

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

<span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="mystyle.css"</span> <span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>

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

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：

<span style="color: #800000;">hr </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;"> sienna</span>;}<span style="color: #800000;">
p </span>{<span style="color: #ff0000;">margin-left</span>:<span style="color: #0000ff;"> 20px</span>;}<span style="color: #800000;">
body </span>{<span style="color: #ff0000;">background-image</span>:<span style="color: #0000ff;"> url("images/back40.gif")</span>;}

② 内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用