知識(shí)點(diǎn)總結(jié)區(qū)
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 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)