【全面系統講解CSS】學習筆記-第三章 CSS基礎

第三章 CSS基礎

• 一、CSS基礎
• • 1.1、基本規則
  • 1.2、選擇器
  • • 1.2.1、選擇器分類
    • 1.2.2、選擇器權重
    • 1.2.3、其他的優先級
  • 1.3、非布局樣式（字型）
  • • 1.3.1、多字型fallback
    • 1.3.2、網絡字型、自定義字型
    • 1.3.3、iconFont
  • 1.4、非布局樣式（行高）
  • • 1.4.1、行高的構成
  • 1.5、非布局樣式（背景）
  • • 1.5.1、背景顔色
    • 1.5.2、漸變色背景
    • 1.5.3、多背景疊加
    • 1.5.4、背景圖檔的屬性和雪碧圖
    • 1.5.5、多分辨率适配
    • 1.5.6、Base64
  • 1.6、非布局樣式（邊框）
  • • 1.6.1、邊框屬性
    • 1.6.2、邊框背景圖
    • 1.6.3、邊框銜接
  • 1.7、非布局樣式（滾動）
  • 1.8、非布局樣式（文字折行）
  • 1.9、非布局樣式（裝飾性屬性及其它）
  • 1.10、hack和案例（相容性問題）
  • • 1.10.1、hack簡介
    • 1.10.2、hack案例
  • 1.11、面試

一、CSS基礎

1.1、基本規則

1.2、選擇器

1.2.1、選擇器分類

1.2.2、選擇器權重

id選擇器的權重是最高的，不會因為類選擇器的增加而超過id選擇器的權重，即如果有11個類，那麼計算權重和110，實際是不會進位的，也就是說其他選擇器的權重和不會超過id選擇器。

1.2.3、其他的優先級

1.3、非布局樣式（字型）

1.3.1、多字型fallback

如下圖所示，當配置了多種字型的情況下，浏覽器會從左往右去給每個字元加載對應的字型。如果找不到就會找後面一個字型，如果都找不到，則會加載浏覽器預設的字型。不同的裝置或者平台所對應的字型也不相同。

1.3.2、網絡字型、自定義字型

網絡字型，在指定一個遠端位址的情況下。如果出現跨域，一定要讓對方伺服器出具COIS的頭，也就是允許跨域。

自定義字型，如下

1.3.3、iconFont

阿裡Icon Font矢量圖示庫

進入網頁後，可以将滑鼠移動到圖示上，然後點選加入到購物車

然後點選右上角的購物車圖示，将圖示加入到項目中。

可以點選下載下傳到本地，将圖示庫下載下傳下來。然後作為圖示子圖，具體的使用方式，

下載下傳後，将解壓包打開，打開如下圖所示的html。裡面有使用的教程。

1.4、非布局樣式（行高）

1.4.1、行高的構成

外層的高度是由line-height決定的。由于内層的inline-box組成了一個line-box；line-box的高度是由第三個inline-box的line-height撐起來的。

上圖中的藍色字型部分是垂直居中的，這是由于line-height的原因。

上圖中的三個字段，預設是按照基線對齊的。如果要讓他居中則可以給每個字段設定vertical-align：middle；則可以居中對齊了。

同時你也可以設定頂線對齊或者底線對齊。vertical-align：top / bottom；

圖檔的3px問題

在上面的div中有一個span和一個img。原因是img也是一個inline的，這樣我們隻要修改對齊的方式，改為按底線對齊；

同樣我們也可以修改img的類型，改為block。

1.5、非布局樣式（背景）

1.5.1、背景顔色

背景顔色的表示方式有很多種，可以直接在background：後面添加 white這樣的大家都周知的顔色名詞；也可以添加十六進制的顔色值。還可以通過hsl或者hsla來表示。同樣也可以使用rgb或者rgba來表示顔色。

1.5.2、漸變色背景

1.5.3、多背景疊加

下面，使用background的多背景疊加和background-size：30px; 30px;實作一個網格效果。

1.5.4、背景圖檔的屬性和雪碧圖

基本屬性如下圖

雪碧圖

原圖如下

如下圖設定後

1.5.5、多分辨率适配

在高分辨率下，可以使用高分辨率的圖做小之後使用，比如一個圖是500px*400px的，那麼可以設定background-size：250px 200px；減小一般，然後使得顯示的時候相對清楚。

1.5.6、Base64

這裡圖檔會增大為原圖大小的3/4；如果放到css檔案中的話，會導緻css檔案本身會變大。同樣浏覽器對base64解碼的時候也會産生開銷。

1.6、非布局樣式（邊框）

1.6.1、邊框屬性

設定一個寬5px，虛線，紅色的邊框；

1.6.2、邊框背景圖

邊框圖

使用邊框圖設定邊框，repeat屬性會出現下圖紅色框的問題。

調整後，解決上面的問題。

.c2{
    width:400px;
    height: 200px;
     /*border-width: 30px;*/
     /* transparent是全透明黑色(black)的速記法，即一個類似rgba(0,0,0,0)這樣的值。 */
    border:30px solid transparent;
    border-image:url(./border.png) 30 round;
}
           

1.6.3、邊框銜接

.c3{
    width:400px;
    height: 200px;
    border-bottom:30px solid red;
    /* border-right:30px solid blue; */
    border-left:30px solid transparent;
    border-right:30px solid transparent;
}
           

這個可以用來實作三角形

添加border-radius屬性後可以變成一個扇形。

1.7、非布局樣式（滾動）

.c1{
    background:red;
    height:200px;
    /*auto hidden overflow*/
    overflow: auto;
}
           

1.8、非布局樣式（文字折行）

預設分了三部分，一部分是一個英文的句子，一部分是一個超長的單詞，另一部分是一句中文句子。

如果要把單詞放到這個div中，那麼可以設定紅色框中的屬性。

将整個英文句子折行。

1.9、非布局樣式（裝飾性屬性及其它）

font-weight：+ 數字的情況時，數字範圍支援100-900，但是不是所有浏覽器或者字型都支援這些，有些可能到700之後就不會出現樣式上的修改了。

1.10、hack和案例（相容性問題）

1.10.1、hack簡介

hack屬性需要寫到後面，因為後寫的會有效。

1.10.2、hack案例

1.11、面試