.CSS 介紹

CSS 可以對網(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)先級

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

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

二.CSS 選擇器

1.簡單選擇器

（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;
        }

對盒子里的子代進(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）對齊方式（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í)）：

簡單選擇器：

復(fù)雜選擇器：

偽類選擇器：

字體樣式：

文本樣式：

背景：

在HTML中引入CSS的方法主要有四種：

1. 內(nèi)聯(lián)方式：直接在HTML標(biāo)簽中的style屬性中添加CSS，即采用行內(nèi)樣式。例如：<p style="color:red;">這是紅色文字</p>。這種方式的優(yōu)點(diǎn)是可以直接在HTML文件中看到效果，但缺點(diǎn)是不夠模塊化，不便于復(fù)用和維護(hù)。

2. 內(nèi)嵌樣式：使用<style>標(biāo)簽在HTML文檔頭部（<head>和<head>之間）定義CSS樣式。例如：

<head>

<style>

p {

color: red;

}

</style>

</head>

<body>

<p>這是紅色文字</p>

</body>

這種方式的優(yōu)點(diǎn)是可以將CSS樣式與HTML內(nèi)容分離，提高代碼可讀性，但同樣存在復(fù)用和維護(hù)的問題。

3. 鏈接式：使用<link>標(biāo)簽引入外部CSS樣式表文件。具體操作步驟如下：新建一個(gè)HTML文件和一個(gè)CSS文件，將新建的CSS文件保存在一個(gè)文件夾中，回到HTML文件中，在<title><title>下方添加<link>標(biāo)簽并設(shè)置其屬性為CSS文件的路徑，保存后便實(shí)現(xiàn)了引入外部CSS文件。這種方式的優(yōu)點(diǎn)是可以實(shí)現(xiàn)代碼的復(fù)用和維護(hù)，但需要提前準(zhǔn)備好CSS文件。

4. 導(dǎo)入式：使用@import命令導(dǎo)入外部CSS樣式表。例如：<style type="text/css"> @import"mystyle.css"; </style>。需要注意的是，這里的路徑需要是正確的。這種方式可以在同一個(gè)HTML文件中引入多個(gè)CSS文件，但瀏覽器對@import的支持程度不同，可能會(huì)出現(xiàn)兼容性問題。