css樣式的引入方式

時間 2019-12-10

標籤 css 樣式引入方式欄目 CSS 简体版

原文原文鏈接

　　首選來介紹一下什麼是CSS?(英文全稱：Cascading Style Sheets)是一種用來表現HTML(標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等文件樣式的計算機語言,其實就是一種層疊樣式表。css

　　CSS不只能夠靜態地修飾網頁，還能夠配合各類腳本語言動態地對網頁各元素進行格式化。CSS可以對網頁中元素位置的排版進行像素級精確控制，支持幾乎全部的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。html

　　就像造房子同樣，若是html是基地的話，那麼CSS就是裝修，只有裝修的房子才能夠住，天然至於那些燈光之類的是JS了，這是簡單的比例，但也說明了css的重要性。字體

　　網頁的核心就是內容與樣式的分離，其中CSS就是分離的一種，那麼若是分離了，該如何引用呢?一些網站中不少文件，只有相關的引用才能夠實現，其中有四種方式，內鏈樣式，嵌入式樣式，外部樣式，導入樣式，下面爲你們介紹一下：優化

　　1：內聯樣式(行間樣式)：在標籤的style屬性添加樣式：網站

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>行內樣式</title>
</head>
<body>
     <!--使用行內樣式引入CSS-->
     <h1 style="color:red;">驚風隨筆</h1>
     <p style="color:red;font-size:30px;">驚風隨筆</p>
</body>
</html>

　　二、嵌入式樣式表(內部樣式表)：在style標籤內添加(加在head標籤內部)url

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

　　3.外部樣式表：將css樣式編寫在擴展名爲.css的文件中，再導入樣式，導入在(head標籤內部)spa

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>外部樣式表</title>
  <!--連接式:推薦使用-->
  <link rel="stylesheet" type="text/css" href="css/style.css" /> 
  </style>
</head>
<body>
     <ul>
         <li>HTML</li>
         <li>CSS</li>
        <li>JavaScript</li>
     </ul>
</html>

　　四、@import導入其餘css文件。就至關於原來的css文件中包含被導入的css文件中的樣式。code

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>導入樣式表</title>
  <!--導入式-不推薦使用-->
  <style type="text/css">
    @import url("css/style.css");
  </style>
</head>
<body>
     <ul>
         <li>HTML</li>
         <li>CSS</li>
         <li>JavaScript</li>
     </ul>
</html>