零基礎(chǔ)入門前端CSS知識(shí)整理

成	語(yǔ)言	描述
結(jié)構(gòu)	HTML	網(wǎng)頁(yè)元素和內(nèi)容
表現(xiàn)	CSS	網(wǎng)頁(yè)元素頁(yè)面樣式）
行為	JavaScript	網(wǎng)頁(yè)交互

CSS，層疊樣式表（Cascading Style Sheet），給網(wǎng)頁(yè)中的HTML標(biāo)簽設(shè)置樣式

1 CSS樣式引入方式

1.1 外部樣式

CSS寫在一個(gè)單獨(dú)的.css文件中，通過(guò)link標(biāo)簽在網(wǎng)頁(yè)中引入

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

1.2 內(nèi)部樣式

CSS寫在網(wǎng)頁(yè)的head標(biāo)簽中，用style標(biāo)簽包裹

<style>
    /* 寫在style標(biāo)簽中的樣式 */
</style>

1.3 行內(nèi)樣式

CSS寫在標(biāo)簽的style屬性中

<標(biāo)簽名 style="行內(nèi)樣式寫在這"></標(biāo)簽名>

三種CSS樣式引入方式的區(qū)別

引入方式	書寫位置	作用范圍	使用場(chǎng)景
外部樣式	CSS寫在單獨(dú)的css文件中，通過(guò)link標(biāo)簽引入	多個(gè)頁(yè)面	項(xiàng)目中
內(nèi)部樣式	CSS寫在head頭部style標(biāo)簽中	當(dāng)前頁(yè)面	案例演示中
行內(nèi)樣式	CSS寫在標(biāo)簽的style屬性中	當(dāng)前標(biāo)簽	配合js使用

2 基礎(chǔ)選擇器

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

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

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

2.1 元素選擇器

通過(guò)元素名稱，選取（查找）相同元素，然后對(duì)相同元素設(shè)置CSS樣式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>我愛(ài)中國(guó)</p>
    <p>我愛(ài)人民</p>
    <div>我愛(ài)家鄉(xiāng)</div>
</body>
</html>

小結(jié)：

1、無(wú)論嵌套多少層，只要元素名稱相同都會(huì)被找到

2.2 類選擇器

通過(guò)類名稱，找到頁(yè)面中所有帶這個(gè)類名稱的元素，然后對(duì)其設(shè)置CSS樣式

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .color-style {
            color: red;
        }
    </style>
</head>
<body>
    <p class="color-style">我愛(ài)中國(guó)</p>
    <p>我愛(ài)人民</p>
    <div class="color-style">我愛(ài)家鄉(xiāng)</div>
</body>
</html>

小結(jié)：

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

2、類名由數(shù)字、字母、下劃線、中劃線組成，不能以數(shù)字、中劃線開(kāi)頭

3、一個(gè)元素可以有多個(gè)類名，類名之間用空格隔開(kāi)

2.3 id選擇器

通過(guò)元素id屬性的屬性值，找到頁(yè)面中帶這個(gè)id屬性值的元素，然后對(duì)其設(shè)置CSS樣式

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

小結(jié)：

1、所有元素都有id屬性

2、id屬性值在一個(gè)頁(yè)面中是唯一的

3、一個(gè)元素只能有一個(gè)id屬性值

2.4 通配符選擇器

查找頁(yè)面中所有的元素，然后對(duì)其設(shè)置CSS樣式

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

小結(jié)：

1、通常用于網(wǎng)頁(yè)重置樣式，不常用

2.5 后代選擇器

根據(jù)選擇器查找符合條件的元素，再根據(jù)后代選擇器查找符合條件的元素，然后對(duì)其設(shè)置CSS樣式

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

2.6 群組選擇器

根據(jù)多個(gè)選擇器各自查找符合條件的元素，然后對(duì)其設(shè)置CSS樣式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p,h3 {
            color: red;
        }
    </style>
</head>
<body>
    <p>我愛(ài)中國(guó)</p>
    <h3>我愛(ài)人民</h3>
    <div>我愛(ài)家鄉(xiāng)</div>
</body>
</html>

3 字體樣式

字體樣式，針對(duì)文字本身樣式

字體相關(guān)的CSS屬性

屬性	說(shuō)明
font-family	字體類型
font-size	字體大小
font-weight	字體粗細(xì)
font-style	字體風(fēng)格
color	字體顏色

3.1 字體類型

語(yǔ)法：

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

說(shuō)明：

1、font-family屬性可是設(shè)置多個(gè)屬性值，用英文逗號(hào)隔開(kāi)，生效順序是從左到右。瀏覽器默認(rèn)字體類型一般是"宋體"

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

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

3.2 字體大小

語(yǔ)法：

font-size: 數(shù)字 + px

說(shuō)明：

1、px是像素單位，單位需要設(shè)置，否則無(wú)效

2、谷歌瀏覽器默認(rèn)文字大小是16px

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
            font-size: 18px;
        }
        div {
            font-size: 36px;
        }
    </style>
</head>
<body>
    <p>我愛(ài)中國(guó)</p>
    <div>我愛(ài)家鄉(xiāng)</div>
</body>
</html>

3.3 字體粗細(xì)

語(yǔ)法：

font-weight: normal/bold/100~900

說(shuō)明：

屬性值	說(shuō)明
normal	正常（默認(rèn)值）
bold	較粗
100~900	取100~900九種數(shù)值

實(shí)際開(kāi)發(fā)一般會(huì)設(shè)置bold，不設(shè)置默認(rèn)是normal

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
            font-weight: normal;
        }
        div {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>我愛(ài)中國(guó)</p>
    <div>我愛(ài)家鄉(xiāng)</div>
</body>
</html>

3.4 字體風(fēng)格

語(yǔ)法：

font-style: 取值

說(shuō)明：

屬性值	說(shuō)明
normal	正常（默認(rèn)值）
italic	斜體
oblique	斜體

不是所有字體都有italic屬性值，如果沒(méi)有italic的，則用oblique

font連寫

語(yǔ)法：

font: style weight size family;

說(shuō)明：

1、可以省略前兩項(xiàng)，省略了相當(dāng)于設(shè)置了默認(rèn)值

不常用，作為了解

3.5 字體顏色

語(yǔ)法：

color: 顏色值

說(shuō)明：

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

問(wèn)題一：給同一個(gè)元素設(shè)置了相同的屬性樣式，哪個(gè)生效？

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

問(wèn)題二：html里面有注釋，css有沒(méi)有注釋，如何寫？

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

4 文本樣式

文本樣式，針對(duì)段落的排版效果

文本相關(guān)CSS屬性

屬性	說(shuō)明
text-indent	首行縮進(jìn)
text-align	水平對(duì)齊
text-decoration	文本修繕
text-transform	大小寫轉(zhuǎn)換
line-height	行高
letter-spacing	字母間距
word-spacing	詞間距

4.1 首行縮進(jìn)

語(yǔ)法：

text-indent: 像素值

說(shuō)明：

縮進(jìn)大小和字體大小是有關(guān)的，縮進(jìn)1個(gè)字的空間等同于1個(gè)字的字體大小。

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

4.2 水平對(duì)齊

語(yǔ)法：

text-align: 取值

說(shuō)明：

text-align屬性取值

屬性值	說(shuō)明
left	左對(duì)齊（默認(rèn)值）
center	居中對(duì)齊
right	右對(duì)齊

<!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">生于憂患死于安樂(lè)</p>
    <p class="two">生于憂患死于安樂(lè)</p>
    <p class="three">生于憂患死于安樂(lè)</p>
</body>
</html>

4.3 文本修飾

語(yǔ)法：

text-decoration: 取值

說(shuō)明：

text-decoration屬性值

屬性值	說(shuō)明
none	去除所有的劃線效果（默認(rèn)值）
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">生于憂患死于安樂(lè)</p>
    <p class="two">生于憂患死于安樂(lè)</p>
    <p class="three">生于憂患死于安樂(lè)</p>
    <p class="four">生于憂患死于安樂(lè)</p>
</body>
</html>

4.4 大小寫轉(zhuǎn)換

語(yǔ)法：

text-transform: 取值

說(shuō)明：

text-transform屬性取值

屬性值	說(shuō)明
none	無(wú)轉(zhuǎn)換（默認(rèn)值）
uppercase	轉(zhuǎn)換為大寫
lowercase	轉(zhuǎn)換為小寫
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 行高

語(yǔ)法：

line-height: 取值;

說(shuō)明：

1、取值可以是一個(gè)固定的數(shù)值（比如24px），也可以是一個(gè)百分?jǐn)?shù)（比如150%）

line-height: 150%;

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

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

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

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

行高的設(shè)置要大于字體大小的設(shè)置，才會(huì)顯得好看

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

4.6 間距

字間距

語(yǔ)法：

letter-spacing: 像素值

說(shuō)明：

letter-spacing屬性用來(lái)設(shè)置兩個(gè)字之間的距離，一個(gè)英文字母或漢字都是當(dāng)做一個(gè)字來(lái)處理

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

詞間距

語(yǔ)法：

word-spacing: 像素值;

說(shuō)明：

word-spacing屬性用來(lái)設(shè)置英文單詞之間的距離

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

5 邊框樣式

元素基本可以定義邊框，邊框樣式由邊框?qū)挾取⑦吙蛲庥^和邊框顏色三個(gè)屬性組成。

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

5.1 邊框的寬度

語(yǔ)法：

border-width: 像素值;

說(shuō)明：

邊框border-width屬性值是一個(gè)像素值

5.2 邊框的外觀

語(yǔ)法：

border-style: 取值;

說(shuō)明：

border-style取值有三個(gè)

屬性值	說(shuō)明
none	無(wú)樣式
dashed	虛線
solid	實(shí)線

5.3 邊框的顏色

語(yǔ)法：

border-color: 顏色關(guān)鍵字/16進(jìn)制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 邊框樣式簡(jiǎn)寫

語(yǔ)法：

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

案例：

div {
    border: 1px solid red;
}

5.5 邊框局部樣式

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

<!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 列表項(xiàng)符號(hào)

定義列表項(xiàng)符號(hào)

在HTML中，無(wú)序列表和有序列表是通過(guò)標(biāo)簽ul、ol的type屬性來(lái)定義的

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

接觸了css后，得改成list-style-type屬性來(lái)定義。HTML專心負(fù)責(zé)結(jié)構(gòu)，CSS專心負(fù)責(zé)樣式。

語(yǔ)法：

list-style-type: 取值;

說(shuō)明：

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

屬性值	說(shuō)明
decimal	阿拉伯?dāng)?shù)字：1、2、3…（默認(rèn)值）
lower-roman	小寫羅馬數(shù)字：i、ii、iii…
upper-roman	大寫羅馬數(shù)字：I、II、III…
lower-alpha	小寫英文字母：a、b、c…
upper-alpha	大寫英文字母：A、B、C…

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

屬性值	說(shuō)明
disc	實(shí)心圓●（默認(rèn)值）
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>

去除列表項(xiàng)符號(hào)

隨著技術(shù)和審美不斷的提高，實(shí)際開(kāi)發(fā)中都是直接去除列表項(xiàng)符號(hào)

<!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>

有序列表或無(wú)序列表設(shè)置了list-style-type: none后，樣式都一樣了。

6.2 列表項(xiàng)圖片

語(yǔ)法：

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不能控制圖片大小，實(shí)際開(kāi)發(fā)中用background來(lái)替代

7 表格樣式

7.1 表格標(biāo)題位置

語(yǔ)法：

caption-side: 取值;

說(shuō)明：

caption-side屬性取值

屬性值	說(shuō)明
top	標(biāo)題在頂部（默認(rèn)值）
bottom	標(biāo)題在底部

<!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>學(xué)生成績(jī)</caption>
        <tr>
            <th>姓名</th>
            <th>數(shù)學(xué)</th>
        </tr>
        <tr>
            <td>曹操</td>
            <td>85</td>
        </tr>
        <tr>
            <td>劉備</td>
            <td>75</td>
        </tr>
    </table>
</body>
</html>

7.2 表格邊框合并

語(yǔ)法：

border-collapse: 取值;

說(shuō)明：

border-collapse屬性取值

屬性值	說(shuō)明
separate	邊框分開(kāi)，有空隙（默認(rèn)值）
collapse	邊框合并，無(wú)空隙

<!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>學(xué)生成績(jī)</caption>
        <tr>
            <th>姓名</th>
            <th>數(shù)學(xué)</th>
        </tr>
        <tr>
            <td>曹操</td>
            <td>85</td>
        </tr>
        <tr>
            <td>劉備</td>
            <td>75</td>
        </tr>
    </table>
</body>
</html>

7.3 表格邊框間距

語(yǔ)法：

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>學(xué)生成績(jī)</caption>
        <tr>
            <th>姓名</th>
            <th>數(shù)學(xué)</th>
        </tr>
        <tr>
            <td>曹操</td>
            <td>85</td>
        </tr>
        <tr>
            <td>劉備</td>
            <td>75</td>
        </tr>
    </table>
</body>
</html>

8 圖片樣式

8.1 圖片大小

語(yǔ)法：

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 圖片邊框

語(yǔ)法:

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 圖片對(duì)齊

水平對(duì)齊

語(yǔ)法：

text-align: 取值;

說(shuō)明：

text-align屬性取值

屬性值	說(shuō)明
left	左對(duì)齊（默認(rèn)值）
center	居中對(duì)齊
right	右對(duì)齊

<!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>

圖片的水平對(duì)齊屬性設(shè)置是在圖片標(biāo)簽的父標(biāo)簽上實(shí)現(xiàn)的

垂直對(duì)齊

語(yǔ)法：

vertical-align: 取值;

說(shuō)明：

vertical-align屬性取值

屬性值	說(shuō)明
top	頂部對(duì)齊
middle	中部對(duì)齊
baseline	基線對(duì)齊
bottom	底部對(duì)齊

<!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 文字環(huán)繞

語(yǔ)法：

float: 取值;

說(shuō)明：

float屬性取值

屬性值	說(shuō)明
left	元素向左浮動(dòng)
right	元素向右浮動(dòng)

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

9 背景樣式

9.1 背景顏色

語(yǔ)法：

background-color: 顏色值;

說(shuō)明：

顏色值有兩種表示方式，一種是顏色關(guān)鍵字，另外一種是16進(jìn)制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 背景圖片

引入背景圖片

語(yǔ)法:

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>

背景圖片重復(fù)

語(yǔ)法：

background-repeat: 取值;

說(shuō)明：

background-repeat屬性取值

屬性值	說(shuō)明
repeat	在水平方向和垂直方向上同時(shí)平鋪（默認(rèn)值）
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>

背景圖片位置

語(yǔ)法：

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

通過(guò)像素值定圖片位置

<!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>

通過(guò)關(guān)鍵字定位圖片位置

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

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

通過(guò)水平方向、垂直方向組合出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>

背景圖片固定

語(yǔ)法：

background-attachment: 取值;

說(shuō)明：

background-attachment屬性取值

屬性值	說(shuō)明
scroll	隨元素一起滾動(dòng)（默認(rèn)值）
fixed	固定不動(dòng)

10 超鏈接樣式

語(yǔ)法：

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

說(shuō)明：

偽類	說(shuō)明
a:link	a元素未訪問(wèn)時(shí)的樣式
a:visited	a元素訪問(wèn)后的樣式
a:hover	鼠標(biāo)經(jīng)過(guò)a元素時(shí)的樣式
a:active	鼠標(biāo)點(diǎn)擊時(shí)的樣式

<!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>

實(shí)際開(kāi)發(fā)，一般設(shè)置a、a:hover樣式就可以了

11 盒子模型

每一個(gè)元素都是由內(nèi)容區(qū)、內(nèi)邊距、邊框、外邊距組成

屬性	說(shuō)明
content	內(nèi)容區(qū)，可以是文本或圖片
padding	內(nèi)邊距，用于定義內(nèi)容與邊框之間的距離
border	邊框，用于定義元素的邊框
margin	外邊距，用于定義當(dāng)前元素與其他元素之間的距離

11.1 內(nèi)容區(qū)

語(yǔ)法：

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

說(shuō)明：

overflow屬性值

屬性值	說(shuō)明
visible	默認(rèn)值。內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。
hidden	內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見(jiàn)的。
scroll	內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。
auto	如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。
inherit	規(guī)定應(yīng)該從父元素繼承 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>舜發(fā)于畎畝之中，傅說(shuō)舉于版筑之間，膠鬲舉于魚(yú)鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動(dòng)心忍性，曾益其所不能。</p>
</body>
</html>

如果要給行內(nèi)元素設(shè)置寬高，則需要給元素設(shè)置display: inline-block屬性

11.2 內(nèi)邊距

語(yǔ)法：

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>舜發(fā)于畎畝之中，傅說(shuō)舉于版筑之間，膠鬲舉于魚(yú)鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動(dòng)心忍性，曾益其所不能。</p>
</body>
</html>

11.3 邊框

邊框知識(shí)參考2.6

11.4 外邊距

語(yǔ)法：

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>舜發(fā)于畎畝之中，傅說(shuō)舉于版筑之間，膠鬲舉于魚(yú)鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動(dòng)心忍性，曾益其所不能。</p>
<p>舜發(fā)于畎畝之中，傅說(shuō)舉于版筑之間，膠鬲舉于魚(yú)鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動(dòng)心忍性，曾益其所不能。</p>
</body>
</html>

12 浮動(dòng)布局

正常文檔流就是我們沒(méi)有使用浮動(dòng)或者定位去改變的默認(rèn)情況，按照從上到下，從左到右順序的元素布局情況。

12.1 定義浮動(dòng)

語(yǔ)法：

float: 取值

說(shuō)明：

屬性值	說(shuō)明
left	元素向左浮動(dòng)
right	元素向右浮動(dòng)

<!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 清除浮動(dòng)

語(yǔ)法：

clear: 取值;

說(shuō)明：

clear屬性值

屬性值	說(shuō)明
left	清除左浮動(dòng)
right	清除右浮動(dòng)
both	同時(shí)清除左浮動(dòng)和右浮動(dòng)

<!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 固定定位

語(yǔ)法：

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>內(nèi)容區(qū)</p>
            ......
        </div>
    </div>
</body>
</html>

13.2 相對(duì)定位

相對(duì)定位，指的是該元素的位置是相對(duì)于它的原始位置計(jì)算而來(lái)的

語(yǔ)法：

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 絕對(duì)定位

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

語(yǔ)法：

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 靜態(tài)定位

用法：

position: static;

說(shuō)明：

元素position屬性的默認(rèn)值是static

言

乎上出現(xiàn)了一個(gè)問(wèn)題：為什么網(wǎng)上的文章越來(lái)越少采用首行縮進(jìn)了？這個(gè)問(wèn)題，恰好與我現(xiàn)在的工作有些關(guān)系。

我們的行為，是受外部條件制約的，時(shí)間長(zhǎng)了，就慢慢形成習(xí)慣習(xí)俗了。現(xiàn)在網(wǎng)絡(luò)文章不首行縮進(jìn)，根本原因也是如此。

在知乎的答案中，很多答案說(shuō)首行縮進(jìn)的產(chǎn)生是印刷品或紙張為了方便排版和節(jié)用紙，使用首行縮進(jìn)方式進(jìn)行排版，方便讀者閱讀。在互聯(lián)網(wǎng)上，節(jié)約紙張的需求從根本上就不存在了,以段落劃分，是更自然的行為。清晰地段落劃分已足夠滿足讀者的閱讀需求。

相關(guān)答主從紙張排版上分析紙本上為什么需要首行縮進(jìn)，分析的很到位。

在數(shù)字時(shí)代，換行區(qū)分段落實(shí)際上是有很深的技術(shù)根源。從技術(shù)角度，首行不縮進(jìn)的顯示要比首行縮進(jìn)顯示技術(shù)實(shí)現(xiàn)要容易太多了。

在web技術(shù)剛誕生的時(shí)候，完全沒(méi)有提供豐富的排版功能，只能簡(jiǎn)單的顯示文本。網(wǎng)頁(yè)排版的CSS技術(shù)、圖片音視頻等功能，都是在技術(shù)進(jìn)步中逐步增加的。即使技術(shù)發(fā)展到了現(xiàn)在，對(duì)網(wǎng)頁(yè)內(nèi)容進(jìn)行美觀排版，依然不是一件容易的事情。

網(wǎng)絡(luò)上的文章，大多都是用戶通過(guò)富文本編輯器創(chuàng)作出來(lái)的。首行縮進(jìn)在富文本編輯器中要實(shí)現(xiàn)完美，有極大的難度。以頭條文章創(chuàng)作的這個(gè)編輯器而言，首行縮進(jìn)功能已經(jīng)被深深藏進(jìn)了隱藏菜單里面。

從技術(shù)上實(shí)現(xiàn)自動(dòng)首行縮進(jìn)，難度很大，不是每一個(gè)技術(shù)人員都能順利實(shí)現(xiàn)的。手動(dòng)一行行進(jìn)行縮進(jìn)，這也讓創(chuàng)作者感覺(jué)過(guò)于麻煩了。

出于技術(shù)上的難點(diǎn)，用戶可以接觸到的絕大部分富文本編輯器，都沒(méi)有提供方便的首行縮進(jìn)功能。在這樣的技術(shù)條件下，使用者都逐漸習(xí)慣了沒(méi)有首行縮進(jìn)的文章。

等完全數(shù)字化一代成長(zhǎng)起來(lái)，或許會(huì)困惑：為什么之前的書本上會(huì)有首行縮進(jìn)。

在線咨詢

上一篇：HTML5源碼庫(kù) 用JS制作逼真花瓣飄落前端特效源碼
下一篇：css reset 標(biāo)簽屬性默認(rèn)值

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

零基礎(chǔ)入門前端CSS知識(shí)整理

1 CSS樣式引入方式

1.1 外部樣式

1.2 內(nèi)部樣式

1.3 行內(nèi)樣式

2 基礎(chǔ)選擇器

2.1 元素選擇器

2.2 類選擇器

2.3 id選擇器

2.4 通配符選擇器

2.5 后代選擇器

2.6 群組選擇器

3 字體樣式

3.1 字體類型

3.2 字體大小

3.3 字體粗細(xì)

3.4 字體風(fēng)格

3.5 字體顏色

4 文本樣式

4.1 首行縮進(jìn)

4.2 水平對(duì)齊

4.3 文本修飾

4.4 大小寫轉(zhuǎn)換

4.5 行高

4.6 間距

5 邊框樣式

5.1 邊框的寬度

5.2 邊框的外觀

5.3 邊框的顏色

5.4 邊框樣式簡(jiǎn)寫

5.5 邊框局部樣式

6 列表樣式

6.1 列表項(xiàng)符號(hào)

6.2 列表項(xiàng)圖片

7 表格樣式

7.1 表格標(biāo)題位置

7.2 表格邊框合并

7.3 表格邊框間距

8 圖片樣式

8.1 圖片大小

8.2 圖片邊框

8.3 圖片對(duì)齊

8.4 文字環(huán)繞

9 背景樣式

9.1 背景顏色

9.2 背景圖片

10 超鏈接樣式

11 盒子模型

11.1 內(nèi)容區(qū)

11.2 內(nèi)邊距

11.3 邊框

11.4 外邊距

12 浮動(dòng)布局

12.1 定義浮動(dòng)

12.2 清除浮動(dòng)

13 定位布局

13.1 固定定位

13.2 相對(duì)定位

13.3 絕對(duì)定位

13.4 靜態(tài)定位

您的項(xiàng)目需求