css的四種引入方式


css概述
CSS是Cascading Style Sheets的簡稱,中文稱為層疊樣式表,用來控制網頁數據的表現,可以使網頁的表現與數據內容分離。

1.行內式
行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優勢,不推薦使用。

<p style="background-color: rebeccapurple">hello yuan</p>

2.嵌入式
嵌入式是將CSS樣式集中寫在網頁的<head></head>標簽對的<style></style>標簽對中。格式如下:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>

3 鏈接式
將一個.css文件引入到HTML文件中

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

4.導入式
將一個獨立的.css文件引入HTML文件中,導入式使用CSS規則引入外部CSS文件,<style>標記也是寫在<head>標記中,使用的語法如下:

<style type="text/css">
 
          @import"mystyle.css"; 此處要注意.css文件的路徑
 
</style> 

注意:

導入式會在整個網頁裝載完后再裝載CSS文件,因此這就導致了一個問題,如果網頁比較大則會兒出現先顯示無樣式的頁面,閃爍一下之后,再出現網頁的樣式。這是導入式固有的一個缺陷。使用鏈接式時與導入式不同的是它會以網頁文件主體裝載前裝載CSS文件,因此顯示出來的網頁從一開始就是帶樣式的效果的,它不會象導入式那樣先顯示無樣式的網頁,然后再顯示有樣式的網頁,這是鏈接式的優點。

 

用pycharm新建import_css.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p style="color: #cc3399">hello p</p>

<div>hello div</div>

</body>
</html>

點擊pycharm上面瀏覽器

修改import_css.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p style="color: #cc3399;background-color:cadetblue">hello p</p>

<div>hello div</div>

</body>
</html>

點擊pycharm上面瀏覽器

 

修改import_css.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: red;
            background-color: gray;
            }
    </style>
</head>
<body>

<!--<p style="color: #cc3399;background-color:cadetblue">hello p</p>-->

<div>hello div</div>

</body>
</html>

點擊pycharm上面瀏覽器

用pycharm新建css.css文件

div{
    color: rebeccapurple;
    background-color: yellow;
}

修改import_css.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link type="text/css" rel="stylesheet" href="css.css">
</head>
<body>

<!--<p style="color: #cc3399;background-color:cadetblue">hello p</p>-->

<div>hello div</div>

</body>
</html>

點擊pycharm上面瀏覽器

修改import_css.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link type="text/css" rel="stylesheet" href="css.css">
</head>
<body>

<!--<p style="color: #cc3399;background-color:cadetblue">hello p</p>-->

<div style="background-color: black">hello div</div>

</body>
</html>

點擊pycharm上面瀏覽器

修改import_css.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @import "css.css";
    </style>
<!--    <link type="text/css" rel="stylesheet" href="css.css">-->
</head>
<body>

<!--<p style="color: #cc3399;background-color:cadetblue">hello p</p>-->

<div>hello div</div>

</body>
</html>

點擊pycharm上面瀏覽器


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM