web如何引入css樣式的方法匯總-css教學-PHP中文網

首頁

web前端

css教學

web如何引入css樣式的方法匯總

伊谢尔伦

Jul 21, 2017 am 09:18 AM

cssweb

HTML與CSS是兩個作用不同的語言，它們同時對一個網頁產生作用，因此必須將CSS與HTML連結在一起使用。

最簡單的兩種方式是直接在html標籤裡面引入，或者在html檔案前面聲明，以下是簡單的程式碼範例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{background-color:red;
        color: black}
    </style>
<!--这里是修饰所有的P标签里面的内容，这是引入方法的一种-->
 <style>
        div{background-color:chartreuse;
        color: coral}
    </style>
 
</head>
<body>
 
 
<p style="background-color: aquamarine;color: black">Jay</p>
<!--在css里面，要用分号区别各种属性,虽然这个P标签有css样式，但是文本的样式是就近原则，这是最简单的css引入方式-->
 
<p>Bob</p>
 
<div>spider
<p>我是个P</p>
</div>
<!--div里面的P标签在上面有div的样式而没有P标签样式时，按div标签的样式，否则按P标签的样式-->
 
 
</body>
</html>

導入式和連結式的目的都是將一個獨立的CSS文件引入HTML文件中，二者的差別在於連結式使用HTML的標記引入外部CSS文件，而使用導入式則是使用CSS的規則引入外部CSS文件。

使用連結式引入外部CSS檔案範例：

<link href="~/Content/Base.css" rel="stylesheet" type="text/css" />

使用導入式引入CSS檔案範例：

<style type="text/css">
    @import "/Content/Base.css"
</style>

採用這兩種方式的顯示效果差異：使用連結方式時，會在載入頁面主體部分之前載入CSS文件，這樣顯示出來的網頁從一開始就是帶有樣式效果的。而使用導入式時，會在整個頁面載入完成後再載入CSS文件，對於有的瀏覽器來說，在某些情況下，如果網頁文件比較大，則會出現顯示無樣式的頁面，閃爍一下之後再出現設定樣式後的效果。從使用者體驗來說，這是使用導入式的缺陷。

　　對於一些比較大的網站，為了便於維護，可能會希望把所有的CSS樣式分別寫在幾個CSS文件中，這樣如果使用鏈接式引入，就需要幾個語句分別導入CSS文件。如果要調整CSS檔案的分類，就需要同時調整HTML檔案。這對於維護工作來說是一個缺陷。如果使用導入式，則可以只引入一個總的CSS文件，在這個文件中再導入其他獨立的CSS文件。

　　如果只需要引入一個CSS文件，則使用連結方式；如果需要引入多個CSS文件，則首先用連結方式引入一個「目錄」CSS文件，在這個「目錄」CSS文件中再使用導入式引入其他CSS文件。

　　但是如果希望透過JavaScript來動態決定引入哪個CSS文件，則必須使用連結方式才能實現。

以上是web如何引入css樣式的方法匯總的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn