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

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

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

三種css的引入方式

1.行內樣式

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

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

2.內部樣式

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

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

3.外部樣式

優(yōu)點:完全實現結構和樣式相分離缺點：需要引入

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

補充：四種CSS樣式的引入方式

準備

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

<!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ā)現頁面上出現了hello這幾個英文字母。

四種引入方式

行內式

通過html屬性style實現，如下所示

//寫在body標簽中
<span style="color:red;">行內式</span>

嵌入式

在style標簽中寫css樣式，在body中引用

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

鏈接式

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

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

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

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

導入式

@import(url(demo.css))

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

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

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

3.使用@import方式導入demo.css文件

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

html頁面代碼

頁面效果圖

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

就近原則，即行內式>嵌入式>嵌入式

總結

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

相關文章

最新評論