css布局級(jí)層級(jí)關(guān)系--2017.11.13

一场躯。頁(yè)面引用css的方式
1.內(nèi)聯(lián)樣式
<h1 style="color:red;font-size:20px;"></h1>
2.內(nèi)部樣式
<style type="text/css">
hi{
color:red;
font-size:20px;
}
</style>
3.外部樣式
一種:<head>
<link rel="stylesheet" type="text/css" herf="index.css">
</head>
二種:
<style>
@import url("index.css");
@import "index.css";

</style>
二冯遂。文件路徑
“./”代表當(dāng)前所在文件夾下的
“../”代表上一級(jí)目錄
“/”一般放到服務(wù)下 代表域名下的某路徑 所以一般使用相對(duì)路徑


css: 頁(yè)面
文字相關(guān)
背景相關(guān)
布局相關(guān)
響應(yīng)相關(guān)
動(dòng)畫相關(guān)
變形相關(guān)
css:選擇器
1.基礎(chǔ)選擇器:“*”通用選擇器:匹配頁(yè)面所有元素
“ID”id選擇器 匹配頁(yè)面對(duì)應(yīng)的ID元素
“class”類選擇器匹配頁(yè)面對(duì)應(yīng)的class類下的元素
“element”標(biāo)簽選擇器
2.組合選擇器:‘E,F’并列選擇器
‘E F’后代選擇器 E下的所有F后代(子孫)
‘E>F’子元素選擇器 E下的直接后代(直限兒子)
#b+#c 是 #b 元素之后緊挨著#b的 #c
#b~#c 是 #b 元素之后同級(jí)的 #c
‘ef’e和f之間沒(méi)有空格,沒(méi)有任何符合 代表既有e又有f 例如"class='a active'" 一般用.a.active 中間無(wú)空格
3.屬性選擇器


偽類選擇器:用于向某些選擇器添加特殊的效果。
.child:first-child 匹配.child所對(duì)應(yīng)的父元素下第一個(gè)子元素
.child:first-of-type 匹配.child所對(duì)應(yīng)的父元素下同種類型的第一個(gè)子元素
.child:nfn-of-type(2) 同種類型下的第二個(gè)選擇器 一般2n代表偶數(shù)埠啃,2n+1代表奇數(shù)
偽元素選擇器:用于創(chuàng)建一些不在文檔樹的元素,并為其添加樣式


選擇器的優(yōu)先級(jí):
1.樣式后面加!important的 權(quán)重最高
2.style屬性也在標(biāo)簽里的內(nèi)聯(lián)樣式
3.id選擇器
4.類選擇器
5.偽類選擇器
5.屬性選擇器
7.標(biāo)簽選擇器
8.通配符選擇器
9.瀏覽器自定義


合理的抽出一些通用樣式 ,但具體的某個(gè)區(qū)域加樣式要去針對(duì)某個(gè)選擇器去寫
在CSS中趴荸,如果對(duì)于相同元素有針對(duì)不同條件的定義,宜將最一般的條件放在最上面宦焦,
并依次向下发钝,保證最下面的是最特殊的條件。這樣波闹,瀏覽器在顯示元素時(shí)酝豪,
才會(huì)從特殊到一般、逐級(jí)向上驗(yàn)證條件精堕,才會(huì)使你的每一個(gè)CSS語(yǔ)句都起到效果孵淘。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市锄码,隨后出現(xiàn)的幾起案子夺英,更是在濱河造成了極大的恐慌,老刑警劉巖滋捶,帶你破解...
    沈念sama閱讀 218,941評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件痛悯,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡重窟,警方通過(guò)查閱死者的電腦和手機(jī)载萌,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,397評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)巡扇,“玉大人扭仁,你說(shuō)我怎么就攤上這事√瑁” “怎么了乖坠?”我有些...
    開封第一講書人閱讀 165,345評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)刀闷。 經(jīng)常有香客問(wèn)我熊泵,道長(zhǎng),這世上最難降的妖魔是什么甸昏? 我笑而不...
    開封第一講書人閱讀 58,851評(píng)論 1 295
  • 正文 為了忘掉前任顽分,我火速辦了婚禮,結(jié)果婚禮上施蜜,老公的妹妹穿的比我還像新娘卒蘸。我一直安慰自己,他們只是感情好翻默,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,868評(píng)論 6 392
  • 文/花漫 我一把揭開白布缸沃。 她就那樣靜靜地躺著恰起,像睡著了一般。 火紅的嫁衣襯著肌膚如雪和泌。 梳的紋絲不亂的頭發(fā)上村缸,一...
    開封第一講書人閱讀 51,688評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音武氓,去河邊找鬼。 笑死仇箱,一個(gè)胖子當(dāng)著我的面吹牛县恕,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播剂桥,決...
    沈念sama閱讀 40,414評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼忠烛,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了权逗?” 一聲冷哼從身側(cè)響起美尸,我...
    開封第一講書人閱讀 39,319評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎斟薇,沒(méi)想到半個(gè)月后师坎,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,775評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡堪滨,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,945評(píng)論 3 336
  • 正文 我和宋清朗相戀三年胯陋,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片袱箱。...
    茶點(diǎn)故事閱讀 40,096評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡遏乔,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出发笔,到底是詐尸還是另有隱情盟萨,我是刑警寧澤,帶...
    沈念sama閱讀 35,789評(píng)論 5 346
  • 正文 年R本政府宣布了讨,位于F島的核電站捻激,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏量蕊。R本人自食惡果不足惜铺罢,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,437評(píng)論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望残炮。 院中可真熱鬧韭赘,春花似錦、人聲如沸势就。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,993評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至袖牙,卻和暖如春侧巨,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背鞭达。 一陣腳步聲響...
    開封第一講書人閱讀 33,107評(píng)論 1 271
  • 我被黑心中介騙來(lái)泰國(guó)打工司忱, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人畴蹭。 一個(gè)月前我還...
    沈念sama閱讀 48,308評(píng)論 3 372
  • 正文 我出身青樓坦仍,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親叨襟。 傳聞我的和親對(duì)象是個(gè)殘疾皇子繁扎,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,037評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,754評(píng)論 1 92
  • 一、CSS選擇器 關(guān)于CSS選擇器右犹,首先請(qǐng)看這里:CSS 選擇器參考手冊(cè) 通過(guò)以上提澎,我們可以將CSS選擇器分為以下...
    fehysunny閱讀 2,247評(píng)論 0 2
  • 一、CSS選擇器常見(jiàn)的有幾種? 基本選擇器 通配選擇器~選擇文檔中所有的html元素傀履,用一個(gè)*表示 元素選擇器~選...
    dengpan閱讀 962評(píng)論 0 3
  • 1.class 和 id 的使用場(chǎng)景? 類選擇器允許以一種獨(dú)立于文檔元素的方式來(lái)指定樣式钓账。該選擇器可以單獨(dú)使用碴犬,也...
    草鞋弟閱讀 2,419評(píng)論 0 1
  • 她迷路了,給三個(gè)男人發(fā)了短信梆暮, 第一位說(shuō)注意安全服协, 第二位說(shuō)需要我來(lái)接你回去嗎? 她頓時(shí)感覺(jué)溫暖多了啦粹, 可遲遲不見(jiàn)...
    Angelxie閱讀 466評(píng)論 0 0