0%

CSS 基礎概念

發表於 更新於 分類於

CSS：(Cascading Style Sheets)串接樣式表， 可用以塑造網站的特殊風格。

CSS 基礎概念

CSS 既非標準程式語言，也不是標記語言, 而是一種風格頁面語言（style sheet language），它能讓你在 HTML 文件中的元素（element）上套用不同的頁面樣式（style）。

HTML元素套用CSS有以下3種方式：

  • inline - 將CSS樣式寫在元素屬性內
  • Internal - 於 <head> 的標籤內加入 <style> 元素。
  • External - 額外載入CSS檔案。建議使用
    於 <head> 的標籤內加入
<link href="CSS檔案" rel="stylesheet" type="text/css">

解析 CSS ruleset

選擇器 { 
  屬性：屬性值；
  ... 
}

整個架構我們稱為規則集 (rule set)，或是簡稱為規則 (rule)也可以。

  • 選擇器（Selector）：
    在這個規則的最前頭為 HTML 的元素名。它將決定你 HTML 裡什麼元素將被你接下來的設定影響。若要改變欲影響的元素，只要更改選擇器就行了。
  • 宣告（Declaration）：
    單一個規則，例如 color: red; 指定了這個元素的呈現樣貌。
  • 屬性 (Properties)：
    修改屬性是改變你HTML元素的一種方法 . (ex: color) 在CSS中, 你可以選擇哪些屬性用來影響 rule。
  • 屬性值 (Property value)：
    屬性值就是位於屬性右邊，在冒號（:）之後，從眾多的可能樣式選出一個給予屬性。(ex: red)

注意語法中其他重要的部分：

  • 每一個規則當中，除了選擇器名稱以外，其他都必須被大括號（{}）給包住。
  • 在每一個宣告裡面，屬性跟屬性值之間必須用冒號(:) 做區分。
  • 在每一個規則裡面可以包含有許多宣告，但不同的宣告之間必須使用分號 (;) 來區分。

Ex:

p {
 color: red;
 width: 500px;
 border: 1px solid black;
}

CSS 選擇器是 CSS 規則的一部分。它能讓你選定要調整哪個（或哪些）元素的樣式。

CSS 選擇器的不同類型