時間：2023-09-26 07:12:01 | 來源：網(wǎng)站運營
時間：2023-09-26 07:12:01 來源：網(wǎng)站運營
CSS 三種樣式：本節(jié)我們要學(xué)習(xí)一下 CSS 樣式的幾種形式，在實際應(yīng)用中向 HTML 中引入 CSS 樣式的方法有三種，分別是行內(nèi)樣式、內(nèi)部樣式、外部樣式。我們會依次學(xué)習(xí)這三種方式的優(yōu)缺點以及應(yīng)用場景，本節(jié)我們先來講一下行內(nèi)樣式。
在線咨詢
style 屬性設(shè)置 CSS 樣式。例如像下面這樣的：<p style="font-size: 18px;">行內(nèi)樣式</p>HTML 中的 style 屬性提供了一種改變所有 HTML 元素樣式的通過方法，語法格式如下所示：<標(biāo)簽 style="樣式聲明1;樣式聲明2;樣式聲明3"></標(biāo)簽>要記得用在每個樣式聲明之間使用分號 ; 分隔喲，否則樣式會失效的。<!DOCTYPE><html> <head> <meta charset="utf-8"> <title>CSS學(xué)習(xí)(9xkd.com)</title> </head> <body> <p style="font-size: 20px;color: red;font-weight: bold;">俠課島歡迎你！</p> <p style="font-size: 16px;color: green;font-style: italic;">俠課島歡迎你！</p> </body></html>在瀏覽器中演示效果：<head> 標(biāo)簽中的 <style> 標(biāo)簽內(nèi)。因為它與 HTML 內(nèi)容位于同一個文件中，所以叫做內(nèi)嵌樣式表。<!DOCTYPE><html> <head> <meta charset="utf-8"> <title>CSS學(xué)習(xí)(9xkd.com)</title> <style> h2{ color: lightsalmon; } p{ color:limegreen ; font-size: 18px; line-height: 20px; } span{ color: mediumpurple; font-weight: bold; } </style> </head> <body> <h2>《木蘭花令 擬古決絕詞》</h2> <p>人生若只如初見，何事秋風(fēng)悲畫扇</p> <p>等閑變卻故人心，卻道故人心易變。</p> <p>驪山語罷清宵半，淚雨零鈴終不怨。</p> <p>何如薄幸錦衣郎，<span>比翼連枝當(dāng)日愿。</span></p> </body></html>在瀏覽器中的演示效果：<style>標(biāo)簽中，否則無效。.css，然后在 HTML 頁面中引入這個 CSS 文件即可。<link/> 標(biāo)簽鏈接外部樣式表，且 <link/> 標(biāo)簽必須放到 HTML 中的 <head> 標(biāo)簽內(nèi)。在一個 HTML 頁面中可以鏈接多個 CSS 文件，一個 CSS 文件也可以被多個 HTML 頁面引用。<link rel="stylesheet" type="text/css" href="css文件路徑">其中 rel="stylesheet" 是指在頁面中使用這個外部樣式表，type="text/css" 是指文件的類型是樣式表文本，href 屬性用于指定 css 文件的路徑。css 文件可以應(yīng)用到多個 HTML 頁面中。當(dāng)改變 css 文件中的樣式時，所有應(yīng)用這個 css 文件的頁面中的樣式都會隨之改變。index.css 的文件，將需要用到的 css 代碼保存到這個文件中：h2{ color: lightsalmon; }p{ color:limegreen ; font-size: 18px; line-height: 20px;}span{ color: mediumpurple; font-weight: bold;}然后可以在 HTML 文件中通過 <link/> 標(biāo)簽引用這個文件：<!DOCTYPE><html> <head> <meta charset="utf-8"> <title>CSS學(xué)習(xí)(9xkd.com)</title> <link rel="stylesheet" type="text/css" href="./index.css"> </head> <body> <h2>《木蘭花令 擬古決絕詞》</h2> <p>人生若只如初見，何事秋風(fēng)悲畫扇</p> <p>等閑變卻故人心，卻道故人心易變。</p> <p>驪山語罷清宵半，淚雨零鈴終不怨。</p> <p>何如薄幸錦衣郎，<span>比翼連枝當(dāng)日愿。</span></p> </body></html>在瀏覽器中演示效果：@import 導(dǎo)入外部樣式表，導(dǎo)入樣式表的語法需要放置到 <style> 標(biāo)簽中。<style> @import url("css文件路徑");</style>@import 表示導(dǎo)入文件，前面的 @ 符號必須寫喲，url 中的則是樣式表文件的路徑。css 文件的方式改為導(dǎo)入外部樣式表：<!DOCTYPE><html> <head> <meta charset="utf-8"> <title>CSS學(xué)習(xí)(9xkd.com)</title> <style> @import url("index.css"); </style> </head> <body> <h2>《木蘭花令 擬古決絕詞》</h2> <p>人生若只如初見，何事秋風(fēng)悲畫扇</p> <p>等閑變卻故人心，卻道故人心易變。</p> <p>驪山語罷清宵半，淚雨零鈴終不怨。</p> <p>何如薄幸錦衣郎，<span>比翼連枝當(dāng)日愿。</span></p> </body></html>演示效果是不變的，因為 css 文件中的內(nèi)容并沒有改變。導(dǎo)入式除了可以在同一個頁面中導(dǎo)入多個樣式文件，還可以在 css 樣式文件中使用 import 進行導(dǎo)入。<p> 標(biāo)簽的行內(nèi)樣式中定義了字體大小為16px，在嵌套樣式中定義字體大小18px，在外部樣式中定義了字體大小為20px。最終會應(yīng)用哪個字體大小呢？這里我不演示，大家自己來試一下。關(guān)鍵詞：樣式
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
