Day01 - CSS入門看這篇


前言

下面的三張圖片,各自代表不同的網頁視覺風格。但是,您知道嗎?它們是出自同一個網頁HTML檔案,只是搭配不同的CSS就能做出如此不同風格的網頁。




CSS到底是什麼呢?用居住的房屋來比喻,HTML就是梁柱、牆壁、門窗等結構,但是它只是個毛坯屋而已,並不適合居住。人們在要搬進去住之前,需要花一點時間為牆壁上色粉刷、進行隔間、燈光配置..等,讓屋子更舒適點。 這些改變顏色、形狀、視覺、修飾的功能就是提昇要提昇房子的美感和可住性。相同道理,在網頁的世界裡,CSS就是網站美感的裝潢,提昇網頁的可看性!

W3C組織於1996年制定了CSS的標準,為CSS1;後來於1998年公佈CSS2標準。到了2011年公佈CSS3標準,大幅支援動畫及立體效果,過去依靠圖片或Flash物件來呈現 動態按鈕文字..等,現在只要透過CSS3的功能就辦得到。

CSS的優點

1.讓網頁的內容與格式脫鉤

早期的網頁設計常採用一些特殊技巧來呈現外觀,雖然表顯很亮眼,但因為內容與格式的依賴性太高,導致一旦要更新文字或圖片內容,格式也必須隨之修改,其結果需耗費大量的時間和人力去維護網頁。

近年來的作法是撰寫HTML檔時,只使用與內容結構相關的HTML標籤。例如<p>、<h1>、<span>,與格式相關的標籤盡量不要用,如<font>、<small>、<big>等標籤。凡是涉及變更格式的工作,一律改由CSS來做。

網頁的內容與格式脫鉤,當我們要改變網站所有按鈕的大小和特效,或是更改主要文字內容的顏色,只要在CSS進行相關屬性的修改,就會所有的網頁全部一起改,方便有效率的管理及維護。

2.避免重複撰寫程式碼

如果不用CSS,而是個別在HTML標籤上設定屬性,如<h2 color=blue>,如果<h2>出現100次,那麼color=blue也會一併出現100次。如此寫出來的程式碼會變得肥腫,無形中增加網頁運作的時間。

若使用CSS來做,只需要在CSS檔案定義一次,之後的<h2>標籤就會自動呈現CSS設定的屬性。如此,既可減少設計師重複編碼,程式碼更精簡,網頁開啟的速度會更快。

CSS的語法

CSS的使用方法由選擇器(Selector)和宣告(Declaration)兩個部份所組成,而宣告又分為屬性(Property)和值(Value),如下圖所示:

選擇器種類

選擇器是用來選擇這條規則要套用的對象,因對象不同,選擇器常被分為三類:


  1. 標籤選擇器(Tag Selector):HTML的元素作為選擇對象,所以他的名稱必定是某一個HTML的元素名稱。如:<p><div><span>等等,不可以使用自訂的名稱。
  2. 類別選擇器(Class Selector):此種選擇器的格式為.xxx,而xxx為自訂的名稱。比如:.navbar、.col-md-6、.my-5等。使用類別選擇器,代表以xxx類別為套用對象。例如:<p class="my-5">內容文字</p>,這樣寫法,則文字區塊的上面會空出2rem的邊界(margin),同樣文字區塊的下方也會空出2rem的邊界。
  3. 識別碼選擇器(ID Selector):這種選擇器的格式為#xxx,其中xxx為自訂的名稱。如:#type1、#gifstyle等。使用id選擇器,代表以id=xxx的元素為套用的對象。也就是,對於名稱為xxx的元素,套用此規則。

宣告

宣告(Declaration)是用來指定某個屬性(Property)的設定值(Value),屬性和設定值之間使用冒號:,跟HTML使用等號是不同的。

規則合併

  • 具有相同宣告的規則可以合併
    h2{color:blue;}
    h3{color:blue;}
    h4{color:blue;}
    
    由於h2、h3、h4都有相同的宣告,所以我們可以把它們合併為ㄧ
    h1,h2,h3{color:blue;}
    
  • 相同選擇器的規則可以合併
    body{color:brown;}
    body{text-align:center;}
    body{padding:2rem;}
    
    選擇器都是body,所以我們可以把不同的宣告合併為一
    body{color:brown;
    text-align:center;
    padding:2 rem;
    }
    

使用CSS的注意事項

  1. 所有的宣告都必須包含再大括弧{ }之中。
  2. 每一種宣告最後都必須用分號;結束,包含最後一個宣告也是。
  3. 若要加上註解,必須用/* 和 */圍住註解的文字。
  4. 若屬性值包含空格,必須用英文雙引號("")或英文('')單引號包圍起來。
    例如
    body{color:brown;    /*褐色字體*/
    text-align:center;   /*字體居中*/
    padding:2 rem;   /*邊界2rem*/
    }
    

如何開始使用CSS?

編輯HTML文件,開始納入CSS樣式

當我們認識了CSS並且了解它的功能之後,我們該如何使用CSS來美化我們正在編寫的網頁呢?以下有四種方式:


  1. 使用<style>標籤定義樣式
  2. 在標籤中使用style的屬性
  3. 將樣式表定義在CSS檔案,並以<link>標籤連結該檔案
  4. 將樣式表定義在CSS檔案,並以@import指令匯入該檔案
    接下來分別說明這四種方式

1.使用<style>標籤定義樣式(內部樣式)

第一種方式是比較入門簡易的方法,或是只針對特殊頁面進行單獨的樣式設定。如果網頁頁數很多,可能用其他方式會比較適合。用法為在<head></heaad>的段落之中,使用<style>標籤來定義樣式表,在style之後要加上type=text/css, 意思就是告知瀏覽器,從這一行開始是定義CSS的樣式,直到</style>出現為止。

<!DOCTYPE html>
<html lang="en">
<head>
 <style type=text/css>
  h1 {
    color: #fc5203;
    font-size: 30px;
    font-family: 標楷體;
  }
  body {
    color: darkcyan;
    font-size: 20px;
    font-family: 微軟正黑體;
  }
 </style>
</head>
<body>
<h1>如果有來生 ◎三毛</h1>
如果有來生,要做一棵樹,<br>
站成永恆。沒有悲歡的姿勢,<br>
一半在塵土裡安詳,<br>
一半在風裡飛揚;<br>
一半灑落蔭涼,<br>
一半沐浴陽光。<br>
非常沉默,非常驕傲。<br>
從不依靠,從不尋找。<br>
<p></p>
如果有來生,要化成一陣風,<br>
一瞬間也能成為永恆。<br>
沒有善感的情懷,沒有多情的眼睛。<br>
一半在雨裡灑脫,<br>
一半在春光裡旅行;<br>
寂寞了,孤自去遠行,<br>
把淡淡的思念統帶走,<br>
從不思念,從不愛戀;<br>
..................
</body>
</html>

上面的原始碼在瀏覽器會輸出成如下所示:

2.在HTML標籤中使用style屬性(行內樣式)

第一種定義樣式的方法,影響的範圍是整個網頁。如果我們想要各別標籤進行CSS的調整,該如何做呢?這時,就可以直接在HTML標籤內使用style來定義樣式。

<p style="color:red;fontsize:20px;">文字內容在這裡</p>

這種方式的效力只有到</p>為止,下一個標籤則需另外再定義,容易看來雜亂,當宣告數量多時,避免使用這方法。

3.用link標籤連結到css檔(外部樣式)

我們進一步把CSS定義另外存成一個檔案,然後再以<link>標籤來讀取css檔案的內容。
css檔案寫法如下

h2{color:red;
   font-size:20px;
   font-family:微軟正黑;
   text-align:center;
}

網頁的部份,則在head段落中,以<link>標籤呼叫css檔案,語法如下

<head>
<link rel="stylesheet" type="text/css" href="css檔案的URL">
</head>

4.用@import指令匯入css檔(外部樣式)

網頁中的@import必須在head段落的<style></style>之間,語法如下

<head>
     <style>
     @import url(css檔的URL);
     </style>

小結

透過CSS能夠完全改變使用者代理呈現元素的方式,這能夠透過display屬性在基本層級執行,也可以藉由連結鍵的方式來達成。使用者不需要到知道是透過外部樣式、內部樣式、或行內樣式。外部樣式真正的重要性在於提供作者集中放置網站呈現資訊的方式,讓所有的文件都指向相同的地方,不只讓網站更新與維護更加簡單,也能節省頻寬!

設計師要善用CSS的能力,需完全了解CSS的各項功能以及如何妥善使用,才能做出視覺美觀的網頁和作品!

#css #Web #html #code #design







你可能感興趣的文章

Day 160

Day 160

Open AI Gym 簡介與 Q learning 演算法實作

Open AI Gym 簡介與 Q learning 演算法實作

打造專屬的 CLI - iTerm2 & Oh My Zsh

打造專屬的 CLI - iTerm2 & Oh My Zsh






留言討論