Version one
問答
一、樣式有幾種引入方式? link 和 @import有什么區(qū)別？
- 嵌入式: 在Html頁面內(nèi)部定義的CSS樣式表,叫做嵌入式CSS 樣式表宦搬，也就是在HTML文檔的head部分中牙瓢，使用 style 標簽并在該標簽中定義一系列 CSS 規(guī)則。如
<style type ="text/css"></style> - 鏈接式:外部CSS樣式表是一個以 .css為后綴的外部文件,定義一個外部樣式表可以應用于多個頁面间校。在html頁面中使用link標簽矾克，可以將外部的css樣式表連接進來，其語法如下：
<link rel="stylesheet" href="*.css” type="text/css"> - 行內(nèi)樣式：行內(nèi)樣式指的是在HTML特定的標簽中定義的CSS樣式表憔足。常用的HTML 標簽主要是BODY中的一些元素胁附，例如：
<p>，<h2>四瘫，<ul>,<div>等。如：<p style="color:#ff0000; font-style: italic; ">IT部落窩</p> - 導入式：導入外部樣式表指的是欲逃，在html文件中已經(jīng)建立了嵌入式樣式表找蜜，但是還要使用外部樣式表的某些設置，這時就可以在
<style>里導入一個外部樣式表稳析，導入時用@import洗做。如@import url("mystyle.css");
<link rel="stylesheet" type="text/css" href="index.css">
- link是XHTML標簽，HTML 中
<link>元素指定了外部資源與當前文檔的關系. 這個元素的使用方法包括為導航定義關系框架.這個元素經(jīng)常用來鏈接css文件彰居。 - rel: relationship
- StyleSheet：樣式表
- text/css：文本/css,即css文本诚纸。
-
type="text/css具體說明調(diào)用樣式的文件類型為css樣式。 - rel屬性表示樣式表將以何種方式與HTML文檔結(jié)合陈惰。rel取值:Stylesheet,表示指定一個外部的樣式表畦徘。*.css是單獨保存的樣式表文件√Т常總的意思就是調(diào)用一個外部的css樣式文件井辆，它是通過
<link />這個標簽來調(diào)用的。href="index.css"表示外部樣式的路徑溶握。
@import url(index.css)
- @import是CSS@規(guī)則杯缺，用于加載外部外部層疊樣式表。@import規(guī)則必須放在其他除了@charset規(guī)則以外的CSS規(guī)則的前面睡榆；@import規(guī)則不可嵌套于條件規(guī)則組中萍肆。
@import可在URI后面附帶媒體查詢；每條媒體查詢間用逗號分隔胀屿。若沒有媒體查詢塘揣，則該導入是無條件的，相當于指定媒體為all宿崭。
link 和 @import
- @import url（）機制是不同于link的勿负，link是在加載頁面前把css加載完畢，而@import url（）則是讀取完文件后再加載，所以在請求文件較大或者網(wǎng)速較慢時@import url（）會出現(xiàn)一開始沒有css樣式奴愉，閃爍一下出現(xiàn)樣式后的頁面(網(wǎng)速慢的情況下)琅摩。
- @import 是css2里面的，所以古老的ie5不支持锭硼。
- 當使用javascript控制dom去改變樣式的時候房资，只能使用link標簽，因為@import不是dom可以控制的檀头。
- link除了能加載css外還能定義RSS轰异，定義rel連接屬性，@import只能加載css暑始。
- @import url(xxx.css);有最大次數(shù)的限制搭独，經(jīng)測試IE6的最大次數(shù)是31次，第32個import及以后的都不能生效廊镜。
- 總結(jié)：使用link標簽比較好牙肝，另：新浪等網(wǎng)站的首頁或欄目首頁代碼，他們總會把css或js直接寫在html里嗤朴，而不用外部文件配椭。
MDN
css語法格式0
四種css樣式表的引入方式
關于css @import url（）總結(jié)寫得比較好
二、文件路徑../main.css 雹姊、./main.css股缸、main.css、/main.css有什么區(qū)別吱雏？
- main.css：相對于html文件來說敦姻，main.css文件在和其同一目錄。
- ./main.css：當前目錄的main.css
- ../main.css：相對遇html文件來說歧杏，main.css文件在上級目錄里替劈。
- /main.css 是相對虛擬目錄，"/"代表的是虛擬目錄的根目錄
三得滤、console.log是做什么用的
向web控制臺輸出一條消息陨献，常用來插入代碼段里進行測試。
四懂更、text-align有幾個值眨业，分別有什么用？
| 值 | 描述 |
|---|---|
| left | 把文本排列到左邊沮协。默認值：由瀏覽器決定龄捡。 |
| right | 把文本排列到右邊。 |
| justify | 把文本排列到中間慷暂。 |
| inherit | 實現(xiàn)兩端對齊文本效果聘殖。 |
| inherit | 規(guī)定應該從父元素繼承 text-align 屬性的值晨雳。 |
text-align:justify對于強制換行的一行及最后一行（包括僅有一行的情況）不作處理。有時為了實現(xiàn)兩端對齊奸腺，文字之間的間距會變大餐禁，不好看，這時可用letter-space調(diào)整間距突照。
1_1478059634680_2.png
0_1478059634679_1.png
五帮非、px、em讹蘑、rem分別是什么末盔？有什么區(qū)別？如何使用座慰？
-
px: 像素陨舱，給定文字大小 -
em:相對于父元素來改變，如2em 表示字體大小為父元素的字體大小的2倍版仔。如果一個元素的父元素沒有指定大小游盲，則會不斷地向上尋找規(guī)定了大小的父元素，甚至可以找到根元素去邦尊。 -
rem: r是root的縮寫背桐，所以這個表示依據(jù)根元素优烧，即<html>的大小來調(diào)整字體大小蝉揍。
rem可以用在寫響應式的頁面中，因為調(diào)整了根元素的字體大小畦娄，整個頁面的字體大小也可以同步改變又沾。 -
以下這兩個表達的意思相同，結(jié)果都是根元素html默認值的3倍熙卡。p標簽的直接父元素沒有直接控制字體大小杖刷，于是會在往上找，知道找到一個控制大小的元素為止驳癌。如果沒有滑燃，則以根元素html的字體大小為基準。
0_1478059715524_3.png
0_1478059732065_4.png
0_1478059746348_5.png
六對chrome 審查元素的功能做個簡單的截圖介紹
-
0_1478059796703_6.png
直接修改颓鲜，來測試邊界條件表窘，如輸入很多個字。
-
右邊可以調(diào)試顏色甜滨，寫頁面時在這里調(diào)試好乐严，然后復制到css- console:調(diào)試js這里可以看到全局變量，js都在全局中央域里面衣摩“貉椋可以添加alert(1)和console.log(變量) 這個只能在控制臺上看到。也可以點sources,里面囊括了所有的html.css.js〖惹伲可以加多個斷點后刷新網(wǎng)頁進行調(diào)試js占婉。 - network:調(diào)試ajax接口有用
0_1478059807447_7.png
Priview:預覽
Response:響應
timing:時序 -
原版的resouces在現(xiàn)在的application里面
0_1478059815365_8.png
