摘要：在每個元素后面插入藍(lán)色的選擇器選擇器向選定的元素之前插入內(nèi)容。具體的選擇器權(quán)重計(jì)算方式如下內(nèi)聯(lián)樣式選擇器類選擇器元素選擇器權(quán)重計(jì)算永不進(jìn)位。

CSS簡介

 css指的是層疊樣式表(Cascading Style Sheets).

CSS語法

CSS語法主要由兩個部分組成：選擇器和聲明(一條或多條聲明).

選擇器一般是自己需要改變樣式的HTML元素；每一條聲明包括屬性和屬性值，屬性和屬性值之間用冒號(: )分開，每個聲明后面用分號(;)結(jié)束.

CSS注釋

注釋是用來解釋你的代碼

CSS注釋：/*注釋內(nèi)容*/

CSS的幾種引入方式

1. 內(nèi)聯(lián)樣式

 內(nèi)聯(lián)樣式是在標(biāo)記的style屬性中設(shè)定css屬性。不推薦大規(guī)模使用。

<p style="margin: 20px">
blamekidd
p>

2. 內(nèi)部樣式表

 當(dāng)單個文檔需要特殊的樣式的時候，可以考慮使用內(nèi)部樣式表。

使用

2. Text(文本)

2.1 文本對齊：text-align

text-align屬性規(guī)定元素中的文本的水平對齊方式

div {
    text-align: center;
}

2.2 文本修飾：text-decoration

text-decoration屬性用來給文本添加特殊效果。

主要是用來刪除鏈接的下劃線。不建議強(qiáng)調(diào)指出不是鏈接的文本，因?yàn)檫@常常混淆用戶。

a {
    text-decoration: none;
}

其他屬性值：

underline：定義文本下的一條線。

overline：定義文本上的一條線。

line-through：定義穿過文本下的一條線。

2.3 文本顏色：color

顏色屬性用來設(shè)置文本的顏色。

h1 {
    color: red;
}

2.4 文本縮進(jìn)：text-indent

text-indent屬性用來指定文本的第一行的縮進(jìn)。

/*將段落的第一行縮進(jìn)32像素*/
p {
    text-indent: 32px;
}

3. Fonts(字體)

3.1 設(shè)置字體系列：font-family

 font-family屬性用于設(shè)置文本的字體系列

font-family可以把多個字體名稱作為一個“回退”系統(tǒng)來保存。如果瀏覽器不支持第一個字體，則會嘗試下一個。瀏覽器會使用它可以識別的第一個值。

簡單實(shí)例：

body {
    font-family: "Microsoft Yahei", "微軟雅黑", "sans-serif";
}

3.2 設(shè)置字體大小：font-size

font-size屬性設(shè)置字體的大小。

p {
    font-size: 10px;
}

3.3 設(shè)置字體粗細(xì)：font-weight

font-weight屬性設(shè)置字體的粗細(xì) 

4. 尺寸

width屬性可以設(shè)置元素的寬度。塊級標(biāo)簽才能設(shè)置寬度，內(nèi)斂標(biāo)簽的寬度由內(nèi)容來決定.

height屬性可以設(shè)置元素的高度

所有CSS尺寸屬性：

5. Border(邊框)

邊框?qū)傩裕?/h4>

border-width: 用于為元素的所有邊框設(shè)置寬度，或者多帶帶地為各邊邊框設(shè)置寬度。

border-style: 用于設(shè)置元素所有邊框的樣式，或者多帶帶地為各邊設(shè)置邊框樣式。

border-color: 設(shè)置元素的所有邊框中可見部分的顏色，或?yàn)?4 個邊分別設(shè)置顏色。

#b1 {
    border-width: 2px;
    border-style: solid;
    border-color: red;
}

一般使用簡寫形式：

#b1 {
    border: 2px solid red;
}

邊框樣式：

border-style屬性用來定義邊框的樣式

border-style的值：

除了可以統(tǒng)一設(shè)置邊框，還可以多帶帶為某一個邊框設(shè)置樣式：

#d1 {
    border-top-style: solid;
    border-bottom-style: inset;
    border-top-style: red;
}

border-radius

用這個屬性可以實(shí)現(xiàn)圓角邊框的效果，圓形的頭像框。

將border-radius設(shè)置為長或高的一半，border-radius: 50%;

6. Display(顯示)

display屬性控制一個元素應(yīng)該怎么顯示 。

display的值：

注意：

display屬性設(shè)置一個元素應(yīng)該怎么顯示，
visibility屬性指定一個元素是可見的還是隱藏的。
區(qū)別：
display: none -- 隱藏一個元素，且隱藏的元素不會占有任何空間。
visibility: hidden -- 隱藏一個元素，但是隱藏的元素仍然占用與未隱藏之前一樣的空間。
也就是說該元素雖然被隱藏了，但是仍然會影響布局。

7. CSS盒子模型

所有 HTML模型都可以看作盒子。它包括 外邊距、邊框、內(nèi)邊距、實(shí)際內(nèi)容。

說明：

margin(外邊距)：用于控制元素與元素之間的距離。margin最基本的用途就是控制元素周圍空間的間隔，從視覺角度上達(dá)到相互隔開的目的。外邊距是透明的。

border(邊框)：圍繞在內(nèi)邊距和內(nèi)容外的邊框。

padding(內(nèi)邊距)：用于控制內(nèi)容和邊框之間的距離，內(nèi)邊距是透明的。

content(實(shí)際內(nèi)容)：盒子的內(nèi)容，主要用來顯示文本和圖像

8. Margin(外邊距)

它接受任何長度單位、百分?jǐn)?shù)值以及負(fù)數(shù)。

margin屬性的值：

.margin-text {
    margin-top: 20px;
    margin-right: 30px;
    margin-bottom: 40px;
    margin-left: 50px;
}

當(dāng)使用簡寫時：
margin: 20px 30px 40px 50px;
順序?yàn)椋荷?右 下 左
-----------------------------------------
margin: 20px 30px 40px;
順序?yàn)椋荷?左右 下
-----------------------------------------
margin: 20px 30px;
順序?yàn)椋荷舷?左右

/* 常見居中 */
.mycenter {
    margin: 0 auto;
}

9. Padding(內(nèi)邊距、填充) 

元素的內(nèi)邊距指的是在邊框和內(nèi)容之間。

.padding-text {
    padding-top: 20px;
    padding-right: 30px;
    padding-bottom: 40px;
    padding-left: 50px;
}

/* 當(dāng)使用簡寫時，順序和margin一樣 */


padding: 20px 30px 40px 50px;
順序?yàn)椋荷?右 下 左
/* ---------------------------------------- */

padding: 20px 30px 40px
順序?yàn)椋荷?左右 下
/* ---------------------------------------- */


padding: 20px 30px;
順序?yàn)椋荷舷?左右

10. Float(浮動)

在CSS中，任何元素都可以浮動。浮動元素會生成一個塊級框，無論它是何種元素。

浮動的特點(diǎn)：

float會使元素向左或者向右移動，浮動元素之后的元素將圍繞它；浮動元素之前的元素將不會受到影響。

一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框?yàn)橹埂?/p>

元素設(shè)置水平方向浮動，意味著元素只能左右移動而不能上下移動。

三種取值：

left：向左浮動

right：向右浮動

none：默認(rèn)值，不浮動

更多詳細(xì)介紹

11. Clear(清除浮動)

clear屬性指定元素的某一側(cè)不能有浮動元素。

元素浮動之后，周圍的元素會重新排列，為了避免這種情況，可以使用clear屬性。

注意：clear只會對自身起作用，不會影響其他元素。

清除浮動的副作用：

主要有三種方式：

    1. 固定高度

    2. 偽元素清除法

    3. overflow: hidden

其中，偽元素清除法使用較多：

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

12. Overflow(溢出)

overflow 屬性可以控制內(nèi)容溢出元素框時在對應(yīng)的元素區(qū)間內(nèi)如何顯示。

overflow: 水平垂直都設(shè)置

overflow-x: 設(shè)置水平方向

overflow-y: 設(shè)置垂直方向

圓形頭像示例

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>圓形頭像title>
    <style>
        body {
            margin: 0;
        }

        .ava {
            width: 200px;
            height: 200px;
            border: 2px solid white;
            border-radius: 50%;
            overflow: hidden;
        }
        .ava>img {
            max-width: 100%;
        }
    style>
head>
<body>

<div class="ava">
    <img src="http://img3.duitang.com/uploads/item/201506/30/20150630195944_VJhkw.thumb.700_0.jpeg" alt="">
div>

body>
html>

13. Position(定位) 

position屬性指定了元素的定位類型。

13.1 static定位

    默認(rèn)值，沒有定位

13.2 fixed定位

    固定。元素的位置相對于瀏覽器的窗口是固定位置。即使窗口滾動它也不會移動。

    fixed的定位使元素位置與文檔流無關(guān)，所以不占據(jù)空間。

    fixed定位的元素會和其它元素重疊。

    在理論上，被設(shè)置為fixed的元素會被定位于瀏覽器窗口的一個指定坐標(biāo)，不論窗口是否滾動，它都會固定在這個位置。

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        body {
            margin: 0;
        }

        .c1 {
            height: 1500px;
            background-color: rgba(0, 0, 0, 0.3);
        }

        .back-top {
            text-align: center;
            background-color: bisque;
            padding: 10px;
            position: fixed;
            right: 10px;
            bottom: 20px;
        }
    style>
head>
<body>

<div class="c1">123div>
<div class="back-top">返回頂部div>

body>
html>

13.3 relative定位

    相對定位。相對定位是相對于該元素在文檔流中的原始位置，即以自己原始位置為參照物。但是，即使設(shè)定了元素的相對定位以及偏移值，元素還占有著原來的位置，即占據(jù)文檔流空間。

    注意：position：relative的一個主要用法：方便絕對定位元素找到參照物。

13.4 absolute定位

    絕對定位。絕對定位的元素的位置相對于最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對于。

    元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

    重點(diǎn)：如果父級設(shè)置了position屬性，例如position:relative;，那么子元素就會以父級的左上角為原始點(diǎn)進(jìn)行定位。這樣能很好的解決自適應(yīng)網(wǎng)站的標(biāo)簽偏離問題，即父級為自適應(yīng)的，那我子元素就設(shè)置position:absolute;父元素設(shè)置position:relative;，然后Top、Right、Bottom、Left用百分比寬度表示。

14. z-index

#d1 {
    z-index: 999;
}

設(shè)置對象的層疊順序。

1. z-index 值表示誰壓著誰，數(shù)值大的壓蓋住數(shù)值小的，
2. 只有定位了的元素，才能有z-index,也就是說，不管相對定位，絕對定位，固定定位，都可以使用z-index，而浮動元素不能使用z-index
3. z-index值沒有單位，就是一個正整數(shù)，默認(rèn)的z-index值為0如果大家都沒有z-index值，或者z-index值一樣，那么誰寫在HTML后面，誰在上面壓著別人，定位了元素，永遠(yuǎn)壓住沒有定位的元素。

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>自定義模態(tài)框title>
    <style>
        .modal {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.3);
            z-index: 99;
        }
        .cover {
            position: absolute;
            width: 700px;
            height: 380px;
            background-color: white;
            top: 50%;
            left: 50%;
            margin-top: -190px;
            margin-left: -350px;
            z-index: 100;
        }
    style>
head>
<body>
<div class="modal">div>
<div class="cover">div>

body>
html>

15. opacity(不透明度)

opacity屬性用來定義透明效果。取值范圍是0~1,0是完全透明，1是完全不透明

div {
    opacity: 0.5;
}

頂部導(dǎo)航菜單示例

DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>li標(biāo)簽的float示例title>
  <style>
    /*清除瀏覽器默認(rèn)外邊距和內(nèi)填充*/
    * {
      margin: 0;
      padding: 0;
    }
    a {
      text-decoration: none; /*