亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

css樣式引入方式及優(yōu)缺點(diǎn)介紹

  發(fā)布時(shí)間：2020-04-02 16:36:26   作者：「已注銷(xiāo)」   我要評(píng)論
這篇文章主要介紹了css樣式引入及優(yōu)缺點(diǎn)，本文給大家分享三種css的引入方式，通過(guò)代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧

三種css的引入方式

1.行內(nèi)樣式

優(yōu)點(diǎn)：書(shū)寫(xiě)方便，權(quán)重高缺點(diǎn)：沒(méi)有做到結(jié)構(gòu)樣式相分離

<div style="width: 100px" height:100px></div>

2.內(nèi)部樣式

優(yōu)點(diǎn)：結(jié)構(gòu)樣式相分離缺點(diǎn)：分離不徹底

    <style>
        div {
            color: violet;
            font-size: 16px;
        }
    </style>

3.外部樣式

優(yōu)點(diǎn):完全實(shí)現(xiàn)結(jié)構(gòu)和樣式相分離缺點(diǎn)：需要引入

    <!-- 引入css初始化文件 -->
    <link rel="stylesheet" href="css/normalize.css" />
    <!-- 引入公共樣式 -->
    <link rel="stylesheet" href="css/baes.css">
    <!-- 引入首頁(yè)樣式 -->
    <link rel="stylesheet" href="css/index.css">

補(bǔ)充：四種CSS樣式的引入方式

準(zhǔn)備

1.首先準(zhǔn)備一個(gè)html文件：test.html，不建議使用記事本創(chuàng)建文件，建議使用Notepad++來(lái)創(chuàng)建并編輯文件，注意編碼格式為：以UTF-8無(wú)BOM格式編碼，否則會(huì)出現(xiàn)中文亂碼，內(nèi)容如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>四種CSS樣式引入方式</title>
        <style type="text/css">
        </style>
    </head>
    <body>
        hello
    </body>
</html>

2.保存文件至桌面，右鍵選擇谷歌瀏覽器（或其他瀏覽器打開(kāi)）打開(kāi)，發(fā)現(xiàn)頁(yè)面上出現(xiàn)了hello這幾個(gè)英文字母。

四種引入方式

行內(nèi)式

通過(guò)html屬性style實(shí)現(xiàn)，如下所示

//寫(xiě)在body標(biāo)簽中
<span style="color:red;">行內(nèi)式</span>

嵌入式

在style標(biāo)簽中寫(xiě)css樣式，在body中引用

//寫(xiě)在style標(biāo)簽中的css樣式
p{
    color:blue;
}
-----------------------------------------------------------------
//寫(xiě)在body標(biāo)簽中
<p>嵌入式</p>

鏈接式

1.一般都使用這種方式，在桌面上新建一個(gè)css文件：test.css，內(nèi)容為一個(gè)css樣式

//寫(xiě)在test.css文件中
div{
    color:yellow;
}

2.在test.html引入test.css文件

//寫(xiě)在head標(biāo)簽中引入css文件，href屬性中的為絕對(duì)路徑，當(dāng)前在同一級(jí)目錄下
<link href="test.css" type="text/css" rel="stylesheet" />
------------------------------------------------------------------------
//寫(xiě)在body標(biāo)簽中
<div>鏈接式</div>

導(dǎo)入式

@import(url(demo.css))

1.基本不使用，因?yàn)轫?yè)面會(huì)先加載html，然后再去加載css，這樣就會(huì)造成頁(yè)面樣式的延遲。

2.創(chuàng)建一個(gè)demo.css文件，寫(xiě)上一個(gè)css樣式

//寫(xiě)在demo.css文件中
h2{
    color:green;
}

3.使用@import方式導(dǎo)入demo.css文件

//試驗(yàn)了一下，需要單獨(dú)寫(xiě)在一個(gè)style中，
<style>
  @import url(demo.css)
</style>
----------------------------------------------------------------------------
//寫(xiě)在body標(biāo)簽中
<h2>導(dǎo)入式</h2>

html頁(yè)面代碼

頁(yè)面效果圖

前三種樣式的顯示優(yōu)先級(jí)

就近原則，即行內(nèi)式>嵌入式>嵌入式

總結(jié)

到此這篇關(guān)于css樣式引入及優(yōu)缺點(diǎn)介紹的文章就介紹到這了,更多相關(guān)css樣式引入及優(yōu)缺點(diǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論