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

首頁

web前端

css教學

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

伊谢尔伦

Jul 21, 2017 am 09:18 AM

css web

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

熱AI工具

熱工具

熱門話題

Java教學

1671

CakePHP 教程

1428

Laravel 教程

1331

PHP教程

1276

C# 教程

1256

Related knowledge

vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法：使用標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。

bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。

bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。