在HTML中使用CSS3.0

記住在css中利用 @charset 設定編碼解決編碼亂碼的問題

CSS樣式表可以非常良好的控制頁面顯示，分離網頁內容和格式程式碼，它控制HTML標籤的方式：行內樣式、內嵌樣式、外鏈樣式和匯入樣式

行內樣式

行內樣式是所有CSS樣式中，最簡單，最直接，最粗暴的方法，它是直接將樣式程式碼和HTML標籤程式碼直接放在一起。

比如：

<p style="color: bisque;font-size: 200px">你好啊</p>

內嵌樣式

內嵌樣式，定義在head標籤的style標籤內部，這種寫法在一定程度上來說滿足了網頁結構和表現分離，但是並沒有做到完全分離。這種樣式可以用來設定與該網頁相關的一些全域性樣式設定。

比如：

<style>
  /*
  text-align: center;設定對齊方式，這裡是居中對齊，取值：left right center
  font-weight: bold;設定字重，這裡是加粗，取值範圍100-900
  lighter為更細字型 ，nomal為400預設， bold為700加粗字型 ，boder為900更粗字型
  font-family: "仿宋","黑體","楷體";設定字型型別，這裡優先選擇仿宋，沒有繼續往後面選擇
  font-size: 50px;設定字型大小，這裡設定為50畫素

內嵌樣式,如果不同的網頁上，需要使用相同的樣式時,就非常鬱悶了! !

外鏈樣式

外鏈樣式,是所有樣式中，使用最為頻繁的,也是最為實用的一種方法。它可以非常良好的將“網頁結構"和“樣式”進行分離成兩個檔案或者多個檔案。

外鏈樣式，需要程式設計師在HTML頁面之外定義一個新的CSS檔案，字尾名為“.css”，然後在head標籤中，是用link連結標籤連結到網頁中。

比如：

<!-- 外鏈css檔案-->

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

<!-- type="text/css" 指定外部連結的檔案型別是層疊樣式表-->
<!-- rel="stylesheet" 表示連線到樣式表，其值為：stylesheet-->
<!-- href="../css/index.css" 表示指定層疊樣式表的位置，此處最好使用相對位置-->

外鏈樣式，最好的好處就是如果其他HTML檔案也需要使用相司的樣式的話，可以直接複用該CSS檔案。

匯入樣式

匯入樣式和外鏈樣式基本相同，也需要定義外部的CS5檔案，然後在引入到HTML檔案中，根據外鏈方式在引的語法上，和實際的運作上有所區別。匯入樣式是在HTML頁面初始化時，會作為HTML的一部分，類似於內嵌。而外鏈方式,是在HTML初始化完成之後，需要表現風格顯示的時候,才會引入。在<style>標籤中利用@import引入。

例如：

<style>
  @import "../css/index.css";
  @import "../css/2018.css";
</style>

可以這樣說:匯入樣式和外鏈方式相比,最大的特點就是可以一次性匯入多個CSS檔案。

優先順序問題

HTML中引入CSS檔案的方式很多，比如：行內樣式、內嵌樣式、外鏈樣式、匯入樣式，那麼當多種樣式針對相同的標籤進行表現修飾的時候，它的優先順序應該遵循以下規則：

1、當行內樣式與內嵌樣式同時存在，以行內樣式為準

2、當內嵌樣式與外鏈樣式同時存在

      a）當外鏈樣式定義在內嵌樣式的上方，以內嵌樣式為主

      b）當外鏈樣式定義在內嵌樣式的下方，以外鏈樣式為主

3、當外鏈樣式與匯入樣式同時存在

      a）當外鏈樣式定義在匯入樣式的下方，以外鏈為主

      b）當匯入樣式定義在外鏈樣式的下方，以匯入為主

 綜合起來說：行內樣式最大，其他的樣式均需要根據定義的位置而定，採用就近原則。說的直白點誰在下面就採用誰，因為誰在下面誰離用它的程式碼最近，因為程式碼的執行是從上至下。