任務5-HTML2

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

CSS有3種引入方式:

  1. 外部樣式表
    在<head>標簽里面引入外部.css文件:
<link rel="stylesheet" type="text/css" href="css/task5.css">

優(yōu)勢:文件可控制多個頁面;易改版、便于維護港柜;減少代碼量、代碼簡潔規(guī)范易于分工協(xié)作咳榜;有效利用緩存機制夏醉。
劣勢:外部引入中的href屬性會給服務器造成請求的壓力。

  1. 內部樣式表
    在<head>標簽中添加<style>標簽引入:
<style type="text/css">
    body {
        color: red; 
    }
</style>

這種方式的缺點是只對當前頁面有效,不便于維護.不過像方式1那樣加載外部文件需要時間如果有少量的,只在本頁面使用的css時推薦這種方式.

  1. 內聯樣式表
    直接在該標簽上引入:
<p style="color: red;">內聯樣式表</p>

這種方式只對當前元素有效


link 和 @import的區(qū)別:

1. link語法

<link href="CSS地址" rel="stylesheet" type="text/css" />

2. @import語法

  • 在html中
<style>
      @import url(css文件路徑);
</style>
  • 在css中
@import url(css文件路徑);

區(qū)別
<link>是html標簽涌韩,只能放在html源碼中畔柔;而后者可以看作css樣式,可以放在html中的<style>標簽中和在css文件中臣樱。而且在一個樣式文件中使用@import會為頁面總體加載時間增加更多一個返程(也就是增加頁面的總體加載時間)靶擦。
當一個頁面被加載的時候(就是被瀏覽者瀏覽的時候),link引用的CSS會同時被加載;
而@import引用的CSS 會等到頁面全部被下載完再被加載擎淤。

簡而言之奢啥,推薦用<link>

2.文件路徑 ../main.css 、 ./main.css 嘴拢、 main.css 有什么區(qū)別桩盲?

../表示當前文件的上級文件夾,./表示當前文件所在的文件夾。

./main.css和main.css都代表當前目錄的main.css文件席吴。
../main.css代表上一級目錄的mian.css文件赌结。

3.console.log 是做什么用的?

主要是方便你調式javascript用的孝冒。你可以看到你在頁面中輸出的內容柬姚。
相比alert他的優(yōu)點是:
1.alert() 輸出的結果是一個模態(tài)消息框 (model message box) ,必須有用戶干預才能結束,而 console.log() 會直接將結果輸出到控制臺
2.JavaScript 的基本類型是數值類型,字符串類型,布爾類型, null 和 undefined ,除此之外所有其他類型都是對象.對于簡單類型, alert() 和console.log() 都能輸出結果.而對于對象類型, alert() 會彈出 [object object] ,且并不能輸出對象內部的值, console.log() 卻可以做到

拓展閱讀:

console對象

4.text-align 有幾個值,分別有什么用庄涡?

主要有 left , right , center , justify這幾個值量承。
left: 行內內容向左側邊對齊
right: 行內內容向右側邊對齊
center: 行內居中
justify: 文字向兩側對齊

拓展閱讀:

MDN_text-align

5.px、em穴店、rem撕捍、分別是什么?有什么區(qū)別泣洞?如何使用忧风?

  • px : 像素 (pixel)。相對長度單位球凰。像素px是相對于顯示器屏幕分辨率而言的狮腿。
  • em : em是相對長度單位腿宰。相對于當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置缘厢,則相對于瀏覽器的默認字體尺寸吃度。
    特點:
    • em的值并不是固定的;
    • em會繼承父級元素的字體大小昧绣。

注意:任意瀏覽器的默認字體高都是16px规肴。所有未經調整的瀏覽器都符合: 1em=16px捶闸。

  • rem : root em夜畴,rem是CSS3新增的一個相對單位。
    使用rem為元素設定字體大小時删壮,仍然是相對大小贪绘,但相對的只是HTML根元素。通過它既可以做到只修改根元素就成比例地調整所有字體大小央碟,又可以避免字體大小逐層復合的連鎖反應税灌。

目前,除了IE8及更早版本外亿虽,所有瀏覽器均已支持rem菱涤。對于不支持它的瀏覽器,應對方法也很簡單洛勉,就是多寫一個絕對單位的聲明粘秆。這些瀏覽器會忽略用rem設定的字體大小。下面就是一個例子:

p {font-size:14px; font-size:.875rem;}
**注意:** 選擇使用什么字體單位主要由你的項目來決定收毫,如果你的用戶群都使用最新版的瀏覽器攻走,那推薦使用rem,如果要考慮兼容性此再,那就使用px,或者兩者同時使用昔搂。 對于需要適配各種移動設備,使用rem输拇。
拓展閱讀:
  1. 媒體查詢--PX,EM or REM?
  2. px摘符、em、rem區(qū)別介紹
  3. px,em,rem單位轉換工具

6.對 chrome 審查元素的功能做個簡單的截圖介紹策吠?

1.png
拓展閱讀:
  1. Chrome 開發(fā)工具指南
  2. Chrome開發(fā)者工具不完全指南
  3. 如何更專業(yè)的使用Chrome開發(fā)者工具
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末逛裤,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子奴曙,更是在濱河造成了極大的恐慌别凹,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,548評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件洽糟,死亡現場離奇詭異炉菲,居然都是意外死亡堕战,警方通過查閱死者的電腦和手機,發(fā)現死者居然都...
    沈念sama閱讀 94,497評論 3 399
  • 文/潘曉璐 我一進店門拍霜,熙熙樓的掌柜王于貴愁眉苦臉地迎上來嘱丢,“玉大人,你說我怎么就攤上這事祠饺≡阶ぃ” “怎么了?”我有些...
    開封第一講書人閱讀 167,990評論 0 360
  • 文/不壞的土叔 我叫張陵道偷,是天一觀的道長缀旁。 經常有香客問我,道長勺鸦,這世上最難降的妖魔是什么并巍? 我笑而不...
    開封第一講書人閱讀 59,618評論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮换途,結果婚禮上懊渡,老公的妹妹穿的比我還像新娘。我一直安慰自己军拟,他們只是感情好剃执,可當我...
    茶點故事閱讀 68,618評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著懈息,像睡著了一般肾档。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上漓拾,一...
    開封第一講書人閱讀 52,246評論 1 308
  • 那天阁最,我揣著相機與錄音,去河邊找鬼骇两。 笑死速种,一個胖子當著我的面吹牛,可吹牛的內容都是我干的低千。 我是一名探鬼主播配阵,決...
    沈念sama閱讀 40,819評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼示血!你這毒婦竟也來了棋傍?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,725評論 0 276
  • 序言:老撾萬榮一對情侶失蹤难审,失蹤者是張志新(化名)和其女友劉穎瘫拣,沒想到半個月后,有當地人在樹林里發(fā)現了一具尸體告喊,經...
    沈念sama閱讀 46,268評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡麸拄,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,356評論 3 340
  • 正文 我和宋清朗相戀三年派昧,在試婚紗的時候發(fā)現自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片拢切。...
    茶點故事閱讀 40,488評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡蒂萎,死狀恐怖,靈堂內的尸體忽然破棺而出淮椰,到底是詐尸還是另有隱情五慈,我是刑警寧澤,帶...
    沈念sama閱讀 36,181評論 5 350
  • 正文 年R本政府宣布主穗,位于F島的核電站泻拦,受9級特大地震影響,放射性物質發(fā)生泄漏黔牵。R本人自食惡果不足惜聪轿,卻給世界環(huán)境...
    茶點故事閱讀 41,862評論 3 333
  • 文/蒙蒙 一爷肝、第九天 我趴在偏房一處隱蔽的房頂上張望猾浦。 院中可真熱鬧,春花似錦灯抛、人聲如沸金赦。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,331評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽夹抗。三九已至,卻和暖如春纵竖,著一層夾襖步出監(jiān)牢的瞬間漠烧,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,445評論 1 272
  • 我被黑心中介騙來泰國打工靡砌, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留已脓,地道東北人。 一個月前我還...
    沈念sama閱讀 48,897評論 3 376
  • 正文 我出身青樓通殃,卻偏偏與公主長得像度液,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子画舌,可洞房花燭夜當晚...
    茶點故事閱讀 45,500評論 2 359

推薦閱讀更多精彩內容

  • 課程目標 掌握樣式的幾種引入方式能使用Chrome開發(fā)工具進行基本頁面調試熟悉常見文本樣式熟悉單位的使用 課程建議...
    饑人谷_江君閱讀 460評論 0 0
  • 1.樣式有幾種引入方式? link 和 @import有什么區(qū)別堕担? ①css的引入一般有3種,分別為:(1)外部資...
    freddy閱讀 238評論 0 0
  • **2016/05/07 問題 樣式有幾種引入方式? 樣式的3種寫法外部樣式表 內部樣式表(位于標簽內部) bod...
    嘿菠蘿閱讀 248評論 0 0
  • 樣式有幾種引入方式? 外部樣式 link(鏈接)和@import(導入) 內部樣式(標簽內部) p{color:r...
    饑人谷_鋒閱讀 254評論 0 0
  • 第一題 '有趣:像情人親近且坦誠曲聂;有用:互動的寫作霹购;有料;有真實的見聞經歷,有獨屬于你的新鮮細節(jié)朋腋;有力:審美和情感...
    止海2017閱讀 262評論 2 0