認識CSS

1. CSS的誕生

當人們發現瀏覽器不僅在科學領域使用，還可以用於娛樂時，就發現缺少了多媒體：視頻、動畫、顏色、聲音、透明度等功能。

起初，計劃增加更多的標籤來解決這個問題，但很快就發現，這樣會需要新增上百個標籤，並大大增加HTML文件的複雜度。因此，有了將“文檔的美化”（設計）從其內容中分離的想法，這就是CSS的誕生。

Cascading Style Sheets (CSS) 或稱層疊樣式表，是Web開發的關鍵組件之一，負責網頁的視覺設計。

CSS是一組屬性，每個屬性都有名稱和值。Web開發者設置這些屬性，瀏覽器負責顯示效果。幾乎任何元素都可以指定這些屬性。例如CSS樣式：

這樣的CSS屬性（還被叫做CSS樣式）不到一百個。但它們可以彼此交互，產生意想不到的效果。在CodeGym上，你將學會如何使用它們並創造頁面的魔法🦄。

2. 元素樣式

對於每個HTML元素，都可以使用屬性style指定自己的CSS樣式。

範例：

      
<p style="color: blue; font-size: 16px;">這是嵌入樣式的範例。</p>
      
    

這個樣式告訴瀏覽器，段落中的文字需要以藍色顯示，字體的高度應為16像素。

事實上，這裡有兩個“樣式”：

• color = blue
• font-size = 16px

它們只是被寫在一行中並用分號分隔。

此外，你還可以創建一個黑色矩形，並用白色字體在其中寫字。這段程式碼看起來是這樣的：

      
<div style="width:100%; height:200px;color:white;background-color:black"> 
白色文字在黑色背景 
</div>
      
    

3. 顏色

我們將更深入地討論CSS樣式，當我們學習HTML時。但為了讓課程更有趣，今天我們來了解一下顏色。在CSS中，可以指定任何電腦能顯示的顏色，甚至更多。

顏色是CSS中設計網頁的重要部分。它們可以創建視覺吸引力和直觀的界面。在CSS中有幾種指定顏色的方法，每一種都有其特點和應用。

1. 顏色名稱 (Color Names)

CSS支援超過140個標準顏色名稱。這是一種簡單且易懂的指定顏色的方法。

      
<div style="color: lightblue;"> 淺藍色文字</div>
      
    

一些常見的顏色名稱：

2. 十六進位值 (Hexadecimal Values)

還有另一種方法可以指定任何顏色——十六進位編碼。它可以指定1600萬種顏色。這麼多顏色不可能為每種顏色都取名字，因此使用數字來表示。

十六進位值以符號#開始，後跟六個數字或字母，表示紅色、綠色和藍色的強度(RRGGBB)。

      
<div style="color: #ff0000; background-color: #00ff00;"> 紅色在綠色背景 </div>
      
    

你會在範例中經常看到這種指定顏色的方法。我們在更深入學習CSS時會回到這個主題。