########################
001:規定字符集和自定義全局屬性
-
(1)@charset "UTF-8":聲明該css文件的編碼爲UTF-8:
-
(2):root {}:在根元素html中聲明自定義屬性,這樣其他任何元素都可使用這些自定義屬性:
002:全局配置元素高度和寬度的計算標準
-
(1)box-sizing: content-box|border-box|initial|inherit。當box-sizing爲border-box時,表示對元素指定寬度和高度包括了 padding 和 border,這樣更方便;當box-sizing爲content-box時,表示對元素指定寬度和高度不包括 padding 和 border,這是默認值;
-
(2)* 表示了頁面所有元素,但不包含*::before和*::after所表示的,因此這裏還加上了*::before和*::after插入的內容,這樣就覆蓋完了
003:給根元素html開啓平滑過渡
-
(1)scroll-behavior: smooth; 該屬性指定當用戶單擊可滾動框中的鏈接時,可平滑地設置滾動位置動畫,效果更好;而不是默認值爲auto所表示的直線跳躍,顯得直棒棒地,過於簡陋了,因此設置爲smooth最佳,而不是默認值auto
-
(2)@media媒體查詢中的prefers-reduced-motion: no-preference,表示用戶的系統沒有開啓動畫減弱功能的情況下;當prefers-reduced-motion爲
reduce時,
表示用戶修改了系統設置,將動畫效果最小化,極少有人這麼去幹,因此大部分情況下就是全局開啓平滑過渡。
004:配置body元素的外邊距、字體、背景顏色、文本顏色
-
(1)外邊距爲0,那就是沒得外邊距;
- (2)行高爲1.5rem,即爲頁面字體的1.5倍的行間距;
-
(3)字體設置:字體的名稱(較多)和大小(1rem),文本的粗細、顏色rgb(33, 37, 41)、對齊方式(左對齊);
-
(4)背景顏色,就是純白色rgb(255, 255, 255);
注意:但是這裏定義文本對齊方式卻是不必要,因爲這個--bs-body-text-align自定義屬性沒有給定具體值,那就是默認值了,即左對齊方式。對齊方式有左中右兩邊:text-align: left|right|center|justify|initial|inherit; 官方issue在這裏:https://github.com/twbs/bootstrap/issues/35338
005:
006:水平線元素:
/*選中非段落元素*/ :not(p) { }
/*選中div裏面非首個、非最後一個的中間p元素*/ div p:not(:first-child):not(:last-child){ }
table tbody tr:not(:first-child):not(:last-child) td { text-align: right; } /* 以上代碼可以選擇table表格中tbody部分非首個、非最後一個的tr,並設置其子元素td文本樣式居右 */
###############