外部式CSS樣式實(shí)例
<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>
在前端開發(fā)中，CSS樣式的應(yīng)用離不開外部式CSS樣式。通過外部式CSS樣式的引用，可以將CSS樣式文件與HTML文件相分離，讓代碼更加清晰、易于維護(hù)。以下是一個(gè)簡單的外部式CSS樣式實(shí)例。
/* style.css */
body {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
h1 {
text-align: center;
font-size: 36px;
color: #333;
text-transform: uppercase;
}
p {
font-size: 18px;
line-height: 24px;
color: #666;
margin-bottom: 20px;
}在HTML文件中使用外部式CSS樣式，只需在 <head> 標(biāo)簽內(nèi)添加一個(gè) <link> 標(biāo)簽。其中，type 屬性指定文件類型為CSS，href 屬性指定CSS樣式文件的路徑。
上述CSS樣式文件定義了 body、h1、p 三個(gè)元素的樣式。在HTML文件中，可以直接使用這些樣式，如：
<body> <h1>這是一個(gè)標(biāo)題</h1> <p>這是一段文字。</p> <p>這也是一段文字。</p> </body>
在實(shí)際的項(xiàng)目中，我們通常會(huì)將所有的CSS樣式都放在一個(gè)單獨(dú)的樣式文件中，方便我們進(jìn)行管理和維護(hù)。外部式CSS樣式的應(yīng)用，不僅可以提高代碼的可維護(hù)性，還可以實(shí)現(xiàn)樣式的復(fù)用，減少代碼的冗余程度，提高頁面的加載速度。