欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

三種css的引入方式

1.行內(nèi)樣式

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

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

2.內(nèi)部樣式

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

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

3.外部樣式

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

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

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

準(zhǔn)備

1.首先準(zhǔn)備一個html文件：test.html，不建議使用記事本創(chuàng)建文件，建議使用Notepad++來創(chuàng)建并編輯文件，注意編碼格式為：以UTF-8無BOM格式編碼，否則會出現(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.保存文件至桌面，右鍵選擇谷歌瀏覽器（或其他瀏覽器打開）打開，發(fā)現(xiàn)頁面上出現(xiàn)了hello這幾個英文字母。

四種引入方式

行內(nèi)式

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

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

嵌入式

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

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

鏈接式

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

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

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

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

導(dǎo)入式

@import(url(demo.css))

1.基本不使用，因為頁面會先加載html，然后再去加載css，這樣就會造成頁面樣式的延遲。

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

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

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

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

html頁面代碼

頁面效果圖

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

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

總結(jié)

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

相關(guān)文章

最新評論