我的前端學(xué)習(xí)筆記5-html+css

知識(shí)點(diǎn)總結(jié)區(qū)

任性而為明棍,內(nèi)容無(wú)關(guān)

1,樣式有幾種引入方式? link 和 @import有什么區(qū)別

CSS:

  • 外部引入樣式:
    <link rel="stylesheet" type="text/css" href="文件名">
  • 內(nèi)部樣式:
    1更卒,內(nèi)聯(lián)樣式(html元素內(nèi)部):<p style="color: red; font-size: 34px;">段落</p>
    2榛泛,內(nèi)部樣式(位于標(biāo)簽內(nèi)部):<style>p{color: black; font-size:55px}</style>

JAVA SCRIPT:

  • 外部引入樣式:
    <link rel="stylesheet" type="text/css" herf="文件名">
  • 內(nèi)部樣式:
    <script type="text/javascript" src="js所在文件名"></script>

link和@import有什么區(qū)別:

link和@import寫法區(qū)別
  • link:可以共用相同文件塑荒,減少工作量
  • @import url(引入文件)可以縮短網(wǎng)頁(yè)加載時(shí)間

link 和 @import的區(qū)別在于:1.link標(biāo)簽除了可以加載CSS外,還可以做很多其它的事情吏祸,比如定義RSS,定義rel連接屬性等,@import就只能加載CSS了被因。當(dāng)一個(gè)頁(yè)面被加載的時(shí)候(就是被瀏覽者瀏覽的時(shí)候),link引用的CSS會(huì)同時(shí)被加載衫仑,而@import引用的CSS 會(huì)等到頁(yè)面全部被下載完再被加載梨与。所以有時(shí)候?yàn)g覽@import加載CSS的頁(yè)面時(shí)開始會(huì)沒(méi)有樣式(就是閃爍),網(wǎng)速慢的時(shí)候還挺明顯.由于@import是CSS2.1提出的所以老的瀏覽器不支持文狱,@import只有在IE5以上的才能識(shí)別粥鞋,而link標(biāo)簽無(wú)此問(wèn)題。瞄崇。當(dāng)使用javascript控制dom去改變樣式的時(shí)候呻粹,只能使用link標(biāo)簽,因?yàn)锧import不是dom可以控制的苏研。

2等浊,文件路徑../main.css 、./main.css摹蘑、main.css筹燕、/main.css有什么區(qū)別

../main.css代表到上一目錄中尋找
./main.css代表在本目錄中尋找文件
main.css與./main.css相同
/main.css代表根目錄```

> 3,console.log是做什么用的
能將內(nèi)容展示在瀏覽器中,很方便撒踪。
console 控制臺(tái)log 日志意思是在控制臺(tái)輸出日志信息,控制臺(tái)也叫開發(fā)者工具,是瀏覽器的一部分过咬,便于開發(fā)者調(diào)試用的。
- 相比于alert()更加直觀制妄。

> 4掸绞,text-align有幾個(gè)值,分別有什么作用忍捡?為什么text-align:justify沒(méi)有效果集漾?寫截圖說(shuō)明區(qū)別

- text-align:left 使文本居左。
- text-align:right  使文本居右砸脊。
- text-align:center 使文本居中
- text-align:justify 是文本兩端對(duì)齊


- text-align:justify無(wú)效果情況:

![無(wú)效](http://upload-images.jianshu.io/upload_images/3706166-c1ededc4030b95eb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- text-align:justify有效果情況:
![有效](http://upload-images.jianshu.io/upload_images/3706166-a71212ded559a1a1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- text-align:right情況:

![沒(méi)用justify](http://upload-images.jianshu.io/upload_images/3706166-52ec02f6feba7b76.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

> 5具篇,px、em凌埂、rem分別是什么驱显?有什么區(qū)別?如何使用

px含義是像素瞳抓,就是一種計(jì)量單位埃疫。
em和rem則是相對(duì)變量。
em是相對(duì)于父級(jí)(上一級(jí))字體的px量進(jìn)行某倍的變化孩哑。
rem是相對(duì)于html文件的font-size進(jìn)行倍數(shù)變化栓霜。
> 6,對(duì)chrome 審查元素的功能做個(gè)簡(jiǎn)單的截圖介紹

略

> 7,設(shè)置body的字體為微軟雅黑横蜒,字號(hào)16px胳蛮, 行高1.5倍,字體顏色 #333
![](http://upload-images.jianshu.io/upload_images/3706166-bbea9ea5426f7831.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

.
> 8丛晌,設(shè)置段落顏色#000, 首行縮進(jìn)兩個(gè)字體寬度仅炊,1.5倍行高

.
![add.png](http://upload-images.jianshu.io/upload_images/3706166-a39e6c79cccfe45a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

![](http://upload-images.jianshu.io/upload_images/3706166-8d09791f26f5ae32.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
.
>  id和class的區(qū)別?

 - id和class都是為了在小范圍內(nèi)運(yùn)用樣式的一個(gè)屬性
 - 任何元素都可以添加id和class澎蛛,格式如下:

![](http://upload-images.jianshu.io/upload_images/3706166-0fead169c75099ed.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

 - id定位了頁(yè)面上唯一的元素抚垄,所以定義id的時(shí)候id之間一定不能重名

![](http://upload-images.jianshu.io/upload_images/3706166-f33076e4a0124aa8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

 - class是定義一類的,class和id的名字可以相同

###TIP
![本文所有權(quán)歸李連成所有谋逻,私轉(zhuǎn)必究](http://img5.imgtn.bdimg.com/it/u=230900514,2030090921&fm=11&gp=0.jpg)
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末呆馁,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子毁兆,更是在濱河造成了極大的恐慌智哀,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,743評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件荧恍,死亡現(xiàn)場(chǎng)離奇詭異瓷叫,居然都是意外死亡屯吊,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門摹菠,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)盒卸,“玉大人,你說(shuō)我怎么就攤上這事次氨”谓椋” “怎么了?”我有些...
    開封第一講書人閱讀 157,285評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵煮寡,是天一觀的道長(zhǎng)虹蓄。 經(jīng)常有香客問(wèn)我,道長(zhǎng)幸撕,這世上最難降的妖魔是什么薇组? 我笑而不...
    開封第一講書人閱讀 56,485評(píng)論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮坐儿,結(jié)果婚禮上律胀,老公的妹妹穿的比我還像新娘。我一直安慰自己貌矿,他們只是感情好炭菌,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,581評(píng)論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著逛漫,像睡著了一般黑低。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上酌毡,一...
    開封第一講書人閱讀 49,821評(píng)論 1 290
  • 那天克握,我揣著相機(jī)與錄音,去河邊找鬼阔馋。 笑死玛荞,一個(gè)胖子當(dāng)著我的面吹牛娇掏,可吹牛的內(nèi)容都是我干的呕寝。 我是一名探鬼主播,決...
    沈念sama閱讀 38,960評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼婴梧,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼下梢!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起塞蹭,我...
    開封第一講書人閱讀 37,719評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤孽江,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后番电,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體岗屏,經(jīng)...
    沈念sama閱讀 44,186評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡辆琅,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,516評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了这刷。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片婉烟。...
    茶點(diǎn)故事閱讀 38,650評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖暇屋,靈堂內(nèi)的尸體忽然破棺而出似袁,到底是詐尸還是另有隱情,我是刑警寧澤咐刨,帶...
    沈念sama閱讀 34,329評(píng)論 4 330
  • 正文 年R本政府宣布昙衅,位于F島的核電站,受9級(jí)特大地震影響定鸟,放射性物質(zhì)發(fā)生泄漏而涉。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,936評(píng)論 3 313
  • 文/蒙蒙 一仔粥、第九天 我趴在偏房一處隱蔽的房頂上張望婴谱。 院中可真熱鬧,春花似錦躯泰、人聲如沸谭羔。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,757評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)瘟裸。三九已至,卻和暖如春诵竭,著一層夾襖步出監(jiān)牢的瞬間话告,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,991評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工卵慰, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留沙郭,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,370評(píng)論 2 360
  • 正文 我出身青樓裳朋,卻偏偏與公主長(zhǎng)得像病线,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子鲤嫡,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,527評(píng)論 2 349

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

  • 問(wèn)答題47 /72 常見瀏覽器兼容性問(wèn)題與解決方案送挑? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,737評(píng)論 1 92
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font暖眼,text-align惕耕,li...
    wzhiq896閱讀 1,732評(píng)論 0 2
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font诫肠,text-align司澎,li...
    love2013閱讀 2,304評(píng)論 0 11
  • 轉(zhuǎn)載請(qǐng)聲明 原文鏈接地址 關(guān)注公眾號(hào)獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    程序員poetry閱讀 16,524評(píng)論 32 459
  • 但見旁人談情何引誘,問(wèn)到何時(shí)葡萄先熟透欺缘。 成熟了便不再有那么強(qiáng)的占有欲和好勝心,他會(huì)靜候幸運(yùn)女神的降臨挤安。面對(duì)他人在...
    無(wú)事嚼舌根i閱讀 405評(píng)論 2 0