首頁 > web前端 > css教學 > 主體

css插入形式有哪幾種

青灯夜游
發布: 2021-11-02 16:13:22
原創
10387 人瀏覽過

CSS插入形式:1、把css程式碼寫到元素標籤的style屬性中;2、將css程式碼寫在「」標籤對間;3 、將css程式碼寫在css檔中,用link標籤導入;4、用「@import」規則導入css代碼檔。

css插入形式有哪幾種

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

一、什麼是CSS

  CSS(Cascading style sheets  層疊樣式表),CSS可以用以為網頁建立樣式表,透過樣式表來達到網頁進行美化的效果。所謂層疊可以將網頁想像成一層層的結構,高層覆蓋低層次。 CSS就可以將網頁分層設定樣式。 (文字大小,背景顏色,寬高,邊框諸如此類。)

  CSS 這門語言是由W3C組織創建維護的,在1996年就有了1.0的版本,1998年有了2.0的版本, 2004年發布了2.1版本,關於CSS3並沒有一個總的發佈時間,它被拆分成許多小的功能陸陸續續在不同的時間發布,詳細信息可以查看W3C 官網。

二、CSS插入的方式

css樣式表有四種插入方式:內聯樣式,內部樣式,link標籤引入外部樣式,匯入式

(一)、內嵌樣式 (行內樣式) 

#  內嵌樣式:可以將css程式碼寫到元素的style屬性中,在style屬性之後加的就是css程式碼了。寫到內聯標籤中的是內聯樣式。

在一個style屬性裡面可以寫多個樣式,屬性的不同值之間用分號(;)隔開, 這種樣式稱為 內嵌標籤。內嵌標籤只對目前元素起作用。

(二)、內部樣式

  內部樣式 :可以將CSS 樣式編寫到HTML下的< head> 標籤當中(),其中  type="text/css"  這一部分是預設值,寫不寫都可以。其中text 代表寫的樣式是文字、css 表示這是一個css的樣式表。

在style標籤中加入內容需要先寫一個css內容選擇器以表示設定的樣式是設定在誰身上,要設定樣式的標籤後面要帶一個大括號{    },將樣式表寫到指定的style標籤中再透過css選擇器選擇指定元素,然後可以同時為這些元素一起設定樣式,可以使樣式得到更好的複用,可以使結構和樣式進一步分離,提高語意化程度。 (內部樣式只能在目前頁面使用)

(三)、外在樣式

  外在樣式 :達到一套樣式可以在不同頁面同時使用的效果,透過link 標籤 將css檔案(檔案後綴名為  .css)引入目前頁面。

自結束標籤。將外部css檔案引入到目前頁面中,這樣外部文件就能套用到目前樣式表之中。 href 屬性 指向外部檔案位址URL,rel="stylesheet" type="text/css"  這部分內容為預設值。將樣式統一寫在外部文件中,再透過 link標籤引入,這種方法利用瀏覽器的緩存,使得存取速度加快,提高用戶體驗。

其中css.css檔案程式碼內容為   p{color:blue} ,最終表現效果與上面使用內部樣式所顯示的效果一致。

(四)導入式(@import)

導入式:兩個CSS檔案之間的相互引用,使用CSS@import規則引入外部的CSS文件。

採用 link標籤引入外部CSS樣式表 和採用導入式引入CSS文件,這兩種在實現效果上會略有區別。

  使用 link 標籤時,會在裝載主體頁面部分之前載入 CSS檔案(按照從上到下的順序載入),這樣載入出來的頁面從一開始就是帶有樣式渲染的。

  而採用導入式時,會在整個頁面加載完成之後再加載CSS文件,對於有的瀏覽器來說,在一些情況下,如果頁面文件體積比較大,就會出現先是沒有樣式的頁面,接著閃爍一下再出現設定樣式的效果。從使用者的角度來講,這就是導入式的缺陷。

選取方案及 CSS引入另一個 CSS文件的方法:

  • 如果只引入一個 CSS文件,最好使用 link連結的方式。 (如果希望透過JavaScript來動態絕頂引入哪個CSS文件,必須要使用link 標籤導入)
  • 如果需要引用多個CSS文件,則首先使用link引入一個“目錄” CSS文件,這個“目錄” CSS檔中再使用導入式引入其他CSS檔。

CSS中引入另一個CSS檔案的方法

假設有三個css樣式表:one.css ; two.css ; three.css

然後使用一個主樣式style.css,把這三個樣式表都裝進去:(要注意路徑)

@import "one.css"; 
@import "two.css";
@import "three.css";
登入後複製

調用的時候,只需要呼叫style.css 就可以了。

導入式在css 檔案中導入另一個 css檔案主要是 使用了 @import規則

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

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

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