科技知識動態:css樣式表的三種方式是什么

導讀跟大家講解下有關css樣式表的三種方式是什么,相信小伙伴們對這個話題應該也很關注吧,現在就為小伙伴們說說css樣式表的三種方式是什么,小

跟大家講解下有關css樣式表的三種方式是什么,相信小伙伴們對這個話題應該也很關注吧,現在就為小伙伴們說說css樣式表的三種方式是什么,小編也收集到了有關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標記的屬性標記存在。

例:

<h1 style="color:red;">style屬性的應用</h1>

通過這種方法,可以很簡單地對某個元素單獨定義樣式。

實例:

2.png

行內樣式表的優缺點:

優點:

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

使用 style 屬性的樣式效果會最強,會覆蓋掉其他引入方式的相同樣式效果。

缺點:

多個元素難以共享樣式,不利于代碼復用;

HTML 和 CSS 代碼混雜,不利于程序員和搜索引擎閱讀。

內部樣式表

內部樣式表是把css樣式寫在<head>標簽中,并用<style>標簽去聲明

實例:

3.png

內部樣式表的優缺點

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

缺點:由于內部樣式表是寫在 HTML 文件中的,導致頁面不純凈、文件體積大、不利于網絡爬蟲獲取信息、不利于維護、頁面之間無法共享樣式

外部樣式表

如果 CSS 樣式被放置在網頁文檔外部的文件中,則稱為外部樣式表,一個 CSS 樣式表文檔就表示一個外部樣式表。

實際上,外部樣式表也就是一個文本文件,擴展名為.css。當把CSS樣式代碼復制到一個文本文件中后,另存為.css文件,則它就是一個外部樣式表。

如下圖所示就是一個外部樣式表:

0.png

引入外部樣式表的方式:

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>

簡單實例:

5.png

4.png

外部樣式表的優缺點

優點:

實現了結構與表現的代碼完全分離

方便復用及維護

因為分離到各自獨立的文件中,讓 HTML 文件大小大幅減少了,從而讓頁面結構更容易被程序員和網絡爬蟲讀懂

對搜索引擎友好,讓搜索引擎給頁面評分更高,有利于頁面搜索引擎排名

外部樣式表在用戶首次訪問后就被緩存到用戶電腦上,下次訪問無需加載

缺點:

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

更多編程相關知識,請訪問:編程入門!!

以上就是css樣式表的三種方式是什么的詳細內容,更多請關注php中文網其它相關文章!

來源:php中文網

免責聲明:本文由用戶上傳,如有侵權請聯系刪除!