引入CSS樣式 筆記

icyhat發表於2018-11-15
CSS筆記
  • 問:
    • 這麼多引入樣式的規則是用來幹什麼的?
  • 答:
    • 作用域不同, 導致可以重複利用的程度不同
      • 作用於某個element, style只能給這個element用
      • 作用於某個HTML document, style只能給這個HTML document用
      • HTML檔案連結到其他CSS檔案, style可以給任何HTML document用
      • CSS檔案連結到其他CSS檔案, style可以給任何CSS檔案用
  • 然後才是語法格式, 這些通用大家都認可的方式, 用的時候再參考
  • 下面才是不重要的參考, 如果看不懂, 說明上面的內容看不懂.

1. HTML element 行內:

<p style="color:red; background:green">hello</p>

2. HTML document內:

<head>
  <style>
    p {
      color:red;
      background:green;
    }
  </style>
</head>
複製程式碼

3. HTML 檔案引入 CSS 檔案

<head>
  <link href="index.css"  rel="stylesheet" type="text/css">
</head>
複製程式碼

4. CSS 檔案引入其他 CSS 檔案

主要用在CSS檔案引入另一個CSS檔案, 也可以放在HTML的style標籤裡, 因為它的特點就是語法比link簡單, 然後位置隨便, 只要被style套住就可以, 不像link必須放在head下.

@import url(fruit.css);
複製程式碼

相關文章