溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關css樣式表有哪三種方式的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
三種方式為：1、行內樣式表，使用style屬性直接把CSS代碼添加到HTML的標記中。2、內部樣式表，把css樣式寫在“<head>”標簽中，并用“<style>”標簽去聲明。3、外部樣式表，將css樣式寫在一個單獨的“.css”文件中。
本文操作環境：宏基S40-51、HBuilderX.3.0.5&&css3版、Windows10家庭中文版
（學習視頻分享：css視頻教程）
css樣式表有三種方式：
行內樣式表
內部樣式表
外部樣式表
行內樣式表
行內樣式就是使用style屬性直接把CSS代碼添加到HTML的標記中，即作為HTML標記的屬性標記存在。
例：
<h2 style="color:red;">style屬性的應用</h2>
通過這種方法，可以很簡單地對某個元素單獨定義樣式。
實例：
行內樣式表的優缺點：
優點:
沒有了樣式表文件，在某些時候可以提升效率;
使用 style 屬性的樣式效果會最強，會覆蓋掉其他引入方式的相同樣式效果。
缺點:
多個元素難以共享樣式，不利于代碼復用;
HTML 和 CSS 代碼混雜，不利于程序員和搜索引擎閱讀。
內部樣式表
內部樣式表是把css樣式寫在<head>標簽中，并用<style>標簽去聲明
實例：
內部樣式表的優缺點
優點：跟行間樣式表相同不會產生額外的請求，且它初步實現了結構與樣式的分離，比較適合單頁面網站應用。
缺點：由于內部樣式表是寫在 HTML 文件中的，導致頁面不純凈、文件體積大、不利于網絡爬蟲獲取信息、不利于維護、頁面之間無法共享樣式
外部樣式表
如果 CSS 樣式被放置在網頁文檔外部的文件中，則稱為外部樣式表，一個 CSS 樣式表文檔就表示一個外部樣式表。
實際上，外部樣式表也就是一個文本文件，擴展名為.css。當把CSS樣式代碼復制到一個文本文件中后，另存為.css文件，則它就是一個外部樣式表。
如下圖所示就是一個外部樣式表：
引入外部樣式表的方式：
HTML文件引用擴展名為.css的樣式表，有兩種方式：鏈接式、導入式。
1、CSS鏈接樣式
鏈接樣式是指在外部定義CSS樣式表并形成以.CSS為擴展名文件，然后在頁面中通過<link>鏈接標記鏈接到頁面中，而且該鏈接語句必須放在頁面的<head>標記區。
語法：
<link type="text/css" rel="styleSheet" href="CSS文件路徑" />
2、CSS導入式
導入式是通過@import在<style>標簽中進行聲明的
語法：
<style type="text/css">
@import url("css文件路徑");
</style>簡單實例：
外部樣式表的優缺點
優點：
實現了結構與表現的代碼完全分離
方便復用及維護
因為分離到各自獨立的文件中，讓 HTML 文件大小大幅減少了，從而讓頁面結構更容易被程序員和網絡爬蟲讀懂
對搜索引擎友好，讓搜索引擎給頁面評分更高，有利于頁面搜索引擎排名
外部樣式表在用戶首次訪問后就被緩存到用戶電腦上，下次訪問無需加載
缺點：
如果樣式很多，CSS 文件會變的很大查找起來不方便。此外，多一個 CSS 文件就多一次 HTTP 請求，在訪問量大的網站中會加重服務器壓力
感謝各位的閱讀！關于“css樣式表有哪三種方式”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
