零基礎入門前端CSS知識整理

成	語言	描述
結構	HTML	網頁元素和內容
表現	CSS	網頁元素頁面樣式）
行為	JavaScript	網頁交互

CSS，層疊樣式表（Cascading Style Sheet），給網頁中的HTML標簽設置樣式

1 CSS樣式引入方式

1.1 外部樣式

CSS寫在一個單獨的.css文件中，通過link標簽在網頁中引入

<link rel="stylesheet" href="文件路徑">

1.2 內部樣式

CSS寫在網頁的head標簽中，用style標簽包裹

<style>
    /* 寫在style標簽中的樣式 */
</style>

1.3 行內樣式

CSS寫在標簽的style屬性中

<標簽名 style="行內樣式寫在這"></標簽名>

三種CSS樣式引入方式的區別

引入方式	書寫位置	作用范圍	使用場景
外部樣式	CSS寫在單獨的css文件中，通過link標簽引入	多個頁面	項目中
內部樣式	CSS寫在head頭部style標簽中	當前頁面	案例演示中
行內樣式	CSS寫在標簽的style屬性中	當前標簽	配合js使用

2 基礎選擇器

選擇器，就是選取（查找）需要設置樣式元素的方式

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

屬性名和屬性值合稱為css屬性

2.1 元素選擇器

通過元素名稱，選取（查找）相同元素，然后對相同元素設置CSS樣式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>我愛中國</p>
    <p>我愛人民</p>
    <div>我愛家鄉</div>
</body>
</html>

小結：

1、無論嵌套多少層，只要元素名稱相同都會被找到

2.2 類選擇器

通過類名稱，找到頁面中所有帶這個類名稱的元素，然后對其設置CSS樣式

類選擇器，也有人叫class選擇器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .color-style {
            color: red;
        }
    </style>
</head>
<body>
    <p class="color-style">我愛中國</p>
    <p>我愛人民</p>
    <div class="color-style">我愛家鄉</div>
</body>
</html>

小結：

1、所有元素都有class屬性，class屬性的屬性值叫類名

2、類名由數字、字母、下劃線、中劃線組成，不能以數字、中劃線開頭

3、一個元素可以有多個類名，類名之間用空格隔開

2.3 id選擇器

通過元素id屬性的屬性值，找到頁面中帶這個id屬性值的元素，然后對其設置CSS樣式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        #one {
            color: red;
        }
    </style>
</head>
<body>
    <p id="one">我愛中國</p>
    <p id="two">我愛人民</p>
    <div>我愛家鄉</div>
</body>
</html>

小結：

1、所有元素都有id屬性

2、id屬性值在一個頁面中是唯一的

3、一個元素只能有一個id屬性值

2.4 通配符選擇器

查找頁面中所有的元素，然后對其設置CSS樣式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        * {
            color: red;
        }
    </style>
</head>
<body>
    <p id="one">我愛中國</p>
    <p id="two">我愛人民</p>
    <div>我愛家鄉</div>
</body>
</html>

小結：

1、通常用于網頁重置樣式，不常用

2.5 后代選擇器

根據選擇器查找符合條件的元素，再根據后代選擇器查找符合條件的元素，然后對其設置CSS樣式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        #one p {
            color: red;
        }
    </style>
</head>
<body>
    <div id="one">
        <p>我愛中國</p>
        <p>我愛人民</p>
        <div>我愛家鄉</div>
        <div>
            <p>我愛中國</p>
            <p>我愛人民</p>
        </div>
    </div>
    <div id="two">
        <p>我愛中國</p>
        <p>我愛人民</p>
        <div>我愛家鄉</div>
        <div>
            <p>我愛中國</p>
            <p>我愛人民</p>
        </div>
    </div>
</body>
</html>

2.6 群組選擇器

根據多個選擇器各自查找符合條件的元素，然后對其設置CSS樣式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p,h3 {
            color: red;
        }
    </style>
</head>
<body>
    <p>我愛中國</p>
    <h3>我愛人民</h3>
    <div>我愛家鄉</div>
</body>
</html>

3 字體樣式

字體樣式，針對文字本身樣式

字體相關的CSS屬性

屬性	說明
font-family	字體類型
font-size	字體大小
font-weight	字體粗細
font-style	字體風格
color	字體顏色

3.1 字體類型

語法：

font-family: 字體1,字體2,字體3...;

說明：

1、font-family屬性可是設置多個屬性值，用英文逗號隔開，生效順序是從左到右。瀏覽器默認字體類型一般是"宋體"

2、字體類型只有一個英文單詞，則不需要加上引號；字體類型是多個英文單詞或中文的，則需要加上雙引號

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
            font-family: Arial;
        }
        h3 {
            font-family: monospace;
        }
        div {
            font-family: "新宋體";
        }
    </style>
</head>
<body>
    <p>我愛中國</p>
    <h3>我愛人民</h3>
    <div>我愛家鄉</div>
</body>
</html>

3.2 字體大小

語法：

font-size: 數字 + px

說明：

1、px是像素單位，單位需要設置，否則無效

2、谷歌瀏覽器默認文字大小是16px

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
            font-size: 18px;
        }
        div {
            font-size: 36px;
        }
    </style>
</head>
<body>
    <p>我愛中國</p>
    <div>我愛家鄉</div>
</body>
</html>

3.3 字體粗細

語法：

font-weight: normal/bold/100~900

說明：

屬性值	說明
normal	正常（默認值）
bold	較粗
100~900	取100~900九種數值

實際開發一般會設置bold，不設置默認是normal

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
            font-weight: normal;
        }
        div {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>我愛中國</p>
    <div>我愛家鄉</div>
</body>
</html>

3.4 字體風格

語法：

font-style: 取值

說明：

屬性值	說明
normal	正常（默認值）
italic	斜體
oblique	斜體

不是所有字體都有italic屬性值，如果沒有italic的，則用oblique

font連寫

語法：

font: style weight size family;

說明：

1、可以省略前兩項，省略了相當于設置了默認值

不常用，作為了解

3.5 字體顏色

語法：

color: 顏色值

說明：

color屬性取值常用有兩種，一種是關鍵字（比如red、green、blue），另外一種是16進制RGB值（#000000，#FFFFFF）

問題一：給同一個元素設置了相同的屬性樣式，哪個生效？

答：樣式會層疊（覆蓋），寫在最后面的會生效。

問題二：html里面有注釋，css有沒有注釋，如何寫？

<style>
    /* 采用元素選擇器給p元素設置css樣式 */
    p {
        color: #000000;  /* p元素字體顏色為黑色 */
    }
</style>

4 文本樣式

文本樣式，針對段落的排版效果

文本相關CSS屬性

屬性	說明
text-indent	首行縮進
text-align	水平對齊
text-decoration	文本修繕
text-transform	大小寫轉換
line-height	行高
letter-spacing	字母間距
word-spacing	詞間距

4.1 首行縮進

語法：

text-indent: 像素值

說明：

縮進大小和字體大小是有關的，縮進1個字的空間等同于1個字的字體大小。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<style>
    p {
        font-size: 14px;
        text-indent: 28px;
    }
</style>
</head>
<body>
    <p>舜發于畎畝之中，傅說舉于版筑之間，膠鬲舉于魚鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動心忍性，曾益其所不能。</p>
</body>
</html>

4.2 水平對齊

語法：

text-align: 取值

說明：

text-align屬性取值

屬性值	說明
left	左對齊（默認值）
center	居中對齊
right	右對齊

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<style>
    .one {
        text-align: left;
    }
    .two {
        text-align: center;
    }
    .three {
        text-align: right;
    }
</style>
</head>
<body>
    <p class="one">生于憂患死于安樂</p>
    <p class="two">生于憂患死于安樂</p>
    <p class="three">生于憂患死于安樂</p>
</body>
</html>

4.3 文本修飾

語法：

text-decoration: 取值

說明：

text-decoration屬性值

屬性值	說明
none	去除所有的劃線效果（默認值）
underline	下劃線
line-throught	中劃線
overline	頂劃線

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<style>
    .one {
        text-decoration: none;
    }
    .two {
        text-decoration: underline;
    }
    .three {
        text-decoration: line-through;
    }
    .four {
        text-decoration: overline;
    }
</style>
</head>
<body>
    <p class="one">生于憂患死于安樂</p>
    <p class="two">生于憂患死于安樂</p>
    <p class="three">生于憂患死于安樂</p>
    <p class="four">生于憂患死于安樂</p>
</body>
</html>

4.4 大小寫轉換

語法：

text-transform: 取值

說明：

text-transform屬性取值

屬性值	說明
none	無轉換（默認值）
uppercase	轉換為大寫
lowercase	轉換為小寫
capitalize	單詞首字母大寫

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<style>
    .one {
        text-transform: none;
    }
    .two {
        text-transform: uppercase;
    }
    .three {
        text-transform: lowercase;
    }
    .four {
        text-transform: capitalize;
    }
</style>
</head>
<body>
    <p class="one">Hello World</p>
    <p class="two">Hello World</p>
    <p class="three">Hello World</p>
    <p class="four">hello world</p>
</body>
</html>

4.5 行高

語法：

line-height: 取值;

說明：

1、取值可以是一個固定的數值（比如24px），也可以是一個百分數（比如150%）

line-height: 150%;

2、使用font-size屬性和line-height屬性的組合，可以讓行高與字體大小之間保持一定的比例

font-size: 16px;
line-height: 1.5

3、使用line-height屬性的繼承值。如果父元素的line-height屬性有值，那么子元素及后代元素會繼承父元素的行高

body {
    line-height: 1.5;
}
p {
    font-size: 16px;
}

行高的設置要大于字體大小的設置，才會顯得好看

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        p {
            font-size: 16px;
            line-height: 24px;
        }
    </style>
</head>
<body>
    <p>舜發于畎畝之中，傅說舉于版筑之間，膠鬲舉于魚鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動心忍性，曾益其所不能</p>
</body>
</html>

4.6 間距

字間距

語法：

letter-spacing: 像素值

說明：

letter-spacing屬性用來設置兩個字之間的距離，一個英文字母或漢字都是當做一個字來處理

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        p {
            letter-spacing: 10px;
        }
    </style>
</head>
    <p>are you ok.你好嗎？</p>
<body>
</body>
</html>

詞間距

語法：

word-spacing: 像素值;

說明：

word-spacing屬性用來設置英文單詞之間的距離

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        p {
            word-spacing: 10px;
        }
    </style>
</head>
    <p>are you ok.你好嗎？</p>
<body>
</body>
</html>

5 邊框樣式

元素基本可以定義邊框，邊框樣式由邊框寬度、邊框外觀和邊框顏色三個屬性組成。

屬性	說明
border-width	邊框的寬度
border-style	邊框的外觀
border-color	邊框的顏色

5.1 邊框的寬度

語法：

border-width: 像素值;

說明：

邊框border-width屬性值是一個像素值

5.2 邊框的外觀

語法：

border-style: 取值;

說明：

border-style取值有三個

屬性值	說明
none	無樣式
dashed	虛線
solid	實線

5.3 邊框的顏色

語法：

border-color: 顏色關鍵字/16進制RGB值

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            border-width: 1px;
            border-style: solid;
            border-color: red;
        }
    </style>
</head>
    <div>hello,world</div>
<body>
</body>
</html>

5.4 邊框樣式簡寫

語法：

border: border-width border-style border-color;

案例：

div {
    border: 1px solid red;
}

5.5 邊框局部樣式

元素都是盒子模型，都是有四條邊的，分別是上、下、左、右。所以又可以為元素某一邊邊設置邊框樣式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            width: 300px;
            height: 200px;
            border-top: 1px dashed darkred;
            border-bottom: 2px solid green;
            border-left: 3px solid grey;
            border-right: 4px dashed lightseagreen;
        }
    </style>
</head>
    <div></div>
<body>
</body>
</html>

6 列表樣式

6.1 列表項符號

定義列表項符號

在HTML中，無序列表和有序列表是通過標簽ul、ol的type屬性來定義的

<ol type="a">
    <li>my</li>
    <li>your</li>
</ol>
<ul type="disc">
    <li>my</li>
    <li>your</li>
</ul>

接觸了css后，得改成list-style-type屬性來定義。HTML專心負責結構，CSS專心負責樣式。

語法：

list-style-type: 取值;

說明：

ol元素的list-style-type屬性值

屬性值	說明
decimal	阿拉伯數字：1、2、3…（默認值）
lower-roman	小寫羅馬數字：i、ii、iii…
upper-roman	大寫羅馬數字：I、II、III…
lower-alpha	小寫英文字母：a、b、c…
upper-alpha	大寫英文字母：A、B、C…

ul元素的list-style-type屬性值

屬性值	說明
disc	實心圓●（默認值）
circle	空心圓○
square	正方形■

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        ol {
            list-style-type: lower-alpha;
        }
        ul {
            list-style-type: square;
        }
    </style>
</head>
<body>
    <ol>
        <li>my</li>
        <li>your</li>
    </ol>
    <ul>
        <li>my</li>
        <li>your</li>
    </ul>
</body>
</html>

去除列表項符號

隨著技術和審美不斷的提高，實際開發中都是直接去除列表項符號

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        ol,ul {
            list-style-type: none;
        }
    </style>
</head>
<body>
    <ol>
        <li>my</li>
        <li>your</li>
    </ol>
    <ul>
        <li>my</li>
        <li>your</li>
    </ul>
</body>
</html>

有序列表或無序列表設置了list-style-type: none后，樣式都一樣了。

6.2 列表項圖片

語法：

list-style-image: url(圖片路徑);

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        ul {
            list-style-image: url("small.png");
        }
    </style>
</head>
<body>
    <ul>
        <li>my</li>
        <li>your</li>
    </ul>
</body>
</html>

list-style-image不能控制圖片大小，實際開發中用background來替代

7 表格樣式

7.1 表格標題位置

語法：

caption-side: 取值;

說明：

caption-side屬性取值

屬性值	說明
top	標題在頂部（默認值）
bottom	標題在底部

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        table,tr,th,td {
            border: 1px solid gray;
        }
        table {
            caption-side: bottom;
        }
    </style>
</head>
<body>
    <table>
        <caption>學生成績</caption>
        <tr>
            <th>姓名</th>
            <th>數學</th>
        </tr>
        <tr>
            <td>曹操</td>
            <td>85</td>
        </tr>
        <tr>
            <td>劉備</td>
            <td>75</td>
        </tr>
    </table>
</body>
</html>

7.2 表格邊框合并

語法：

border-collapse: 取值;

說明：

border-collapse屬性取值

屬性值	說明
separate	邊框分開，有空隙（默認值）
collapse	邊框合并，無空隙

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        table,tr,th,td {
            border: 1px solid gray;
        }
        table {
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <table>
        <caption>學生成績</caption>
        <tr>
            <th>姓名</th>
            <th>數學</th>
        </tr>
        <tr>
            <td>曹操</td>
            <td>85</td>
        </tr>
        <tr>
            <td>劉備</td>
            <td>75</td>
        </tr>
    </table>
</body>
</html>

7.3 表格邊框間距

語法：

border-spacing: 像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        table,tr,th,td {
            border: 1px solid gray;
        }
        table {
            border-spacing: 10px;
        }
    </style>
</head>
<body>
    <table>
        <caption>學生成績</caption>
        <tr>
            <th>姓名</th>
            <th>數學</th>
        </tr>
        <tr>
            <td>曹操</td>
            <td>85</td>
        </tr>
        <tr>
            <td>劉備</td>
            <td>75</td>
        </tr>
    </table>
</body>
</html>

8 圖片樣式

8.1 圖片大小

語法：

width: 像素值;
height: 像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        img {
            width: 40px;
            height: 40px;
        }
    </style>
</head>
<body>
    <img src="small.png" alt="">
</body>
</html>

8.2 圖片邊框

語法:

border: 1px solid red;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        img {
            width: 40px;
            height: 40px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <img src="small.png" alt="">
</body>
</html>

8.3 圖片對齊

水平對齊

語法：

text-align: 取值;

說明：

text-align屬性取值

屬性值	說明
left	左對齊（默認值）
center	居中對齊
right	右對齊

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        .i1 {
            text-align: left;
        }
        .i2 {
            text-align: center;
        }
        .i3 {
            text-align: right;
        }
    </style>
</head>
<body>
    <div class="i1">
        <img src="small.png" alt="">
    </div>
    <div class="i2">
        <img src="small.png" alt="">
    </div>
    <div class="i3">
        <img src="small.png" alt="">
    </div>
</body>
</html>

圖片的水平對齊屬性設置是在圖片標簽的父標簽上實現的

垂直對齊

語法：

vertical-align: 取值;

說明：

vertical-align屬性取值

屬性值	說明
top	頂部對齊
middle	中部對齊
baseline	基線對齊
bottom	底部對齊

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        .i1 {
            vertical-align: top;
        }
        .i2 {
            vertical-align: middle;
        }
        .i3 {
            vertical-align: baseline;
        }
        .i4 {
            vertical-align: bottom;
        }
    </style>
</head>
<body>
    <div>
        <span>hello,world</span>
        <img class="i1" src="small.png" alt="">
        <span>hello,world</span>
        <hr>
    </div>
    <div>
        <span>hello,world</span>
        <img class="i2" src="small.png" alt="">
        <span>hello,world</span>
        <hr>
    </div>
    <div>
        <span>hello,world</span>
        <img class="i3" src="small.png" alt="">
        <span>hello,world</span>
        <hr>
    </div>
    <div>
        <span>hello,world</span>
        <img class="i4" src="small.png" alt="">
        <span>hello,world</span>
        <hr>
    </div>
</body>
</html>

8.4 文字環繞

語法：

float: 取值;

說明：

float屬性取值

屬性值	說明
left	元素向左浮動
right	元素向右浮動

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        img {
            float: left;
        }
    </style>
</head>
<body>
    <img src="small.png" alt="">
    <p>舜發于畎畝之中，傅說舉于版筑之間，膠鬲舉于魚鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動心忍性，曾益其所不能。</p>
</body>
</html>

9 背景樣式

9.1 背景顏色

語法：

background-color: 顏色值;

說明：

顏色值有兩種表示方式，一種是顏色關鍵字，另外一種是16進制RGB值

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            width: 200px;
            height: 100px;
            /* 背景顏色 */
            background-color: burlywood;
        }
    </style>
</head>
<body>
    <div>hello,world</div>
</body>
</html>

9.2 背景圖片

引入背景圖片

語法:

background-image: url(圖片路徑)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            height: 180px;
            width: 180px;
            background-image: url("small.png");
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

背景圖片重復

語法：

background-repeat: 取值;

說明：

background-repeat屬性取值

屬性值	說明
repeat	在水平方向和垂直方向上同時平鋪（默認值）
repeat-x	只在水平方向（x軸）上平鋪
repeat-y	只在垂直方向（y軸）上平鋪
no-repeat	不平鋪

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            height: 180px;
            width: 180px;
            background-image: url("small.png");
            background-repeat: repeat-x;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

背景圖片位置

語法：

background-position: 水平距離 垂直距離

通過像素值定圖片位置

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            height: 180px;
            width: 180px;
            border: 1px solid red;
            background-image: url("small.png");
            background-repeat: no-repeat;
            background-position: 10px 30px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

通過關鍵字定位圖片位置

水平方向左left、中center、右right

垂直方向上top、中center、下bottom

通過水平方向、垂直方向組合出9種方式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            height: 180px;
            width: 180px;
            border: 1px solid red;
            background-image: url("small.png");
            background-repeat: no-repeat;
            background-position: center center;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

背景圖片固定

語法：

background-attachment: 取值;

說明：

background-attachment屬性取值

屬性值	說明
scroll	隨元素一起滾動（默認值）
fixed	固定不動

10 超鏈接樣式

語法：

a {}
a:link {}
a:visited {}
a:hover{}
a:active{}

說明：

偽類	說明
a:link	a元素未訪問時的樣式
a:visited	a元素訪問后的樣式
a:hover	鼠標經過a元素時的樣式
a:active	鼠標點擊時的樣式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        a {
            text-decoration: none;
        }
        a:hover {
            color: red;
        }
    </style>
</head>
<body>
<a href="#">百度</a>
</body>
</html>

實際開發，一般設置a、a:hover樣式就可以了

11 盒子模型

每一個元素都是由內容區、內邊距、邊框、外邊距組成

屬性	說明
content	內容區，可以是文本或圖片
padding	內邊距，用于定義內容與邊框之間的距離
border	邊框，用于定義元素的邊框
margin	外邊距，用于定義當前元素與其他元素之間的距離

11.1 內容區

語法：

width: 像素值;
height: 像素值;
overflow: 取值;

說明：

overflow屬性值

屬性值	說明
visible	默認值。內容不會被修剪，會呈現在元素框之外。
hidden	內容會被修剪，并且其余內容是不可見的。
scroll	內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。
auto	如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。
inherit	規定應該從父元素繼承 overflow 屬性的值。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        img {
            width: 30px;
            height: 30px;
        }
        p {
            width: 50px;
            height: 50px;
            overflow: hidden;
        }
    </style>
</head>
<body>
<img src="small.png" alt="">
<p>舜發于畎畝之中，傅說舉于版筑之間，膠鬲舉于魚鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動心忍性，曾益其所不能。</p>
</body>
</html>

如果要給行內元素設置寬高，則需要給元素設置display: inline-block屬性

11.2 內邊距

語法：

padding-top: 像素值;
padding-right: 像素值;
padding-bottom: 像素值;
padding-left: 像素值;

padding: 上下左右像素值;
padding: 上下像素值 左右像素值;
padding: 上像素值 右像素值 下像素值 左像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        p {
            border: 1px solid red;
            padding: 10px;
        }
    </style>
</head>
<body>
<p>舜發于畎畝之中，傅說舉于版筑之間，膠鬲舉于魚鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動心忍性，曾益其所不能。</p>
</body>
</html>

11.3 邊框

邊框知識參考2.6

11.4 外邊距

語法：

margin-top: 像素值;
margin-right: 像素值;
margin-bottom: 像素值;
margin-left: 像素值;

margin: 上下左右像素值;
margin: 上下像素值 左右像素值;
margin: 上像素值 右像素值 下像素值 左像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        p {
            border: 1px solid red;
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>
<body>
<p>舜發于畎畝之中，傅說舉于版筑之間，膠鬲舉于魚鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動心忍性，曾益其所不能。</p>
<p>舜發于畎畝之中，傅說舉于版筑之間，膠鬲舉于魚鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動心忍性，曾益其所不能。</p>
</body>
</html>

12 浮動布局

正常文檔流就是我們沒有使用浮動或者定位去改變的默認情況，按照從上到下，從左到右順序的元素布局情況。

12.1 定義浮動

語法：

float: 取值

說明：

屬性值	說明
left	元素向左浮動
right	元素向右浮動

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #f {
            background-color: beige;
            padding: 10px;
        }
        #s1 {
            background-color: gray;
            float: left;
        }
        #s2 {
            background-color: aqua;
            float: left;
        }
    </style>
</head>
<body>
    <div id="f">
        <div id="s1">box1</div>
        <div id="s2">box2</div>
    </div>
</body>
</html>

12.2 清除浮動

語法：

clear: 取值;

說明：

clear屬性值

屬性值	說明
left	清除左浮動
right	清除右浮動
both	同時清除左浮動和右浮動

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #f {
            background-color: beige;
            padding: 10px;
        }
        #s1 {
            background-color: gray;
            float: left;
        }
        #s2 {
            background-color: aqua;
            float: left;
        }
        .clear {
            clear: both;
        }
    </style>
</head>
<body>
    <div id="f">
        <div id="s1">box1</div>
        <div id="s2">box2</div>
        <div class="clear"></div>
    </div>
</body>
</html>

13 定位布局

13.1 固定定位

語法：

position: fixed;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #s1 {
            position: fixed;
            top: 20px;
            left: 100px;
            color: red;
        }
    </style>
</head>
<body>
    <div id="f">
        <div id="s1">回到頂部</div>
        <div id="s2">
            <p>內容區</p>
            ......
        </div>
    </div>
</body>
</html>

13.2 相對定位

相對定位，指的是該元素的位置是相對于它的原始位置計算而來的

語法：

position: relative;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #f div {
            width: 100px;
            height: 50px;
            background-color: burlywood;
            margin: 10px;
        }
        .s2 {
            position: relative;
            top: 5px;
            left: 30px;
        }
    </style>
</head>
<body>
    <div id="f">
        <div class="s1">1</div>
        <div class="s2">2</div>
        <div class="s3">3</div>
    </div>
</body>
</html>

13.3 絕對定位

把元素定位到任意你想要的位置，完全脫離文檔流

語法：

position: absolute;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #f div {
            width: 100px;
            height: 50px;
            background-color: burlywood;
            margin: 10px;
        }
        .s2 {
            position: absolute;
            top: 200px;
            left: 200px;
        }
    </style>
</head>
<body>
    <div id="f">
        <div class="s1">1</div>
        <div class="s2">2</div>
        <div class="s3">3</div>
    </div>
</body>
</html>

13.4 靜態定位

用法：

position: static;

說明：

元素position屬性的默認值是static

、CSS簡介

1.CSS是什么

CSS，指的是Cascading Style Sheet（層疊樣式表），它是用來控制網頁外觀的一門技術?！癏TML控制網頁的結構，CSS控制網頁的外觀，JavaScript控制網頁的行為”

2.CSS引入方式

外部樣式表

內部樣式表

行內樣式表

3.外部樣式表——指的是把CSS代碼和HTML代碼單獨放在不同的文件中，然后在HTML文檔中使用link標簽來引用CSS樣式表。

語法< link rel="stylesheet" type="text/css" href="文件路徑" />

說明：rel的取值是固定的，即"stylesheet"，表示引入的是一個樣式表文件（即CSS文件），type屬性的取值也是固定的，即“text/css”，表示這是標準的CSS，href屬性表示CSS文件的路徑

注意：link標簽是放在head標簽內的

4.內部樣式表——指的是把HTML代碼和CSS代碼放到同一個HTML文件中，其中，CSS代碼放在style標簽內，并且style標簽是放在head標簽內部的

語法

type=“text/css” 是必須添加的，表示這是標準的CSS

5.行內樣式表——與內部樣式表類似，也是把HTML代碼和CSS代碼放到同一個HTML文件中。不同的是內部樣式表的CSS是在“style標簽”內定義的，而行內樣式表的CSS是在“標簽的style屬性”中定義的

兩段代碼的實現效果是一樣的，都是定義三個div元素的顏色為紅色。

如果使用內部樣式表，樣式只需要寫一遍；但是如果使用行內樣式表，每個元素則必須單獨寫一遍

行內樣式表的缺點：代碼冗余

二、CSS選擇器

1.選擇器是什么——用一種方式把你想要的那個元素選中

只有把它選中了，你才可以為這個元素添加CSS樣式

2.最實用的五種選擇器

元素選擇器
id選擇器
class選擇器
后代選擇器
群組選擇器

CSS選擇器的格式：

3.元素選擇器——選擇指定的相同的元素，而不會選擇其他元素，然后給相同的元素定義同一個CSS樣式

語法div { width:100px; height:100px; }

上面例子中的p元素和span元素沒有被選中

4.id選擇器——為元素設置一個id屬性，然后針對設置了這個id的元素定義CSS樣式。注意：在同一個頁面中，不允許出現兩個相同的id。

說明：對于id選擇器，id名前面必須要加上前綴#，否則該選擇器無法生效

5.class選擇器——也就是“類選擇器”，可以對相同或者不同的元素定義相同的class屬性，然后針對擁有同一個class的元素進行CSS樣式操作

語法.box { width:100px; height:100px; }

class名前面必須要加上前綴.（英文點號），否則該選擇器無法生效

上面的例子是為不同的元素定義相同的class，從而可以同時操作它們的CSS樣式

6.后代選擇器——選擇元素內部中所有的某一元素，包括子元素和其他后代元素（如孫元素）

語法h3 p {width:100px; height:100px;}

說明：父元素和后代元素必須要用空格隔開，從而表示選中某個元素內部的后代元素

7.群組選擇器——同時對幾個選擇器進行相同的操作（效率高）

語法h3,p {width:100px; height:100px;

說明：對于群組選擇器，兩個選擇器之間必須要用英文逗號（,）隔開，不然群組選擇器就無法生效

三、字體樣式

1.字體樣式

類似于Word軟件中對于字體樣式的設置，我們可以知道CSS字體樣式的屬性有以下五種：

font-family——字體類型

font-size——字體大小

font-weight——字體粗細

font-style——字體風格

color——字體顏色

2.字體類型（font-family）

語法：font-family：字體1，字體2，...，字體N；

說明：font-family可以指定多種字體。使用多種字體時，將按從左到右的順序排列，并且以英文逗號（,）隔開。瀏覽器默認的字體類型一般是“宋體”

舉例：設置一種字體

舉例：設置多種字體

為元素設置多種字體的原因是：在有些字體沒有安裝的情況下，可以使用下一個字體，優先使用左邊的字體。

3.字體大小（font-size）——采用px為單位

語法font-size：像素值；

說明：實際上，font-size屬性取值有兩種，一種是“關鍵字”，如small，medium，large等。另外一種是“像素值”，如10px、16px、21px等。不過在實際開發中，關鍵字這種方式基本不會用

4.字體粗細（font-weight）

語法font-weight：取值;

font-weight屬性取值有兩種：一種是100~900的“數值”；另外一種是“關鍵字”。

其中關鍵字取值有：normal（正常）、lighter（較細）、bold（較粗）、bolder（很粗）。對于實際開發來說，一般我們只會用到bold這一個屬性值，其他的幾乎用不上。

在實際開發中，不建議使用數值作為font-weight的屬性取值，一般使用關鍵字的bold屬性值

5.字體風格（font-style）

語法font-style：取值；

font-style屬性取值有：normal（正常）、italic（斜體）、oblique（斜體）

從預覽效果可以看出，font-style屬性值為italic或oblique時，頁面效果是一樣的

但其實它們的區別在于：italic是字體的一個屬性，但并非所有的字體都有這個屬性。因此對于有italic屬性的字體，我們使用font-style：italic來實現斜體效果；對于沒有italic屬性的字體，我們使用font-style：oblique來實現。

6.字體顏色（color）

語法color：顏色值;

color屬性取值有兩種：關鍵字 & 16進制RGB值

關鍵字如red、green、blue等

16進制RGB值——類似于#FBF9D0形式的值

單純靠“關鍵字”，滿足不了實際開發的需求。因此引入了“16進制RGB值”

記：#000000是黑色，#FFFFFF是白色

7.CSS注釋

語法/* 注釋的內容*/

注意：

小技巧：瀏覽器解析CSS是有一定順序的，后面樣式的會覆蓋前面的樣式。

四、文本樣式

文本樣式和字體樣式的區別：字體樣式針對的是“文字本身”的型體效果，而文本樣式針對的是“整個段落”的排版效果。字體樣式注重個體，文本樣式注重整體。

文本樣式屬性

text-indent ——首行縮進

text-align ——水平對齊

text-decoration ——文本修飾

text-transform ——大小寫

line-height ——行高

letter-spacing、word-spacing ——字母間距、詞間距

1.首行縮進（text-indent）

p元素的首行是不會自動縮進的，在HTML中我們常常使用空格代碼&nbsp來實現首行縮進，但是這種方式冗余代碼很多；在CSS中，我們可以使用text-indent屬性來定義p元素的首行縮進。

語法text-indent：像素值；

說明：初學CSS，建議使用像素（px）作為單位。

中文段落首行一般需要縮進兩個字符，設置首行縮進的像素值是字體大小的兩倍即可

2.水平對齊（text-align）——控制文本在水平方向上的對齊方式

語法 text-align：取值；

text-align屬性取值有：

left——左對齊（默認值）

center——居中對齊

right——右對齊。

在實際開發中，我們只會用到center這一個，其他兩個幾乎用不上。另外，text-align屬性不僅對文本有效，對圖片（img元素）也有效

3.文本修飾（text-decoration）——定義文本的修飾效果（下劃線、中劃線、頂劃線）

語法text-decoration：取值；

text-decoration屬性取值：

none——去除所有的劃線效果（默認值）

underline——下劃線（一般用于強調文章中的重點）

line-through——中劃線（一般用于促銷）

overline——頂劃線（極少用）

超鏈接（a元素）默認樣式有下劃線，可以使用text-decoration:none去除a元素的下劃線

4.大小寫（text-transform）——針對英文而言，中文不存在大小寫之分

語法 text-transform：取值；

text-transform屬性取值

none——無轉換（默認值）

uppercase——轉換為大寫

lowercase——轉換為小寫

capitalize——將每個英文單詞首字母轉換為大寫

5.行高（line-height）——控制每行文本的高度，與“行間距”是完全不一樣的概念

語法line-height：像素值；

6.間距（letter-spacing & word-spacing）

字間距（letter-spacing）——調整兩個字之間的距離

語法letter-spacing：像素值；

注意：每個中文漢字都被當成一個“字”，而每個英文字母也當做一個“字”

詞間距（word-spacing）——定義兩個單詞之間的距離（只針對英文單詞而言）

語法word-spacing：像素值；

在實際開發中，我們很少去定義中文網頁中的字間距以及詞間距，letter-spacing和word-spacing只會用于英文網頁。這兩個我們平時幾乎用不上

五、邊框樣式

1.邊框樣式屬性

邊框寬度（border-width）：取值是一個像素值

邊框外觀（border-style）：none（無樣式）、dashed（虛線）、solid（實線）

邊框顏色（border-color）：關鍵字、16進制RGB值

想要為一個元素定義邊框樣式，必須要同時設置這三個屬性才會有效果

簡寫形式：border：2px solid red；

2.局部樣式

一個邊框元素其實有四條邊（上、下、左、右）前面我們學習的是四條邊的整體樣式，現在來學習對某一條邊進行單獨設置。

上邊框（border-top）

border-top-width: 2px;

border-top-style: solid;

border-top-color: red;

下邊框（border-bottom）

border-bottom-width: 2px;

border-buttomstyle: solid;

border-buttom-color: red;

左邊框（border-left）

border-left-width: 2px;

border-left-style: solid;

border-left-color: red;

右邊框（border-right）

border-right-width: 2px;

border-right-style: solid;

border-right-color: red;

簡寫形式：border-right：2px solid red;

去除下邊框：（以下三個是等價的）

六、列表樣式

1.列表項符號（list-style-type）

在HTML中，我們使用type屬性來定義有序列表和無序列表的列表項符號，但是我們說過，結構和樣式應該是分離的，所以在CSS中，我們將使用list-style-type屬性來定義列表項符號

語法list-style-type：取值；

說明：list-style-type屬性是針對ol或者ul元素的，而不是li元素。

list-style-type屬性取值（有序列表）

decimal——阿拉伯數字：1，2，3…（默認值）

lower-roman——小寫羅馬數字：i、ii、iii…

upper-roman——大寫羅馬數字：I、II、III…

lower-alpha——小寫英文字母：a、b、c…

upper-alpha——大寫英文字母：A、B、C…

list-style-type屬性取值（無序列表）

disc——實心圓●（默認值）

circle——空心圓○

square——正方形■

去除列表項符號

語法list-style-type：none；

2.列表項圖片（list-style-image）——使用圖片來代替列表項符號

語法list-style-image：url（圖片路徑）；

在實際開發中，我們會使用更為高級的字體圖標（iconfont）技術來實現列表項圖片

七、表格樣式

1.表格標題位置（caption-side）

語法caption-side：取值；

caption-side屬性取值：

top——標題在頂部（默認）

bottom——標題在底部

如果想要定義表格標題的位置，在table或caption這兩個元素的CSS中定義caption-side屬性

2.表格邊框合并（border-collapse）——去除表格加入邊框后單元格之間的空隙

語法border-collapse：取值；

border-collapse屬性取值：

separate——邊框分開，有空隙（默認值）

collapse——邊框合并，無空隙

border-collapse屬性也是在table元素中定義的table{border-collapse: collapse;}

3.表格邊框間距（border-spacing）

語法border-spacing：像素值；

border-spacing屬性也是在table元素中定義的table{border-spacing：8px;}

八、圖片樣式

1.圖片大小——使用width和height這兩個屬性來定義圖片的大小

語法

在實際開發中，需要使用多大的圖片，就用Photoshop制作多大的圖片。不建議使用一張大圖片，然后再借助width和weight來改變大小。

2.圖片邊框

語法border：1px solid red；

在“邊框樣式”中我們已經詳細介紹了border屬性

3.圖片對齊

水平對齊

語法text-align：取值（left、center、right）；

注意：圖片的水平對齊不是在img元素中定義的，是在父元素中進行水平對齊的

text-align屬性一般只用于兩個地方：文本水平對齊和圖片水平對齊

垂直對齊

語法vertical-align：取值；

vertical-align屬性取值

top（頂部對齊）

middle（中部對齊）

baseline（基線對齊）

bottom（底部對齊）

4.文字環繞——初識float

圖文混排，指的是文字環繞著圖片進行布局

語法img{float：取值；}

float屬性取值

left——元素向左浮動

right——元素向右浮動

九、背景樣式

1.背景顏色（background-color）

語法background-color：顏色值（關鍵字、16進制RGB值）；

兩種顏色取值

color&background-color的區別：

color屬性用于定義“文本顏色”，而background-color屬性用于定義“背景顏色”

2.背景圖片（background-image）

語法background-image：url（圖片路徑）；

說明：跟引入圖片（即image標簽）一樣，引入背景圖片也需要給出圖片路徑才可以顯示

注意：我們需要為div元素添加width和height，背景圖片才會顯示出來

3.背景圖片重復（background-repeat）

語法background-repeat：取值；

background-repeat屬性取值：

repeat——在水平方向和垂直方向同時平鋪（默認值）

repeat-x——只在水平方向（x軸）上平鋪

repeat-y——只在垂直方向（y軸）上平鋪

no-repeat——不平鋪

注意：元素的寬度和高度必須大于背景圖片的寬度和高度，才會有重復效果

4.背景圖片的位置（background-position）

語法background-position：像素值/關鍵字；

像素值——要設置水平方向和垂直方向的值（像素值）

例如background-position：12px 24px;表示背景圖片與該元素左上角的水平方向距離為12px，垂直方向距離為24px。水平距離和垂直距離這兩個數值之間要用空格隔開

關鍵字——也要同時設置水平方向和垂直方向的值（關鍵字）

語法background-position：水平距離垂直距離；

關鍵字取值

top left——左上

top center——靠上居中

top right——右上

left center——靠左居中

center center——正中

right center——靠右居中

bottom left——左下

bottom center——靠下居中

bottom right——右下

5.背景圖片固定（background-attachment）——定義背景圖片是隨元素一起滾動還是固定不動

語法background-attachment：取值；

scroll——隨元素一起滾動（默認值）

fixed——固定不動

十、超鏈接樣式

1.超鏈接偽類

默認情況下：字體為藍色，帶有下劃線。

鼠標點擊時：字體為紅色，帶有下劃線。

鼠標點擊后：字體為紫色，帶有下劃線。

在CSS中，我們可以使用“超鏈接偽類”來定義超鏈接在鼠標點擊的不同時期的樣式。

語法

注意：定義這四個偽類，必須按上面的順序進行，否則瀏覽器無法正常顯示這四種樣式

link樣式表示的是a元素從未被訪問過。

2.深入了解超鏈接偽類

我們沒有必要定義四種狀態下的樣式，在實際開發中，我們只會用到兩種狀態：未訪問時狀態和鼠標經過狀態。而對于未訪問狀態，我們可以直接對a元素定義，沒必要使用a:link。

語法

事實上，對于超鏈接偽類來說，我們只需要記住a:hover這一個就夠了，因為在實際開發中也只會用到這一個。

3.深入了解：hover

hover偽類不只限用于a元素，hover偽類可以定義任何一個元素在鼠標經過時的樣式！

語法元素：hover{...}

4.鼠標樣式

瀏覽器鼠標樣式——cursor（11種）

語法cursor：取值；

cursor屬性取值（常用的三種）

default（默認值）——鼠標默認樣式

pointer——鼠標手狀樣式

text——鼠標文本樣式

自定義鼠標樣式

語法cursor：url（圖片地址），屬性值；

說明：這個“圖片里地址”是鼠標圖片地址，其中鼠標圖片后綴名一般都是.cur，可以使用Photoshop來制作。

十一、盒子模型

頁面中，所有的元素都可以看成一個盒子

1.盒子模型的組成部分

內容區——CSS盒子模型的中心

內邊距——內容區和邊框之間的距離

外邊距——兩個盒子之間的距離

邊框

2.寬和高（width和height）

元素的寬度和高度是針對內容區而言的。

只有塊元素才可以設置width和height，行內元素是無法設置width和height的

3.邊框（border）

簡寫形式（寬度、外觀，顏色）

border：1px solid red；

4.內邊距（padding）

內邊距分為四個方向：上、右、下、左（順時針方向）

padding-top：像素值；

padding-right：像素值；

padding-bottom：像素值；

padding-left：像素值；

padding簡寫形式

padding：像素值；表示四個方向的內邊距

padding：像素值1 像素值2；表示上下、左右邊距

padding：像素值1 像素值2 像素值3 像素值4；上、右、下、左（順時針）

5.外邊距（margin）

外邊距分為四個方向：上、右、下、左（順時針方向）

margin-top：像素值；

margin-right：像素值；

margin-bottom：像素值；

margin-left：像素值；

外邊距指的是兩個盒子之間的距離，它可能是子元素與父元素之間的距離，也可能是兄弟元素之間的距離。只有當我們加入其它元素當參考對象時，才能看到效果。

當既有父元素，也有兄弟元素時，則這個方向的margin就是相對于兄弟元素而言，如果沒有兄弟元素，則相對于父元素而言

margin簡寫形式與padding一樣

二十二、浮動布局

1.正常文檔流&脫離文檔流

正常文檔流——默認情況下的HTML文檔結構

脫離文檔流——脫離正常文檔流，使用浮動和定位去改變

2.浮動——float

float屬性取值

left——元素向左浮動

right——元素向右浮動

3.清除浮動——clear

clear屬性取值

left——清除左浮動

right——清除右浮動

both——同時清除左浮動和有浮動（常用）

二十三、定位布局

浮動布局比較靈活，但是不容易控制

定位布局精準定位頁面中的元素，但是缺乏靈活性

布局定位的四種方式：

固定定位（fixed）

相對定位（relative）

絕對定位（absolute）

靜態定位（static）——默認情況下

這四種方式都是通過position屬性來實現的

1.固定定位：fixed——指的是被固定的元素不會隨著滾動條的拖動而改變位置

語法：

position：fixed；

top：像素值；

bottom：像素值；

left：像素值；

right：像素值；

這四個屬性不一定全部都用到，一般只會用到其中兩個，參考對象是瀏覽器的四條邊

2.相對定位：relative——指的是該元素的位置是相對于它的原始位置計算而來的

語法：

position：relative；

top：像素值；

bottom：像素值；

left：像素值；

right：像素值；

這四個屬性不一定全部都用到，一般只會用到其中兩個，參考對象是該元素的原始位置

3.絕對定位：absolute（使用最廣泛）

語法：

position：absolute；

top：像素值；

bottom：像素值；

left：像素值；

right：像素值；

這四個屬性不一定全部都用到，一般只會用到其中兩個，參考對象是瀏覽器的四條邊；

一個元素變成了絕對定位元素，這個元素就完全脫離文檔流了，即這個元素浮于其他元素上面，獨立出來

總結：默認情況下，固定定位和絕對定位的位置是相對于瀏覽器而言，而相對定位的位置是相對原始位置而言。

————————————————

過CSS文本裝飾可以為文本添加裝飾線、為裝飾線設置顏色、為裝飾線指定風格、為裝飾線設置厚度等效果。

為文本添加裝飾線通過 text-decoration-line 屬性實現，可以結合一個以上的值，如上劃線和下劃線，來顯示文本上方和下方的線條。具體的值有三個：

overline，在文本上方添加線條修飾。

line-through，在文本中間添加線條修飾，實現了刪除線的效果。

underline，在文本下方添加線條修飾，實現了下劃線的效果。

我們來做個例子。

打開編輯器，在 005 文件夾下創建 decoration.html 文件，構建好基本代碼。

添加 h1，h2，h3，p 四個元素。分別填入一些文本。

在 005 文件夾下再創建一個 mystyle-3.css 文件，

定義 h1 選擇器，聲明樣式屬性 text-decoration-line，值為 overline。

定義 h2 選擇器，也聲明樣式屬性 text-decoration-line，值為 line-through。

定義 h3 選擇器，再聲明樣式屬性 text-decoration-line，值為 underline。

回到頁面，通過 link 元素引入 mystyle-3.css 這個外部樣式。

在瀏覽器上預覽效果，我們看：上邊線、刪除線和下劃線就做好了！

實際上，可以同時給文本添加多個線條，實現方法是給 text-decoration-line

[?dek??re??n】屬性設置多個值，每個值通過空格分開。

在 mystyle-3.css 再定義一個 p 選擇器，聲明樣式屬性 text-decoration-line，值寫為 overline underline （讀作overline 空格 underline ）。

看一下效果，段落被添加了兩條裝飾線。

有的小伙伴還記得，給文本添加鏈接后，瀏覽器會默認給這個文本添加一個下劃線。所以，添加了鏈接的文本就不要使用 underline 下劃線裝飾了。

為文本設置裝飾線的顏色通過 text-decoration-color 屬性實現，屬性值為任意合法的顏色值。

給 h1 元素設置 text-decoration-color 屬性，顏色值設置為 red。再快速的給 h2，h3，p 元素設置 text-decoration-color 屬性，值分別為 blue，green，purple。

我們看，線條都有了顏色。

為裝飾線指定風格通過 text-decoration-style 屬性實現，屬性值有五個：

solid，實線。

double，雙實線。

dotted，圓點線。

dashed[d??t]，虛線。

wavy[?we?vi]，波浪線。

為了演示方便，在 html 中再添加一個標題 h4，填入一些文本，在 css 中將全部元素的 text-decoration-line 樣式屬性都設置為 underline。再定義一個 h4 選擇器，聲明樣式 text-decoration-line: underline。

給 h1， h2，h3，h4，p 全部添加 text-decoration-style 屬性，值分別為 solid，double，dotted，dashed[d??t]，wavy。

這樣，各種線條的風格就設置好了！

通過 text-decoration-thickness 屬性為線條設置厚度，也就是線條的粗細。屬性值有三種設置方法：

auto，默認值，這個值是不確定的，和所修飾的文字大小有關系。

px，像素大小，是一個絕對值。比如 5px。

%，是一個相對值，根據修飾文字的高度計算出來。比如 25%。

在 h1 元素上聲明樣式屬性 text-decoration-thickness，值為 auto。在 h2，h3 上也聲明這個樣式屬性，值分別為 5px，50%。

在瀏覽器里仔細觀察，h1 上的下劃線厚度是瀏覽器給的默認值。h2 上的下劃線厚度是 5px。h3 上的下劃線厚度為文字高度的一半。

回到樣式表代碼，我們分析一下：每個文本修飾的屬性名，均為三個單詞連接起來的，這樣寫起來比較啰嗦，能不能簡化一下呢？可以的！

h1 {

/* text-decoration-line: overline; */

text-decoration-line: underline;

text-decoration-color: red;

text-decoration-style: solid;

text-decoration-thickness: auto;

}

在線咨詢

上一篇：如何一次開發生成android,ios（可無開發者賬號）,Html5 web app
下一篇：為什么要學習HTML？HTML會過時嗎？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

零基礎入門前端CSS知識整理

1 CSS樣式引入方式

1.1 外部樣式

1.2 內部樣式

1.3 行內樣式

2 基礎選擇器

2.1 元素選擇器

2.2 類選擇器

2.3 id選擇器

2.4 通配符選擇器

2.5 后代選擇器

2.6 群組選擇器

3 字體樣式

3.1 字體類型

3.2 字體大小

3.3 字體粗細

3.4 字體風格

3.5 字體顏色

4 文本樣式

4.1 首行縮進

4.2 水平對齊

4.3 文本修飾

4.4 大小寫轉換

4.5 行高

4.6 間距

5 邊框樣式

5.1 邊框的寬度

5.2 邊框的外觀

5.3 邊框的顏色

5.4 邊框樣式簡寫

5.5 邊框局部樣式

6 列表樣式

6.1 列表項符號

6.2 列表項圖片

7 表格樣式

7.1 表格標題位置

7.2 表格邊框合并

7.3 表格邊框間距

8 圖片樣式

8.1 圖片大小

8.2 圖片邊框

8.3 圖片對齊

8.4 文字環繞

9 背景樣式

9.1 背景顏色

9.2 背景圖片

10 超鏈接樣式

11 盒子模型

11.1 內容區

11.2 內邊距

11.3 邊框

11.4 外邊距

12 浮動布局

12.1 定義浮動

12.2 清除浮動

13 定位布局

13.1 固定定位

13.2 相對定位

13.3 絕對定位

13.4 靜態定位

您的項目需求