CSS內(nèi)聯(lián)樣式、頁面嵌入、外部引用的方法

發(fā)布時(shí)間：2022-02-22 15:57:49 來源：億速云閱讀：175 作者：iii 欄目：開發(fā)技術(shù)

這篇文章主要介紹“CSS內(nèi)聯(lián)樣式、頁面嵌入、外部引用的方法”，在日常操作中，相信很多人在CSS內(nèi)聯(lián)樣式、頁面嵌入、外部引用的方法問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”CSS內(nèi)聯(lián)樣式、頁面嵌入、外部引用的方法”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

CSS簡(jiǎn)介

顧名思義CSS 的意思是層疊樣式表 (Cascading Style Sheets)
CSS的樣式定義為如何顯示 HTML 元素
CSS樣式通常都會(huì)存儲(chǔ)在樣式表中
外部的樣式表對(duì)工作效率有極大的提高
外部樣式表通常都存儲(chǔ)在 CSS 文件中
多個(gè)樣式定義可層疊為一個(gè)

總之，CSS 可以美化頁面，對(duì)頁面元素進(jìn)行更為精準(zhǔn)仔細(xì)的設(shè)置，樣式主要用來描述元素的字體顏色、字體大小、背景顏色、背景圖片等等。

CSS作用

CSS 主要有內(nèi)聯(lián)樣式、頁面嵌入和外部引用三種使用方式，接下來我們一一來了解他們。

1、內(nèi)聯(lián)樣式

元素的內(nèi)聯(lián)是直接在屬性中寫入元素的 style 屬性，適用于樣式?jīng)]有其他可復(fù)用性的場(chǎng)合，見以下代碼：

<body>
    <p >w3cschool</p>
    <p >億速云</p>
</body>

2、頁面嵌入

在<head>中加入<style>。這種做法表示此頁面中所有對(duì)應(yīng)元素都是采用其指定的樣式，適合于樣式的復(fù)用，有效減小頁面體積。

<head>
    <meta charset="UTF-8">
    <title>CSS w3cschool</title>
    <style type="text/css">
        p{
            font-size:25px;
            color:red;
        }
        h2{
            color:greenyellow;
        }
        h3{
            background-color: #2196F3;
        }
    </style>
</head>
<body>
<body>
    <h2>億速云</h2>
    <p>w3cschool</p>
    <h3>學(xué)編程</h3>
</body>

3、外部引用

在<head>中加入，將 CSS 的所有內(nèi)容都寫入以 CSS 為后綴的文件，可適用多個(gè)頁面來共享此 CSS。

CSS 代碼

h2 {
    background-color: red;
    border-color: green;
}
p {
    color: blue;
}

HTML 代碼

<body>
    <h2>億速云</h2>
    <p>w3cschool</p>
    <h3>學(xué)編程</h3>
</body>

到此，關(guān)于“CSS內(nèi)聯(lián)樣式、頁面嵌入、外部引用的方法”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

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

CSS內(nèi)聯(lián)樣式、頁面嵌入、外部引用的方法

CSS簡(jiǎn)介

CSS作用

1、內(nèi)聯(lián)樣式

2、頁面嵌入

3、外部引用

猜你喜歡

最新資訊

相關(guān)推薦

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

CSS內(nèi)聯(lián)樣式、頁面嵌入、外部引用的方法

1、內(nèi)聯(lián)樣式

3、外部引用