HTML5 & CSS3初學者指南(2) – 樣式化第一個網頁

時間  2021-08-15

介紹

我們已經使用基本的 HTML 編寫了一個網頁。但是，寫出來的 HTML 代碼的網頁看起來很平淡，沒有吸引力。

如何改善這種很平淡的頁面呢？

讓我們開始使用網頁的基本樣式來改善頁面效果，我們將會使用到 CSS 的功能。

正式開始 CSS 是層疊樣式表的縮寫，它是爲網頁添加樣式的通用語言，在所有瀏覽器中都支持。最新的標準是 CSS3，這與早期版本完全向後兼容。CSS3 的規範是由 W3C 開發的，目前仍處於開發階段，其最新的版本是 CSS Snapshot 2010。

 

打開你的文本編輯器，鍵入下圖上半部分中顯示的 HTML 代碼。完成時，保存成 .htm 或 .html 文件，並將其拖入到瀏覽器中，你將會在網頁中看到下圖的下半部分。

如果說，你的客戶看到了網頁，要求最大標題設爲藍色，並且放置在網頁的中心，你可以做到嗎？單獨使用 HTML，毫無疑問是做不到的。彆着急！添加以下 CSS 代碼（下圖中藍色的部分）到 HTML 代碼中，就能滿足客戶的需求。

基本的CSS語法

剛纔，我們已經添加了一個 CSS 樣式到我們的網頁中。讓我們來看看基本的 CSS 語法。

步驟1 -在 head 部分，添加開始標籤 <style> 和結束標籤 </style>。這部分區域將用來設計 CSS 樣式規則。

<style>    /* Add CSS rule set here */</style>

需要注意的是，/ *和* /用於封裝 CSS 中的註釋。註釋是用來解釋代碼的，瀏覽器會將其忽略。

 

第2步 -選擇我們想要添加樣式的 HTML 元素。這個例子中是 <h1> 標籤，在 CSS 的專業術語中，我們將h1稱爲選擇器。h1 後面的 {  }，用於將 h1 的樣式聲明括起來。

<style>
    h1 /* This is the selector */
    {       /* Add style declarations here */
    }</style>

 

第3步-添加2個樣式聲明，一個用於將 <h1> 的內容設置爲 blue ，另一個設置爲居中顯示。

<style>
    h1    {
         color:blue;        /* This is a declaration */
         text-align:center; /* This is another declaration */
    }</style>

每個聲明包含一個屬性和一個值，用冒號分隔（：），並以分號結束（;）。在我們的例子，color 是屬性，blue 是值。

介紹完 CSS 的基本語法。讓我們一起來看看：

<style> /* Start of CSS block */
    h1  /* This is the selector */
    {
         color:blue;        /* This is a declaration */
         text-align:center; /* This is another declaration */
    }</style> /* End of CSS block */

要添加樣式到一個 HTML 元素中，比如 <p>，簡單的爲選擇器 p 添加樣式聲明，其後的 h1 也是。順序並不重要。

<style>
    h1    {
         color:blue;
         text-align:center;
    }
    p    {
         color:green;
         text-align:right;
    }</style>

看到你完成的很好，你的客戶又有了新的需求：需要將第二行字設爲紅色、左對齊。

CSS選擇器

CSS 選擇器能夠幫助我們查找，選擇，聲明 HTML 元素的樣式描述。

 

元素選擇器

在前面的例子中，我們已經通過 HTM L標籤使用了 CSS 選擇器，就像對 h1，h3 和 p 元素應用相應的樣式。請記住，一個網頁可以包含很多這樣的標籤，尤其是 <p> 標籤。P 選擇器會將相同的樣式應用到整個網頁中的所有 <p> 標籤中，無一例外。這意味着，所有的 <p> 標籤將是綠色和右對齊的。這種地毯式的樣式應用將會讓單獨段落的定製化樣式無法實現，因爲所有的段落都受 p 選擇器的影響。

（將下面的代碼添加到 HTML 文檔的描述部分。）

爲了克服這種侷限性，我們將引入另外2種選擇器- ID選擇器和類選擇器。

 

ID選擇器

每個 HTML 標籤都有一個 id 屬性，具有和其它不一樣的命名。例如，HTML 文檔中有2個 <p> 標籤，我們可以將它們中的一個命名爲「para1」，而另一個命名爲「 para2」。要在 CSS 代碼中選擇它們，需要在 ID 名稱之前添加「＃」。命名爲「para1」和「 para2」的選擇器，將會通過「 #para1」和「 #para2」進行區分。我們可以通過 ID 名稱作爲選擇器，來爲它們應用不用的 CSS 樣式。

你可能已經注意到具有 ID 名稱 para1 和 para2 的兩個段落保持居中屬性，即使在各自的選擇器中並未設置居中屬性。在這種情況下，他們都繼承了父級元素的 text-align 屬性。


注意以下關於 id 選擇器的幾點：你可能已經注意到具有 ID 名稱 para1 和 para2 的兩個段落保持居中屬性，即使在各自的選擇器中並未設置居中屬性。在這種情況下，他們都繼承了父級元素的 text-align 屬性。

  • 不要以數字開頭一個 ID 名稱

  • ID 名稱應該是一個頁面內唯一的

  • 如果想要對頁面中的單個元素使用樣式時，可以使用 ID 選擇器

 

類選擇器

類似地，每個 HTML 標籤都有一個class屬性，具有和其它不一樣的命名。例如，如果 HTML 文檔中有4個 <p> 標籤，我們將其中的兩個命名爲「group1」。要在 CSS 代碼中選擇它們，需要在其類名之前添加一個點字符（.）。我們可以通過類選擇器名將一組 CSS 樣式共享給相同類名的一組 HTML 元素。

類名不要以數字開頭注意以下關於類選擇器的幾點：

  • 類名不要以數字開頭

  • 當你想要選擇網頁中的一組元素時，請使用類

 

選擇器的鏈接

如果一些元素需要設置爲相同的樣式，我們可以通過最少量的代碼將它們一起設置。

 

CSS的位置
目前，我們都是將 CSS 樣式放置在 HTML 文檔的頭部，這種樣式被稱爲內部樣式。實際上還有另外2种放置 CSS 樣式表的方式- 外部樣式和內聯樣式。

 

內部樣式表

我們已經很熟悉了內部樣式表。當一個 HTML 文檔具有獨特的風格時，可以使用內部樣式。然而，當許多 HTML 文檔共享同一個樣式的情況時，這種方式是非常低效的。爲此，我們應該去使用外部樣式表。

 

外部樣式表

顧名思義，外部樣式表放置在所有 HTML 文檔的外部。每個文檔都會通過頭部的 <link> 標籤鏈接到外部樣式表。下面，讓我們一起看看是如何實現的。

我們會將 HTML 文件中 <style> 和 </style> 標籤之間的代碼剪切並粘貼到一個文本編輯器中。將這個文件命名爲「mystyle.css」並保存在 HTML 文檔的同一文件夾中。請注意，.css 是外部樣式表的文件擴展名。

h1,h2,p{
   color:red;
   text-align:right;
}

CSS 樣式已經從 HTML 文件中轉移出來了。要在 HTML 文件中添加「mystyle.css」鏈接，需要在 HTML 文檔的頭部添加如下的代碼：

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

將 HTML 文件拖入瀏覽器中，將會看到和之前相同的網頁。

當我們想要在站點的多個網頁中應用相同的樣式時，使用外部樣式表是很理想的。我們可以在外部樣式表中做一個改動，就能改變整個站點的外觀和感覺。這大大有助於網站的維護。

 

內聯樣式表

內聯樣式是通過以下代碼中 HTML 標籤的屬性來聲明樣式的：

<p style="color:red;text-align=center;">Inline Style Sheet</p>

然而，這種在 HTML 標籤中內嵌 CSS 也導致了內容呈現的混亂，不利於 CSS 的引進。所以，應該儘可能避免使用內聯樣式表。

 

樣式表的優先級

不難想象，一個 HTML 元素具有內聯、內部和外部樣式這三種樣式的情形。在這種情況下，其風格應該是混亂的。

下面是起作用的優先級順序（從高到低）：

  • 內嵌樣式表（內部 HTML 元素）

  • 內部樣式表（內部 head 部分）

  • 外部樣式表（外部的 .css 文件）

  • 瀏覽器默認的（沒有指定任何樣式表）

請記得我的這個經驗法則-「 最接近元素的樣式，優先級最高 」。

CSS屬性

在前面的例子中，我們已經使用了「color」和「 text-align" 屬性。它們只是衆多 CSS 屬性中的2個。CSS 屬性的名稱是相當直觀的，也就是說，它們會起到它們名稱的作用。

下面，我們討論以下的三種屬性（背景/文本/字體）。

CSS背景

可以通過以下的 CSS 背景屬性設置網頁的背景：

  • 背景顏色

我們使用 backgrounf-color 屬性來設置任何 HTML 元素的背景顏色，包括 <body> 標籤。

  • 背景圖

我們使用 backgroung-image 屬性將背景圖像嵌入到任何 HTML 元素，添加以下代碼片段到 HTML 文件中，修改 url 參數使其指向一個圖像文件：

body{background-image:url("logo250x135.gif");}

背景顯示在瀏覽器中，整個網頁的背景是圖像的平鋪效果。

  • 背景重複

需要背景圖像水平重複的，使用 background-repeat:repeat-x。

body{
    background-image:url("logo250x135.gif");
    background-repeat:repeat-x;
}

需要背景圖像垂直重複的，使用 background-repeat 屬性repeat-y。

background-repeat:repeat-y;

如果不需要左上角的 backgroung-image 有任何重複，改變背景重複屬性值爲 no-repeat。

background-repeat:repeat-y;

 

背景位置

需要固定背景圖像到屏幕的某些位置上，設置 backgroung-position屬性爲「top right」。

body{
    background-image:url("logo250x135.gif");
    background-repeat:no-repeat;
    background-position:top right;
}

 

CSS文本

網頁上的任何文本效果，都可以通過以下的 CSS 屬性來設置：

联系我们 沪ICP备13005482号-10