CSS引入方式

時間  2020-08-10
標籤 css 引入 方式 欄目 CSS 简体版
原文   原文鏈接

CSS引入方式

1. 內部樣式表(內嵌樣式表)

將全部的CSS代碼抽取出來，單獨放到HTML頁面的一個<style>標籤中。css

<style>
div {
    color: blue;
}
</style>

注：html

  • <style>標籤能夠放到HTML文檔的任何一個地方，但通常放在<head>標籤中
  • 沒有實現結構與樣式徹底分離
  • 也稱爲嵌入式引入

2. 行內樣式表(內聯樣式表)

在元素標籤內部的style屬性中設定CSS樣式，適合於修改簡單樣式。url

<div style="color: blue;">
    
</div>

注：code

  • style是標籤的屬性
  • 樣式寫在雙引號中間
  • 控制的是當前標籤的樣式
  • 只有對當前元素添加簡單樣式的時候能夠考慮使用
  • 也稱爲行內式引入

3. 外部樣式表

樣式單獨寫到CSS文件中，以後把CSS文件引入到HTML頁面中使用。htm

引入外部樣式表分爲兩步：開發

  1. 新建一個後綴名爲.css的樣式文件，把全部CSS代碼都放到此文件中
  2. 在HTML頁面中，使用<link>標籤引入這個文件
<head>
    <link rel="stylesheet" href="css文件路徑">
</head>
屬性 做用
rel 定義當前文檔與被連接文檔之間的關係。指定爲"stylesheet"表示被連接的文檔是一個樣式表文件。
href 定義所連接外部樣式表文件的url，能夠是相對路徑或絕對路徑。

注：文檔

  • <link>標籤寫在HTML頁面 的head標籤裏
  • css文件裏只有樣式沒有標籤
  • 是開發中經常使用的方式
  • 也稱爲外鏈式或連接式引入

4. 總結

樣式表 優勢 缺點 使用狀況 控制範圍
行內樣式表 書寫方便，權重高 結構樣式沒有分離 較少 控制一個標籤
內部樣式表 部分樣式和結構相分離 結構樣式沒有徹底分離 較多 控制一個頁面
外部樣式表 徹底實現結構和樣式相分離 須要引入 最多 控制多個頁面
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程