1.CSS的特性
1.1CSS的層疊性
CSS的層疊性灶芝,也就是說后來設置的樣式會層疊(覆蓋)之前的樣式迅耘,層疊性的前提示CSS的選擇器的優(yōu)先級相同。
1.2CSS的繼承性
CSS的繼承性是指监署,子容器的樣式會繼承父容器的樣式颤专。但并不是所有的樣式都能繼承。只有部分樣式能繼承钠乏,比如:文字相關字體大小栖秕、顏色、字體樣式晓避、行高簇捍、鼠標樣式等。盒子相關的樣式都不能繼承俏拱,比如:寬高暑塑、背景色、邊距锅必、浮動事格、絕對定位等。
?1.3CSS的特殊性(優(yōu)先級)
CSS的特殊性搞隐,定義CSS樣式時驹愚,經(jīng)常出現(xiàn)兩個或更多規(guī)則應用在同一元素上,那么誰的優(yōu)先級更高呢劣纲,這就是CSS的特殊性逢捺。
比較CSS的優(yōu)先級的時候:
1、首先比較行內樣式癞季,行內樣式優(yōu)先級最高劫瞳。如果嵌入樣式和行內樣式同時設置樣式時倘潜,行內樣式優(yōu)先級最高。
2志于、其次是內嵌樣式的優(yōu)先級比較:
內嵌樣式的涮因,ID選擇器對應的樣式優(yōu)先級最高。
其次是Class樣式
再次是標簽選擇器樣式恨憎,
再次是通配符選擇器設置的樣式
后面是繼承的樣式,
最后是瀏覽器默認的樣式郊楣。
結論:1.繼承的樣式要大于默認的樣式
2.通配符選擇器的樣式的優(yōu)先級比繼承樣式的優(yōu)先級要高憔恳。
3.標簽的選擇器的優(yōu)先級要高于通配符選擇器的優(yōu)先級。
4.類選擇器的樣式的優(yōu)先級要高于標簽選擇器的樣式的優(yōu)先級净蚤。
5.id選擇器的優(yōu)先級高于 類選擇器的優(yōu)先級
6.行內樣式的選擇器的優(yōu)先級高于id選擇器的優(yōu)先級钥组。
復合選擇器的樣式優(yōu)先級核算:
復合選擇器的優(yōu)先級根據(jù)四個層次來算,首先是行內最高今瀑。
其次程梦,比較所有的id選擇器的個數(shù),個數(shù)多的為高橘荠。
再次比較類選擇器的個數(shù)屿附,個數(shù)多的為高,
最后比較標簽選擇器的個數(shù)哥童,個數(shù)多的為高挺份。
2.CSS標簽模式設置display屬性
display可以控制標簽的顯示模式。
display:none | inline | block | inline-block
繼承性:無
display值的解釋:
none:此元素不被顯示贮懈,在文檔中被移除匀泊。
block:此元素按塊級元素顯示:前后帶換行符,自己占一行朵你。內聯(lián)元素 → 塊元素
inline:此元素按內聯(lián)元素顯示:1個挨著1個各聘。塊元素 → 內聯(lián)元素
inline-block:按行內標簽進行排版,但是可以設置寬高抡医,而且高度可以影響行高躲因。
注意:
1.display改變標簽的模式,行內轉塊級忌傻,塊級轉行內毛仪。
2.通過CSS隱藏HTML標簽
通過設置Display為none,那么可以讓這整個標簽在頁面中移除掉芯勘。
對比一下:
/*display: none;*/ ??/*直接把當前標簽從頁面中直接移除了箱靴,不影響頁面的布局*/
visibility: hidden;/*這個只是不顯示,但還是占用頁面的空間*/
案例3:行內塊元素設置
寬高邊距獨占行
行內元素:X左右邊距 ?????不獨占
塊級元素:√ ??????上下左右 ??????獨占
行內塊元素:√ ???????左右 ?????????不獨占
行內元素不能設置寬高荷愕,只能通過他的內容來撐開他的寬度和高度衡怀。如果你設置了寬高是不會影響行內元素的顯示的棍矛。
3.CSS的顏色表示
RGB:red,green抛杨,blue三元素疊加組成不同顏色够委。
語法:color: rgb(33,33,33);
取值:0-255,也可以用百分比:0% - 100%
十六進制是另外一種寫法:
Color:#3333333;
十六進制也是rgb的表示方法另外一種寫法而已
?4.長度單位
絕對長度單位:
cm:厘米怖现,mm:毫米茁帽,in:英寸,pc:派卡(Picas)屈嗤,相當于我國新四號鉛字的尺寸潘拨。都不常用,了解即可饶号。
相對長度單位:
px:像素點铁追,像素就是顯示器顯示的一個點。
em:1em等于當前的字體大小茫船,例如:當前元素的字體大小為16px琅束,那么1em = 16px。
單位之間的關系:1in = 2.54cm = 25.4 mm ?= = 96px
p { width: 1in; height:20px; }
在PC時代主要以px為主算谈。在移動web時代主要以:em涩禀、rem、pw然眼、ph埋泵、百分比等來做布局的設置。
相對單位解釋:像素是相對單位罪治。不同平面尺寸可以是相同的分辨率丽声,也就相同的像素大小,對應的實際的尺寸可能不同觉义。例如以下雁社,iphone和pc電腦相同的屏幕分辨率下,對應點的大小不同晒骇。