鏈入式CSS是指將CSS樣式表放在外部文件中,并在HTML文檔中通過(guò)鏈接來(lái)引用該文件,以達(dá)到提高代碼可讀性、可維護(hù)性、樣式統(tǒng)一性、減少代碼冗余等好處的一種技術(shù)。
下面是一個(gè)簡(jiǎn)單的HTML文件和一個(gè)外部樣式表文件的示例:
鏈入式CSS示例 這是一個(gè)標(biāo)題
這是一段文字,通過(guò)鏈入式CSS可以為它設(shè)置樣式。
- 列表項(xiàng)1
- 列表項(xiàng)2
- 列表項(xiàng)3
/* style.css */ body{ font-family: Arial, sans-serif; font-size: 16px; color: #333; line-height: 24px; margin: 0; padding: 0; } h1{ font-size: 28px; font-weight: bold; text-align: center; margin-top: 40px; } p{ margin: 20px 0; text-align: justify; } ul{ list-style: none; margin: 0; padding: 0; } li{ margin: 5px 0; padding-left: 20px; background-image: url('bullet.png'); background-repeat: no-repeat; background-position: 0 50%; }
通過(guò)上面的示例可以看到,HTML文件中僅僅包含了HTML結(jié)構(gòu)和文本內(nèi)容,樣式則放在了外部的樣式表文件中。這樣可以使得HTML文件更加簡(jiǎn)潔、易讀、易維護(hù),同時(shí)也使得樣式可以在多個(gè)頁(yè)面中共用,從而實(shí)現(xiàn)樣式統(tǒng)一。樣式表文件使用link標(biāo)簽來(lái)引入,在HTML文檔中的位置通常在head標(biāo)簽中。在樣式表文件中,可以使用各種CSS屬性來(lái)設(shè)置各種樣式,同時(shí)也可以使用選擇器來(lái)控制應(yīng)用樣式的元素范圍。