CSS簡介

層疊樣式表
網(wǎng)頁實(shí)際上是一個(gè)多層的結(jié)構(gòu)境析，通過CSS可以分別為網(wǎng)頁的每一個(gè)層來設(shè)置樣式栅贴，而最終我們能看到只是網(wǎng)頁的最上邊一層
總之一句話擎场，CSS用來設(shè)置網(wǎng)頁中元素的樣式

如何使用CSS來修改元素的樣式

第一種方式(內(nèi)聯(lián)樣式犬性，行內(nèi)樣式)：

在標(biāo)簽內(nèi)部通過style屬性來設(shè)置元素的樣式
問題：
1.使用內(nèi)聯(lián)樣式拱燃，樣式只能對一個(gè)標(biāo)簽生效，
2.如果希望影響到多個(gè)元素必須在每一個(gè)元素中都復(fù)制一遍
3.并且當(dāng)樣式發(fā)生變化時(shí)伟骨，我們必須要一個(gè)一個(gè)的修改饮潦，非常的不方便
注意：開發(fā)時(shí)絕對不要使用內(nèi)聯(lián)樣式

<p style="color:red; font-size: 60px;">少小離家老大回，鄉(xiāng)音無改鬢毛衰</p>

第二種方式（內(nèi)部樣式表）

將樣式編寫到head中的style標(biāo)簽里携狭，然后通過CSS的選擇器來選中元素并為其設(shè)置各種樣式
優(yōu)點(diǎn):
1.可以同時(shí)為多個(gè)標(biāo)簽設(shè)置樣式继蜡，并且修改時(shí)只需要修改一處即可全部應(yīng)用
2.內(nèi)部樣式表更加方便對樣式進(jìn)行復(fù)用
問題：
1.內(nèi)部樣式表只能對一個(gè)網(wǎng)頁起作用，
2 它里邊的樣式不能跨頁面進(jìn)行復(fù)用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>內(nèi)部樣式表</title>
    <style>
      p {
        color: green;
        font-size: 50px;
      }
    </style>
  </head>
  <body>
    <p>落霞與孤鶩齊飛，秋水共長天一色</p>

    <p>少小離家老大回稀并，鄉(xiāng)音無改鬢毛衰</p>
  </body>
</html>

第三種方式（外部樣式表）最佳實(shí)踐

可以將CSS樣式編寫到一個(gè)外部的CSS文件中,然后通過link標(biāo)簽來引入外部的CSS文件
外部樣式表需要通過link標(biāo)簽進(jìn)行引入仅颇，意味著只要想使用這些樣式的網(wǎng)頁都可以對其進(jìn)行引用
使樣式可以在不同頁面之間進(jìn)行復(fù)用
將樣式編寫到外部的CSS文件中，可以使用到瀏覽器的緩存機(jī)制碘举，從而加快網(wǎng)頁的加載速度忘瓦，提高用戶的體驗(yàn)。
HTML文件：

<p>落霞與孤鶩齊飛引颈，秋水共長天一色</p>

     <p>少小離家老大回耕皮，鄉(xiāng)音無改鬢毛衰</p>
    
</body>
</html>

CSS文件(文件名style.css）

p{
    color: tomato;
    font-size: 50px;
}

CSS語法

CSS的基本語法:

選擇器聲明塊

選擇器:

通過選擇器可以選中頁面中的指定元素
比如 p的作用就是選中頁面中所有的p元素

聲明塊

通過聲明塊來指定要為元素設(shè)置的樣式
聲明塊由一個(gè)一個(gè)的聲明組成聲明是一個(gè)名值對結(jié)構(gòu)
一個(gè)樣式名對應(yīng)一個(gè)樣式值，名和值之間以:連接蝙场，以;結(jié)尾

p{
          color: red;
          font-size: 40px;
      }

CSS中的注釋

注釋的結(jié)構(gòu)

/*CSS注釋*/

注釋中的內(nèi)容會(huì)自動(dòng)被瀏覽器所忽略

CSS選擇器

元素選擇器

作用：根據(jù)標(biāo)簽名來選中指定的元素
語法：標(biāo)簽名{}
例子：p{} h1{} div{}

id選擇器

作用：根據(jù)元素的id屬性值選中一個(gè)元素
語法：#id屬性值{}
例子：#box{} #red{}

類選擇器

作用：根據(jù)元素的class屬性值選中一組元素
class 是一個(gè)標(biāo)簽的屬性凌停，它和id類似，不同的是class可以重復(fù)使用
可以通過class屬性來為元素分組
可以同時(shí)為一個(gè)元素指定多個(gè)class屬性
語法：.class屬性值

通配選擇器

作用：選中頁面中的所有元素
語法: *

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>id選擇器</title>
    <style>
      /* 
      元素選擇器 
      將所有的段落設(shè)置為紅色（字體）
        */
      p {
        color: red;
      }

      h1 {
        color: green;
      }
      /* 
      id選擇器
      將兒童相見不相識(shí)設(shè)置紅色 
      */
      #red {
        color: red;
      }
      /* 
      類選擇器
      將標(biāo)題和 秋水... 和 落霞... 設(shè)置為藍(lán)色
      將標(biāo)題字體設(shè)為20像素 
      */
      .blue {
        color: blue;
      }

      .abc {
        font-size: 20px;
      }
      /* 
      通配選擇器
      將頁面中所有的文字設(shè)為紅色
       */
      *{
            color: red;
        }
    </style>
  </head>
  <body>
    <h1 class="blue abc">我是標(biāo)題</h1>
    <p>少小離家老大回</p>
    <p>鄉(xiāng)音無改鬢毛衰</p>
    <p id="red">兒童相見不相識(shí)</p>
    <p>笑問客從何處來</p>
    <p class="blue">秋水共長天一色</p>
    <p class="blue">落霞與孤鶩齊飛</p>
  </body>
</html>

復(fù)合選擇器

交集選擇器

作用：選中同時(shí)復(fù)合多個(gè)條件的元素
語法：選擇器1選擇器2選擇器3選擇器n{}
注意點(diǎn)：
交集選擇器中如果有元素選擇器售滤，必須使用元素選擇器開頭

選擇器分組（并集選擇器）

作用：同時(shí)選擇多個(gè)選擇器對應(yīng)的元素
語法：選擇器1,選擇器2,選擇器3,選擇器n{}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>選擇器分組</title>
    <style>
      /* 將class為red的div字體大小設(shè)置為30px */
      div.red {
        font-size: 30px;
      }
      /* 將標(biāo)題 和 哈哈 文字設(shè)為綠色 */
      h1,
      span {
        color: green;
      }
    </style>
  </head>
  <body>
    <div class="red">我是div</div>

    <p class="red">我是p元素</p>

    <div class="red2 a b c">我是div2</div>

    <h1>標(biāo)題</h1>

    <span>哈哈</span>
  </body>
</html>

關(guān)系選擇器

元素之間的關(guān)系

父元素
直接包含子元素的元素叫做父元素
子元素
直接被父元素包含的元素是子元素
祖先元素
直接或間接包含后代元素的元素叫做祖先元素,一個(gè)元素的父元素也是它的祖先元素
后代元素
直接或間接被祖先元素包含的元素叫做后代元素,子元素也是后代元素
兄弟元素
擁有相同父元素的元素是兄弟元素

子元素選擇器

作用：選中指定父元素的指定子元素
語法：父元素 > 子元素

后代元素選擇器

作用：選中指定元素內(nèi)的指定后代元素
語法：祖先后代

選擇下一個(gè)兄弟元素

語法：前一個(gè) + 下一個(gè)

選擇下邊所有的兄弟

語法：兄 ~ 弟

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>關(guān)系選擇器</title>
    <style>
      /* 將為div直接包含的span字體元素設(shè)為橙色 */
      div.box > span {
        color: orange;
      }
      /* 將div的子元素p的子元素span的字體元素設(shè)為紅色 */
      div > p > span {
        color: red;
      }
      /* 將div中的span元素中的文字設(shè)為skyblue色 */
      div span {
        color: skyblue;
      }
      /* 
        選擇p元素的下一個(gè)兄弟元素（即class屬性為a的span）    
      */
      p + span {
        color: red;
      }
      /* 
        選擇p元素下面所有的兄弟元素span（即class屬性為a罚拟、b、c完箩、d的span都被選中}
      */
      p ~ span {
        color: red;
      }
    </style>
  </head>
  <body>
    <!-- 
        p元素是class屬性為divp的span元素的父元素

        class屬性為divp的span元素是p元素的子元素

        class屬性為box的div元素是class屬性為divp的span元素的祖先元素

        class屬性為divp的span元素是class屬性為box的div元素的后代元素

        class屬性為a的span元素與p元素互為兄弟元素 
-->

    <div class="box">
      我是一個(gè)div
      <p>
        我是div中的p元素
        <span class="divp">我是p元素中的span</span>
      </p>
      <span class="a">我是div中的span元素</span>
      <span class="b">我是div中的span元素</span>
      <span class="c">我是div中的span元素</span>
      <span class="d">我是div中的span元素</span>
    </div>

    <span>
      我是div外的span
    </span>
  </body>
</html>

屬性選擇器

[屬性名] 選擇含有指定屬性的元素
[屬性名=屬性值] 選擇含有指定屬性和屬性值的元素
[屬性名^=屬性值] 選擇屬性值以指定值開頭的元素
[屬性名$=屬性值] 選擇屬性值以指定值結(jié)尾的元素
[屬性名*=屬性值] 選擇屬性值中含有某值的元素的元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>屬性選擇器</title>

    <style>
      /* 將所有含有title屬性的p中的文字設(shè)為橙色 */
      p[title] {
        color: orange;
      }
      /* 將所有title屬性的值為abc的p中的文字設(shè)為紅色 */
      p[title="abc"] {
        color: red;
      }
      /* 將所有title屬性的值以abc開頭的p（即屬性值為abcdef赐俗、abc）中的文字設(shè)為綠色 */
      p[title^="abc"] {
        color: green;
      }
      /* 將所有title屬性的值以abc結(jié)尾的p（即title屬性的值為helloabc、abc）中的文字設(shè)為黃色 */
      p[title$="abc"] {
        color: yellow;
      }
      /* 將所有title屬性的值中包含abc（即title屬性的值為abc弊知、abcdef阻逮、helloabc)的p 中的文字設(shè)為藍(lán)色*/
      p[title*="e"] {
        color: blue;
      }
    </style>
  </head>
  <body>
    <p title="abc">少小離家老大回</p>
    <p title="abcdef">鄉(xiāng)音無改鬢毛衰</p>
    <p title="helloabc">兒童相見不相識(shí)</p>
    <p>笑問客從何處來</p>
    <p>秋水共長天一色</p>
    <p>落霞與孤鶩齊飛</p>
  </body>
</html>

偽類選擇器

偽類(不存在的類,特殊的類)

偽類用來描述一個(gè)元素的特殊狀態(tài)，比如：第一個(gè)子元素吉捶、被點(diǎn)擊的元素夺鲜、鼠標(biāo)移入的元素...
偽類一般情況下都是使用:開頭

常見的偽類選擇器

子元素(不同類型)

:first-child 第一個(gè)子元素
:last-child 最后一個(gè)子元素
:nth-child() 選中第n個(gè)子元素
特殊值：
n 第n個(gè) n的范圍0到正無窮
2n 或 even 表示選中偶數(shù)位的元素
2n+1 或 odd 表示選中奇數(shù)位的元素
以上這些偽類都是根據(jù)所有的子元素進(jìn)行排序

子元素(同類型)

:first-of-type
:last-of-type
:nth-of-type()
這幾個(gè)偽類的功能和上述的類似皆尔，不通點(diǎn)是他們是在同類型元素中進(jìn)行排序

否定偽類

:not() 否定偽類
將符合條件的元素從選擇器中去除

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      /*
      將ul的所有子元素中位列第一個(gè)且是li的子元素的文字設(shè)為紅色 
      此時(shí)不會(huì)產(chǎn)生效果呐舔，因?yàn)閡l的第一個(gè)子元素是span而不是li
       */
      ul > li:first-child {
        color: red;
      }
      /* 
      將ul的所有子元素中位列最后一個(gè)且是li的子元素的文字設(shè)為紅色
      此時(shí)內(nèi)容為“第五個(gè)”的li元素被選中 
      */
      ul > li:last-child {
        color: red;
      }
      /* 
      將ul的所有子元素中位列第奇數(shù)個(gè)且是li的子元素的文字設(shè)置為紅色
      此時(shí)內(nèi)容為“第一個(gè)”、“第三個(gè)”慷蠕、“第五個(gè)”的li被選中
       */
      ul > li:nth-child(2n + 1) {
        color: red;
      }
      /*
      將ul的所有子元素中位列偶數(shù)個(gè)且是li的子元素的文字設(shè)置為紅色 
      此時(shí)內(nèi)容為“第〇個(gè)”珊拼、“第二個(gè)”、“第四個(gè)”的元素被選中
       */
      ul > li:nth-child(even) {
        color: red;
      }
      /* 
      將ul的所有l(wèi)i子元素中的第一個(gè)的文字設(shè)置為紅色
      此時(shí)內(nèi)容為“第〇個(gè)”的li被選中
       */
      ul > li:first-of-type {
        color: red;
      }
      /* 
      將ul的所有l(wèi)i子元素中除了第三個(gè)之外的元素的文字設(shè)置為黃綠色
      此時(shí)除了內(nèi)容為“第二個(gè)”的li之外的所有l(wèi)i被選中
       */
      ul > li:not(:nth-of-type(3)) {
        color: yellowgreen;
      }
    </style>
  </head>
  <body>
    <ul>
      <span>我是一個(gè)span</span>
      <li>第〇個(gè)</li>
      <li>第一個(gè)</li>
      <li>第二個(gè)</li>
      <li>第三個(gè)</li>
      <li>第四個(gè)</li>
      <li>第五個(gè)</li>
    </ul>
  </body>
</html>

a元素的偽類

:link 用來表示沒訪問過的鏈接（正常的鏈接）
:visited 用來表示訪問過的鏈接
由于隱私的原因流炕，所以visited這個(gè)偽類只能修改鏈接的顏色
:hover 用來表示鼠標(biāo)移入的狀態(tài)
:active 用來表示鼠標(biāo)點(diǎn)擊

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      a:link {
        color: red;
      }

      a:visited {
        color: orange;
        /* font-size: 50px;   */
      }

      a:hover {
        color: aqua;
        font-size: 50px;
      }

      a:active {
        color: yellowgreen;
      }
    </style>
  </head>
  <body>
    <a >訪問過的鏈接</a>

    <br /><br />

    <a >沒訪問過的鏈接</a>
  </body>
</html>

偽元素選擇器

偽元素簡介

偽元素澎现，表示頁面中一些特殊的并不真實(shí)的存在的元素（特殊的位置）
偽元素使用 :: 開頭

常見偽元素

::first-letter 表示第一個(gè)字母
::first-line 表示第一行
::selection 表示選中的內(nèi)容
::before 元素的開始
::after 元素的最后
注意：before 和 after 必須結(jié)合content屬性來使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>

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

      p::first-letter{
          font-size: 50px;
      }

      p::first-line{
          background-color: yellow;
      }

      p::selection{
          background-color: greenyellow;
      }

      div::before{
          content: 'abc';
          color: red;
      }

      div::after{
          content: 'haha';
          color: blue;
      }

      div::before{
          content: '『';
      }
    </style>
  </head>
  <body>
    <q>hello</q>
    <div>Hello Hello How are you</div>

    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque velit modi
      veniam nisi veritatis tempore laborum nemo ipsa itaque optio. Id odit
      consequatur mollitia excepturi, minus saepe nostrum vel porro.
    </p>
  </body>
</html>

樣式的繼承

我們?yōu)橐粋€(gè)元素設(shè)置的樣式同時(shí)也會(huì)應(yīng)用到它的后代元素上
繼承是發(fā)生在祖先后后代之間的
繼承的設(shè)計(jì)是為了方便我們的開發(fā)，利用繼承我們可以將一些通用的樣式統(tǒng)一設(shè)置到共同的祖先元素上每辟，這樣只需設(shè)置一次即可讓所有的元素都具有該樣式
注意：并不是所有的樣式都會(huì)被繼承剑辫，比如：背景相關(guān)的，布局相關(guān)等的這些樣式都不會(huì)被繼承渠欺。

選擇器的權(quán)重

樣式的沖突

當(dāng)我們通過不同的選擇器妹蔽，選中相同的元素，并且為相同的樣式設(shè)置不同的值時(shí)，此時(shí)就發(fā)生了樣式的沖突胳岂。
發(fā)生樣式?jīng)_突時(shí)编整，應(yīng)用哪個(gè)樣式由選擇器的權(quán)重（優(yōu)先級）決定

選擇器的權(quán)重

選擇器	權(quán)重
內(nèi)聯(lián)樣式	1,0,0,0
id選擇器	0,1,0,0
類和偽類選擇器	0,0,1,0
元素選擇器	0,0,0,1
通配選擇器	0,0,0,0
繼承的樣式	沒有優(yōu)先級

比較優(yōu)先級時(shí)，需要將所有的選擇器的優(yōu)先級進(jìn)行相加計(jì)算乳丰，最后優(yōu)先級越高掌测，則越優(yōu)先顯示（分組選擇器是單獨(dú)計(jì)算的）,選擇器的累加不會(huì)超過其最大的數(shù)量級，類選擇器在高也不會(huì)超過id選擇器
如果優(yōu)先級計(jì)算后相同产园，此時(shí)則優(yōu)先使用靠下的樣式
可以在某一個(gè)樣式的后邊添加 !important 汞斧，則此時(shí)該樣式會(huì)獲取到最高的優(yōu)先級，甚至超過內(nèi)聯(lián)樣式
注意：在開發(fā)中這個(gè)玩意一定要慎用什燕！

長度單位

1.像素

屏幕（顯示器）實(shí)際上是由一個(gè)一個(gè)的小點(diǎn)點(diǎn)構(gòu)成的
不同屏幕的像素大小是不同的断箫，像素越小的屏幕顯示的效果越清晰
所以同樣的200px在不同的設(shè)備下顯示效果不一樣

2.百分比

也可以將屬性值設(shè)置為相對于其父元素屬性的百分比
設(shè)置百分比可以使子元素跟隨父元素的改變而改變

3.em

em是相對于元素的字體大小來計(jì)算的
1em = 1font-size
em會(huì)根據(jù)字體大小的改變而改變

4.rem

rem是相對于根元素的字體大小來計(jì)算

顏色單位

1.顏色名
在CSS中可以直接使用顏色名來設(shè)置各種顏色

比如：red、orange秋冰、yellow仲义、blue、green ... ...

但是在css中直接使用顏色名是非常的不方便

2.RGB值：

RGB通過三種顏色的不同濃度來調(diào)配出不同的顏色
R red剑勾，G green 埃撵，B blue
每一種顏色的范圍在 0 - 255 (0% - 100%) 之間
語法：RGB(紅色,綠色,藍(lán)色)

3.RGBA:

就是在rgb的基礎(chǔ)上增加了一個(gè)a表示不透明度
需要四個(gè)值，前三個(gè)和rgb一樣虽另，第四個(gè)表示不透明度
1表示完全不透明 0表示完全透明 .5半透明

4.十六進(jìn)制的RGB值：

語法：#紅色綠色藍(lán)色
顏色濃度通過 00-ff
如果顏色兩位兩位重復(fù)可以進(jìn)行簡寫

#aabbcc --> #abc

5.HSL值 HSLA值

H 色相(0 - 360)
S 飽和度暂刘，顏色的濃度 0% - 100%
L 亮度，顏色的亮度 0% - 100%

CSS基礎(chǔ)

CSS簡介

如何使用CSS來修改元素的樣式

第一種方式(內(nèi)聯(lián)樣式犬性，行內(nèi)樣式)：

第二種方式（內(nèi)部樣式表）

第三種方式 （外部樣式表） 最佳實(shí)踐

CSS語法

CSS的基本語法:

選擇器:

聲明塊

CSS中的注釋

CSS選擇器

元素選擇器

id選擇器

類選擇器

通配選擇器

復(fù)合選擇器

交集選擇器

選擇器分組（并集選擇器）

關(guān)系選擇器

元素之間的關(guān)系

子元素選擇器

后代元素選擇器

選擇下一個(gè)兄弟元素

選擇下邊所有的兄弟

屬性選擇器

偽類選擇器

偽類(不存在的類,特殊的類)

常見的偽類選擇器

子元素(不同類型)

子元素(同類型)

否定偽類

a元素的偽類

偽元素選擇器

偽元素簡介

常見偽元素

樣式的繼承

選擇器的權(quán)重

樣式的沖突

選擇器的權(quán)重

長度單位

顏色單位

第三種方式（外部樣式表）最佳實(shí)踐