H5筆記——CSS的三種樣式

weixin_34120274發表於2017-01-21
H5筆記CSS

CSS:層疊樣式表，控制HTML標籤的樣式，在美化網頁中起到非常重要的作用，編寫的格式是鍵值對形式的。
CSS有三種樣式：行內樣式，頁內樣式，外部樣式。

行內樣式

行內樣式：直接在標籤的style屬性中書寫。我通過div標籤(容器標籤)和p標籤(段落標籤)來展示。如下程式碼：
設定邊框時，dashed是虛線的效果，如果要設定成實線，可以改為solid。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>行內樣式</title>
</head>
<body>
    <div style="color: blue; font-size: 18px; background-color: aqua;">我是容器標籤</div>
    <p style="color: red; font-size: 18px; background-color: burlywood; border: 5px dashed green">
        我是段落標籤
    </p>
</body>
</html>

顯示效果如下：

1155062-2b3e33ca3e6f1f71.png
Paste_Image.png
頁內樣式

頁內樣式是把樣式放在<head>裡面，在網頁的style標籤中書寫。如下程式碼：分別設定了字型顏色、字型大小、背景顏色、邊框。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>頁內樣式</title>
    <style>
        div{
            color:red;
            font-size: 30px;
            border: 4px solid yellow;
        }

        p{
            color: blue;
            font-size: 44px;
            background-color: yellowgreen;
        }
     </style>
</head>
<body>
    <div>我是容器標籤</div>
    <div>我是容器標籤</div>
    <div>我是容器標籤</div>
    <div>我是容器標籤</div>
    <div>我是容器標籤</div>
    <p>我是段落標籤</p>
    <p>我是段落標籤</p>
    <p>我是段落標籤</p>
    <p>我是段落標籤</p>
    <p>我是段落標籤</p>
    <p>我是段落標籤</p>
</body>
</html>

顯示效果如下：


1155062-384b32db6a268490.png
Paste_Image.png
外部樣式

外部樣式：顧名思義是把這些標籤的style屬性寫到外部的css檔案中，在網頁中引用。建立一個css檔案，通過stylesheet來引用。

1155062-45c60d40fca0e51c.png
Paste_Image.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部樣式</title>
    <!--引用外部的樣式-->
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div>我是容器標籤</div>
    <div>我是容器標籤</div>
    <p>我是段落標籤</p>
    <p>我是段落標籤</p>
</body>
</html>

顯示效果如下：


1155062-08a9bea11e9bda02.png
Paste_Image.png

相關文章