CSS快速入門基礎篇，讓你快速上手（附帶程式碼案例）

舊歌發表於2021-05-04

CSS

1、什麼是CSS

學習思路

CSS是什麼
怎麼去用CSS（快速上手）
CSS選擇器（難點也是重點）
網頁美化（文字，陰影，超連結，列表，漸變等）
盒子模型
浮動
定位
網頁動畫（特效效果）

專案格式：

1.1、什麼是CSS

Cascading Style Sheet 層疊級聯樣式表

CSS：表現（美化網頁）

字型，顏色，邊距，高度，寬度，背景圖片，網頁定位，網頁浮動...

1.2、發展史

CSS1.0

CSS2.0 新增 div（塊）+CSS，HTML與CSS結構分離的思想

CSS2.1 新增浮動定位

CSS3.0 新增圓角，陰影，動畫... 要考慮瀏覽器相容性

1.3、快速上手

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--規範,<style> 可以編寫css程式碼
每一個宣告,最好以分號(;)結尾
-->
<!--語法:-->
<!--    選擇器{-->
<!--        宣告1;-->
<!--        宣告2;-->
<!--        宣告3;-->
<!--    }-->
<style>
h1 {
    color: blue;
}
</style>
</head>
<body>
<h1>這是一個標題</h1>

</body>
</html>

建議寫成html css分離模式，但是有時為了方便，也可以寫到一起

css優勢：

內容和變現分離
網頁結構表現統一，可以實現複用
樣式十分豐富
建議使用獨立於html的css檔案
利用SEO,容易被搜尋引擎收錄

2、選擇器

作用：選擇頁面上的某一個或者某一類元素

2.1、基本選擇器

標籤選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>標籤選擇器</title>
    <style>
        /*標籤選擇器,會選擇頁面上所有的這個標籤的元素*/
        h1{
            font-size: 1.5vw;
            color: #936245;
            background: #3cdda6;   /*背景*/
            border-radius: 100px;   /*圓角*/
        }
        p{
            fond-size:1.6vw;
            color: blue;
        }
    </style>
</head>
<body>

<h1>JAVA</h1>
<h1>SSM</h1>
<h1>Servlet</h1>
<p>這裡是段落標籤</p>

</body>
</html>

　　2.類選擇器 class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.類選擇器</title>

<style>
    /*類選擇器的格式  .class的名稱{}
    優勢,可以多個標籤歸類,是同一個class(就是class的名稱相同)
    */
    .Waves{
        color: #1d1f9e;
        font-size: 1.5vw;
    }
    .tao{
        color: aquamarine;
    }
</style>
</head>
<body>

<span class="Waves">不努力你什麼都沒有</span>
<br/>
<span class="tao">努力,螢幕前的你</span>
<br/>
<span class="Waves">加油,螢幕前的你</span>
<br/>
<span>牛啊牛啊</span>
</body>
</html>

　　3.Id選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
    /*
    id選擇器   :id保證全域性唯一
    #id的名稱{}
    不遵循就近原則,固定順序
    id選擇器>class選擇器>標籤選擇器
    */
    #Waves{
        color: #247860;
    }
    .tao{
        color: blueviolet;
    }
    h1{
        color: black;
    }
</style>
</head>
<body>

<h1 id="Waves">標題一</h1>
<h1 class="tao">標題二</h1>
<h1 class="tao">標題三</h1>
<h1 class="tao">標題四</h1>
<h1>標題五</h1>

</body>
</html>

選擇器優先順序

優先順序 id>class>標籤選擇器

2.2、層次選擇器

1.後代選擇器：在某個元素的後面

   /*後代選擇器 body標籤後面的都包括,可以是多代*/
        body p{
           background: red;
        }

2.子選擇器

/*子選擇器*/
        body>p{
            background: #1d1f9e;
        }

3.相鄰兄弟選擇器

/*  相鄰選擇器:只有一個相鄰(對下不對上,只對該標籤的下面的標籤生效)*/
        .active + p{
            background: #936245;
        }

4.通用選擇器

 /*  通用選擇器 不包含當前標籤，向下的所有p標籤生效 */
        .active~p{
            background: beige;
        }

5.所有案例程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        p{
        background:#02ff00;
        }
        */
        /*後代選擇器 body標籤後面的都包括,可以是多代*/
     /*   body p{
           background: red;
        }*/
        /*子選擇器*/
     /*   body>p{
            background: #1d1f9e;
        }*/
    /*  相鄰選擇器:只有一個相鄰(對下不對上,只對該標籤的下面的標籤生效)*/
   /*     .active + p{
            background: #936245;
        }*/
    /*  通用選擇器  */
        .active~p{
            background: beige;
        }
    </style>
</head>
<body>
<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<p>p9</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
<p class="active">p7</p>
<p>p8</p>
</body>
</html>

2.3、結構偽類選擇器

偽類：條件

語法 ul  li:條件元素


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--不使用 class id選擇器 -->
    <style>
        /*ul的第一個子元素*/
        ul li:first-child{
            background: cornflowerblue;
        }
        /*ul的最後一個子元素*/
        ul li:last-child{
            background: aqua;
        }
        /*選中p1:定位到父元素,選擇當前的第一個元素
        選擇當前p元素的父元素,選中父元素的第一個,並且元素是當前型別的元素才生效
        例: p1 生效    如果是h1  就不生效
        */
        p:nth-child(3){
            background: blueviolet;
        }
        /*選中父元素,下的p元素的第二個,型別p*/
        p:nth-of-type(3){
            background: red;
        }
        /*滑鼠移動到654321上面會顯示底色*/
        a:hover{
            background: blue;
        }
    </style>
</head>
<body>
    <a href="">654321</a>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
</body>
</html>

2.4屬性選擇器（常用）

id+class結合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 45px;
            border-radius: 10px;
            background: #1d1f9e;
            text-align: center;
            color: #17dc0a;
            text-decoration: none;
            font: bold 20px/50px "Arial Narrow";
        }
        /*屬性名 屬性名 = 屬性值（正則）
        =絕對等於
        *= 包含這個
        ^= 以這個開頭
        $+ 以這個結尾
        */
        /*存在id屬性的元素    a[]{}*/
      /*  a[id]{
            background:darkslategray;
        }*/
        /*id為first2的元素*/
      /*  a[id=first2]{
            background: #17dc0a;
        }*/
        /*class中帶有links的元素*/
      /*  a[class*="links"]{
            background: #3cdda6;
        }*/
        /*選中href中以http開頭的元素*/
       /* a[href^=http]{
            background: #3cdda6;
        }*/
        /*以pdf結尾的*/
        a[href$=pdf]{
            background: #fa82c3;
        }
    </style>
</head>
<body>
<p class="demo">
    <a href="https://www.baidu.com" class="links item first" id="first">1</a>
    <a href="" class="links item active" target="_blank" title="test" id="first2">2</a>
    <a href="doc/asas.jpg" class="links item ">3</a>
    <a href="doc/sadapng.png" class="links item ">4</a>
    <a href="asd" class="links item ">5</a>
    <a href="index.html" class="links item ">6</a>
    <a href="/a.pdf" class="links item ">7</a>
    <a href="/ff.doc" class="links item "> 8</a>
    <a href="doc/sss.doc" class="links item " >9</a>
    <a href="adsda.java" class="links item last">10</a>
</p>
</body>
</html>

3.美化網頁元素

3.1、為什麼要美化網頁

有效的傳遞頁面資訊
美化網頁，頁面美觀漂亮，才能吸引使用者
凸顯頁面的主題
提高使用者的體驗

span標籤：重點要突出的字，用span標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #Waves{
         font-size: 30px;
         background: #3cdda6;
        }
    </style>
</head>
<body>
<span id="Waves">CSS</span>的學習
</body>
</html>

3.2字型樣式

繁瑣寫法，適合新手

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--fond-family: 控制字型的 例如:楷體.微軟雅黑
     fond-size:50px; 字型大小
     font-weight: bold; 字型粗細
     color     字型顏色
     可以設定多種字型
    -->
    <style>
        body{
            font-family: "Arial Narrow",楷體;
            color: #936245;
        }
        h1{
            fond-size:50px;
            font-weight: bold;
            color: #1d1f9e;
        }
        header{
            background: #936245;
        }
    </style>
</head>
<body>
<h1>變形金剛</h1>
<h2>美國</h2>
<p>
《變形金剛》是美國科幻動作系列電影，改編自起源於20世紀80年代的變形金剛品牌系列。該電影系列由派拉蒙影業公司和夢工廠發行。
</p>
<p>
邁克爾·貝執導了前五部 [1]  ：《變形金剛》（2007）、《變形金剛2》（2009）、《變形金剛3》（2011）、《變形金剛4：絕跡重生》（2014）、《變形金剛5：最後的騎士》（2017）。2018年12月21日，由特拉維斯·奈特執導的衍生電影《大黃蜂》上映。
</p>
<p>
該系列排名系列電影影史總票房第13名，總收入為48億美元，其中第3、4部票房均超過10億美元 [2-3]  。
</p>
<p>i love you ,welcome to , go out  </p>
</body>
</html>

3.3、文字樣式、綜合寫法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--字型風格-->
    <style>
        p{
            font: oblique lighter 20px "楷體";
        }
    </style>
</head>
<body>
<p>
    《變形金剛》是美國科幻動作系列電影，改編自起源於20世紀80年代的變形金剛品牌系列。該電影系列由派拉蒙影業公司和夢工廠發行。
</p>
</body>
</html>

3.4、超連結偽類

a:link{color:#FF0000}      /*未訪問的連結顏色（狀態）*/
a:visited{color:#00FF00}   /*已訪問的連結*/
a:hover{color:#FF00FF}     /*當滑鼠懸停在連結上*/    常用
a:active{color:#0000FF}    /*被選擇的連結*/

/*字型預設顏色*/
a{
    text-decoration: none; /*去除字型下劃線*/
    color: #000000;
}
/*滑鼠放上去的狀態*/
a:hover{
    color: blueviolet;
}
/*滑鼠按住未鬆開的狀態*/
a:active{
    color: red;
}

3.5、陰影

#price{text-shadow:h-shadow v-shadow blur color;
}
h-shadow     必需。水平陰影的位置。允許負值  陰影顏色
v-shadow     必需。垂直陰影的位置。允許負值  水平偏移
blur         可選。模糊的距離               垂直偏移
color          可選。陰影的顏色。              陰影半徑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*字型預設顏色*/
        a{
            text-decoration: none; /*去除字型下劃線*/
            color: #000000;
        }
        /*滑鼠放上去的狀態*/
        a:hover{
            color: blueviolet;
        }
        /*滑鼠按住未鬆開的狀態*/
        a:active{
            color: red;
        }
        #price{
            text-shadow: black 5px 2px  3px;
        }
        #shu{
            text-shadow: yellow 15px 6px  9px;
        }
    </style>
</head>
<body>


<a id="shu" href="">
    <img src="images/mcgx.jpg" alt="">
</a>
<p>
    <a href="#">碼出高效：Java開發手冊</a>
</p>
<p>
    <a href="#">作者:孤盡老師</a>
</p>
<p id="price">
    <a href="#">價格：￥99</a>
</p>
</body>
</html>

3.6列表

#nav{
    width: 300px;
    height: 243px;
    background: orangered;
}
#navs{
    font-weight: bold;
    width:300px;
    height: 300px;
    background: #1d1f9e;

}
.title{
    font-size: 20px;    /*字型大小*/
    font-weight: bold;  /*字型粗細*/
    text-indent: 1em;   /*首行縮排*/
    line-height: 35px;  /*字型高度*/
     /* rebeccapurple顏色  url圖片  270px 10px圖片位置  no-repeat平鋪方式 */
    background: rebeccapurple url("../images/xia.gif") 270px 10px no-repeat ;
    margin-top: auto;
}
/*ul  li*/
/*
list-style:
    none     不要樣式
    circle   空心圓
    decimal  數字
    square   正方形
*/
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
    /*圖片*/
    background-image: url("../images/zuo.gif");
    /*平鋪方式*/
    background-repeat: no-repeat;
    /*調整圖片位置*/
    background-position: 236px 2px;
}
/* text-decoration: none; 去除樣式*/
a{
    text-decoration: none;
    font-size: 15px;
    color: #000;
}
/*  text-decoration: underline; 字型下新增下劃線樣式*/
a:hover{
    color: #17dc0a;
    text-decoration: underline;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>列表樣式</title>
        <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="nav">
    <h2 class="title">全部商品分類</h2>
        <ul>
 <li><a href="#">圖書</a>&nbsp;&nbsp;<a href="#">影像</a>&nbsp;&nbsp;<a href="#">數碼商品</a> </li>
<li><a href="#">電腦</a>&nbsp;&nbsp;<a href="#">辦公</a>&nbsp;&nbsp;<a href="#">遊戲</a> </li>
<li><a href="#">家用商品</a>&nbsp;&nbsp;<a href="#">茶几</a>&nbsp;&nbsp;<a href="#">沙發</a> </li>
<li><a href="#">傢俱</a>&nbsp;&nbsp;<a href="#">床</a>&nbsp;&nbsp;<a href="#">衣櫃</a> </li>
<li><a href="#">飲料食品</a>&nbsp;&nbsp;<a href="#">礦泉水</a>&nbsp;&nbsp;<a href="#">碳酸飲料</a> </li>
<li><a href="#">裝飾品</a>&nbsp;&nbsp;<a href="#">小毛公仔</a>&nbsp;&nbsp;<a href="#">球仙人掌</a> </li>
        </ul>
    </div>
    <div id="navs">
        <h2 class="title">全部商品分類</h2>
            <ul>
<li><a href="#">圖書</a>&nbsp;&nbsp;<a href="#">影像</a>&nbsp;&nbsp;<a href="#">數碼商品</a> </li>
<li><a href="#">電腦</a>&nbsp;&nbsp;<a href="#">辦公</a>&nbsp;&nbsp;<a href="#">遊戲</a> </li>
<li><a href="#">家用商品</a>&nbsp;&nbsp;<a href="#">茶几</a>&nbsp;&nbsp;<a href="#">沙發</a> </li>
<li><a href="#">傢俱</a>&nbsp;&nbsp;<a href="#">床</a>&nbsp;&nbsp;<a href="#">衣櫃</a> </li>
<li><a href="#">飲料食品</a>&nbsp;&nbsp;<a href="#">礦泉水</a>&nbsp;&nbsp;<a href="#">碳酸飲料</a> </li>
<li><a href="#">裝飾品</a>&nbsp;&nbsp;<a href="#">小毛公仔</a>&nbsp;&nbsp;<a href="#">球仙人掌</a> </li>
            </ul>
        </div>
    </body>
</html>

3.7、背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- border:  1px solid red;  寬度  實線 邊框線的顏色-->
    <style>
        div{
            width: 1000px;
            height: 600px;
            border:  1px solid red;
            background-image: url("images/a1.jpg");
            /*預設是把這個空間全部用圖片平鋪鋪滿*/
        }
        .div3{
            background-repeat:repeat-x ; /*水平平鋪*/
        }
        .div2{
            background-repeat:repeat-y ; /*垂直平鋪*/
        }
        .div4{
            background-repeat:no-repeat ; /*不平鋪，只有一張*/
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</body>
</html>

3.8、漸變

<style>
body{
    /*background: #FFFFFF;*/
   background-image: linear-gradient(115deg,#FFFF4F 0%,#6785ff 50%, #FF0000 100%);
}
</style>

4、盒子模型

4.1什麼是盒子模型

margin：外邊距

padding：內邊距

border ：邊框

4.2、邊框

邊框粗細
邊框的樣式
邊框的顏色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*body自己總有一個預設的外邊距margin：0  常見操作，進行去除*/
        h1,ul,li,a,body{
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        /*border:粗細，樣式，顏色*/
        #box{
            width: 300px;
            border: 1px solid red;
        }
        h2{
            font-size: 18px;
            background: #FF0000;
            line-height: 30px;
            margin: 0;
        }
        form{
            background: #3cdda6;
        }
        div:nth-of-type(1) input{
            border: 2px solid #1d1f9e;
        }
        div:nth-of-type(2) input{
             border: 2px dashed #FF0000;
         }

    </style>
</head>
<body>
<div id="box">
    <h2>會員登入</h2>
    <form action="index.html">
        <div>
            <span>使用者名稱：</span>
            <input type="text" />
        </div>
        <div>
            <span>密碼：</span>
            <input type="text" />
        </div>
    </form>


</div>

</body>
</html>

4.3、內外邊距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*border:粗細，樣式，顏色*/
        #box{
            width: 300px;
            border: 1px solid red;
            margin:  0 2px 1px;
        }
        /*
        順時針旋轉，上右下左
        margin:0   上右下左外邊距都為0
        margin: 0 1px  上下為0 左右為一
         margin:  0 2px 1px;  上為0   左右為2 下為1
        margin: 0 1px 2px 3px
        */
        h2{
            font-size: 18px;
            background: #FF0000;
            line-height: 30px;
            margin: 0;
        }
        form{
            background: #3cdda6;
        }
        input{
            border: 1px solid black;
        }
        div:nth-of-type(1){
            border: 1px;
            padding: 2px;
        }
    </style>
</head>
<body>
<div id="box">
    <h2>會員登入</h2>
    <form action="index.html">
        <div>
            <span>使用者名稱：</span>
            <input type="text" />
        </div>
        <div>
            <span>密碼：</span>
            <input type="text" />
        </div>
    </form>


</div>

</body>
</html>

盒子的計算方式：這個元素到底有多大？

margin+border+padding+內容寬度

4.4、圓角邊框

圓圈

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <STYLE>
        /*
        左上 右上  右下 左下，順時針方向
        圓圈： 圓角 = 半徑！
        */
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            border-radius:100px ;
        }
    </STYLE>
</head>
<body>
<div>~</div>
</body>
</html>

半圓

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 50px;
            margin: 30px;
            background: chartreuse;
            border-radius: 50px 50px  0 0;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

4.5、盒子陰影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 50px;
            border: 10px solid red;
            box-shadow: 10px 10px 15px yellowgreen;
        }
        img{
            margin: 0 auto;
            border-radius: 100px;
            box-shadow: 10px 10px 15px #665f5f;
        }
        #waves{
            height: 50px;
            border: 10px solid red;
            box-shadow: 10px 10px 15px yellowgreen;
        }
    </style>
</head>
<body>
<div></div>
<br/>
<img src="images/psc.jpg" alt="">
<br/>
<div id="waves" style="width: 1080px;display: block;text-align: center">
<img src="images/psc.jpg" alt="">
</div>
</body>
</html>

還有些基礎知識未寫在部落格中，明天會更新，同時demo連結也會分享給大家

作者：舊歌
連結： https://www.cnblogs.com/wdyjt
本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須在文章頁面給出原文連線，否則保留追究法律責任的權利

ES6快速上手 —— 基礎篇
2018-04-02
一篇文章帶你快速入門createjs
2019-01-11
JS
一篇帶你快速入門ansible和使用
2020-09-23
三篇文章帶你快速入門Kotlin（上）
2021-01-02
Kotlin
Cris 帶你快速入門 Flink
2019-01-28
最快讓你上手ReactiveCocoa之基礎篇
2016-06-20
React
CSS快速入門
2022-01-20
CSS
超實用的Go語言基礎教程，讓你快速上手刷題！！
2023-05-12
Go
PHP快速上手（11）：HTML基礎
2020-12-27
PHPHTML
Vue入門指南(快速上手vue)
2019-03-30
Vue
Zend Framework 入門（1）—快速上手
2013-07-25
Framework
Flutter基礎（三）Dart快速入門
2019-05-22
FlutterDart
Flutter 基礎（三）Dart 快速入門
2019-06-06
FlutterDart
Vue-vue基礎快速入門
2020-12-11
Vue
vue 快速入門系列 —— Vuex 基礎
2021-10-18
Vue
HTML基礎快速入門筆記
2021-01-02
HTML筆記
快速零基礎入門 Docker
2017-12-11
Docker
8天讓iOS開發者上手Flutter之一：快速入門Flutter
2021-07-10
iOSFlutter
CSS快速入門（三）
2022-01-21
CSS
CSS快速入門（四）
2022-02-10
CSS
CSS快速入門(轉)
2007-08-15
CSS
Java網路程式設計快速上手（SE基礎）
2021-04-17
Java程式設計
【零基礎上手JavaWeb】快速上手 JavaScript DOM操作
2020-12-05
WebJavaScript
ThinkPHP3.2 快速入門（1）基礎
2019-05-11
PHP
javascript快速入門14--DOM基礎
2013-12-01
JavaScript
javascript快速入門24--XML基礎
2013-12-04
JavaScriptXML
Oracle學習快速入門基礎教程
2006-04-19
Oracle
幾個小實踐帶你快速上手MindSpore
2021-02-24
手把手帶你快速上手香橙派AIpro
2024-03-01
AI
前端快速入門（三）--CSS
2020-12-25
前端CSS
? 快速上手三大基礎 React Hooks
2019-03-13
ReactHook
PHP快速上手（03）：PHP語言基礎
2020-12-22
PHP
給深度學習入門者的Python快速教程 - 基礎篇
2017-03-13
深度學習Python
40分鐘快速入門Dart基礎（下）
2020-07-21
Dart
40分鐘快速入門Dart基礎（中）
2020-07-14
Dart
gRPC（三）基礎：gRPC快速入門
2022-11-09
RPC
javascript快速入門27--XSLT基礎
2013-12-04
JavaScript
老司機帶你快速上手除錯Flutter專案
2018-08-28
除錯Flutter

CSS快速入門基礎篇，讓你快速上手（附帶程式碼案例）

1、什麼是CSS

1.1、什麼是CSS

1.2、發展史

1.3、快速上手

2、選擇器

2.1、基本選擇器

標籤選擇器

2.類 選擇器 class

3.Id選擇器

選擇器優先順序

2.2、層次選擇器

2.3、結構偽類選擇器

2.4屬性選擇器（常用）

3.美化網頁元素

3.1、為什麼要美化網頁

3.2字型樣式

3.3、文字樣式、綜合寫法

3.4、超連結偽類

3.5、陰影

3.6列表

3.7、背景

3.8、漸變

4、盒子模型

4.1什麼是盒子模型

4.2、邊框

4.3、內外邊距

4.4、圓角邊框

4.5、盒子陰影

相關文章

　　2.類選擇器 class

　　3.Id選擇器