如何建立 CSS

時間 2019-11-09

標籤如何建立 css 欄目 CSS 简体版

原文原文鏈接

如何插入樣式表？

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

嵌入式

什麼是嵌入式？

嵌入式就是將寫好的CSS代碼嵌入到HTML文件中，嵌入式是經過HTML中的style標籤將CSS代碼嵌入到HTML網頁當中的。
語法規則以下：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標籤字體顏色設置爲紅色。
代碼塊ui

<!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>

結果圖3d

外鏈式

什麼是外鏈式？

外鏈式是指書寫一個存放CSS代碼的文件，文件的擴展名爲.CSS。而後將其文件放在HTML文件中的head標籤中而且以link標籤形式存放在HTML文件當中。
如今咱們建立一個名稱爲index.css的文件。
code
你們點擊是就OK了
實踐效果爲：htm

注意： CSS文件不能單獨的運行，它必須依賴於HTML文件。blog
語法規則以下：

<link rel="stylesheet" href="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代碼，如：選擇器{屬性：值;}這樣的形式。it
一個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="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>