零基礎學網頁—CSS的調用方式有哪些？

么是css的調用方式？

簡單來講，就是解決把css代碼寫在哪里的問題，這塊內容之前在課堂上演示過，這里再用文字說明一下，權當復習。

大體有以下四種方式：

外聯式樣式表；
內嵌樣式表；
元素內定；
導入樣式表

1，外聯式樣式表

添加在HTML的頭部信息標識符< head>里：

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

其中href是目標文檔的URL， type則規定了目標URL的MIME類型，而media規定了文檔將顯示在什么設備上。

2，內嵌樣式表

添加在HTML的頭部信息標識符< head>里：

<head> 
      <style type="text/css"> 
             <!-- 樣式表的具體內容 --> 
      </style> 
</head>

type=”text/css”表示樣式表采用MIME類型，幫助不支持CSS的瀏覽器過濾掉CSS代碼，避免在瀏覽器面前直接以源代碼的方式顯示我們設置的樣式表。但為了保證上述情況一定不要發生，還是有必要在樣式表里加上注釋標識符“< !--注釋內容-->”。

3，元素內定

語法：

<Tag style="properties">網頁內容</tag>

舉個例子：

<p style="color: blue; font-size: 10px">CSS實例</p>

上面例子的代碼說明：

用藍色顯示字體大小為10px的“CSS實例”。盡管使用簡單、顯示直觀，但是這種方法不怎么常用，因為這樣添加無法完全發揮樣式表的優勢——即內容結構和格式控制分別保存。

4，導入樣式表(高級用法，暫時先放下）

語法：

<style type="text/css"> 
        <!-- @import url("css/base.css"); --> 
</style>

其中外部引用CSS主要用到兩種方式link和@import

本質上，這兩種方式都是為了加載CSS文件，但還是存在著細微的差別。

link和@import存在如下差別：

差別1：老祖宗的差別。link屬于HTML標簽，而@import完全是CSS提供的一種方式。

link標簽除了可以加載CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連接屬性等，@import就只能加載CSS了。

差別2：加載順序的差別。當一個頁面被加載的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被加載，而@import引用的CSS會等到頁面全部被下載完再被加載。所以有時候瀏覽@import加載CSS的頁面時開始會沒有樣式（就是閃爍），網速慢的時候還挺明顯。

差別3：兼容性的差別。由于@import是CSS2.1提出的所以老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標簽無此問題。

差別4：當使用javascript控制DOM去改變樣式的時候，只能使用link標簽，因為@import不是DOM可以控制的。

從上面的分析來看，還是使用link標簽比較好。

課后練習：

步驟一：新建一個名為index.html的網頁。

步驟二：在index.html網頁文檔里加入兩個p標簽，分別在p標簽中加入內容（內容隨意）

步驟三：嘗試用上面提到的前三種方式，用css代碼改變p標簽內容的顯示格式。

SS文本屬性

CSS text（文本）屬性就是設置文本的外觀，比如字體顏色、對齊方式、縮進、行間距等。

文本顏色

屬性名：color。

屬性值：

顏色英文單詞：color：red;

16進制顏色值：color：#000000;

RGB代碼：color: rgb(255,255,255)或rgb(100%,0%,0%)

一般在開發中常用的是十六進制寫法。

代碼示例：

<head>
  <style>
  		/* 文本顏色屬性 */
        .red {
            color: red;
        }
        .colorNum {
            color: #f00;
        }
        .colorRgb{
            color: rgb(255, 0, 0);
        }
  </style>  
</head>
<body>
     <!-- 文本顏色屬性 -->
    <p class="red">我是文本屬性的單詞顏色設置</p>
    <p class="colorNum">我是文本屬性的16進制顏色設置</p>
    <p class="colorRgb">我說文本屬性的rgb顏色設置</p>
</body>

代碼運行界面

文本對齊方式

屬性名：text-align。

屬性值：

“text-align: left”：默認值，文本左對齊。

“text-align：center”：文本居中對齊。

“text-align：right”：文本右對齊。

代碼示例：

<head>
  <style>
  		/* 文本對齊方式 */
        .l {
            text-align: left;
        }
        .cen {
            text-align: center;
        }
        .ri {
            text-align: right;
        }
  </style>  
</head>
<body>
    <!-- 文本對齊方式 -->
    <p class="l">文本左對齊</p>
    <p class="cen">文本居中對齊</p>
    <p class="ri">文本右對齊</p>
</body>

運行界面：

文本裝飾

屬性：text-decoration。

屬性值：

“text-decoration：none”：默認值，沒有裝飾線。

“text-decoration：underline”：給文本添加下劃線。

注意：a標簽中自帶下劃線，可以使用默認值屬性去除a標簽的下劃線。

“text-decoration：overline”：給文本添加上劃線。

“text-decoration：line-through”：給文本添加刪除線。

代碼示例：

<head>
  <style>
  		/* 文本裝飾線 */
        .nor {
            text-decoration: none;
        }
        .underl {
            text-decoration: underline;
        }
        .upl {
            text-decoration: overline;
        }
        .lineTh {
            text-decoration: line-through;
        }
  </style>  
</head>
<body>
    <!-- 文本裝飾 -->
    <p class="nor">文本裝飾線：默認狀態</p>
    <p class="underl">文本裝飾線：文本添加下劃線</p>
    <p class="lineTh">文本裝飾線：文本添加刪除線</p>
    <p class="upl">文本裝飾線：文本添加上劃線</p>
    <a href="#">我是超鏈接標簽，文本自帶下劃線</a><br>
    <a href="#" class="nor">我是超鏈接標簽，文本自帶下劃線。使用默認值屬性，可去除文本下劃線</a>
</body>

運行界面：

文本縮進

屬性名：text-indent。通常指段落首行縮進。

屬性值：px或em。

em是一個相對單位，

如果當前元素已經設置文字大小，就按照當前元素1個文字的大小顯示縮進。

如果當前元素中沒有設置，則按照父元素的1個文字大小，即1個em=16px顯示縮進。

代碼示例：

<head>
  <style>
  		/* 文本縮進 */
        .indEm {
            text-indent: 2em;
            /* em是一個相對單位，
            在沒有設置文字大小時，按照默認字體大小，即16px顯示。
            設置了文字大小，則按照設置的文字大小，幾個em就是幾個文字大小進行顯示。
            */
        }
        .indPx {
            /* 像素是絕對單位，設置幾就是幾 */
            text-indent: 32px;
        }
  </style>  
</head>
<body>
    <!-- 文本縮進 -->
    <p class="indPx">我是段落標簽，試試首行縮進屬性。一般指的是首行縮進，段落的第一行進行縮進。
        我是段落標簽，試試首行縮進屬性。一般指的是首行縮進，段落的第一行進行縮進。
        我是段落標簽，試試首行縮進屬性。一般指的是首行縮進，段落的第一行進行縮進。
        我是段落標簽，試試首行縮進屬性。一般指的是首行縮進，段落的第一行進行縮進。
        我是段落標簽，試試首行縮進屬性。一般指的是首行縮進，段落的第一行進行縮進。
        我是段落標簽，試試首行縮進屬性。一般指的是首行縮進，段落的第一行進行縮進。
        我是段落標簽，試試首行縮進屬性。一般指的是首行縮進，段落的第一行進行縮進。
    </p>
    <p class="indEm">我是段落標簽，試試首行縮進屬性。一般指的是首行縮進，段落的第一行進行縮進。
        我是段落標簽，試試首行縮進屬性。一般指的是首行縮進，段落的第一行進行縮進。
        我是段落標簽，試試首行縮進屬性。一般指的是首行縮進，段落的第一行進行縮進。
        我是段落標簽，試試首行縮進屬性。一般指的是首行縮進，段落的第一行進行縮進。
        我是段落標簽，試試首行縮進屬性。一般指的是首行縮進，段落的第一行進行縮進。
        我是段落標簽，試試首行縮進屬性。一般指的是首行縮進，段落的第一行進行縮進。
        我是段落標簽，試試首行縮進屬性。一般指的是首行縮進，段落的第一行進行縮進。
    </p>
</body>

運行界面：

行間距

屬性名：ling-height。用于設置文本的行高。即行與行之間的距離。

行間距=文本高度+上間距+下間距。（上間距=下間距）

行間距調整就是設置的上下間距的高

屬性值：px或em。

代碼示例：

<head>
  <style>
  		/* 行間距 */
        .lH {
            line-height: 3em;
        }
  </style>  
</head>
<body>
    <!-- 行間距 -->
    <p class="lH">
        我是段落標簽，測試行間距屬性。我是段落標簽，測試行間距屬性。我是段落標簽，測試行間距屬性。
        我是段落標簽，測試行間距屬性。我是段落標簽，測試行間距屬性。我是段落標簽，測試行間距屬性。
        我是段落標簽，測試行間距屬性。我是段落標簽，測試行間距屬性。我是段落標簽，測試行間距屬性。
        我是段落標簽，測試行間距屬性。我是段落標簽，測試行間距屬性。我是段落標簽，測試行間距屬性。
         我是段落標簽，測試行間距屬性。我是段落標簽，測試行間距屬性。我是段落標簽，測試行間距屬性。
          我是段落標簽，測試行間距屬性。我是段落標簽，測試行間距屬性。我是段落標簽，測試行間距屬性。
    </p>
</body>

運行界面：

CSS引入方式

分為三類：行內樣式表（行內式）、內部樣式表（內嵌式）、外部樣式表（鏈接式）

行內樣式表：

位置：直接寫在元素的開始標簽中。

特點：書寫內容少，權重級別高，只能控制一個標簽，結構樣式混亂。

語法：style=”color: red;”

注意：多個屬性之間使用空格分隔。

代碼示例：

<p style="color: red;">行內樣式表：在使用屬性的元素開始標簽中直接設置屬性。如給字體設置紅色屬性。</p>

<p style="color: red; font-size:28px;">行內樣式表：在使用屬性的元素開始標簽中直接設置屬性。如給字體設置紅色屬性和字體28px。</p>

內部樣式表（內嵌式）

位置：在head標簽下，和title標簽并列。樣式屬性均包含在style標簽中。

特點：部分結構與樣式相分離，還是在同一html文件上。

語法：

<style>
p {
color: red;
font-size: 28px;
}
</style>

代碼示例：

<head>
 	<title></title>
	<style>
        .styleP {
            color: red;
            font-size: 32px;;
        }
	</style>
</head>
<body>
	<!-- 內部樣式表 -->
    <p class="styleP">內部樣式表：樣式屬性寫在同一個html文件中的head標簽里，和title標簽并列。</p>
</body>

外部樣式表（鏈接式）

第一步：創建index.css文件，在文件中輸入樣式屬性，不用任何標簽。

第二步：在html文件的head標簽中，添加link標簽，引入css文件。

第三步：給html文件中需要添加屬性的元素添加選擇器名稱。

特點：結構和樣式全局分離，一個css文件可以控制多個html頁面。

注意：在css文件中只有樣式沒有標簽，即直接書寫標簽器和屬性，不要寫style標簽。

代碼示例：

第一步：新建index.css文件，設置樣式屬性。

* {
    margin: 0;
    padding: 0;
}
.linC {
    font-size: 32px;
    color: blue;
}

第二步：在html文件的head標簽中添加link標簽引用css文件。

<head>
  	<title>CSS樣式引入方式</title>
    <!-- 外部樣式表 -->
    <link rel="stylesheet" href="./index.css">
</head>

第三步：在標簽中調用屬性。

<body>
   	<!-- 外部樣式表 -->
    <p class="linC">
        外部樣式表：<br>
        第一步：新建一個css文件，文件中直接編輯樣式屬性，不需要添加style標簽。<br>
        第二步：使用css文件的html文檔，應該在其head標簽中添加link標簽選擇css文件的存儲位置,<br>
        第三步：調用css文件中的樣式。
    </p>
</body>

運行界面：

以上就是今天學習的內容，明天繼續學習CSS的相關內容，今天就到這里了，各位晚安！

webpack 出現之前，前端開發人員會使用 grunt 和 gulp 等工具來處理資源，并將它們從 /src 文件夾移動到 /dist 或 /build 目錄中。JavaScript 模塊也遵循同樣方式，但是，像 webpack 這樣的工具，將動態打包所有依賴（創建所謂的依賴圖(dependency graph)）。這是極好的創舉，因為現在每個模塊都可以明確表述它自身的依賴，可以避免打包未使用的模塊。

webpack 最出色的功能之一就是，除了引入 JavaScript，還可以通過 loader 或內置的 Asset Modules 引入任何其他類型的文件。也就是說，以上列出的那些 JavaScript 的優點（例如顯式依賴），同樣可以用來構建 web 站點或 web 應用程序中的所有非 JavaScript 內容。讓我們從 CSS 開始起步，或許你可能已經熟悉了下面這些設置。

初始化示例工程

首先我們創建一個目錄webpack-css，用npm初始化，然后在本地安裝 webpack：

mkdir webpack-css
cd webpack-css
npm init -y
npm install webpack webpack-cli --save-dev

目錄結構、文件和內容如下：

  webpack-css
 |- package.json
 |- /dist
   |- index.html
 |-webpack.config.js

其中dist/index.html文件內容為：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack 資源管理</title>
    <script src="bundle.js"></script>
</head>
<body>
      <div class="css_demo">css 資源管理</div>
</body>
</html>

webpack.config.js的文件內容如下：

 const path = require('path');
 module.exports = {
   entry: './src/index.js',
   output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
   },
 };

package.js的文件內容如下：

{
  "name": "webpack-css",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^5.2.0",
    "style-loader": "^2.0.0",
    "webpack": "^5.28.0"
  }
}

加載 CSS

為了在 JavaScript 模塊中 import 一個 CSS 文件，你需要安裝 style-loader 和 css-loader，并在 module 配置中添加這些 loader：

npm install --save-dev style-loader css-loader

修改webpack.config.js添加加載CSS：

const path= require('path')

module.exports={
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname,'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader']
            }
        ]
    }
}

模塊 loader 可以鏈式調用。鏈中的每個 loader 都將對資源進行轉換。鏈會按逆序執行。第一個 loader 將其結果（被轉換后的資源）傳遞給下一個 loader，依此類推。最后，webpack 期望鏈中的最后的 loader 返回 JavaScript。

應保證 loader 的先后順序：'style-loader' 在前，而 'css-loader' 在后。如果不遵守此約定，webpack 可能會拋出錯誤。

webpack 根據正則表達式，來確定應該查找哪些文件，并將其提供給指定的 loader。在這個示例中，所有以 .css 結尾的文件，都將被提供給 style-loader 和 css-loader。

這使你可以在依賴于此樣式的 js 文件中使用 import './style.css'。現在，在此模塊執行過程中，含有 CSS 字符串的 <style> 標簽，將被插入到 html 文件的 <head> 中。

我們嘗試一下，通過在項目中添加一個新的 style.css 文件，并將其 import 到我們的 index.js 中。

在src的目錄下創建 style.css 文件，src/style.css文件內容如下：

.css_demo {
  color: red;
}

在src/index.js的文件中引入style.css：

import './style.css'

執行打包命令

npm run build

> webpack-css@1.0.0 build D:\project\mockjs\webpack-css
> webpack

asset bundle.js 3.58 KiB [emitted] [minimized] (name: main)
runtime modules 663 bytes 3 modules
orphan modules 326 bytes [orphan] 1 module
cacheable modules 8.9 KiB
  modules by path ./src/ 679 bytes
    ./src/index.js + 1 modules 346 bytes [built] [code generated]
    ./node_modules/css-loader/dist/cjs.js!./src/style.css 333 bytes [built] [code generated]
  modules by path ./node_modules/ 8.23 KiB
    ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 6.67 KiB [built] [code generated]
    ./node_modules/css-loader/dist/runtime/api.js 1.57 KiB [built] [code generated]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

webpack 5.28.0 compiled with 1 warning in 1573 ms

再次在瀏覽器中打開 dist/index.html，你應該看到 css 資源管理現在的樣式是紅色。要查看 webpack 做了什么，請檢查頁面（不要查看頁面源代碼，它不會顯示結果，因為 <style> 標簽是由 JavaScript 動態創建的），并查看頁面的 head 標簽。它應該包含 style 塊元素，也就是我們在 index.js 中 import 的 css 文件中的樣式。

效果

注意，在多數情況下，你也可以進行壓縮 CSS，以便在生產環境中節省加載時間。最重要的是，現有的 loader 可以支持任何你可以想到的 CSS 風格 - postcss, sass 和 less 等。

在線咨詢

上一篇：在HTML頁面中嵌入其他頁面的方法-零基礎自學網頁制作
下一篇：js復制富文本/網頁內容到黏貼板-clipboard-js

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

零基礎學網頁—CSS的調用方式有哪些？

SS文本屬性

CSS引入方式

初始化示例工程

加載 CSS

您的項目需求