在 html 中引用 css 文件可將樣式信息鏈接到網頁,控制其外觀和布局。具體步驟包括:創建一個 “.css” 擴展名的 css 文件。在 html 文件的
部分中使用 <link> 標簽引用 css 文件,指定 rel=”stylesheet” 和 href=”style.css”。可鏈接多個 css 文件。可使用媒體查詢加載不同尺寸或設備的特定樣式表。
HTML 中引用 CSS 文件
在 HTML 中引用 CSS 文件是一種將樣式信息鏈接到網頁的方式,以控制網頁的外觀和布局。以下是引用 CSS 文件的步驟:
1. 創建一個 CSS 文件
在文本編輯器中創建一個新文件,并使用 “.css” 作為文件擴展名。在文件中添加 CSS 樣式規則。
2. 在 HTML 文件中引用 CSS 文件
在要應用樣式的 HTML 文件的 部分中,使用
<link>
標簽引用 CSS 文件:
<code class="html"> <link rel="stylesheet" href="style.css"></code>
登錄后復制
rel=”stylesheet” 指示瀏覽器該文件是一個樣式表。
href=”style.css” 指定了 CSS 文件的路徑。
3. 鏈接多個 CSS 文件(可選)
如果需要,可以使用多個 <link>
標簽鏈接多個 CSS 文件。它們將在鏈接的順序中應用到網頁上。
4. 媒體查詢(可選)
可以添加媒體查詢以在不同的屏幕尺寸或設備上加載不同的樣式表。使用 media
屬性進行設置:
<code class="html"><link rel="stylesheet" media="screen and (max-width: 600px)" href="mobile.css"></code>
登錄后復制
當屏幕寬度小于或等于 600px 時,將加載 “mobile.css”。
注意:
CSS 文件的路徑相對于 HTML 文件的位置。
<link>
標簽可以放在 部分的任何位置,但通常放在頭部開始處。
確保 CSS 文件名和路徑正確,否則樣式不會被應用。