一、CSS簡介

CSS：層疊樣式表(英文全稱：Cascading Style Sheets)：是一種用來表現(xiàn)HTML樣式的計算機(jī)語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進(jìn)行格式化。

二、CSS選擇器

2.1基本選擇器（三種）

1.標(biāo)簽選擇器

<style>
    p {
        font-size:20px;
    }
</style>

2.類選擇器（不唯一，用.）

<style>
    .one {
        font-size:20px;
    }
</style>
<p class="one">這是一個p標(biāo)簽</p>

3.id選擇器（唯一，一個網(wǎng)頁只能出現(xiàn)一次，用#）

<style>
    #one {
        font-size:20px;
    }
</style>
<p id="one">這是一個p標(biāo)簽</p>

2.2層次選擇器

1.后代選擇器

下面div中的全部p中都會字體變大，div外的p則不會

<style>
    div p {
        font-size:20px;
    }
</style>
<div>
    <p>這是div里的p標(biāo)簽</p>
    <p>這是div里的p標(biāo)簽</p>
</div>
<p>這是p標(biāo)簽</p>

2.子選擇器

只能找到前兩個p無法再找到里面的p

<style>
    div > p {
        font-size: 20px;
    }
</style>
<div>
    <p>這是div里的p標(biāo)簽</p>
    <p>這是div里的p標(biāo)簽</p>
    <ul>
        <li><p>這是div里的p標(biāo)簽</p></li>
    </ul>
</div>
<p>這是p標(biāo)簽</p>

3.兄弟選擇器

相鄰兄弟選擇器：找一個元素下邊的第一個兄弟元素，操作符是+號
所有兄弟選擇器：找一個元素下邊所有兄弟元素，操作符是~號

<style>
    /*第2，4，5，7的p會放大字體，因?yàn)樗麄兩厦孢€有個p，第三個p沒有放大是因?yàn)楸籬3中斷了導(dǎo)致上面并不是p*/
    p + p {
        font-size: 20px;
    }
</style>
<div>
    <p>這是div里的p標(biāo)簽</p>
    <p>放大</p>
    <h3>斷開</h3>
    <p>這是div里的p標(biāo)簽</p>
    <p>放大</p>
    <p>放大</p>
</div>
<p>這是p標(biāo)簽</p>
<p>放大</p>

<style>
    /*跟他同級的不含它本身*/
    p ~ p {
        font-size: 20px;
    }
</style>
<div>
    <p>這是div里的p標(biāo)簽</p>
    <p>放大</p>
    <h3>斷開</h3>
    <p>放大</p>
    <p>放大</p>
    <p>放大</p>
</div>
<p>這是p標(biāo)簽</p>
<p>放大</p>

4.群組選擇器

前三個p中字體都變大了

<style>
    div > p,li > p {
        font-size: 20px;
    }
</style>
<div>
    <p>這是div里的p標(biāo)簽</p>
    <p>這是div里的p標(biāo)簽</p>
    <ul>
        <li><p>這是div里的p標(biāo)簽</p></li>
    </ul>
</div>
<p>這是p標(biāo)簽</p>

2.3偽類選擇器

1.:first-of-type：選擇一組子元素中的第一個（即使有其他子元素，也不會受到影響）

<style>
    div p:first-of-type{
        color: red;
    }
</style>
<div>
    <p>one</p>
    <p>two</p>
    <p>three</p>
</div>

2.:last-of-type：選擇一組子元素中的最后一個（即使有其他子元素，也不會受到影響）

<style>
    div p:last-of-type {
        color: red;
    }
</style>
<div>
    <p>one</p>
    <p>two</p>
    <p>three</p>
</div>

3.:nth-of-type()：使用索引來選擇某一個子元素（即使有其他子元素，也不會受到影響）

<style>
    div p:nth-of-type(2){
        color: red;
    }
</style>
<div>
    <p>one</p>
    <p>two</p>
    <p>three</p>
</div>

三、CSS引入方式

• 行內(nèi)樣式
• 內(nèi)部樣式
• 外部樣式

3.1行內(nèi)樣式

只對寫入本標(biāo)簽生效，多個用,隔開

<p style="color: orange;font-size:23px;">行內(nèi)樣式</p>

3.2內(nèi)部樣式

可以參考上面第二模塊部分

<style>
    div p:nth-of-type(2){
        color: red;
    }
</style>
<div>
    <p>one</p>
    <p>two</p>
    <p>three</p>
</div>

3.3外部樣式

要單獨(dú)寫一個.css文件，并且要在html頁面中導(dǎo)入，在head中添加

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

四、CSS優(yōu)先級

4.1基本規(guī)則

• 從引用方式方面來說：行內(nèi)樣式 > 內(nèi)嵌樣式/外部樣式

• 從選擇器方面來說：ID 選擇器 > 類選擇器（屬性選擇器、偽類選擇器） > 標(biāo)簽選擇器

4.2疊加時的優(yōu)先級

• 就近原則：距離最近的樣式有效。
• 順序原則：這里的順序是指的書寫順序，也就是最后書寫(不是調(diào)用)的樣式有效。
• 精細(xì)原則：或者叫特殊原則。既選擇器的指向越精細(xì)越優(yōu)先。

五、CSS中的顏色

這里僅僅寫了我常用的，更多的讀者可以進(jìn)一步查詢?nèi)纾篐SL、HSLA

5.1直接使用顏色英文單詞

red、green、orange、blue...

5.2使用十六進(jìn)制表示

//前兩位紅，中間兩位綠，后面兩位藍(lán)
通常是6位
#99CCFF
也可以簡寫為3位
#9CF

5.3RGB與RGBA

//RGB由三部分組成
//第一位紅，第二位綠，第三位藍(lán)(范圍0-255)
RGB(255,0,0);

//RGBA由四部分組成，最后一位用于加透明度
//最后一位(范圍(0-1),0完全透明,1完全不透明
RGBA(255,0,0,0.6);

六、常用樣式

6.1字體樣式

6.2文本樣式

6.3尺寸樣式

6.4列表樣式

6.5背景樣式

6.6鼠標(biāo)樣式

6.7偽類樣式

這個順序不能變從上到下lvha文章來源地址http://www.zghlxwxcb.cn/news/detail-748489.html

6.8透明度樣式

到了這里，關(guān)于CSS簡介及常用樣式的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！