.CSS 介紹

CSS 可以對(duì)網(wǎng)頁（html）進(jìn)行修飾,美化，改變字體大小顏色，間距和加入邊框等。

1.使用方法

（1）直接寫在標(biāo)簽里（行列樣式）

<p style="color: blue;font-size: 2px">我是天才</p>

（2）寫在 style 標(biāo)簽內(nèi)（內(nèi)部樣式）

將 style 寫在 head 內(nèi)

<style>
        span {
            color:gold;
            font-size: 24px;
        }
    </style>

（3）使用外部 .css 文件（外部樣式）

<link rel="stylesheet" href="css_1.css">

再創(chuàng)建一個(gè) css 路徑，保存字體顏色

span {
    color:skyblue;
}

（4）使用方式的優(yōu)先級(jí)

行列樣式 > 內(nèi)部樣式=外部樣式

而內(nèi)部樣式和外部樣式采用就近原則，誰離得近就采用哪種方法

二.CSS 選擇器

1.簡(jiǎn)單選擇器

（1）標(biāo)簽選擇器

在樣式前加上標(biāo)簽

 p {
        color:blue;
    }

（2）id 選擇器（ id 是唯一的）

給標(biāo)簽命名，并在樣式前加上 #

<p id="p2">五一去哪玩</p>

#p2 {
       color:green;
    }

（3）class 選擇器（ class 不是唯一的）

先將標(biāo)簽賦予 class 后，再在樣式前加上 .

<p class="p3">五一去哪玩</p>
<p class="p3">五一去哪玩</p>

.p3 {
        color:red;
    }

（4）全選選擇器（*）

樣式前加 *

* {
        font-size: 24px;
   }

注：選擇器都是在 head 中的 style 中

2.復(fù)雜選擇器

<div id="box">
    <p> 晚上去玩 </p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            晚上去玩 </p>
    <p id="p1">
        不然就睡覺
        <span>
            打王者
        </span>
    </p>
    <p> 晚上去玩 </p>
    <p> 晚上去玩 </p>
    <span>
        我是結(jié)尾
    </span>

</div>
<p name="p2">我是結(jié)尾</p>

（1）群組選擇器（逗號(hào)）

可以同時(shí)使用 id ，class 等等多種選擇器，只需在中間加上逗號(hào)

<style>
        div,p {
            color:yellow;
        }
</style>

（2）子代選擇器（>）

子代就是盒子里的 p,p,span 標(biāo)簽

div>span {
            color:red;
        }

對(duì)盒子里的子代進(jìn)行修改，美化

（3）后代選擇器（空格）

后代是指 div 盒子中的所有后代

div span {
            color:yellow;
        }

（4）兄弟選擇器（~）

兄弟選擇器是指 id 為 p1 的 p 標(biāo)簽兄弟，而代碼從上往下執(zhí)行，所以只會(huì)讓在下面的字體顏色改變

#p1 ~ p {
            color:pink;
        }

（5）相鄰選擇器（+）

只會(huì)改變代碼以下字體的樣式

#p1 + p {
            color:purple;
        }

（6）屬性選擇器（【】）

 p[name="p2"] {
            color:blue;
        }

3.偽類選擇器

（1）未訪問時(shí)的狀態(tài)（link）

a:link {
            color:yellow;
        }

（2）鼠標(biāo)懸浮時(shí)的狀態(tài)（hover）

a:hover {
            color:blue;
        }

（3）鼠標(biāo)激活時(shí)狀態(tài)（active）

a:active {
            color:green;
        }

（4）訪問過后的狀態(tài)（visited）

a:visited {
            color:red;
        }

三.CSS 字體，文本和背景

1.字體樣式

（1）字體大小（font-size）

p {
      /*字體大小*/
      font-size: 24px;
  }

（2）加粗（font-weight）

font-weight: bold;

或

font-weight:700;

（3）斜體（font-styl）

font-style: italic;

（4）字體（font-famil）

font-family: 楷體;

（5）字母大小寫（font-variant）

font-variant: all-small-caps;

（6）復(fù)合樣式

一次性將需要改變的進(jìn)行改變（需要就寫，不需要就不用寫），且格式有所規(guī)定，

字體樣式-字體加粗-字體大小-字體類型

font: italic bold 24px '宋體';

2.文本樣式

（1）對(duì)齊方式（text-align）

text-align: center;

（2）首行縮進(jìn)（text-indent）

text-indent: 2em;

（3）下劃線（text-decoration）

text-decoration: underline;

（4）刪除線（text-decoration）

text-decoration: line-through;

（5）字體間距（letter-spacing）

letter-spacing: 10px;

（6）詞距（word-spacing）

word-spacing: 10px;

（7）行高（line-height）

line-height: 20px;

3.背景樣式

（1）背景顏色（background-color）

background-color: blue;

（2）背景圖片（background-image）

background-image: url("../image/03.jpg");

（3）背景大小（background-size）

第一個(gè)表示寬度，第二個(gè)表示高度

background-size: 100px 50px;

（4）背景平鋪（background-repeat）

background-repeat:no-repeat ;

（5）背景定位（background-position）

background-position:center ;

（6）復(fù)合樣式（background）

規(guī)范順序?yàn)椋侯伾?背景圖 是否平鋪 定位 大小

background: skyblue url("../image/03.jpg") no-repeat center/100px 50px;

附（今日學(xué)習(xí)）：

簡(jiǎn)單選擇器：

復(fù)雜選擇器：

偽類選擇器：

字體樣式：

文本樣式：

背景：

lt;!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>vh / vw 與 字體圖標(biāo)</title>

<!-- 字體圖標(biāo)引用方法一 -->

<link rel="stylesheet" href="my_ico.css" />

<!-- 字體圖標(biāo)引用方法二 -->

<link rel="stylesheet" href="font_ico/iconfont.css">

<style>

/* 視口：可視窗口，手機(jī)端為了顯示全PC頁面，默認(rèn)為980px */

/* 布局視口，只頁面底層的設(shè)置，看不見 */

/* 視頻視口，只頁面上的設(shè)置，直觀可見 */

/* 完美視口，只頁面完美配置設(shè)備窗口大小1：1顯示 */

/* vh: 1vh=視口高度的 1 / 100 ，vh(view height) */

/* vh: 1vw=視口寬度的 1 / 100 ，vw(view width) */

.box {

background-color: seagreen;

width: 50vw;

height: 25vh;

margin: auto; /* 頁面盒子始終在頁面中間，高度無法實(shí)現(xiàn)居中 */

}

.iconfont2 {

color: seagreen;

font-size: 55px;

/* background-color: slateblue; */

}

.icon-auto{

color: rgb(255, 0, 212);

font-size: 55px;

}

</style>

</head>

<body>

<div class="box"></div>

<!-- 字體圖標(biāo)引用方法一 -->

<span class="iconfont2"></span>

<br><p></p>

<!-- 字體圖標(biāo)引用方法二 -->

<span class="iconfont icon-auto"></span>

</body>

</html>