首頁 > web前端 > 前端問答 > css樣式有哪幾種類型

css樣式有哪幾種類型

青灯夜游
發布: 2023-01-04 09:35:26
原創
14357 人瀏覽過

CSS樣式有三種:1、行內樣式(內嵌樣式),使用style屬性直接把CSS程式碼加入HTML的標記中;2、內部樣式(內嵌樣式),把css樣式寫在style標籤中;3、外部樣式(外接樣式),將css樣式寫在一個單獨的「.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檔案內。

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

範例:

<link type="text/css" rel="stylesheet" href="css/main.css" />
登入後複製

優點:

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

  • 方便復用及維護

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

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

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

缺點:

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

(學習影片分享:css影片教學

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

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板