學習前端的第四天2020-10-15

2020年10月15日
今天是學習前端的第四天，今天pink老師帶我們學習了CSS的複合選擇器，元素的顯示模式，背景圖片等三大塊內容。

一、複合選擇器

1、後代選擇器
後代選擇器是選擇父標籤的所有後代，語法格式為 元素1 元素2 ｛樣式說明｝
其中元素1、元素2可以是任意基礎選擇器，元素1元素2之間用空格隔開。例如：

ul li {
      樣式說明
}

此段程式碼表示<ul>中的所有`

• 的樣式都改變為規定樣式。
  注意：為了程式碼優化，理論上巢狀不要超過3~4層。
  2、子代選擇器
  子代選擇器是選擇某個元素最近的一級子元素（親兒子）。其語法格式為

• 元素1>元素2 {樣式說明}
  

  選擇元素1中所有的直接後代（子元素）元素2。例如：
  .class>tag { 樣式說明 }
  元素1和元素2之間用大於號隔開。
  3、並集選擇器
  並集選擇器可選擇多組標籤為它們定義同樣的格式，而且並集選擇器還可以使用後代選擇器或者子代選擇器作為元素。語法格式為：元素1，元素2 ｛樣式說明｝
  元素中間用’，’（逗號）隔開，
  例如：ul，div ｛樣式說明｝
  此段程式碼表示<ul>標籤<div>標籤都用此樣式。
  注意：①通常各個元素豎著寫。②最後一個元素不加逗號。
  4、連結偽類選擇器與：focus偽類選擇器
  
  注意：①連結偽類選擇器的書寫順序為

  a:link
  a:visited
  a:hover
  a:active
  

  順序是不可以改變的。
  ②區分a:hover和a:focus之間的區別：前者是滑鼠懸浮時改變樣式，後者是滑鼠點選後改變樣式，再點選其他地方樣式消失。
  5、交集選擇器
  交集選擇器的使用主要是為了提權，語法格式為元素1元素2 ｛樣式說明｝
  元素與元素之間沒有分隔符，它指的是既有元素1又有元素2.

  二、元素的顯示模式

  元素顯示模式的作用是網頁中的標籤非常多，在不同地方會用到不同型別的標籤，瞭解它們的特點可以更好的佈局我們的網頁。
  1、塊元素——block
  
  注意：①文字元素不能新增塊元素；
  ②<p>和<div>中不能放塊元素；尤其是<div>;
  ③<h1>~<h6>中也不能放塊元素
  2、行內元素——inline
  
  3、行內塊元素——inline-block
  
  4、顯示模式的轉換
  應用場景：讓行內元素具有寬高，或者把塊元素放在一行顯示。
  程式碼如下：
  
  其中我們用的最多的是display：block和display:inline-block,很少用到display:inline
  TIP:display屬性要寫在第一行，在其它屬性的上邊。
  5、單行文字垂直居中
  做法：讓文字的行高等於盒子的高度，也就是line-height=width。若行高小於盒子高度，文字偏上；若行高大於盒子高度，則文字偏下。

  三、背景圖片

  
  這張圖列出了背景的三個屬性，分別是背景顏色、插入背景圖片和背景平鋪。
  插入背景圖片常被用於插入logo、裝飾圖片、超大圖片、精靈圖（雪碧圖）等，優點是容易控制圖片的位置。
  注意：頁面元素新增背景圖片的同時也可以新增背景顏色，但是背景圖片會顯示在背景顏色的上層。
  
  這張圖列出了背景的剩餘兩個屬性，分別是背景位置和背景固定。
  使用背景位置屬性時一定要注意精確單位的兩個值的前後順序，前面是x軸後面是y軸。
  
  背景屬性的複合寫法我們只要注意它的順序是沒有要求的，每個屬性值之間要用空格隔開，用不到的屬性可以省略不寫。但是我們一般按照背景顏色、背景圖片地址、背景平鋪、背景固定、背景位置這個順序來寫。
  TIP：讓盒子半透明的另外一種寫法：opacity。opacity是透明度屬性，取值0~1，但是與background: rgba(0，0，0，0)不同的是，opacity屬性會使盒子裡的內容也隨之變透明。

  今天學的東西看起來繁瑣，但是實際上並不是很多，我們要能夠分清楚每個屬性的含義和取值，每天都比昨天進步一點點，我們就能變得更強！
  加油~