CSS簡介及常用樣式

一、CSS簡介

CSS：層疊樣式表(英文全稱：Cascading Style Sheets)：是一種用來表現HTML樣式的電腦語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。

二、CSS選擇器

2.1基本選擇器（三種）

1.標簽選擇器

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

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

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

3.id選擇器（唯一，一個網頁只能出現一次，用#）

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

2.2層次選擇器

1.後代選擇器

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

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

2.子選擇器

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

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

3.兄弟選擇器

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

<style>
    /*第2，4，5，7的p會放大字體，因為他們上面還有個p，第三個p沒有放大是因為被h3中斷了導致上面並不是p*/
    p + p {
        font-size: 20px;
    }
</style>
<div>
    <p>這是div里的p標簽</p>
    <p>放大</p>
    <h3>斷開</h3>
    <p>這是div里的p標簽</p>
    <p>放大</p>
    <p>放大</p>
</div>
<p>這是p標簽</p>
<p>放大</p>

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

4.群組選擇器

前三個p中字體都變大了

<style>
    div > p,li > p {
        font-size: 20px;
    }
</style>
<div>
    <p>這是div里的p標簽</p>
    <p>這是div里的p標簽</p>
    <ul>
        <li><p>這是div里的p標簽</p></li>
    </ul>
</div>
<p>這是p標簽</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引入方式

• 行內樣式
• 內部樣式
• 外部樣式

3.1行內樣式

只對寫入本標簽生效，多個用,隔開

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

3.2內部樣式

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

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

3.3外部樣式

要單獨寫一個.css文件，並且要在html頁面中導入，在head中添加

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

四、CSS優先順序

4.1基本規則

• 從引用方式方面來說：行內樣式 > 內嵌樣式/外部樣式

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

4.2疊加時的優先順序

• 就近原則：距離最近的樣式有效。
• 順序原則：這裡的順序是指的書寫順序，也就是最後書寫(不是調用)的樣式有效。
• 精細原則：或者叫特殊原則。既選擇器的指向越精細越優先。

五、CSS中的顏色

這裡僅僅寫了我常用的，更多的讀者可以進一步查詢如：HSL、HSLA

5.1直接使用顏色英文單詞

red、green、orange、blue...

5.2使用十六進位表示

//前兩位紅，中間兩位綠，後面兩位藍
通常是6位
#99CCFF
也可以簡寫為3位
#9CF

5.3RGB與RGBA

//RGB由三部分組成
//第一位紅，第二位綠，第三位藍(範圍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滑鼠樣式

6.7偽類樣式

這個順序不能變從上到下lvha

6.8透明度樣式