如何創建 CSS-有解無憂

如何插入樣式表？

CSS代碼應該寫到什么地方呢？
CSS代碼分為三種插入方式，接下來筆者給園友們介紹有哪些插入方式：
嵌入式、外鏈式、行內式，

嵌入式

什么是嵌入式？

嵌入式就是將寫好的CSS代碼嵌入到HTML檔案中，嵌入式是通過HTML中的style標簽將CSS代碼嵌入到HTML網頁當中的，
語法規則如下：

選擇器{屬性:值;屬性:值;}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>嵌入式</title>
    <style type="text/css">
        /*書寫CSS代碼塊的地方*/
        選擇器{屬性:值;屬性:值;}
    </style>
</head>
<body>

</body>
</html>

如果我們使用的是HTML5的檔案，style標簽中的type屬性可以省略掉，
注意：stype標簽它可以出現HTML中的任何地方，但是我們一般會將它放置在head標簽中，

嵌入式實體

接下來讓我們進入嵌入式實踐，實體內容如下：將div寬高度設定為300像素和div的邊框顏色設定為紅色，以及div中的h1標簽字體顏色設定為紅色，
代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>嵌入式</title>
    <style type="text/css">
        div{
            width: 300px;
            height: 300px;
            border:3px solid red;
        }
        h1{
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <h1>微笑是最初的信仰</h1>
    </div>
</body>
</html>

結果圖

外鏈式

什么是外鏈式？

外鏈式是指書寫一個存放CSS代碼的檔案，檔案的擴展名為.CSS，然后將其檔案放在HTML檔案中的head標簽中并且以link標簽形式存放在HTML檔案當中，
現在我們創建一個名稱為index.css的檔案，
大家點擊是就OK了
實踐效果為：

注意： CSS檔案不能單獨的運行，它必須依賴于HTML檔案，
語法規則如下：

<link rel="stylesheet" href="https://www.cnblogs.com/lq0001/p/index.css">

link標簽中的rel="stylesheet"屬性，表示以樣式表的關系引入到HTML檔案當中，
link標簽中的href屬性，表示要引入的CSS檔案路徑，輸入我們要使用的CSS檔案路徑，可以使用相對路徑和絕對路徑，

外鏈式實體

接下來讓我們進入外鏈式實踐，筆者將剛才創建好的index.css檔案引入到HTML檔案當中，并且實作以下功能：將div寬高度設定為300像素和div的邊框顏色設定為紅色，以及div中的h1標簽字體顏色設定為紅色，
CSS代碼塊

div {
    width: 300px;
    height: 300px;
    border: 3px solid red;
}

h1 {
    color: red;
}

注意：在這個index.css檔案中只能撰寫CSS代碼，如：選擇器{屬性：值;}這樣的形式，
一個HTML頁面中同時可以引入多個單獨的CSS檔案，以link標簽的形式引入，
HTML代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>外鏈式</title>
    <link rel="stylesheet" href="https://www.cnblogs.com/lq0001/p/index.css">
</head>

<body>
    <div>
        <h1>微笑是最初的信仰</h1>
    </div>
</body>
</html>

結果圖

行內式

什么是行內式？

將CSS代碼寫在HTML標簽的style屬性當中，
style是一個通用的屬性，每一個標簽都擁有這個屬性，
語法規則如下：
單個屬性的用法

<標簽名 style="屬性：值;"></標簽名>

多個屬性的用法

<標簽名 style="屬性：值;屬性：值;....."></標簽名>

接下來讓我們進入行內式實踐，并且實作以下功能：將div寬高度設定為300像素和div的邊框顏色設定為紅色，以及div中的h1標簽字體顏色設定為紅色，
代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>行內式</title>
</head>

<body>
    <div style="width: 300px;height: 300px; border: 3px solid red;">
        <h1 style="color: red;">微笑是最初的信仰</h1>
    </div>
</body>
</html>

結果圖

總結

使用嵌入式和行內式的方式,它只能作用于當前的HTML頁面當中，
使用外鏈式的方式，它可以作用于多個HTML頁面當中，
筆者推薦使用外鏈式的方式撰寫CSS代碼，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/108263.html

標籤：Html/Css

上一篇：對于flex布局的使用心得

下一篇：<code> 標簽讓一段計算機代碼顯示在網頁中