CSS基礎知識
- 復合選擇器
- 后代選擇器
- 子元素選擇器
- 交集選擇器
- 并集選擇器
- 偽類選擇器
- 行高
- 單行文本垂直居中
- 行高和高度的三種關系
- 標簽顯示模式
- 什么是標簽顯示模式
- 塊級元素
- 行內元素
- 行內塊級元素
- 標簽顯示模式轉換
- CSS特性
- 層疊性
- 繼承性
- 優先級
- CSS背景
- 背景顏色
- 背景圖片
- 背景平鋪
- 背景位置
- 背景附著
- 背景簡寫
- 背景透明
- CSS注釋
復合選擇器
后代選擇器
概念
后代選擇器又稱為包含選擇器
語法
.class h3{color:red;font-size:16px;}
作用
用來選擇元素或元素組的子孫后代
把外層標簽寫在前面，內層標簽寫在后面，中間用空格分隔
子元素選擇器
語法
.class>h3{color:red;font-size:14px;}
作用
子元素選擇器只能選擇作為某元素子元素(親兒子)的元素
把父級標簽寫在前面子級標簽寫在后面中間跟一個>連接
交集選擇器
條件
由兩個選擇器構成，找到的標簽必須滿足：既有標簽一的特點也有標簽二的特點
語法
第一個為標簽選擇器第二個為class選擇器，二者間不能有空格
并集選擇器
并集選擇器是各個選擇器通過 , 連接而成的，通常用于集體宣告
應用
某些選擇器定義的相同樣式可利用并集選擇器，讓代碼更簡潔
語法
并集選擇器用逗號隔開的，所有選擇器都會執行后面樣式
偽類選擇器
作用
用于向某些選擇器添加特殊的效果，如給鏈接添加特殊效果
鏈接偽類
a:link /* 未訪問的鏈接 /
a:visited / 已訪問的鏈接 /
a:hover / 滑鼠移動到鏈接上 /
a:active / 選定的鏈接 */
行高
基線和基線的距離為行高
單行文本垂直居中
文字的行高等于盒子的高度，行高 = 上距離 + 內容高度 + 下距離
行高和高度的三種關系
如果行高等于高度文字會垂直居中
如果行高大于高度文字會偏下
如果行高小于高度文字會偏上
標簽顯示模式
什么是標簽顯示模式
標簽以什么方式進行顯示，比如div自己占一行， span一行多個
作用
網頁標簽非常多不同地方用不同型別的標簽以便更好的完成網頁
分類
塊級元素
特點
一行只能放一個塊
高度，寬度、外邊距以及內邊距都可以控制
寬度默認是容器（父級寬度）的100%
是一個容器及盒子，里面可以放行內或者塊級元素
行內元素
特點
相鄰行內元素在一行上，一行可以顯示多個
高、寬直接設定是無效的
默認寬度就是它本身內容的寬度
行內元素只能容納文本或則其他行內元素
注意
鏈接里面不能再放鏈接
特殊情況a里面可以放塊級元素
行內塊級元素
特點
和相鄰行內元素在一行上,但是之間有空白縫隙，一行可顯示多個
默認寬度就是它本身內容的寬度
高度，行高、外邊距以及內邊距都可以控制
標簽顯示模式轉換
塊轉行內：display:inline;
行內轉塊：display:block;
塊、行內元素轉換為行內塊： display: inline-block;
CSS特性
層疊性
概念
層疊性是指多種CSS樣式的疊加
原則
樣式沖突，遵循的原則是就近原則
樣式不沖突，不會層疊
繼承性
概念
子標簽會繼承父標簽的某些樣式，如文本顏色和字號
優先級
概念
定義CSS樣式時，經常出現兩個或更多規則應用在同一元素上，此時
選擇器相同，則執行層疊性
選擇器不同，就會出現優先級的問題
權重計算公式
關于CSS權重，我們需要一套計算公式來去計算，這個就是 CSS Specificity
權重疊加
交集選擇器后代選擇器是有多個基礎選擇器組合而成，會出現權重疊加
繼承的權重是0
修改樣式要看該標簽是否被選中
如果選中以上面公式計權重
如果沒有選中，那么權重是0
CSS背景
背景顏色
語法
background-color:顏色值; 默認的值是 transparent 透明的
背景圖片
語法
background-image : none | url（地址檔案名）
背景平鋪
語法
background-repeat : repeat | no-repeat | repeat-x | repeat-y
引數
repeat（背景影像在縱向和橫向上平鋪）no-repeat（背景影像不平鋪）
repeat-x（背景影像在橫向上平鋪）repeat-y（背景影像在縱向平鋪）
背景位置
語法
background-position : length || length
background-position : position || position
引數
length
百分數 | 由浮點數字和單位識別符號組成的長度值
position
top | center | bottom | left | center | right 方位名詞
背景附著
背景附著就是解釋背景是滾動的還是固定的
語法
background-attachment : scroll | fixed
引數
scroll（背景影像是隨物件內容滾動）fixed（背景影像固定）
背景簡寫
background：屬性的值的書寫順序官方并沒有強制標準的
語法
background: transparent url(image.jpg) repeat-y scroll center top ;
背景透明
語法
background: rgba(0, 0, 0, 0.3);
CSS注釋
規則
/* 需要注釋的內容 */ 進行注釋的
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/4841.html
標籤：其他
上一篇：JavaScript進階教程(4)-函式內this指向解惑call()，apply()，bind()的區別
下一篇：axios的使用