前端—初級階段2(5-8)

內容介紹

1. CSS選擇器(基本、層級、屬性、僞類、僞狀態)
2. CSS經常使用樣式屬性
3. CSS3 過渡、變換、動畫
4. CSS3 3D場景搭建與應用

1、CSS選擇器

CSS選擇器一共有五種:基本、層級、屬性、僞類、僞元素 CSS選擇器參考手冊

1.基本選擇器

• 通配符/全局選擇器 *
• ID選擇器 #Id
• class選擇器 .classname
• 元素選擇器 element
• 羣組選擇器 element,element

2.層級選擇器

• 後代選擇器 selecter selecter
• 子元素選擇器 selcter>selecter 全部子元素 測試
• 相鄰兄弟選擇器 selecter+selecter 就下面的一個 測試
• 通配兄弟選擇器 selecter1~selecter2 selecter1以後出現的全部selecter2 測試

3.屬性選擇器

• selecter[attr] 包含attr屬性的元素 測試
• selecter[attr=val] arrt屬性值是val的元素 測試
• seldcter[attr^=val] attr屬性值是以val開頭的元素 測試
• selecter[attr$=val] attr屬性值是以val結束的元素 測試
• selecter[attr~=val] attr屬性值val 或 包含val（兩個值以空格隔開，其中一個是val) 測試
• selecter[attr*=val] attr屬性值中包含val的元素,只要有這個字母就能夠 測試
• selecter[attr|=val] attr屬性值中帶有以val開頭的元素,val值必須是整個單詞 測試

4.僞類選擇器

1) 動態僞類選擇器

• :link 未訪問的連接 測試
• :visited 已訪問的連接
• :hover 鼠標移動到連接上
• :active 選定的連接
• :focus 焦點 測試

提示:在 CSS 定義中，a:hover 必須被置於 a:link 和 a:visited 以後，纔是有效的。
a:active 必須被置於 a:hover 以後，纔是有效的。

2) 目標僞類選擇器

• :target 選取當前活動的目標元素測試
  URL 帶有後面跟有錨名稱 #，指向文檔內某個具體的元素。這個被連接的元素就是目標元素(target element)

3) 語言僞類選擇器

• :lang 用於選取帶有以指定值開頭的 lang 屬性的元素 測試

4) UI元素僞類選擇器 （大多用在表單元素上）

• :enabled 匹配已啓用的元素測試
• :diabled 匹配被禁用的元素
• :checked 匹配已被選中的input元素（只用於單選按鈕和複選框）測試

5) 結構僞類選擇器

• :first-child 父元素中第一個子元素 測試
• :last-child 父元素中最後一個子元素 測試
• :first-of-type　父元素中第一個類型(等於:nth-of-type(1)) 測試
• :last-of-type　 父元素中最後一個類型(等於:nth-last-of-type(1) 測試
• :only-child　父元素中有惟一子元素 測試
• :only-of-type 父元素中有惟一子類型測試
• :nth-child(n) 父元素中第n個子元素 測試
• :nth-last-child(n) 父元素中第n個子元素(從最後一個子元素開始計數) 測試
• :nth-of-type(n)　父元素中第n個子類型　測試　　　　　　　　
• :nth-last-of-type(n) 父元素中第n個子類型(從最後一個子類型開始計數)測試　　　　　　　
• :empty 匹配空的元素(父元素中沒有有子元素和內容)測試
• :root 匹配文檔根元素(在HTML中根元素始終是html元素)測試

6) 否認僞類選擇器

• :not(selecter) 匹配非指定元素/選擇器的每一個元素測試

5.僞元素選擇器

• ::first-letter 選擇首字母 測試
• ::first-line 選擇首行 測試
• ::before 在元素以前添加內容，默認行內元素
• ::after 在元素以後添加內容，默認行內元素
• ::selection 匹配被用戶選取的內容(應用CSS 屬性：color,background,cursor,outline) 測試
• ::-webkit-input-placeholder 改變表單的默認樣式

---

僞類與僞元素的特性及其區別：

1. 僞類本質上是爲了彌補常規CSS選擇器的不足，以便獲取到更多信息；
2. 僞元素本質上是建立了一個有內容的虛擬容器；
3. CSS3中僞類和僞元素的語法不一樣；
4. 能夠同時使用多個僞類，而只能同時使用一個僞元素，而且只能出如今最後；（a:first-child:hover ；p:hover::first-letter ）

6.優先級

• 內聯樣式(1000)>id選擇器(100)>類選擇器，屬性選擇器，僞類選擇器(10)>標籤選擇器、僞元素選擇器(1)
• 提升優先級的方法：使用!important關鍵字

2、CSS經常使用樣式屬性

css屬性參考手冊

1.box(盒子)

• 寬度 width: 長度 | 百分比 | auto;
• 高度 height: 長度 | 百分比 | auto;
• 邊界 margin: 上 右 下 左 ;
• 填充 padding: 上 右 下 左 ;
• 定位 position: absolute | relative | static;
• 是否可見 visibility: inherit | visible | hidden;(會佔據頁面上的空間)
• 類型 display: block| inline| inline-block|flex|none; flex圖片
• 溢出 overflow: visible | hidden | scroll auto;
• 浮動 float: left | right | none;清除浮動
• 陰影 box-shadow: h-shadow(水平陰影位置) v-shadow(垂直陰影位置) blur(模糊距離) spread(陰影尺寸) color(陰影顏色) inset|outset;陰影測試

2.font（字體）

• 顏色 color: 數值;
• 大小 font-size: 數值;
• 字體 font-family: 宋體,sans-serif;
• 樣式 font-style: italic;(斜體) normal;(正常)
• 粗細 font-weight: bold;(粗體) lighter;(細體) normal;(正常)
• 變體 font-variant: small-caps;(小型大寫字母) normal;(正常)
• 行高 line-height :數值;
• 字間距 letter-spacing : 數值;

3.text（文本）

• 大小寫 text-transform: capitalize(首字大寫) | uppercase(英文大寫) | lowercase(英文小寫) | none;
• 修飾 text-decoration: underline;(下劃線) overline;(上劃線) line-through;(刪除線)
• 排列 text-align: justify | left | right | center;
• 縮進 text-indent: 數值 | inherit;
• 陰影 text-shadow:數值;

4.background（背景）

• 顏色 background-color: 數值;
• 圖片 background-image: url() | none;
• 重複 background-repeat: no-repeat | repeat | repeat-x | repeat-y;
• 滾動 background-attachment: fixed | scroll;
• 尺寸 background-size:length|percentage|cover|contain;
• 位置 background-position:數值 | top | bottom | left | right | center;
• 簡寫 background:背景顏色 | 背景圖象 | 背景重複 | 背景附件 | 背景位置 ;
• 多值 background:url(a.jpg') no-repeat fixed center , url('a.jpg') no-repeat fixed top;
  background-size:300px 300px,100px 100px;

5.border（邊框）

• 樣式 border-style: solid;dotted;(點線) dashed;(虛線) double;(雙線) ;
• 寬度 border-width: 數值;
• 顏色 border-color: top值 right值 bottom值 left值;
• 簡寫 border: width style color;

6.list-style（列表樣式）

• 類型 list-style-type: disc(實心圓形) | circle(空心圓形) | square(實心方形) | decimal(數字) |none;
• 位置 list-style-position: outside | inside;
• 圖像 list-style-image: URL;
• 簡寫 list-style:樣式類型 | 樣式位置 | url;

3、CSS3 過渡、變換、動畫

1.變換transform

transform 屬性向元素應用 2D 或 3D 轉換。該屬性容許咱們對元素進行旋轉、縮放、移動或傾斜。

1) 移動translate:將元素從原來的位置移動到指定位置 測試

• translate(x,y) 2D 轉換。
• translate3d(x,y,z) 3D 轉換。
• translateX(x) 用X軸的值轉換。
• translateY(y) 用Y軸的值轉換。
• translateZ(z) 3D轉換隻是用Z軸的值。

2) 縮放scale:將元素根據中心原點進行縮放，測試

• scale(x,y) 2D縮放轉換。
• scale3d(x,y,z) 3D 縮放轉換。
• scaleX(x) 設置X軸的值來縮放轉換。測試
• scaleY(y) 設置Y軸的值來縮放轉換。測試
• scaleZ(z) 設置Z軸的值來3D縮放轉換。

3) 旋轉rotate：指定須要進行旋轉的座標軸, angle 表示旋轉角度

• rotate(angle) 2D 旋轉 測試
• rotate3d(x,y,z,angle) 3D 旋轉。
• rotateX(angle) 沿着X軸的 3D 旋轉。測試
• rotateY(angle) 沿着Y軸的 3D 旋轉。測試
• rotateZ(angle) 沿着Z軸的 3D 旋轉。

4) 傾斜skew(x-angle,y-angle) 可以讓元素傾斜顯示。它能夠將一個對象以其中心位置圍繞着X軸和Y軸按照必定的角度傾斜。skew圖片說明

• skew(x-angle,y-angle) 沿着X和Y軸的2D傾斜轉換。測試
• skewX(angle) 沿着X軸的2D傾斜轉換。 測試
• skewY(angle) 沿着Y軸的2D傾斜轉換。測試

2.過渡transition

• 參與屬性 transition-property ：none|all| property(多個屬性名以逗號分隔)
• 持續時間 transition-duration：time(秒或毫秒)，默認是0
• 轉速曲線 transition-timing-function 測試
  linear以相同速度開始至結束的過渡效果。
  ease 慢速開始，而後變快，而後慢速結束的過渡效果
  ease-in 以慢速開始的過渡效果
  ease-out 以慢速結束的過渡效果
  ease-in-out以慢速開始和結束的過渡效果
  cubic-bezier(n,n,n,n)定義本身的值。可能的值是 0 至 1 之間的數值。
• 延遲時間 transition-delay：time(秒或毫秒)，默認是0

簡寫 transition: property duration timing-function delay;測試

3.動畫animation

可經過設置多個節點來精確控制一個或一組動畫，經常使用來實現複雜的動畫效果.測試

1)必要元素

• 經過@keyframes指定動畫序列；自動補間動畫，肯定兩個點，系統會自動計算中間過程。這兩個點就稱爲關鍵幀。咱們能夠設置多個關鍵幀
• 經過百分比將動畫序列分割成多個節點；
• 在各節點中分別定義各屬性
• 經過animation將動畫應用於相應元素；

2)animation樣式屬性

• 動畫名稱 animation-name：move
• 持續時長 animation-duration : 1s ;默認是 0。
• 播放速度 animation-timing-function: linear;默認是 "ease" 測試
• 延時時間 animation-delay: 1s; 默認是 0。注意：animation: move 3s linear 0 2 ;(不執行) =>animation: move 3s linear 0s 2 ;
• 播放次數 animation-iteration-count: n|infinite; 默認是 1。
• 播放方向 animation-direction: normal|reverse|alternate|alternate-reverse;測試
• 播放完的狀態 animation-fill-mode: none | forwards(最後一個關鍵幀) | backwards(第一個關鍵幀) | both;測試
• 播放狀態 animation-play-state: paused|running;默認是 "running"。測試

animation全部動畫屬性的簡寫屬性，除了 animation-play-state 屬性。
簡寫animation: name duration timing-function delay iteration-count direction fill-mode; （默認值none 0 ease 0 1 normal none）

4、3D場景搭建與應用

1.屬性介紹

perspective: number|none; 3D元素距視圖的距離，以像素計
perspective-origin:50% 50% 3D元素所基於的X軸和Y軸。用來改變 3D 元素的底部位置。
當爲元素定義 perspective,perspective-origin 屬性時，其子元素會得到透視效果，而不是元素自己

transform-style:preserve-3d; 設置3D,調整元素是在一個3維空間下
transform-origin:x(left/center/right/length/%) y(top/center/bottom/length/%) z(length); 調整旋轉中心 默認值爲(50% 50% 0) 測試 用例-邊框設置0.5px
backface-visibility:visible|hidden; 當元素不面向屏幕時是否可見。測試

2.座標軸的概念

• 座標系原點在左上角,x軸的正方向是向右,y軸正方向是向下,z軸正方向是從屏幕到人的眼睛(垂直)

3.應用

CSS3實現3D開門動畫效果
圖片的旋轉木馬效果
CSS3 3D transform變換
張鑫旭博客