CSS編寫及選擇器

時間 2021-04-15

標籤 css html 瀏覽器緩存佈局字體 spa code htm 排序欄目 CSS 简体版

原文原文鏈接

設置CSS樣式的方式

內聯樣式（行內樣式）css
- 在標籤內經過style屬性來設置元素的樣式
```
<p style="color:red;font-size:60px">
    CSS設置樣式
</p>
```
問題：使用內聯樣式，只能對一個標籤生效html

複用程度不高，維護起來比較麻煩瀏覽器
內部樣式表緩存
- 將樣式編寫到head標籤中的style標籤裏，而後經過css選擇器選中元素，併爲其設置各類樣式。
```
<style>
    p{  /*標籤選擇器*/
        color:green;
        font-size:50px;
    }
</style>
```
好處：可同時爲多個標籤設置樣式，更加方便對樣式進行復用佈局

問題：內部樣式表只能對一個網頁起做用，不能跨頁面複用字體
外部樣式表(最佳實現)spa
- 能夠將css樣式編寫到外部的css文件中code
  
  而後經過link標籤來引入到對應的網頁中htm
```
<head> 
<link rel="stylesheet" href="./style.css">
  </head>
```
好處：樣式能夠在不一樣頁面之間進行復用排序

可使用到瀏覽器的緩存機制，加快網頁的加載速度，提升用戶體驗。

CSS基本語法

css中的註釋

<style>
/*
   註釋內容 
    */
</style>

聲明塊

聲明塊：經過聲明塊來指定爲元素設置的樣式，是一個名值對 ---名和值之間以 : 鏈接，以 ; 結尾

選擇器

定義：經過選擇器能夠選中頁面中的指定元素

經常使用選擇器

元素選擇器
- 做用：根據標籤名選中指定的元素
- 語法：標籤名{ }
- 例：p{ } 、div{ } 、h1{ }
id選擇器
- 做用：根據元素的id屬性值選中一個元素
- 語法：#id屬性值{}
- 例 #box{ }、#red{ }
類選擇器
- 做用：根據元素的class屬性值選中一組元素
- 語法： .class屬性值{ }
- 例 .box{ } 、.bottom{ }
- 補充：class是一個標籤的屬性，和id相似，不一樣的是class能夠重複使用,能夠爲同個元素指定多個class屬性
適配選擇器
- 做用：選中頁面中的全部元素
- 語法：*{ }

複合選擇器

交集選擇器
- 做用：選中同時符合多個條件的元素
- 語法：選擇器1選擇器2選擇器3...n { }
  
  選擇器之間沒有空格
```
p.box.num{
             color: blue;
             font-size: 50px;   
         }
```
- 注：交集選擇器中若是有元素選擇器，必須使用元素選擇器開頭
並集選擇器
- 做用：同時選擇多個選擇器對應的元素
- 語法：選擇器1，選擇器2，選擇器3...選擇器n{ }
- 例 #box,p,h1,div,span{}

關係選擇器

相關概念
- 父元素：直接包含子元素的元素
- 子元素：直接被父元素包含的元素
- 祖先元素：直接或間接包含後代元素
  
  一個元素的父元素也是他的祖先元素
- 後代元素：直接或間接被祖先元素包含的元素
  
  子元素也是後代元素
- 兄弟元素：擁有相同父元素的元素

子元素選擇器
- 做用：選中指定父元素的指定子元素
- 語法:父元素>子元素
後代元素選擇器
- 做用：選中選中指定元素內的指定後代元素
- 語法：祖先後代
兄弟選擇器
- 做用 ①：選擇下一個兄弟
- 語法：前一個+後一個
- 做用 ②：選擇下邊全部的兄弟
- 語法：兄~弟

屬性選擇器

語法：[屬性名] 選擇含有指定屬性的元素
[屬性名=屬性值] 選擇含有指定屬性和屬性值的元素
[屬性名^=屬性值] 選擇屬性值以指定值開頭的元素
[屬性名$=屬性值] 選擇屬性值以指定值結尾的元素
[屬性名*=屬性值] 選擇屬性值中含有某值的元素

僞類選擇器

僞類（不存在的類，特殊的類）
- 說明：描述一個元素的特殊狀態
- 通常使用：開頭
- :first-child 第一個子元素
  
  :last-child 最後一個子元素
  
  :nth-child(n) 選中第n個子元素
  
  特殊值：n 第n個 n的範圍0~正無窮
  
  even/2n選中偶數位的元素
  
  odd/2n+1 選中奇數位的元素
- :first-of-type
  
  :last-of-type
  
  :nth-of-type()
  
  這幾個僞類功能與上面的相似，不一樣點是他們是在同類型元素中進行排序
- : not() 否認僞類，將符合條件的元素從選擇器中去除

a標籤特有的僞類

:link 用來表示沒訪問過的連接(正常的連接)
：visited 表示訪問過的連接（因爲隱私緣由，visited這個僞類只能修改連接的顏色
：hover 表示鼠標移入的狀態
：active用來表示鼠標點擊

僞元素選擇器

僞元素：表示頁面中一些特殊的並不真實存在的元素（特殊的位置）
僞元素使用：：開頭

：：first-letter 表示第一個字母、
：：first-line 表示第一行
：：selection 表示選中的內容

：：before 元素的開始

：：after 元素的最後必須結合content屬性來使用

<style>
p::before{
         content:"【";
         color: saddlebrown;
     }
  p::after{
         content:"】";
     }
</style>

選擇器的權重及樣式繼承

樣式的繼承

咱們爲一個元素設置樣式同時也會應用到它的後代元素上，發生在祖先元素和後代元素之間

注：並非全部的樣式都會被繼承，好比背景相關的佈局

選擇器的權重

樣式衝突：經過不一樣的選擇器選中相同的元素，而且爲相同的樣式設置不一樣的值時

內聯樣式 1,0,0,0

id選擇器 0,1,0,0

類和僞類選擇器 0,0,1,0

元素選擇器 0,0,0,1

通配符選擇器 0,0,0,0

繼承的樣式沒有優先級

優先級計算相同，此時優先使用靠下的樣式
比較優先級時，需將全部的選擇器的優先級相加，最後優先級越高，則越優先顯示
分組選擇器單獨計算
選擇器的累加不會超過其最大的數量級（類選擇器再高也不會超過id選擇器）

注：能夠在某一個樣式後添加！important 則此樣式會得到最高的優先級，甚至超過內聯樣式（通常不會使用）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。