上書房之CSS

第一章 CSS簡介

CSS (Cascading Style Sheets)是層疊樣式表的縮寫，樣式定義了如何顯示HTML元素。向HTML文檔添加樣式通常有三種方式：外部樣式表、內部樣式表、內聯樣式。
（1）外部樣式表
當樣式需要應用于很多頁面時，外部樣式表將是理想的選擇。外部樣式表將樣式定義在.css文件中，在使用外部樣式表的情況下，你可以通過改變一個文件來改變整個站點的外觀。每個頁面使用 <link> 標簽鏈接到樣式表。 <link> 標簽在（文檔的）頭部，瀏覽器會從文件.css 中讀到樣式聲明，并根據它來格式文檔。

<head>
    <meta charset="UTF-8">
    <title>html示例</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
</head>

（2）內部樣式表
當單個文檔需要特殊的樣式時，就應該使用內部樣式表。你可以使用 <style> 標簽在文檔頭部定義內部樣式表。

    <head>
        <meta charset="UTF-8">
        <title>html示例</title>
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <style>
            body {
                background-image:url("images/back40.gif");
            }
            hr {
                color:sienna;
            }
            p {
                margin-left:20px;
            }
        </style>
    </head>

（3）內聯樣式（慎用）
由于要將表現和內容混雜在一起，內聯樣式會損失掉樣式表的許多優勢。請慎用這種方法，例如當樣式僅需要在一個元素上應用一次時。
要使用內聯樣式，你需要在相關的標簽內使用樣式（style）屬性。Style 屬性可以包含任何 CSS 屬性。

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

第二章 CSS語法

CSS規則由兩個主要的部分構成：選擇器，以及一條或多條聲明（由鍵值對組成）。
選擇器通常是您需要改變樣式的 HTML元素。每條聲明由一個屬性和一個值組成。
屬性（property）是您希望設置的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開。

CSS語法結構

h1 {
    font-family: "微軟雅黑";
    color: blue;
    font-size: 12px;
}

第三章 CSS選擇器

3.1. 元素選擇器

元素選擇器是CSS最常見的選擇器。換句話說，文檔的元素就是最基本的選擇器。

body {
  color: blue;
  font-size:35px;
  display: block;
}

3.2. 分組選擇器

如果多個元素擁有相同的樣式，可使用分組選擇器，多個元素用逗號分隔。

h2, p {
    color:gray;
}

說明：如果沒有這個逗號，那么規則的含義將完全不同。參見后代選擇器。

3.3. 類選擇器

類選擇器允許以一種獨立于文檔元素的方式來指定樣式。該選擇器可以單獨使用，也可以與其他元素結合使用。
只有適當地標記文檔后，才能使用這些選擇器，所以使用這兩種選擇器通常需要先做一些構想和計劃。要應用樣式而不考慮具體設計的元素，最常用的方法就是使用類選擇器。
（1）普通類選擇器
語法：類選擇器前面后一個點（.），后面跟選擇器的名稱。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS樣式</title>
        <style>
            .content{
                color: black;
            }
        </style>
    </head>
    <body>
        <div class="content">
            This is the first content.
        </div>
        <p class="content">
            This is the second content.
        </p>
    </body>
</html>

（2）結合元素的類選擇器
類選擇器可以結合元素選擇器來使用。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS樣式</title>
        <style>
            div.content{
                color: black;
            }
            p.content{
                color: blue;
            }
        </style>
    </head>
    <body>
        <div class="content">
            This is the first content.
        </div>
        <p class="content">
            This is the second content.
        </p>
    </body>
</html>

（3）多類選擇器
在 HTML 中，一個 class 值中可能包含一個詞列表，各個詞之間用空格分隔。例如，如果希望將一個特定的元素同時標記為重要（important）和警告（warning），就可以寫作

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS樣式</title>
        <style>
        .important {
            font-weight:bold;
        }
        .warning {
            font-style:italic;
        }
        .important.warning {
            background:silver;
        }
        </style>
    </head>
    <body>
        <p class="important warning">
            This paragraph is a very important warning.
        </p>
    </body>
</html>

3.4. id選擇器

id選擇器允許以一種獨立于文檔元素的方式來指定樣式，使用html元素的id來指定其樣式。
語法：id選擇器以#開頭，后面跟元素的id。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS樣式</title>
        <style>
            #content{
                color: black;
            }
        </style>
    </head>
    <body>
        <div id="content">
            This is content.
        </div>
    </body>
</html>

說明：

id選擇器只能使用一次
不能使用詞列表

3.5. 屬性選擇器

屬性選擇器可以根據元素的屬性及屬性值來選擇元素。
（1）簡單屬性選擇器
如果希望選擇有某個屬性的元素，而不論屬性值是什么，可以使用簡單屬性選擇器。
示例1：如果希望把包含標題（title）的所有元素字體設置為藍色，可以寫作：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS樣式</title>
        <style>
        [title] { /*對所有包含title的元素設置該樣式*/
            color: blue;
        }
        </style>
    </head>
    <body>
        <a  title="百度一下">Baidu</a>
        <a  title="用搜狐，知天下">Sohu</a>
    </body>
</html>

示例2：只希望對包含某個屬性的某類元素設置對應的樣式，可以寫作：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS樣式</title>
        <style>
        a[title]{ /*只對a標簽包含title的元素設置該樣式*/
            color: blue;
        }
        </style>
    </head>
    <body>
        <a  title="百度一下">Baidu</a>
        <span title="用搜狐，知天下" onclick="location.>Sohu</span>
    </body>
</html>

示例3：可以根據多個屬性進行選擇，即同時具有某些屬性的元素設置元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS樣式</title>
        <style>
        a[href][title]{ /*只對a標簽同時包含href和title屬性的元素設置該屬性*/
            color: orangered;
        }
        </style>
    </head>
    <body>
        <a  title="百度一下">Baidu</a>
        <a >Sohu</a>
    </body>
</html>

（2）屬性值選擇器
除了選擇擁有某些屬性的元素，還可以進一步縮小選擇范圍，只選擇有特定屬性值的元素。
示例1：希望將指向某個特定鏈接的標簽a變成紅色，可以這樣寫：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS樣式</title>
        <style>
        a[]{ /*只對a標簽指向http://www.baidu.com的元素設置該屬性*/
            color: orangered;
        }
        </style>
    </head>
    <body>
        <a  title="百度一下">Baidu</a>
        <a >Sohu</a>
    </body>
</html>

示例2：與簡單屬性選擇器類似，可以把多個屬性-值選擇器鏈接在一起來選擇一個標簽

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS樣式</title>
        <style>
        a[]{ /*只對a標簽指向http://www.baidu.com且title的值為百度一下的元素設置該屬性*/
            color: orangered;
        }
        </style>
    </head>
    <body>
        <a  title="百度一下">Baidu</a>
        <a >Sohu</a>
    </body>
</html>

（3）部分屬性值選擇器
如果需要根據屬性值中的詞列表的某個詞進行選擇，則需要使用波浪號（~）。
示例：假設想選擇class屬性中包含important的元素，可以用下面這個選擇器做到這一點：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS樣式</title>
        <style>
        p[class~="important"]{ /*將class元素包含important內容的p元素設置該元素*/
            color: red;
        }
        </style>
    </head>
    <body>
        <h3>可以應用樣式：</h3>
        <p class="important warning">This is a paragraph.</a>
        <p class="important">This is a paragraph.</a>
        <hr />
        <h3>無法應用樣式：</h3>
        <p class="warning">This is a paragraph.</a>
    </body>
</html>

說明：如果忽略了波浪號，則說明需要完成完全值匹配。
部分值屬性選擇器與點號類名記法的區別：該選擇器等價于我們在類選擇器中討論過的點號類名記法。也就是說，p.important 和 p[class="important"] 應用到HTML文檔時是等價的。那么，為什么還要有 "~=" 屬性選擇器呢？因為它能用于任何屬性，而不只是class。
例如，可以有一個包含大量圖像的文檔，其中只有一部分是圖片。對此，可以使用一個基于 title 文檔的部分屬性選擇器，只選擇這些圖片：

img[title~="Figure"] {
    border: 1px solid gray;
}

屬性選擇器列表

選擇器	描述
[attribute]	用于選取帶有指定屬性的元素。
[attribute=value]	用于選取帶有指定屬性和值的元素。
[attribute~=value]	用于選取屬性值中包含指定詞匯的元素。
[attribute^=value]	匹配屬性值以指定值開頭的每個元素。
[attribute$=value]	匹配屬性值以指定值結尾的每個元素。
[attribute*=value]	匹配屬性值中包含指定值的每個元素。

3.6. 后代選擇器

后代選擇器又稱為包含選擇器，可以選擇作為某元素后代的元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS樣式</title>
        <style>
            h1 strong {
                color: red;
            }
        </style>
    </head>
    <body>
        <h1>百度不會再以<strong>競價方式</strong>對搜索結果進行排名</h1>
        <p>百度不會再以<strong>競價方式</strong>對搜索結果進行排名.</p>
    </body>
</html>

說明：后代選擇器兩個元素之間的層次間隔可以是無限的。
例如，如果寫作ul em，這個語法就會選擇從ul元素繼承的所有em元素，而不論em的嵌套層次多深。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS樣式</title>
        <style>
            ul em {
                color: red;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>List item 1
                <ol>
                    <li>List item 1-1</li>
                    <li>List item 1-2</li>
                    <li>List item 1-3
                        <ol>
                            <li>List item <em>1-3-1</em></li>
                            <li>List item <em>1-3-2</em></li>
                            <li>List item <em>1-3-3</em></li>
                        </ol>
                    </li>
                    <li>List item 1-4</li>
                </ol>
            </li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    </body>
</html>

3.7. 子元素選擇器

與后代選擇器相比，子元素選擇器只能選擇作為某元素子元素的元素。如果您不希望選擇任意的后代元素，而是希望縮小范圍，只選擇某個元素的子元素，請使用子元素選擇器。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS樣式</title>
        <style>
            h1>strong {
                color: red;
            }
        </style>
    </head>
    <body>
        <div>
            <h1>百度推出繼百度百家之后的媒體平臺:<strong>百度發布平臺</strong></h1>
            <h1>百度推出繼百度百家之后的媒體平臺:<em><strong>百度發布平臺</strong></em></h1>
        </div>
    </body>
</html>

3.8. 相鄰元素選擇器

相鄰兄弟選擇器可選擇緊接在另一元素后的元素，且二者有相同父元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS樣式</title>
        <style>
            div.content > header + p{
                color: red;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <header>文章標題</header>
            <p>
                文章內容第一段文章內容第一段文章內容第一段文章內容第一段文章內容第一段。
            </p>
        </div>
    </body>
</html>

3.9. 偽類

CSS偽類用于向特殊狀態的選擇器添加特殊效果，
(1) 錨偽類。
a:link 未訪問的鏈接
a:visited 已訪問的鏈接
a:hover 鼠標移動到鏈接上（此偽類不止限于超鏈接上，其他元素也可使用）
a:active 選定的鏈接
注意：在CSS定義中，a:hover必須被置于a:link和a:visited之后才是有效的；a:active必須被置于a:hover之后才是有效的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS樣式</title>
        <style>
            a:link{
                color: blue;
            }
            a:visited{
                color: yellowgreen;
            }
            a:hover{
                color: deepskyblue;
            }
            a:active{
                color: red;
            }
        </style>
    </head>
    <body>
        <a >蘋果官網</a>
        <a >小米官網</a>
    </body>
</html>

(2) :focus偽類向擁有鍵盤輸入焦點的元素添加樣式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS樣式</title>
        <style>
            input:focus{
                background-color: lightyellow;
            }
        </style>
    </head>
    <body>
        <input type="text" placeholder="請輸入用戶名" id="form-field-userName" />
        <input type="password" placeholder="請輸入密碼" id="form-field-password" />
        <input type="checkbox" /> 記住我
    </body>
</html>

(3) :first-child偽類，匹配其它元素的第一個子元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS樣式</title>
        <style>
            ul > li:first-child{
                color: red;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
        </ul>
    </body>
</html>

3.10. 偽元素

CSS偽元素用于向某些選擇器設置特殊效果。常用的偽元素如下：
(1) :first- line
向文本的首行添加特殊樣式。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS樣式</title>
        <style>
            p:first-line{
                color: red;
            }
        </style>
    </head>
    <body>
        <p>
            第一行內容第一行內容第一行內容第一行內容第一行內容。<br />
            第二行內容第二行內容第二行內容第二行內容第二行內容。<br />
            第三行內容第三行內容第三行內容第三行內容第三行內容。<br />
        </p>
    </body>
</html>

(2) :first-line
向文本的首行添加特殊樣式。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS樣式</title>
        <style>
            p:first-letter {
                color: red;
            }
        </style>
    </head>
    <body>
        <p>ABCD</p>
    </body>
</html>

(3) :before
在元素之前添加內容。

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="UTF-8">
        <title>CSS樣式</title>
        <style>
            h1:before {
                content: url(css/img/logo.png)
            }
        </style>
    </head>
    <body>
        <h1>上書房</h1>
    </body>
</html>

(4) :after
在元素之后添加內容。

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="UTF-8">
        <title>CSS樣式</title>
        <style>
            h1:after {
                content: url(css/img/logo.png)
            }
        </style>
    </head>
    <body>
        <h1>上書房</h1>
    </body>
</html>

第四章 CSS樣式

4.1. 背景

CSS允許應用純色作為背景，也允許使用背景圖像創建相當復雜的效果。
(1) 背景色
使用background-color屬性為元素設置背景色。這個屬性接受任何合法的顏色值。

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="UTF-8">
        <title>CSS樣式</title>
        <style>
            .content {
                background-color: lightcoral;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <p>文章內容</p>
        </div>
    </body>
</html>

(2) 背景圖
使用background-image屬性為元素設置背景圖。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS樣式</title>
        <style>
            body {
                background-image: url(css/img/backgroud.jpg);
            }
        </style>
    </head>
    <body>
    </body>
</html>

(3) 背景重復
如果需要在頁面上對背景圖像進行平鋪，可以使用background-repeat屬性。屬性值 repeat 導致圖像在水平垂直方向上都平鋪，就像以往背景圖像的通常做法一樣。repeat-x 和 repeat-y 分別導致圖像只在水平或垂直方向上重復，no-repeat 則不允許圖像在任何方向上平鋪。

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="UTF-8">
        <title>CSS樣式</title>
        <style>
            body {
                background-image: url(css/img/backgroud.jpg);
                background-repeat: no-repeat; /*repeat-x,repeat-y,no-repeat*/
            }
        </style>
    </head>
    <body>
    </body>
</html>

(4) 背景定位
可以利用background-position屬性改變圖像在背景中的位置。CSS為background-position屬性提供了3中方式改變圖像在背景中的位置：

關鍵字
可以使用background-position關鍵字：top、bottom、left、right和center改變圖像在背景中的位置。

<style>
    body {
        background-image: url(css/img/backgroud.jpg);
        background-repeat: no-repeat;
        background-position: left; /*top、bottom、left、right、center*/;
    }
</style>

百分數值

<style>
    body {
        background-image: url(css/img/backgroud.jpg);
        background-repeat: no-repeat;
        background-position: 50% 50%;
    }
</style>

長度值

<style>
    body {
        background-image: url(css/img/backgroud.jpg);
        background-repeat: no-repeat;
        background-position: 50px 100px;
    }
</style>

(5) 背景關聯
如果文檔比較長，那么當文檔向下滾動時，背景圖像也會隨之滾動。當文檔滾動到超過圖像的位置時，圖像就會消失。可以通過background-attachment屬性防止這種滾動。通過這個屬性，可以聲明圖像相對于可視區是固定的（fixed），因此不會受到滾動的影響。

<style>
  body {
    background-image: url(css/img/backgroud.jpg);
    background-repeat: no-repeat;
    background-position: 50px 100px;
    background-attachment:fixed
  }
</style>

關于背景的所有樣式可聲明在同一個屬性background中。

<style>
    body {
        background: orangered url(css/img/backgroud.jpg) no-repeat 50px 100px fixed;
    }
</style>

4.2. 文本

CSS文本屬性可定義文本的外觀。通過文本屬性，可以改變文本的顏色、字符間距，對齊文本，裝飾文本，對文本進行縮進等等。
(1) 縮進文本
CSS提供了text-indent屬性實現對段落文本首行的縮進。

<style>
    p{
        text-indent: 2em;
    }
</style>

(2) 水平對齊
使用text-align屬性實現文本內容的對其方式，常用的有4個值：
left: 文本左對齊
right: 文本右對齊
center: 文本居中對齊
justify: 文本兩端對齊

<style>
    p{
        text-align: left;
    }
</style>

(3) 單詞間隔
使用word-spacing 屬性可以改變單詞之間的標準間隔。其默認值normal與設置值為 0 是一樣的。

p{
    word-spacing: 30px;
}

(4) 字母間隔
使用letter-spacing屬性可以改變單詞之間的標準間隔。

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="UTF-8">
        <title>CSS樣式</title>
        <style>
            p.word-spacing {
                word-spacing: 5em;
            }
            
            p.letter-spacing {
                letter-spacing: 5em;
            }
        </style>
    </head>
    <body>
        <p class="word-spacing">
            hello world!
        </p>
        <p class="letter-spacing">
            hello world!
        </p>
    </body>
</html>

(5) 字符轉換
使用text-transform來實現文本內容大小寫的轉換。
none: 對文本不做任何修改。
uppercase: 將文本內容轉換為大寫。
lowercase: 將文本內容轉換為小寫。
capitalize: 將文本內容的每個單詞第一個字母轉換為大寫。
(6) 文本裝飾
使用text-decoration來實現文本一些特殊的樣式。
none: 對文本內容不追加任何效果。
underline: 對元素內容加下劃線。
overline: 對元素內容加上劃線。
line-through: 對元素內容加刪除線。
(7) 處理空白符
使用white-space處理對源文檔中的空格、換行符和tab字符的處理。

值	空白符	換行符	自動換行
pre-line	合并	保留	允許
normal	合并	忽略	允許
nowrap	合并	忽略	不允許
pre	保留	保留	不允許
pre-wrap	保留	保留	允許

4.3. 字體

CSS字體屬性定義文本的字體系列、大小、加粗、風格（如斜體）和變形（如小型大寫字母）。
(1) 字體系列
使用font-family屬性定義文本的字體系列。
在CSS中，有兩種不同類型的字體系列名稱：
通用字體系列 - 擁有相似外觀的字體系統組合（比如 "Serif" 或 "Monospace"）
特定字體系列 - 具體的字體系列（比如 "Times" 或 "Courier"）
除了各種特定的字體系列外，CSS 定義了 5 種通用字體系列：
Serif字體
Sans-serif字體
Monospace字體
Cursive字體
Fantasy字體
所有的系統都應提供一個通用字體系列，在用戶代理無法提供與規則匹配的特定字體時，就可以選擇一個候選字體。

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="UTF-8">
        <title>CSS樣式</title>
        <style>
            .font-family1{
                font-family: sans-serif;
            }
            .font-family2{
                font-family: "微軟雅黑";
            }
            .font-family3{
                font-family: "宋體"
            }
        </style>
    </head>
    <body>
        <p class="font-family1">
            阿里巴巴
        </p>
        <p class="font-family2">
            阿里巴巴
        </p>
        <p class="font-family3">
            阿里巴巴
        </p>
    </body>
</html>

(2) 字體風格
使用font-style屬性最常用于規定斜體文本。
該屬性有三個值：
normal: 文本正常顯示
italic: 文本斜體顯示
oblique: 文本傾斜顯示
(3) 字體加粗
使用font-weight屬性設置文本的粗細。使用bold關鍵字可以將文本設置為粗體。關鍵字 100 ~ 900 為字體指定了 9 級加粗度。如果一個字體內置了這些加粗級別，那么這些數字就直接映射到預定義的級別，100 對應最細的字體變形，900 對應最粗的字體變形。數字 400 等價于 normal，而 700 等價于 bold。
(4) 字體大小
使用font-size屬性設置文本的大小。有font-size可使用3種方式對字體進行大小的設置。
px: 像素（px）是相對于顯示器屏幕分辨率而言的相對長度單位，但對于IE瀏覽器無法調整使用px作為單位的字體大小。
em: 相對于當前對象內文本的字體尺寸，也是相對長度單位。em有兩個特點，其一、em的值并不是固定的；其二、em會繼承父級元素的字體大小。
任意瀏覽器的默認字體高都16px。所有未經調整的瀏覽器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。為了簡化font-size的換算，我們在寫CSS的時候，需要注意兩點：

body選擇器中聲明Font-size=62.5%；
將你的原來的px數值除以10，然后換上em作為單位；
重新計算那些被放大的字體的em數值。避免字體大小的重復聲明。也就是避免1.2 * 1.2= 1.44的現象。
比如說你在#content中聲明了字體大小為1.2em，那么在聲明p的字體大小時就只能是1em，而不是1.2em, 因為此em非彼em，它因繼承#content的字體高而變為了1em=12px。

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="UTF-8">
        <title>CSS樣式</title>
        <style>
            body {
                font-family: sans-serif;
                font-size: 62.5%;
            }
            
            .content {
                font-size: 1.2em;
            }
            
            .p1 {
                font-size: 1.2em;
            }
            
            .p2 {
                font-size: 1.2em;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <div class="p1">
                <p class="p2">
                    阿里巴巴
                </p>
            </div>
            <p class="p2">
                阿里巴巴
            </p>
        </div>
    </body>
</html>

rem（推薦使用）: rem是CSS3新增的一個相對單位，這個單位與em的區別在于，使用rem為元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優點于一身，通過它既可以做到只修改根元素就成比例地調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應。目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。

4.4. 列表

列表分為無序列表（ul）和有序列表（ol）兩種，在一個無序列表中，列表項的標志是出現在各列表項旁邊的圓點。在有序列表中，標志可能是字母、數字或另外某種計數體系中的一個符號。
(1) 修改列表項的標志類型
使用list-style-type屬性，修改用于列表項的標志類型。

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="UTF-8">
        <title>CSS樣式</title>
        <style>
            ul{
                list-style-type: disc;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
        </ul>
    </body>
</html>

list-style-type屬性值

值	描述
none	無標記。
disc	默認。標記是實心圓。
circle	標記是空心圓。
square	標記是實心方塊。
decimal	標記是數字。
decimal-leading-zero	0開頭的數字標記。(01, 02, 03, 等。)
lower-roman	小寫羅馬數字(i, ii, iii, iv, v, 等。)
upper-roman	大寫羅馬數字(I, II, III, IV, V, 等。)
lower-alpha	小寫英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha	大寫英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek	小寫希臘字母(alpha, beta, gamma, 等。)
lower-latin	小寫拉丁字母(a, b, c, d, e, 等。)
upper-latin	大寫拉丁字母(A, B, C, D, E, 等。)
hebrew	傳統的希伯來編號方式
armenian	傳統的亞美尼亞編號方式
georgian	傳統的喬治亞編號方式(an, ban, gan, 等。)
cjk-ideographic	簡單的表意數字
hiragana	標記是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana	標記是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha	標記是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha	標記是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）

(2) 設置列表圖標
如果不想使用標志符，可使用list-style-image屬性為列表添加圖標。

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="UTF-8">
        <title>CSS樣式</title>
        <style>
            ul li{
                list-style-image: url(css/img/diy/3.png);
            }
        </style>
    </head>
    <body>
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
        </ul>
    </body>
</html>

(3) 設置列表標志位置（不常用）
使用list-style-position屬性設置在何處放置列表項標記。

值	描述
inside	列表項目標記放置在文本以內，且環繞文本根據標記對齊。
outside	默認值。保持標記位于文本的左側。列表項目標記放置在文本以外，且環繞文本不根據標記對齊。
inherit	規定應該從父元素繼承 list-style-position 屬性的值。

4.5. 表格

使用CSS來設置表格的樣式可極大的改善表格的外觀。
(1) 表格邊框
使用border屬性來設置表格的邊框。

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="UTF-8">
        <title>CSS樣式</title>
        <style>
            table, th, td{
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>姓名</th>
                <th>性別</th>
                <th>公司名稱</th>
            </tr>
            <tr>
                <td>李彥宏</td>
                <td>男</td>
                <td>百度</td>
            </tr>
            <tr>
                <td>馬云</td>
                <td>男</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>雷軍</td>
                <td>男</td>
                <td>小米科技</td>
            </tr>
        </table>
    </body>
</html>

(2) 折疊邊框
使用border-collapse屬性設置是否將表格邊框折疊為單一邊框。

table{
    border-collapse: collapse;
}

(3) 表格的寬度與高度
使用width和height屬性定義表格的寬度和高度。

table{
    border-collapse: collapse;
    width: 100%;
}
th, td{
    height: 30px;
}

(4) 表格文本對齊
使用text-align和vertical-align屬性設置表格中文本的水平與垂直方向的對齊方式。

th, td{
    height: 30px;
    text-align: right;
    vertical-align: bottom;
}

(5) 表格內邊距
如需控制表格中內容與邊框的距離，可為td和th元素設置padding屬性。

th, td{
    padding:15px;
}

第五章 CSS盒子模型

5.1. 盒子模型概述

CSS的盒子模型（Box Model）規定了元素框處理元素內容、內邊距、邊框和外邊距的方式。

盒子模型

元素框的最內部分是實際的內容，直接包圍內容的是內邊距。內邊距呈現了元素的背景。內邊距的邊緣是邊框。邊框以外是外邊距，外邊距默認是透明的，因此不會遮擋其后的任何元素。背景應用于由內容和內邊距、邊框組成的區域。在 CSS 中，width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。

5.2. 內邊距

元素的內邊距在邊框和內容區之間。控制該區域最簡單的屬性是padding屬性。padding 屬性定義元素邊框與元素內容之間的空白區域，接受長度值或百分比值，但不允許使用負值。
如果希望div元素的各邊都有10個像素的內邊距，設置方式如下：

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="UTF-8">
        <title>CSS樣式</title>
        <style>
        .content{
            background-color: lightcoral;
            width: 130px;
            padding: 20px;
        }
        </style>
    </head>
    <body>
        <div class="content">
            測試內邊距演示內容
        </div>
    </body>
</html>

單邊內邊距的屬性
可通過使用下面四個單獨的屬性，分別設置上、右、下、左內邊距：

padding-top
padding-right
padding-bottom
padding-left

5.3. 邊框

元素的邊框 (border) 是圍繞元素內容和內邊距的一條或多條線。CSS border屬性允許你規定元素邊框的樣式、寬度和顏色。
(1) 邊框樣式
邊框樣式是邊框最重要的一個方面，這不是因為樣式控制著邊框的顯示（當然，樣式確實控制著邊框的顯示），而是因為如果沒有樣式，將根本沒有邊框。
使用border-style屬性定義邊框的樣式：

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="UTF-8">
        <title>CSS樣式</title>
        <style>
        .content{
            border-style: solid;
            width: 200px;
            padding: 20px;
        }
        </style>
    </head>
    <body>
        <div class="content">
            測試內邊距演示內容
        </div>
    </body>
</html>

border-style樣式

值	描述
none	定義無邊框。
hidden	與 "none" 相同。不過應用于表時除外，對于表，hidden 用于解決邊框沖突。
dotted	定義點狀邊框。在大多數瀏覽器中呈現為實線。
dashed	定義虛線。在大多數瀏覽器中呈現為實線。
solid	定義實線。
double	定義雙線。雙線的寬度等于 border-width 的值。
groove	定義 3D 凹槽邊框。其效果取決于 border-color 的值。
ridge	定義 3D 壟狀邊框。其效果取決于 border-color 的值。
inset	定義 3D inset 邊框。其效果取決于 border-color 的值。
outset	定義 3D outset 邊框。其效果取決于 border-color 的值。
inherit	規定應該從父元素繼承邊框樣式。

定義單邊樣式
如果您希望為元素框的某一個邊設置邊框樣式，而不是設置所有4個邊的邊框樣式，可以使用下面的單邊邊框樣式屬性：

border-top-style
border-right-style
border-bottom-style
border-left-style

(2) 邊框寬度
通過border-width屬性為邊框指定寬度。

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="UTF-8">
        <title>CSS樣式</title>
        <style>
        .content{
            border-style: solid;
            border-width: 1px;
            width: 200px;
            padding: 20px;
        }
        </style>
    </head>
    <body>
        <div class="content">
            測試內邊距演示內容
        </div>
    </body>
</html>

通過下列屬性分別設置邊框各邊的寬度：

border-top-width
border-right-width
border-bottom-width
border-left-width

(3) 邊框顏色
使用border-color屬性設置邊框顏色。

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="UTF-8">
        <title>CSS樣式</title>
        <style>
        .content{
            border-style: solid;
            border-width: 1px;
            border-color: red;
            width: 200px;
            padding: 20px;
        }
        </style>
    </head>
    <body>
        <div class="content">
            測試內邊距演示內容
        </div>
    </body>
</html>

定義單邊顏色
還有一些單邊邊框顏色屬性。它們的原理與單邊樣式和寬度屬性相同：

border-top-color
border-right-color
border-bottom-color
border-left-color

5.4. 外邊距

圍繞在元素邊框的空白區域是外邊距。設置外邊距會在元素外創建額外的“空白”。設置外邊距的最簡單的方法就是使用 margin 屬性，這個屬性接受任何長度單位、百分數值甚至負值。

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="UTF-8">
        <title>CSS樣式</title>
        <style>
        .content1{
            border-style: solid;
            border-width: 1px;
            border-color: red;
            width: 200px;
            padding: 20px;
            margin: 10px;
        }
        .content2{
            border-style: solid;
            border-width: 1px;
            border-color: red;
            width: 200px;
            padding: 20px;
            margin: 10px;
        }
        </style>
    </head>
    <body>
        <div class="content1">
            測試內邊距演示內容1
        </div>
        <div class="content2">
            測試內邊距演示內容2
        </div>
    </body>
</html>

值復制

p {
    margin: 0.5em 1em 0.5em 1em;
}

p {
    margin: 0.5em 1em;
}

通過值復制，您可以不必重復地鍵入這對數字，CSS定義了一些規則，允許為外邊距指定少于4個值。規則如下：

如果缺少左外邊距的值，則使用右外邊距的值。
如果缺少下外邊距的值，則使用上外邊距的值。
如果缺少右外邊距的值，則使用上外邊距的值。
使用下列任何一個屬性來只設置相應上的外邊距，而不會直接影響所有其他外邊距：
margin-top
margin-right
margin-bottom
margin-left

第六章 CSS定位

CSS有三種基本的定位機制：普通流、浮動和絕對定位。除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中元素的位置由元素在HTML中的位置決定。塊級元素從上到下一個接一個地排列，塊級元素之間的垂直距離是由塊級元素的垂直外邊距計算出來。行內元素在一行中水平布置。可以使用水平內邊距、邊框和外邊距調整它們的間距。但是，垂直內邊距、邊框和外邊距不影響行內框的高度。由一行形成的水平元素稱為行框（LineBox），行框的高度總是足以容納它包含的所有行內框。

6.1. 相對定位

設置為相對定位的元素框會以元素的原始位置為起始點，然后通過設置垂直或水平位置，讓這個元素“相對于”它的起點進行移動。
注意，在使用相對定位時，無論是否進行移動，元素仍然占據原來的空間。因此，移動元素會導致它覆蓋其它框。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS樣式</title>
        <style>
        .content1{
            background-color: #B92C28;
            padding: 10px;
            margin: 10px;
            width: 500px;
        }
        .content2{
            position: relative;
            left: 10px;
            top: 20px;
            background-color: #C8E5BC;
            padding: 10px;
            margin: 10px;
            width: 500px;
        }
        .content3{
            background-color: #FBF069;
            padding: 10px;
            margin: 10px;
            width: 500px;
        }
        </style>
    </head>
    <body>
        <div class="content1">
            內容1
        </div>
        <div class="content2">
            內容2
        </div>
        <div class="content3">
            內容3
        </div>
    </body>
</html>

定位前

定位后

6.2. 絕對定位

設置為絕對定位的元素框從文檔流完全刪除，并相對于其包含塊定位，包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS樣式</title>
        <style>
        .content1{
            background-color: #B92C28;
            padding: 10px;
            margin: 10px;
            width: 500px;
        }
        .content2{
            position: absolute;
            left: 10px;
            top: 20px;
            background-color: #C8E5BC;
            padding: 10px;
            margin: 10px;
            width: 500px;
        }
        .content3{
            background-color: #FBF069;
            padding: 10px;
            margin: 10px;
            width: 500px;
        }
        </style>
    </head>
    <body>
        <div class="content1">
            內容1
        </div>
        <div class="content2">
            內容2
        </div>
        <div class="content3">
            內容3
        </div>
    </body>
</html>

6.3. 浮動

浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。在CSS中，我們通過float屬性實現元素的浮動。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS樣式</title>
        <style>
            .news {
                background-color: lightyellow;
                border: solid 1px red;
                width: 900px;
            }
            .news img {
                float: left;
            }
            .news p {
                float: right;
            }
            .clear {
                clear: both;
            }
        </style>
    </head>
    <body>
        <div class="news">
            ![](css/img/backgroud.jpg)
            <p>文本內容文本內容文本內容文本內容文本內容文本內容文本內容文本內容文本內容</p>
            <div class="clear"></div>
        </div>
    </body>
</html>

說明：在實際移動互聯網項目中，頁面的布局最常使用的是Bootstrap框架，而不用自己實現復雜的布局。

最后編輯于：2017.12.05 04:31:50

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
沈念sama閱讀 230,048評論 6贊 542
死咒
序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
沈念sama閱讀 99,414評論 3贊 429
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
開封第一講書人閱讀 178,169評論 0贊 383
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長。經常有香客問我，道長，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 63,722評論 1贊 317
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
茶點故事閱讀 72,465評論 6贊 412
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著，像睡著了一般。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發上，一...
開封第一講書人閱讀 55,823評論 1贊 328
城市分裂傳說
那天，我揣著相機與錄音，去河邊找鬼。笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。我是一名探鬼主播，決...
沈念sama閱讀 43,813評論 3贊 446
雙鴛鴦連環套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
開封第一講書人閱讀 43,000評論 0贊 290
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
沈念sama閱讀 49,554評論 1贊 335
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 41,295評論 3贊 358
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 43,513評論 1贊 374
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
沈念sama閱讀 39,035評論 5贊 363
?日本核電站爆炸內幕
正文年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
茶點故事閱讀 44,722評論 3贊 348
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 35,125評論 0贊 28
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 36,430評論 1贊 295
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。一個月前我還...
沈念sama閱讀 52,237評論 3贊 398
代替公主和親
正文我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 48,482評論 2贊 379

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

上書房之CSS

上書房之CSS

第一章 CSS簡介

第二章 CSS語法

第三章 CSS選擇器

3.1. 元素選擇器

3.2. 分組選擇器

3.3. 類選擇器

3.4. id選擇器

3.5. 屬性選擇器

3.6. 后代選擇器

3.7. 子元素選擇器

3.8. 相鄰元素選擇器

3.9. 偽類

3.10. 偽元素

第四章 CSS樣式

4.1. 背景

4.2. 文本

4.3. 字體

4.4. 列表

4.5. 表格

第五章 CSS盒子模型

5.1. 盒子模型概述

5.2. 內邊距

5.3. 邊框

5.4. 外邊距

第六章 CSS定位

6.1. 相對定位

6.2. 絕對定位

6.3. 浮動

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

上書房之CSS

第一章 CSS簡介

第二章 CSS語法

第三章 CSS選擇器

3.1. 元素選擇器

3.2. 分組選擇器

3.3. 類選擇器

3.4. id選擇器

3.5. 屬性選擇器

3.6. 后代選擇器

3.7. 子元素選擇器

3.8. 相鄰元素選擇器

3.9. 偽類

3.10. 偽元素

第四章 CSS樣式

4.1. 背景

4.2. 文本

4.3. 字體

4.4. 列表

4.5. 表格

第五章 CSS盒子模型

5.1. 盒子模型概述

5.2. 內邊距

5.3. 邊框

5.4. 外邊距

第六章 CSS定位

6.1. 相對定位

6.2. 絕對定位

6.3. 浮動

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频