CSS如何對帶有指定屬性的HTML元素設(shè)置樣式

發(fā)布時(shí)間：2022-02-22 09:52:12 來源：億速云閱讀：425 作者：小新欄目：開發(fā)技術(shù)

這篇文章給大家分享的是有關(guān)CSS如何對帶有指定屬性的HTML元素設(shè)置樣式的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

創(chuàng)建和讀取 CSS
當(dāng)讀到一個(gè)樣式表時(shí)，瀏覽器會根據(jù)它來格式化 HTML 文檔。
插入樣式表的方法有三種：外部樣式表、內(nèi)部樣式表、內(nèi)聯(lián)樣式。

外部樣式表
當(dāng)樣式需要應(yīng)用于很多頁面時(shí)，外部樣式表將是理想的選擇。
在使用外部樣式表的情況下，你可以通過改變一個(gè)文件來改變整個(gè)站點(diǎn)的外觀。
每個(gè)頁面使用 <link> 標(biāo)簽鏈接到樣式表。<link> 標(biāo)簽在（文檔的）頭部：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

瀏覽器會從文件 mystyle.css 中讀到樣式聲明，并根據(jù)它來格式文檔。
外部樣式表可以在任何文本編輯器中進(jìn)行編輯。
文件不能包含任何的 html 標(biāo)簽。樣式表應(yīng)該以 .css 擴(kuò)展名進(jìn)行保存：

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

提示：不要在屬性值與單位之間留有空格，如“20px”不能寫成“20 px”。

內(nèi)部樣式表
當(dāng)單個(gè)文檔需要特殊的樣式時(shí)，就應(yīng)該使用內(nèi)部樣式表。
你可以使用 <style> 標(biāo)簽在文檔頭部定義內(nèi)部樣式表，就像這樣:

<head>
<style type="text/css">
    hr {color: sienna;}
    p {margin-left: 20px;}
    body {background-image: url("images/back.gif");}
</style>
</head>

內(nèi)聯(lián)樣式
由于要將表現(xiàn)和內(nèi)容混雜在一起，內(nèi)聯(lián)樣式會損失掉樣式表的許多優(yōu)勢。
請慎用這種方法，例如當(dāng)樣式僅需要在一個(gè)元素上應(yīng)用一次時(shí)。
要使用內(nèi)聯(lián)樣式，你需要在相關(guān)的標(biāo)簽內(nèi)使用樣式（style）屬性。
Style 屬性可以包含任何 CSS 屬性。本例展示如何改變段落的顏色和左外邊距：

<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

多重樣式：在不同的樣式表中被同樣的選擇器定義
如果某些屬性具有多重樣式，那么屬性值將從更具體的樣式表中被繼承過來。
例如，外部樣式表擁有針對 h4 選擇器的三個(gè)屬性：

h4 {
    color: red;
    text-align: left;
    font-size: 8pt;
    }

而內(nèi)部樣式表擁有針對 h4 選擇器的兩個(gè)屬性：

h4 {
    text-align: right; 
    font-size: 20pt;
    }

假如擁有內(nèi)部樣式表的這個(gè)頁面同時(shí)與外部樣式表鏈接，那么 h4 得到的樣式是：

h4 {
    color: red; 
    text-align: right; 
    font-size: 20pt;
    }

即顏色屬性將被繼承于外部樣式表，而文字排列和字體尺寸會被內(nèi)部樣式表中的規(guī)則取代。

感謝各位的閱讀！關(guān)于“CSS如何對帶有指定屬性的HTML元素設(shè)置樣式”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問一下細(xì)節(jié)

CSS如何對帶有指定屬性的HTML元素設(shè)置樣式

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽