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