css樣式引入方式的優(yōu)缺有哪些

這篇文章將為大家詳細(xì)講解有關(guān)css樣式引入方式的優(yōu)缺有哪些，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)一直通過網(wǎng)站建設(shè)和網(wǎng)站營銷幫助企業(yè)獲得更多客戶資源。以"深度挖掘，量身打造，注重實效"的一站式服務(wù)，以成都網(wǎng)站制作、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、移動互聯(lián)產(chǎn)品、成都全網(wǎng)營銷服務(wù)為核心業(yè)務(wù)。十載網(wǎng)站制作的經(jīng)驗，使用新網(wǎng)站建設(shè)技術(shù)，全新開發(fā)出的標(biāo)準(zhǔn)網(wǎng)站，不但價格便宜而且實用、靈活，特別適合中小公司網(wǎng)站制作。網(wǎng)站管理系統(tǒng)簡單易用，維護(hù)方便，您可以完全操作網(wǎng)站資料，是中小公司快速網(wǎng)站建設(shè)的選擇。

三種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這幾個英文字母。

css樣式引入方式的優(yōu)缺有哪些

四種引入方式

行內(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文件中
h3{
    color:green;
}

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

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

html頁面代碼

css樣式引入方式的優(yōu)缺有哪些

頁面效果圖

css樣式引入方式的優(yōu)缺有哪些

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

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

關(guān)于“css樣式引入方式的優(yōu)缺有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

文章題目：css樣式引入方式的優(yōu)缺有哪些
文章鏈接：http://aaarwkj.com/article2/gojhoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、網(wǎng)頁設(shè)計公司、關(guān)鍵詞優(yōu)化、響應(yīng)式網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、外貿(mào)建站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

css樣式引入方式的優(yōu)缺有哪些