css樣式有哪幾種類型

CSS樣式有三種：1、行內樣式（內嵌樣式），使用style屬性直接把CSS程式碼加入HTML的標記中；2、內部樣式（內嵌樣式），把css樣式寫在style標籤中；3、外部樣式（外接樣式），將css樣式寫在一個單獨的「.css」檔案內。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

CSS樣式主要包含以下三種：

1、行內樣式（內嵌樣式）：結構的內部，即寫在標籤內的樣式；寫在標籤的開始部分內部，style屬性當中。

範例：

<标记 style="样式的属性名1：样式的属性值1；属性名2：属性值2；......"></标记>

優點:

• #沒有了樣式表文件，在某些時候可以提升效率;

• #使用style 屬性的樣式效果會最強，會覆寫其他引入方式的相同樣式效果。

缺點:

• 多個元素難以共享樣式，不利於程式碼重複使用;

• #HTML 和CSS 程式碼混雜，不利於程式設計師和搜尋引擎閱讀。

2、內部樣式（內嵌樣式）：寫在HTML頁面內部，存放於head標記當中，樣式寫在style標記內。

範例：

<style>选择器 {属性名：属性值；属性名：属性值；......}</style>

優點：跟行間樣式表相同不會產生額外的請求，且它初步實現了結構與樣式的分離，比較適合單頁網站應用。

缺點：由於內部樣式表是寫在HTML 檔案中的，導致頁面不純淨、檔案體積大、不利於網路爬蟲獲取資訊、不利於維護、頁面之間無法共享樣式

3、外部樣式（外接樣式）：寫在css檔案內。

然後在頁面中透過2cdf5bf648cf2f33323966d7f58a7f3f連結標記連結到頁面中，而且該連結語句必須放在頁面的93f0f5c25f18dab9d176bd4f6de5d30e標記區。

範例：

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

優點：

• #實作了結構與表現的程式碼完全分離

• 方便復用及維護

• 因為分離到各自獨立的檔案中，讓HTML 檔案大小大幅減少了，從而讓頁面結構更容易被程式設計師和網路爬蟲讀懂

• 對搜尋引擎友好，讓搜尋引擎給頁面評分更高，有利於頁面搜尋引擎排名

• 外部樣式表在用戶首次訪問後就被快取到使用者電腦上，下次存取無需載入

缺點：

• 如果樣式很多，CSS 檔案會改變的很大找起來不方便。此外，多一個CSS 檔案就多一次HTTP 請求，在訪問量大的網站中會加重伺服器壓力

（學習影片分享：css影片教學）

以上是css樣式有哪幾種類型的詳細內容。更多資訊請關注PHP中文網其他相關文章！