【博學谷學習記錄】超強總結,用心分享|前端CSS總結(一)

我想靜靜~~ 發表於 2023-01-01
前端 CSS

CSS總結(一)

shift+alt,選中多行

外鏈式

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

1 選擇器

1.1 標籤選擇器

結構:標籤名

1.2 類選擇器

結構:.類名{ }

1.3 id選擇器

結構:#id屬性值{ }

作用:透過id屬性值,找到頁面中帶有這個id屬性值的標籤,設定樣式

注意點:

  1. 所有標籤上都有id屬性

  2. id屬性值類似於身份證號碼。在一個頁面中是唯一的,不可重複的!

  3. 一個標籤上只能有一個id屬性值

  4. 一個id選擇器只能選中一個標籤

1.4 萬用字元選擇器

結構:*{ }

作用:選中頁面中所有標籤

2 文字和文字樣式

2.1 字型樣式

2.1.1 字型大小:font-size

2.1.2 字型粗細:font-weight

取值:

  • 關鍵字:

    正常 normal
    加粗 bold
  • 純數字 100~900的整數:

    正常 400
    加粗 700

2.1.3 字型樣式:font-style(傾斜)

取值:

正常(預設值):normal

傾斜:italic

2.1.4 字型型別:font-family

2.1.5 字型型別:font屬性連寫

屬性名:font(複合屬性

取值:font: style weight size family;

省略要求:只能省略前兩個,如果省略了相當於設定了預設值

2.1.6樣式層疊問題

樣式可以一層一層的層疊覆蓋

<style>
        p{
            color: red;
            color: blue;
        }
</style>

如果給同一個標籤設定了相同的屬性,此時樣式會層疊(覆蓋),寫在最下面的會生效

2.2 文字樣式

2.2.1文字縮排

屬性名:text-indent

取值:

  • 數字 + px
  • 數字 + em (推薦:1em = 當前標籤的font-size的大小)

2.2.2文字水平對齊方式

屬性名:text-align

取值:

屬性值 效果
left 左對齊
center 居中對齊
right 右對齊

2.2.3文字修飾

屬性值:text-decoration

取值:

屬性值 效果
underline 下劃線(常用)
line-through 刪除線(不常用)
overline 上劃線(幾乎不用)
none 無裝飾線(常用)

注意:開發中會使用 text-decoration :none ; 清除a標籤預設的下劃線

2.3 line-height行高

作用:控制一行上的上下間距

屬性名:line-height

取值:

  • 數字 + px
  • 倍數(當前標籤 font-size 的倍數)

應用:

  1. 讓單行文字垂直居中可以設定 line-height :文字父元素高度
  2. 網頁精準佈局時,設定 line-height :1 可以取消上下間距

行高與font連寫注意點:

  • 如果同時設定了行高與font連寫,注意覆蓋問題
  • font: style weight size/line-height family ;

垂直居中技巧:設定行高屬性值 = 自身高度屬性值

2.4標籤水平居中

margin:0 auto;

3 選擇器進階

3.1 複合選擇器

3.1.1 後代選擇器

作用:根據HTML標籤的巢狀關係,選擇父元素 後代中 滿足條件的元素

選擇器語法:選擇器1 選擇器2 { css }

結果:在選擇器1所找到標籤的後代(兒子、孫子、重孫子...)中,找到滿足選擇器2的標籤,設定樣式

注意點:

  1. 後代包括:兒子、孫子、重孫子...

  2. 後代選擇器中,選擇器與選擇器之間透過 空格 隔開

    【博學谷學習記錄】超強總結,用心分享|前端CSS總結(一)

3.1.2子代選擇器

作用:根據HTML標籤的巢狀關係,選擇父元素 子代中 滿足條件的元素

選擇器語法:選擇器1 > 選擇器2 { css }

結果:在選擇器1所找到標籤的後代(兒子)中,找到滿足選擇器2的標籤,設定樣式

注意點:

  1. 子代只包括:兒子
  2. 子代選擇器中,選擇器與選擇器之間透過 > 隔開
    【博學谷學習記錄】超強總結,用心分享|前端CSS總結(一)
    【博學谷學習記錄】超強總結,用心分享|前端CSS總結(一)

3.2 並集選擇器

作用:同時選擇多組標籤,設定相同樣式

選擇器語法:選擇器1 , 選擇器2 { css }

結果:找到 選擇器1 和 選擇器2 選中的標籤,設定樣式

注意點:

  1. 並集選擇器中的每組選擇器之間透過 , 分隔
  2. 並集選擇器中的每組選擇器可以是 基礎選擇器 或者 複合選擇器
  3. 並集選擇器中的每組選擇器通常一行寫一個,提高程式碼的可讀性

3.3 交集選擇器

作用:選中頁面中 同時滿足 多個選擇器的標籤

選擇器語法:選擇器1選擇器2 { css }

結果:

(既又原則)找到頁面中 即 能被選擇器1選中。又 能被選擇器2選中的標籤,設定樣式

注意點:

  1. 交集選擇器中的選擇器之間是緊挨著的,沒有東西分隔
  2. 交集選擇器中如果有標籤選擇器,標籤選擇器必須寫在最前面

3.4 hover偽類選擇器

作用:選中滑鼠懸停在元素上的狀態,設定樣式

選擇器語法:選擇器:hover { css }

3.5 Emmet語法

作用:透過簡寫語法,快速生成程式碼

語法:類似於剛剛學習的選擇器的寫法
【博學谷學習記錄】超強總結,用心分享|前端CSS總結(一)
【博學谷學習記錄】超強總結,用心分享|前端CSS總結(一)

4 背景相關屬性

4.1 背景顏色

屬性名:background-color

注意點:背景顏色預設值是 透明:rgba(0,0,0,0)、transparent

4.2 背景圖片

屬性名:background-image

屬性值:background-image :url ('圖片的路徑')

4.3 背景平鋪

屬性名:background-repeat

屬性值:

取值 效果
repeat (預設值)水平和垂直方向都平鋪
no-repeat 不平鋪
repeat-x 沿著水平方向(x軸)平鋪
repeat-y 沿著垂直方向(y軸)平鋪

4.4 背景位置

屬性名:background-position

屬性值:background-position:水平方向位置 垂直方向位置

【博學谷學習記錄】超強總結,用心分享|前端CSS總結(一)

如果指定一個畫素值,則該值用於x座標,y值默居中

4.5 背景相關屬性連寫

屬性名:background

書寫順序:隨意

注意:

  1. 把單獨的樣式寫在連寫的下面
  2. 把單獨的樣式寫在連寫的裡面

5 元素顯示模式

5.1 塊級元素

特點:

  1. 獨佔一行(一行只能顯示一個)
  2. 寬度預設是父元素的寬度,高度預設由內容撐開
  3. 可以設定寬高

代表標籤:

div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer......

5.2 行內元素

顯示特點:

  1. 一行可以顯示多個
  2. 寬度和高度預設由內容撐開
  3. 不可以設定寬高

代表標籤:

a、span、b、u、i、s、strong、ins、em、del......

5.3 行內塊元素

顯示特點:

  1. 一行可以顯示多個
  2. 可以設定寬高

代表標籤:

  • input、textarea、button、select......
  • 特殊情況:img標籤有行內塊元素特點,但是Chrome除錯工具中顯示結果是inline

5.4 元素顯示模式轉換

屬性 效果 使用頻率
display:block 轉換成塊級元素 較多
display:inline-block 轉換成行內塊元素 較多
display:inline 轉換成行內元素 較少

塊級元素一般作為大容器,可以巢狀:文字、塊級元素、行內元素、行內塊元素...

  • 但是:p標籤中不要巢狀div、p、h等塊級元素

a標籤內部可以巢狀任意元素

  • 但是:a標籤不能巢狀a標籤

6 CSS特性

6.1 繼承性

6.2 層疊性

6.3 優先順序

優先順序公式:

繼承 < 萬用字元選擇器 < 標籤選擇器 < 類選擇器 < id選擇器 < 行內樣式 < !important

注意點:

  1. !important不能提升繼承的優先順序,只要是繼承優先順序最低
  2. 實際開發中不建議使用!important

6.4 權重疊加計算

【博學谷學習記錄】超強總結,用心分享|前端CSS總結(一)

7 盒子模型

7.1 盒子模型介紹

CSS中規定每個盒子分別由:內容區域(content)、內邊距區域(padding)、邊框區域(border)、外邊距區域(margin)構成,這就是盒子模型

【博學谷學習記錄】超強總結,用心分享|前端CSS總結(一)

7.2 邊框(border)- 連寫形式

屬性名:border

屬性值:單個取值的連寫,取值之間以空格隔開

border:10px solid red;

7.2.1邊框(border)— 單方向設定

場景:只給盒子的某個方向單獨設定邊框

屬性名:border—方位名詞

屬性值:連寫的取值

7.2.2邊框(border)— 單個屬性:

【博學谷學習記錄】超強總結,用心分享|前端CSS總結(一)

7.3 內邊距取值

作用:設定邊框與內容區域之間的距離

屬性值:padding

常見取值:

【博學谷學習記錄】超強總結,用心分享|前端CSS總結(一)

記憶規則:從上開始賦值,然後順時針賦值,如果設定賦值的,看對面!

7.3.1 內邊距(padding)—單方向設定

場景:只給盒子的某個方向單獨設定內邊距

屬性名:padding - 方位名詞

7.4 自動內減

操作:給盒子設定屬性 box-sizing:border-box;即可

優點:瀏覽器會自動計算多餘的大小,自動在內容中減去

7.5 外邊距(margin)— 取值

作用:設定邊框以外,盒子與盒子之間的距離

常見取值:

【博學谷學習記錄】超強總結,用心分享|前端CSS總結(一)

記憶規則:從上開始賦值,然後順時針賦值,如果設定賦值的,看對面!

7.5.1 外邊距(margin)— 單方向設定

場景:只給盒子的某個方向單獨設定外邊距

屬性值:margin - 方位名詞

應用:

【博學谷學習記錄】超強總結,用心分享|前端CSS總結(一)