溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

怎么引入css文件

發(fā)布時間：2021-04-30 09:28:54 來源：億速云 閱讀：139 作者：小新 欄目：web開發(fā)

這篇文章主要介紹了怎么引入css文件，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

什么是css

css是一種用來表現(xiàn)HTML或XML等文件樣式的計算機語言，主要是用來設(shè)計網(wǎng)頁的樣式，使網(wǎng)頁更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網(wǎng)頁或者單獨的樣式單文件中，而樣式規(guī)則的優(yōu)先級由css根據(jù)這個層次結(jié)構(gòu)決定，從而實現(xiàn)級聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁，也可以配合各種腳本對于網(wǎng)頁進行格式化。

引入css文件的方法：1、使用style屬性引入CSS樣式；2、在style標(biāo)簽中書寫CSS代碼；3、CSS代碼保存在擴展名為【.css】的樣式表中。

本教程操作環(huán)境：windows7系統(tǒng)、css3版，DELL G3電腦。

引入css文件的方法：

一、行內(nèi)樣式

使用style屬性引入CSS樣式。

示例：

<h2 style="color:red;">style屬性的應(yīng)用</h2>
<p  style="font-size:14px;color:green;">直接在HTML標(biāo)簽中設(shè)置的樣式</p>

實際在寫頁面時不提倡使用，在測試的時候可以使用。

例如：

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>行內(nèi)樣式</title>
</head>
<body>
     <!--使用行內(nèi)樣式引入CSS-->
     <h2 style="color:red;">Leaping Above The Water</h2>
     <p style="color:red;font-size:30px;">我是p標(biāo)簽</p>
</body>
</html>

二、內(nèi)部樣式表

在style標(biāo)簽中書寫CSS代碼。style標(biāo)簽寫在head標(biāo)簽中。

示例：

<head>
   <style type="text/css">
      h4{
            color:red;
         }
   </style>
</head>

例如：

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>內(nèi)部樣式表</title>
  <!--使用內(nèi)部樣式表引入CSS-->
  <style type="text/css">
    div{
        background: green;
    }
  </style>
</head>
<body>
     <div>我是DIV</div>
</body>
</html>

三、外部樣式表

CSS代碼保存在擴展名為.css的樣式表中

HTML文件引用擴展名為.css的樣式表，有兩種方式：鏈接式、導(dǎo)入式。

語法：

1、鏈接式

<link type="text/css" rel="styleSheet"  href="CSS文件路徑" />

2、導(dǎo)入式

<style type="text/css">
  @import url("css文件路徑");
</style>

例如：

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>外部樣式表</title>
  <!--鏈接式:推薦使用-->
  <link rel="stylesheet" type="text/css" href="css/style.css" /> 
  <!--導(dǎo)入式-->
  <style type="text/css">
    @import url("css/style.css");
  </style>
</head>
<body>
     <ol>
         <li>1111</li>
         <li>2222</li>
     </ol>
</html>

感謝你能夠認真閱讀完這篇文章，希望小編分享的“怎么引入css文件”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手