目錄
選擇器優先順序
樣式設計
盒子模型
選擇器的優先級別： 查詢標籤越精確 優先級別越高
另外一種去計算選擇器優先順序別的： 選擇器的權重 權重值越大 優先級別越高
權重值分了四個等級：1000， 100， 10， 1
行內引用style屬性設計樣式 --- 權重值是1000
id選擇器 --- 權重值是 100
類選擇器， 偽類選擇器， 屬性選擇器 ---- 權重值是10
元素選擇器 --- 權重值是 1
後代選擇器器(包含選擇器) 權重值 所有的選擇器的權重之和
#main > .page 權重值就是 100 + 10
#main p 權重值就是 100 + 1
組合選擇器 權重是是選擇器自身的權重
#main, .page, p --- 各自自身的分別是 100， 10， 1
樣式設計：
1. 關於背景的樣式設計
知識點：
關於顏色的賦值：
1. 直接顏色對應的英文資料 red green blue black
2. 使用十六機制顏色值 #000000 - #ffffff [如果每種顏色值對應的十六進製制數值的兩位是一致的話 可以簡化成一位的：#000 或者 #fff ] affcbe ---> af fc be 簡化之後沒辦法判斷的就不用簡化了 例如 #aabbcc ---> #abc
十六進製制的顏色值中 每兩位表示的是乙個顏色值 三對的時候就可以簡化
顏色為aabbcc格式的才能簡化
例如: #112233 ---> #123
#111111 ---> #111
3. 使用rgb功能自己調色
顏色調色： 紅色 綠色和藍色來完成顏色調比的， 每種顏色的對應的十進位製取值是0到255 [對應的十六進製制 #00 到 #ff]
這個的顏色值使用的是十進位制的資料
rgb(紅色對應的顏色值，綠色對應的顏色值，藍色對應的顏色值)
rgba(紅色對應的顏色值，綠色對應的顏色值，藍色對應的顏色值, 透明度)
r -- 紅色的顏色值
g -- 綠色的顏色值
b -- 藍色的顏色值
a -- alpha -- 生成之後顏色的透明度 取值是0到1
0表示完全透明
1表示完全不透明
0.5 半透明
4.hsl調色
h色相 --- 色彩的基本屬性 值是0到360
0(或者360) 紅色
120 綠色
240 藍色
0到120是紅色到綠色的過渡色
120到240 是綠色到藍色的過渡色
240到360 藍色到紅色的過渡色
s飽和度 取值是0到100%
色彩的飽和度越高 色彩越純
低的話就慢慢的變灰了
l亮度 取值也是0到100% 正常亮度是50%
50%-100% 趨於白變化
50%-0% 趨於黑的變化
hsla 其中a就是透明度
盒子模型：
是css進行布局的基石， 規定了網頁元素(標籤)如何顯示以及元素(標籤)之間的相互的關係
css定義所有的元素都有像盒子一樣的外型和平面空間， 也就是包含了邊框， 外邊界， 補白(內邊距) 內容區
邊框： border 元素的邊框 ---- 手機盒的厚度
邊界 margin 外邊距 體現的是元素和元素之間的間隙 --- 每個手機盒之間的間隙就是外邊距
補白 padding 內邊距 元素和內容之間的間隙 --- 手機盒和手機之間的填充物 就叫做內邊距
內容區 content 顯示內容的區域 ---- 手機盒裡面的手機
css中盒子模型分為兩種：標準盒子模型和怪異盒子模型
標準盒子模型
一般標籤的盒子模型預設為標準盒子模型的
標準盒子模型的特點：
內容區的大小就是設定的元素的寬高的大小(width height的值)
看標籤的大小的時候
寬度w = width + padding + boder
怪異盒子模型
特點：給標籤定義的寬高是 包含邊框 ， 內邊距 ， 內容區在內的大小
設定的寬就是標籤顯示的寬
高就是標籤顯示的高
標準和怪異區別點在於設定的寬高 決定誰的大小
標準：設定的寬高是內容區的大小
怪異：設定的寬高是整個標籤的大小
也就是設定的寬高是 邊框 + 內邊距 + 內容區的大小
標籤包含 邊框 內邊距 內容區
CSS樣式選擇器優先順序
原文 css樣式選擇器優先順序 css樣式選擇器分為4個等級，a b c d，可以以這四種等級為依據確定css選擇器的優先順序。1.如果樣式是行內樣式 通過style 定義 那麼a 1 2.b為id選擇器的總數 3.c為class類選擇器的數量。4.d為型別選擇器的數量 5.屬性選擇器，偽類選擇器和...
css選擇器優先順序 樣式表優先順序
css三大特性 繼承 優先順序層疊css選擇器優先順序 選擇器 權重 萬用字元 0 標籤名，偽元素 1 類 偽類 屬性 10 id 100 行內樣式 1000 important 1 0 無窮大 總結排序 important 行內樣式 id 類 偽類 屬性 標籤名，偽元素 萬用字元 繼承 瀏覽器預設...
選擇器優先順序 CSS選擇器優先順序總結
css選擇器優先順序這個問題，相信有點經驗前端都會認為非常簡單，但是我們今天還是來總結一下吧。相信大家應該很少直接在html頁面寫樣式吧，一般都是用link標籤匯入css樣式表。使用者自定義樣式表就是我們用link標籤引入的css樣式表，為了保持不同瀏覽器下樣式相同，所以我們的自定義樣式表一般都會覆...