---
# System prepended metadata

title: CSS簡述
tags: [JavaWeb CSS]

---

# CSS簡述
###### tags: `JavaWeb CSS`

```htmlembedded=
<html>
    <head>
        <meta charset="utf-8">
        <--!內部樣式表-->
        <style type="text/css">
            /*被style範圍包圍的是CSS環境，可以寫CSS代碼*/

            /*標籤樣式表*/
            p{
                color: red;
            }
            /*類樣式*/
            .f20{
                font-size: 20px;
            }

        </style>
        <!--引用外部樣式表-->
        <link rel="stylesheet" href="demo01.css">
    </head>
    <body>
<!--         <p><font color="red">這是段落一</font></p>-->
<!--         <p><font color="red">這是段落二</font></p>-->
            <p>這是段落一</p>
            <p>這是段落二</p>
            <p class="f20">這是段落三</p>
            <p ID="p4">這是段落四</p><!--id屬性在整個HTML文檔中，盡量保持唯一(雖然重複也不會報錯)-->
            <p>這是段落五</p>

            <div>
                <p><span style="font-size: 60px;font-weight: bolder;color: yellow">HELLO</span></p>
                <span class="f32">WORLD</span>
                <p class="f32">!!</p>
            </div>
    </body>
</html>

<!--
1.為什麼需要CSS
    需要修改的段落太多，可以統一進行處理
2.CSS的最基本的分類：標籤樣式表、類樣式表、ID樣式表
3.CSS從位置上的分類：嵌入式樣式表、內部樣式表、外部樣式表
-->
```

```css=
/*ID樣式*/
#p4{
    background-color: pink;
    font-size: 24px;
    font-weight: bolder;
    font-style: italic;
    font-family: "Adobe 繁黑體 Std B";
}
/*組合樣式*/
div p{
    color: blue;
}

div.f32{
    font-size: 32px;
    font-family: "Adobe Arabic";
}
```