摘要:一前言在中使用,包括內(nèi)聯(lián)式內(nèi)嵌式鏈接式和導(dǎo)入式。鏈接式使用時需要在標(biāo)記中使用標(biāo)記,通過標(biāo)記的相關(guān)屬性指明外部文件的路徑,以方便找到其中定義的樣式并運用在當(dāng)前網(wǎng)頁元素上。導(dǎo)入式通過在標(biāo)記的標(biāo)記中使用方法導(dǎo)入相應(yīng)的文件。
一、前言
在 HTML 中使用 CSS,包括內(nèi)聯(lián)式、內(nèi)嵌式、鏈接式和導(dǎo)入式。
二、分類 2.1 內(nèi)聯(lián)式內(nèi)聯(lián)式是所有樣式應(yīng)用方式中最為直接的一種,它通過對 HTML 標(biāo)記使用 style 屬性,將 CSS 代碼直接寫在其中。
在HTML中使用CSS之內(nèi)聯(lián)式 在HTML中使用CSS之內(nèi)聯(lián)式
內(nèi)聯(lián)式是最簡單、直接的 CSS 使用方法,但它的針對性很明顯,只能作用于當(dāng)前標(biāo)記,造成代碼冗余,維護比較困難。
2.2 內(nèi)嵌式內(nèi)嵌式與內(nèi)聯(lián)式使用方法不同,它將 CSS 代碼寫在 標(biāo)記之間,并需要采用 標(biāo)記進行聲明。
在HTML中使用CSS之內(nèi)嵌式 在HTML中使用CSS之內(nèi)嵌式
使用內(nèi)嵌式 CSS 用法時 CSS 代碼將被集中放在 標(biāo)記中,這樣方便查找,對后期維護比較方便,頁面代碼也會減少。但是,如果一個網(wǎng)站有很多頁面,如果多個網(wǎng)頁的某個標(biāo)記要使用相同的樣式效果,內(nèi)嵌式也會 出現(xiàn)代碼冗余和維護困難的問題,所以,內(nèi)嵌式比較適合個別風(fēng)格特殊的頁面效果設(shè)置。
2.3 鏈接式在實際的網(wǎng)頁設(shè)計中,鏈接式 CSS 用法是最常用的,也是效果最好的。鏈接式特點是將 CSS 代碼多帶帶放在一個或多個 .css 文件中,實現(xiàn)了 CSS 代碼和 HTML 代碼的分離,這樣使前期設(shè)計和后期維護都很方便,也有助于實現(xiàn)前臺美工設(shè)計與后臺程序設(shè)計人員的合理分工。
鏈接式 CSS 使用時需要在 標(biāo)記中使用 標(biāo)記,通過 標(biāo)記的相關(guān)屬性指明外部 CSS 文件的路徑,以方便找到其中定義的 CSS 樣式并運用在當(dāng)前網(wǎng)頁元素上。
在HTML中使用CSS之鏈接式 在HTML中使用CSS之鏈接式
@charset "utf-8"; /* CSS Document */ p{ color: #39f; }
鏈接式 CSS 用法的最大特點是將 CSS 代碼和 HTML 代碼分離,這樣就可以實現(xiàn)將一個 CSS 文件鏈接到不同的 HTML 網(wǎng)頁中。使用鏈接式 CSS,可以在設(shè)計整個網(wǎng)站時,將多個頁面都會用到的 CSS 樣式定義在一個或多個 .css 文件中,然后在需要用到該樣式的 HTML 網(wǎng)頁中通過 標(biāo)記鏈接這些 .css 文件,通過鏈接式 CSS 可以降低整個網(wǎng)站的頁面代碼冗余并提高網(wǎng)站的可維護性。
2.4 導(dǎo)入式導(dǎo)入式和鏈接式的用法基本相同,區(qū)別在于語法和使用方式上略有不同。導(dǎo)入式通過在 標(biāo)記的 標(biāo)記中使用 @import 方法導(dǎo)入相應(yīng)的 CSS 文件。被導(dǎo)入的 HTML 文件在初始化時,會將該 CSS 文件導(dǎo)入 HTML 文件中,作為此 HTML 文件的一部分,類似于內(nèi)嵌式的效果,而鏈接式是在 HTML 的標(biāo)記需要 CSS 樣式的時候才會以鏈接的方式引入進來。
在HTML中使用CSS之導(dǎo)入式 在HTML中使用CSS之導(dǎo)入式
不只是 HTML 文件的 標(biāo)記可以導(dǎo)入 CSS 文件,在 CSS 文件內(nèi)也可以導(dǎo)入其他的 CSS 文件。例如,可以在 style.css 文件中不寫任何 CSS 代碼,只寫 @import url(style.css);,這樣所有導(dǎo)入或鏈接到該 CSS 文件的 HTML 頁面都可以使用 style.css 中定義的所有樣式效果。
三、提醒如果你網(wǎng)頁中使用多種方式,樣式之間可能會出現(xiàn)沖突。這時解決 CSS 沖突你就要了解在 HTML 中使用 CSS 的優(yōu)先級規(guī)則:
內(nèi)聯(lián)式 > 內(nèi)嵌式 > 外部樣式;
在多個樣式中,后出現(xiàn)的樣式的優(yōu)先級高于先出現(xiàn)的樣式;
在樣式中,選擇器的優(yōu)先級:id 樣式 > class 樣式 > 標(biāo)記樣式。
為了避免 CSS 沖突,建議你不要混合使用多種,強力推薦使用鏈接式。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/49804.html
摘要:一前言在中使用,包括內(nèi)聯(lián)式內(nèi)嵌式鏈接式和導(dǎo)入式。鏈接式使用時需要在標(biāo)記中使用標(biāo)記,通過標(biāo)記的相關(guān)屬性指明外部文件的路徑,以方便找到其中定義的樣式并運用在當(dāng)前網(wǎng)頁元素上。導(dǎo)入式通過在標(biāo)記的標(biāo)記中使用方法導(dǎo)入相應(yīng)的文件。 一、前言 在 HTML 中使用 CSS,包括內(nèi)聯(lián)式、內(nèi)嵌式、鏈接式和導(dǎo)入式。 二、分類 2.1 內(nèi)聯(lián)式 內(nèi)聯(lián)式是所有樣式應(yīng)用方式中最為直接的一種,它通過對 HTML 標(biāo)記...
摘要:元素是使用小于號和大于號包裹元素名來標(biāo)示。一個結(jié)束標(biāo)簽表示元素的結(jié)束它由小于號元素名組成例如。和嵌套在內(nèi),它們頁面中都是可視的。使用選擇器類型選擇器類型選擇器也叫作元素選擇器根據(jù)元素類型選擇元素。 可以的話,請想象一下互聯(lián)網(wǎng)沒有發(fā)明之前的日子。網(wǎng)站還不存在,紙質(zhì)的書本是我們主要的信息來源,而在書本中查詢我們想要的資料會耗費相當(dāng)多的精力和時間。 而如今,你打開個瀏覽器用搜索引擎搜索,任...
摘要:元素是使用小于號和大于號包裹元素名來標(biāo)示。一個結(jié)束標(biāo)簽表示元素的結(jié)束它由小于號元素名組成例如。和嵌套在內(nèi),它們頁面中都是可視的。使用選擇器類型選擇器類型選擇器也叫作元素選擇器根據(jù)元素類型選擇元素。 可以的話,請想象一下互聯(lián)網(wǎng)沒有發(fā)明之前的日子。網(wǎng)站還不存在,紙質(zhì)的書本是我們主要的信息來源,而在書本中查詢我們想要的資料會耗費相當(dāng)多的精力和時間。 而如今,你打開個瀏覽器用搜索引擎搜索,任...
摘要:每條屬性聲明實現(xiàn)對網(wǎng)頁元素進行某種特定格式的設(shè)置,由一個屬性和一個值組成,屬性和值之間使用冒號連接,不同聲明之間用分號分隔,所有屬性聲明放到一對大括號中。 showImg(https://segmentfault.com/img/bVbkQCI?w=900&h=383); showImg(https://segmentfault.com/img/bVbkQCO?w=900&h=383)...
摘要:我們可以做很多事情來減少阻塞渲染的,例如,緩存等。但是如何減少阻塞渲染的為此,可以拆分并優(yōu)先加載首次渲染所需要的關(guān)鍵,然后再加載其它。請注意,文件在標(biāo)簽里引入,因此將會阻塞渲染。 showImg(https://segmentfault.com/img/remote/1460000011503289?w=600&h=321); 原文地址: Critical CSS and Webpa...
閱讀 3081·2021-09-24 10:26
閱讀 3236·2021-09-23 11:54
閱讀 4645·2021-09-22 15:33
閱讀 2243·2021-09-09 09:33
閱讀 1642·2021-09-07 10:10
閱讀 950·2019-08-30 11:09
閱讀 2840·2019-08-29 17:13
閱讀 993·2019-08-29 12:35