day02

A我學(xué)習(xí)到了什么捌浩?

1溫習(xí)day01的知識(shí)點(diǎn)

盒子模型:
margin外邊距起宽,border邊框豫尽,padding內(nèi)框的直接畫面調(diào)節(jié)
樣式重置:開發(fā)環(huán)境中的默認(rèn)值
如:*{margin:0箩溃;padding:0紧帕;}
水平居中:
margin-left:auto;
margin-right:auto;
僅限是塊標(biāo)簽的水平居中
常用HTML語義化:
div://塊元素区赵,
p://段落,
h1~h6:標(biāo)題,
img//圖片項(xiàng),
input//對(duì)話框,
a//鏈接,
button//按鍵
套標(biāo)簽:
ul:無序列表挖滤,
li:列表描述;
dl:定義段,
dt:定義描述父款,
dd定義稱述
  <ul>                         
        <li></li>                     
 </ul>                                                                 
<dl>
       <dt></dt>
        <dd></dd>
</dl>
常用CSS的樣式:
background-color:背景顏色溢谤;
background-image:背景圖片;
color:顏色憨攒;
width:寬度世杀;
herght:高度;
line-herght:行高肝集;
text-aline:文本對(duì)齊方向瞻坝;
border-width:邊框?qū)挾龋?border-style:邊框樣式;
border-color:邊框顏色杏瞻;
p:hover{color:red;}光標(biāo)移動(dòng)到元素變色所刀;
CSS常用選擇器:
p{},元素選擇器衙荐;
class選擇器:.text{};
id:選擇器;
偽選擇器:p:hover浮创;
重要選擇器:忧吟!importinent;
//他們比較級(jí)的大小
//元素<class<id<!importinent

2拓展HTML標(biāo)簽的分類

塊標(biāo)簽:特點(diǎn)是獨(dú)占一行斩披,設(shè)置寬高
div,h1~h6,p,ul,li,dl,dt,dd
默認(rèn)樣式【display:block;】
內(nèi)聯(lián)標(biāo)簽:特點(diǎn)是并排顯示溜族,不能設(shè)置寬高
不能設(shè)置margin-top,margin-bottom
如:a,span,em,strong
默認(rèn)樣式【display:inline;】
內(nèi)聯(lián)塊:特點(diǎn)是并排顯示,可以設(shè)置寬高
button,img,input
默認(rèn)樣式【display:inline-block;】
讓內(nèi)聯(lián)元素和內(nèi)聯(lián)塊元素水平居中
display:block;//以改變默認(rèn)樣式進(jìn)行
margin-left:auto;
margin-right:auto;//僅限塊標(biāo)簽
給父級(jí)加text-align:center//僅限內(nèi)聯(lián)塊標(biāo)簽

3CSS選擇器

分組選擇器:
p,h4雏掠,~{background:gray}//可以設(shè)置標(biāo)簽屬性的樣式
后代選擇器:
div>span{} //選取div所有子元素為span的標(biāo)簽
div span{} //選取div之后的所有span元素
//可以設(shè)置標(biāo)簽屬性的樣式
兄弟選擇器:
div+p{}選取緊鄰div之后的第一個(gè)兄弟元素//僅限下個(gè)元素指定的元素
//div+h3+p可以跳過指定
div~p{}選取緊鄰div之后的所有兄弟元素
//可以設(shè)置標(biāo)簽屬性的樣式
偽類選擇器:
div:hover{}//光標(biāo)移動(dòng)到改變
input:focus{}//光標(biāo)聚焦到改變
//可以設(shè)置標(biāo)簽屬性的樣式
偽元素:
":before" 偽元素可以在元素的內(nèi)容前面插入新內(nèi)容
p:before{
  content:''//可以不寫斩祭,但是必寫語句
}
":after" 偽元素可以在元素的內(nèi)容之后插入新內(nèi)容。
p:after{
 content:''//可以不寫乡话,但是必寫語句
}
//可以設(shè)置標(biāo)簽屬性的樣式
屬性選擇:
div[class='test']{}
//區(qū)分特定的標(biāo)簽以及文件

B我掌握到了什么

1溫習(xí)day01的知識(shí)點(diǎn)

盒子模型:
margin外邊距摧玫,border邊框,padding內(nèi)框的直接畫面調(diào)節(jié)
樣式重置:開發(fā)環(huán)境中的默認(rèn)值
如:*{margin:0绑青;padding:0诬像;}
水平居中:
margin-left:auto;
margin-right:auto;
僅限是塊標(biāo)簽的水平居中
常用HTML語義化:
div://塊元素,
p://段落,
h1~h6:標(biāo)題,
img//圖片項(xiàng),
input//對(duì)話框,
a//鏈接,
button//按鍵
套標(biāo)簽:
ul:無序列表闸婴,
li:列表描述;
dl:定義段坏挠,
dt:定義描述,
dd定義稱述
  <ul>                         
        <li></li>                     
 </ul>                                                                 
<dl>
       <dt></dt>
        <dd></dd>
</dl>
常用CSS的樣式:
background-color:背景顏色邪乍;
background-image:背景圖片降狠;
color:顏色;
width:寬度庇楞;
herght:高度榜配;
line-herght:行高;
text-aline:文本對(duì)齊方向吕晌;
border-width:邊框?qū)挾龋?border-style:邊框樣式蛋褥;
border-color:邊框顏色;
p:hover{color:red;}光標(biāo)移動(dòng)到元素變色睛驳;
CSS常用選擇器:
p{},元素選擇器烙心;
class選擇器:.text{};
id:選擇器;
偽選擇器:p:hover乏沸;
重要選擇器:淫茵!importinent;

2拓展HTML標(biāo)簽的分類

塊標(biāo)簽:特點(diǎn)是獨(dú)占一行屎蜓,設(shè)置寬高
div,h1~h6,p,ul,li,dl,dt,dd
默認(rèn)樣式【display:block;】
內(nèi)聯(lián)標(biāo)簽:特點(diǎn)是并排顯示痘昌,不能設(shè)置寬高
不能設(shè)置margin-top,margin-bottom
如:a,span,em,strong
默認(rèn)樣式【display:inline;】
內(nèi)聯(lián)塊:特點(diǎn)是并排顯示,可以設(shè)置寬高
button,img,input
默認(rèn)樣式【display:inline-block;】
讓內(nèi)聯(lián)元素和內(nèi)聯(lián)塊元素水平居中
display:block;//以改變默認(rèn)樣式進(jìn)行
margin-left:auto;
margin-right:auto;//僅限塊標(biāo)簽
給父級(jí)加text-align:center//僅限內(nèi)聯(lián)塊標(biāo)簽

3CSS選擇器

分組選擇器:
p,h4炬转,~{background:gray}//可以設(shè)置標(biāo)簽屬性的樣式
后代選擇器:
div>span{} //選取div所有子元素為span的標(biāo)簽
div span{} //選取div之后的所有span元素
偽類選擇器:
div:hover{}//光標(biāo)移動(dòng)到改變
input:focus{}//光標(biāo)聚焦到改變
//可以設(shè)置標(biāo)簽屬性的樣式
偽元素:
":before" 偽元素可以在元素的內(nèi)容前面插入新內(nèi)容
p:before{
  content:''//可以不寫辆苔,但是必寫語句
}
":after" 偽元素可以在元素的內(nèi)容之后插入新內(nèi)容。
p:after{
 content:''//可以不寫扼劈,但是必寫語句
}
//可以設(shè)置標(biāo)簽屬性的樣式
屬性選擇:
div[class='test']{}
//區(qū)分特定的標(biāo)簽以及文件

C我沒有掌握的

兄弟選擇器:
div+p{}選取緊鄰div之后的第一個(gè)兄弟元素//僅限下個(gè)元素指定的元素
//div+h3+p可以跳過指定
div~p{}選取緊鄰div之后的所有兄弟元素
//可以設(shè)置標(biāo)簽屬性的樣式

兄弟選擇器驻啤,后代選擇器還是不怎么熟練,可能要多接觸

QQ圖片20170913194942.jpg
QQ圖片20170913193305.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末荐吵,一起剝皮案震驚了整個(gè)濱河市骑冗,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌先煎,老刑警劉巖贼涩,帶你破解...
    沈念sama閱讀 222,627評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異薯蝎,居然都是意外死亡遥倦,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,180評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門占锯,熙熙樓的掌柜王于貴愁眉苦臉地迎上來袒哥,“玉大人,你說我怎么就攤上這事消略”こ疲” “怎么了?”我有些...
    開封第一講書人閱讀 169,346評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵艺演,是天一觀的道長(zhǎng)却紧。 經(jīng)常有香客問我,道長(zhǎng)胎撤,這世上最難降的妖魔是什么晓殊? 我笑而不...
    開封第一講書人閱讀 60,097評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮哩照,結(jié)果婚禮上挺物,老公的妹妹穿的比我還像新娘。我一直安慰自己飘弧,他們只是感情好识藤,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,100評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著次伶,像睡著了一般痴昧。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上冠王,一...
    開封第一講書人閱讀 52,696評(píng)論 1 312
  • 那天赶撰,我揣著相機(jī)與錄音,去河邊找鬼。 笑死豪娜,一個(gè)胖子當(dāng)著我的面吹牛餐胀,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播瘤载,決...
    沈念sama閱讀 41,165評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼否灾,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了鸣奔?” 一聲冷哼從身側(cè)響起墨技,我...
    開封第一講書人閱讀 40,108評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎挎狸,沒想到半個(gè)月后扣汪,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,646評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡锨匆,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,709評(píng)論 3 342
  • 正文 我和宋清朗相戀三年崭别,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片统刮。...
    茶點(diǎn)故事閱讀 40,861評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡紊遵,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出侥蒙,到底是詐尸還是另有隱情暗膜,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布鞭衩,位于F島的核電站学搜,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏论衍。R本人自食惡果不足惜瑞佩,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,196評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望坯台。 院中可真熱鬧炬丸,春花似錦、人聲如沸蜒蕾。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,698評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽咪啡。三九已至首启,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間撤摸,已是汗流浹背毅桃。 一陣腳步聲響...
    開封第一講書人閱讀 33,804評(píng)論 1 274
  • 我被黑心中介騙來泰國打工褒纲, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人钥飞。 一個(gè)月前我還...
    沈念sama閱讀 49,287評(píng)論 3 379
  • 正文 我出身青樓莺掠,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子香罐,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,860評(píng)論 2 361

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

  • 1.今天學(xué)到了什么 1.HTML標(biāo)簽的分類 HTML分類了三大類:a.塊標(biāo)簽 b.內(nèi)聯(lián)標(biāo)簽 c.內(nèi)聯(lián)塊 2.塊標(biāo)簽...
    613桑閱讀 385評(píng)論 0 0
  • 1.HTML標(biāo)簽的分類 1.1塊標(biāo)簽 特點(diǎn): 1.2內(nèi)聯(lián)標(biāo)簽 特點(diǎn): 1.3內(nèi)聯(lián)塊標(biāo)簽 特點(diǎn): 2.水平居中(內(nèi)聯(lián)...
    陳夢(mèng)晴閱讀 349評(píng)論 0 0
  • A今天學(xué)到了什么 1.HTML標(biāo)簽的分類 1.1塊標(biāo)簽 1.2內(nèi)聯(lián)標(biāo)簽 1.3內(nèi)聯(lián)塊標(biāo)簽 1.4如何讓內(nèi)聯(lián)標(biāo)簽實(shí)現(xiàn)...
    Summer_b1a9閱讀 199評(píng)論 0 0
  • A我今天學(xué)到了什么 一.html的分類 1.塊標(biāo)簽 2.內(nèi)聯(lián)標(biāo)簽 3.內(nèi)聯(lián)塊標(biāo)簽 二.讓內(nèi)聯(lián)元素和內(nèi)聯(lián)塊元素水平居...
    孔子曰_f425閱讀 257評(píng)論 0 0
  • A我今天學(xué)了什么 1.html標(biāo)簽的分類 1.塊標(biāo)簽(display:block) 2.內(nèi)聯(lián)標(biāo)簽(display:...
    相信自己_胡閱讀 108評(píng)論 0 0