day7 CSS屬性中

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電腦相同的屏幕分辨率下,對應點的大小不同晒骇。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末霉撵,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子洪囤,更是在濱河造成了極大的恐慌徒坡,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,265評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件瘤缩,死亡現(xiàn)場離奇詭異喇完,居然都是意外死亡,警方通過查閱死者的電腦和手機剥啤,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,078評論 2 385
  • 文/潘曉璐 我一進店門锦溪,熙熙樓的掌柜王于貴愁眉苦臉地迎上來不脯,“玉大人,你說我怎么就攤上這事刻诊》揽” “怎么了?”我有些...
    開封第一講書人閱讀 156,852評論 0 347
  • 文/不壞的土叔 我叫張陵则涯,是天一觀的道長复局。 經(jīng)常有香客問我,道長粟判,這世上最難降的妖魔是什么亿昏? 我笑而不...
    開封第一講書人閱讀 56,408評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮浮入,結果婚禮上龙优,老公的妹妹穿的比我還像新娘羊异。我一直安慰自己事秀,他們只是感情好,可當我...
    茶點故事閱讀 65,445評論 5 384
  • 文/花漫 我一把揭開白布野舶。 她就那樣靜靜地躺著易迹,像睡著了一般。 火紅的嫁衣襯著肌膚如雪平道。 梳的紋絲不亂的頭發(fā)上睹欲,一...
    開封第一講書人閱讀 49,772評論 1 290
  • 那天,我揣著相機與錄音一屋,去河邊找鬼窘疮。 笑死,一個胖子當著我的面吹牛冀墨,可吹牛的內容都是我干的闸衫。 我是一名探鬼主播,決...
    沈念sama閱讀 38,921評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼诽嘉,長吁一口氣:“原來是場噩夢啊……” “哼蔚出!你這毒婦竟也來了?” 一聲冷哼從身側響起虫腋,我...
    開封第一講書人閱讀 37,688評論 0 266
  • 序言:老撾萬榮一對情侶失蹤骄酗,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后悦冀,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體趋翻,經(jīng)...
    沈念sama閱讀 44,130評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,467評論 2 325
  • 正文 我和宋清朗相戀三年盒蟆,在試婚紗的時候發(fā)現(xiàn)自己被綠了嘿歌。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片掸掏。...
    茶點故事閱讀 38,617評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖宙帝,靈堂內的尸體忽然破棺而出丧凤,到底是詐尸還是另有隱情,我是刑警寧澤步脓,帶...
    沈念sama閱讀 34,276評論 4 329
  • 正文 年R本政府宣布愿待,位于F島的核電站,受9級特大地震影響靴患,放射性物質發(fā)生泄漏仍侥。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,882評論 3 312
  • 文/蒙蒙 一鸳君、第九天 我趴在偏房一處隱蔽的房頂上張望农渊。 院中可真熱鬧,春花似錦或颊、人聲如沸砸紊。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,740評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽醉顽。三九已至,卻和暖如春平挑,著一層夾襖步出監(jiān)牢的瞬間游添,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,967評論 1 265
  • 我被黑心中介騙來泰國打工通熄, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留唆涝,地道東北人。 一個月前我還...
    沈念sama閱讀 46,315評論 2 360
  • 正文 我出身青樓唇辨,卻偏偏與公主長得像廊酣,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子助泽,可洞房花燭夜當晚...
    茶點故事閱讀 43,486評論 2 348

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案啰扛? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,737評論 1 92
  • 轉載請聲明 原文鏈接地址 關注公眾號獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    程序員poetry閱讀 16,524評論 32 459
  • 本文主要是起筆記的作用,內容來自慕課網(wǎng). 認識CSS樣式 CSS全稱為“層疊樣式表 (Cascading Styl...
    0o凍僵的企鵝o0閱讀 2,630評論 0 30
  • ?前端面試題匯總 一嗡贺、HTML和CSS 21 你做的頁面在哪些流覽器測試過隐解?這些瀏覽器的內核分別是什么? ...
    Simon_s閱讀 2,220評論 0 8
  • 所有的斑駁只屬于我的惦念,附帶了背景
    2020號閱讀 329評論 26 26