溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

有哪些css插入形式

發(fā)布時間:2021-11-02 16:35:02 來源:億速云 閱讀:196 作者:iii 欄目:web開發(fā)

本篇內(nèi)容介紹了“有哪些css插入形式”的有關(guān)知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學習一下如何處理這些情況吧!希望大家仔細閱讀,能夠?qū)W有所成!

CSS插入形式:1、把css代碼寫到元素標簽的style屬性中;2、將css代碼寫在“<style>”和“</style>”標簽對間;3、將css代碼寫在css文件中,用link標簽導入;4、用“@import”規(guī)則導入css代碼文件。

有哪些css插入形式

本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

一、什么是CSS

  CSS(Cascading style sheets  層疊樣式表),CSS可以用以為網(wǎng)頁構(gòu)建樣式表,通過樣式表來達到對網(wǎng)頁進行美化的效果。所謂層疊可以將網(wǎng)頁想象成一層層的結(jié)構(gòu),高層次覆蓋低層次。CSS就可以將網(wǎng)頁分層設(shè)置樣式。(文字大小,背景顏色,寬高,邊框諸如此類。)

  CSS 這門語言是由 W3C組織創(chuàng)建維護的,在 1996年就有了 1.0的版本,1998年有了 2.0的版本,2004年發(fā)布了 2.1版本,關(guān)于CSS3并沒有一個總的發(fā)布時間,它被拆分成許多小的功能陸陸續(xù)續(xù)在不同的時間發(fā)布,詳細信息可以查看W3C 官網(wǎng)。

二、CSS插入的方式

css樣式表有四種插入方式:內(nèi)聯(lián)樣式,內(nèi)部樣式,link標簽引入外部樣式,導入式

(一)、內(nèi)聯(lián)樣式 (行內(nèi)樣式)

  內(nèi)聯(lián)樣式:可以把css代碼編寫到元素的 style屬性中,在style屬性之后加的就是css代碼了。寫到內(nèi)聯(lián)標簽中的是內(nèi)聯(lián)樣式。

在一個style屬性中里面可以寫多個樣式,屬性的不同值之間用分號(;)隔開, 這種樣式稱為 內(nèi)聯(lián)標簽。內(nèi)聯(lián)標簽只對當前元素起作用。

有哪些css插入形式有哪些css插入形式

(二)、內(nèi)部樣式

  內(nèi)部樣式 :可以將 CSS 樣式編寫到HTML下的 <head> 標簽當中(<style type="text/css"> </style>),其中  type="text/css"  這一部分是默認值,寫不寫都可以。其中text 代表編寫的樣式是文本、css 表示這是一個css的樣式表。

在style標簽中添加內(nèi)容需要先寫一個css內(nèi)容選擇器以表明設(shè)置的樣式是設(shè)置在誰身上,要設(shè)置樣式的標簽后面要帶上一個大括號{    },將樣式表編寫到指定的style標簽中再通過css選擇器選擇指定元素,然后可以同時為這些元素一起設(shè)定樣式,可以使樣式得到更好的復用,可以使結(jié)構(gòu)和樣式進一步分離,提高語義化程度。(內(nèi)部樣式只能在當前頁面使用)

有哪些css插入形式有哪些css插入形式

(三)、外部樣式

  外部樣式 :達到一套樣式可以在不同頁面同時使用的效果,通過 link 標簽 將css文件(文件后綴名為  .css)引入到當前頁面中。

<link />自結(jié)束標簽。將外部css文件引入到當前頁面中,這樣外部文件就能應(yīng)用到當前樣式表之中。href 屬性 指向外部文件地址URL,rel="stylesheet" type="text/css"  這部分內(nèi)容為默認值。 將樣式統(tǒng)一寫在外部文件中,再通過 link標簽引入,這種方法利用瀏覽器的緩存,使得訪問速度加快,提高用戶體驗。

有哪些css插入形式有哪些css插入形式

其中css.css文件代碼內(nèi)容為   p{color:blue} ,最終表現(xiàn)效果與上面使用內(nèi)部樣式所展示的效果一致。

(四)導入式(@import)

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

采用 link標簽引入外部CSS樣式表 和采用導入式引入CSS文件,這兩種在實現(xiàn)效果上會略有區(qū)別。

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

  而采用導入式時,會在整個頁面加載完成之后再加載CSS文件,對于有的瀏覽器來說,在一些情況下,如果頁面文件體積比較大,就會出現(xiàn)先是沒有樣式的頁面,接著閃爍一下再出現(xiàn)設(shè)置樣式的效果。從用戶的角度來講,這就是導入式的一個缺陷。

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

  • 如果只引入一個 CSS文件,最好使用 link鏈接的方式。(如果希望通過 JavaScript來動態(tài)絕頂引入哪個CSS文件,必須要使用 link 標簽導入)

  • 如果需要引用多個 CSS文件,則首先使用 link引入一個 “目錄” CSS文件,這個“目錄” CSS文件中再使用導入式引入其他 CSS文件。

CSS中引入另一個 CSS文件的方法

假設(shè)有三個css樣式表:one.css ; two.css ; three.css

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

@import "one.css"; 
@import "two.css";
@import "three.css";

調(diào)用的時候,只需要調(diào)用 style.css 就可以了。

導入式在css 文件中導入另一個 css文件主要是 使用了 @import規(guī)則

“有哪些css插入形式”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實用文章!

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI