課程目標(biāo)
掌握樣式的幾種引入方式
能使用Chrome開發(fā)工具進(jìn)行基本頁面調(diào)試
熟悉常見文本樣式
熟悉單位的使用
課程建議
代碼題需要把代碼提交到公共作業(yè)項(xiàng)目下自己名字的文件夾內(nèi)，如homework/若愚/task5-1.html
當(dāng)提交完作業(yè)后，可在瀏覽器查看代碼作業(yè)預(yù)覽。如：班級項(xiàng)目是 jrg-renwu4
，在提交作業(yè)后可在 http://book.jirengu.com/jirengu-inc/jrg-renwu4/查看
預(yù)習(xí)視頻
課程視頻- HTML 基礎(chǔ)-資源路徑&樣式引入方式&基本調(diào)試
課程視頻- HTML 基礎(chǔ)-單位-基礎(chǔ)樣式
課程任務(wù)
問答
1. 樣式有幾種引入方式?
link和@import有什么區(qū)別
樣式有三種寫法——
（確切的說如果包含瀏覽器缺史摇（默認(rèn)）的設(shè)置一共有四種，以下羅列其余三種寫法）
- 外部樣式表
link rel="stylesheet" type="text/css" href="css文件路徑地址"
(其中，href為資源定位符扫夜，與src作用一致；
type="text/css"為html4中所必須的驰徊，而在html5中可忽略)
- *優(yōu)勢:文件可控制多個頁面笤闯；易改版、便于維護(hù)棍厂；減少代碼量颗味、代碼簡潔規(guī)范易于分工協(xié)作；有效利用緩存機(jī)制牺弹。
- 劣勢：外部引入中的href屬性會給服務(wù)器造成請求的壓力浦马。*
- 內(nèi)部樣式表（位于標(biāo)簽內(nèi)部）
<style type="text/css">
p{color: red; }
</style>
- 這種方式的缺點(diǎn)是只對當(dāng)前頁面有效,不便于維護(hù).不過像外部樣式表那樣加載外部文件需要時間如果有少量的,只在本頁面使用的css時推薦這種方式.
- 內(nèi)聯(lián)樣式表（位于標(biāo)簽內(nèi)部）
<p style="color: blue; font-size:14px;">段落</p>
- 這種方式只對當(dāng)前元素有效
***總結(jié)：大量、通用的樣式用外部樣式表张漂；少量的獨(dú)有的放在內(nèi)部樣式表晶默。 ***
另外JS的引入方式也可以分為：
- 內(nèi)部JS
<script>
console.log("hello");
</script>
- 外部JS
<script type="text/javascript" src="js文件路徑地址"></script>
** link和@import有什么區(qū)別——**
關(guān)于<link>標(biāo)簽：
- 實(shí)例
<head>
<link rel="stylesheet" type="text/css" href="css文件路徑地址" />
</head>
href 值為外部資源地址，這里是css的地址航攒；
rel 定義當(dāng)前文檔與被鏈接文檔之間的關(guān)系,這里是外部css樣式表即stylesheet磺陡；
type 規(guī)定被鏈接文檔的 MIME 類,這里是值為text/css
-
瀏覽器支持
能支持<link>標(biāo)簽的瀏覽器 - 定義與用法
<link> 標(biāo)簽定義文檔與外部資源的關(guān)系。
<link> 標(biāo)簽最常見的用途是鏈接樣式表漠畜。 - HTML 與 XHTML 之間的差異
在 HTML 中币他，<link> 標(biāo)簽沒有結(jié)束標(biāo)簽。
在 XHTML 中憔狞，<link> 標(biāo)簽必須被正確地關(guān)閉蝴悉。 - 提示和注釋：
注釋：link 元素是空元素，它僅包含屬性躯喇。
注釋：此元素只能存在于 head 部分辫封，不過它可出現(xiàn)任何次數(shù)。 - 屬性
<link>標(biāo)簽屬性
關(guān)于@import
實(shí)例：
在html中
<head>
<style>
@import url(css文件路徑地址);
</style>
</head>
在css中
@import url(css文件路徑地址);
關(guān)于兩者的異同
相同點(diǎn)：作用一樣廉丽，即都是引入外部的css樣式
不同點(diǎn)：
- @import url（）機(jī)制是不同于link的倦微，link是在加載頁面前把css加載完畢，所以顯示出來的頁面從開始就是帶樣式效果的正压；而@import url（）則是讀取完文件后在加載欣福，所以會出現(xiàn)一開始沒有css樣式，閃爍一下出現(xiàn)樣式后的頁面(網(wǎng)速慢的情況下)焦履。
- @import 是css2里面的拓劝，所以古老的ie5不支持雏逾。
- 當(dāng)使用javascript控制dom去改變樣式的時候，只能使用link標(biāo)簽，因?yàn)锧import不是dom可以控制的。（由于這一點(diǎn)沒學(xué)習(xí)JS還不能理解）
- link屬于XHTML標(biāo)簽（功能不局限于導(dǎo)入CSS）获洲，而@import則是CSS提供的一種規(guī)則（CSS2.1以后砍的，要考慮兼容）痪署。
- @import url(xxx.css); 有最大次數(shù)的限制，經(jīng)測試IE6的最大次數(shù)是31次。
- link的復(fù)用度更高，適用于大量的共有的樣式丧叽，@import的網(wǎng)絡(luò)請求較少， 適用于少量的獨(dú)有的樣式公你。
其實(shí)link和@import的最根本區(qū)別就是踊淳，link是一個html的一個標(biāo)簽，而@import是css的一個標(biāo)簽
總結(jié)：本質(zhì)上兩者使用選擇區(qū)別不大陕靠，但為了軟件中編輯布局網(wǎng)頁html代碼迂尝，一般使用link較多，也推薦使用link剪芥。
擴(kuò)展閱讀：
HTML <link> 標(biāo)簽
HTML DOM Link 對象
web前端優(yōu)化時為什么不建議使用css @import
css @import url加載樣式應(yīng)用深入分析
css中l(wèi)ink和@import的區(qū)別分析詳解
高性能網(wǎng)站設(shè)計(jì)：不要使用@import
2. 文件路徑
../main.css雹舀、./main.css、main.css有什么區(qū)別
../表示當(dāng)前文件的上級文件夾,./表示當(dāng)前文件所在的文件夾粗俱，故——
- ./main.css和main.css都代表當(dāng)前目錄的main.css文件。
- ../main.css代表上一級目錄的mian.css文件虚吟。
3.
console.log是做什么用的
- 什么是console.log()寸认？
console.log是一個彪悍的輸出記錄功能，我可以從我自己的web頁面上調(diào)用串慰，然后以最快的方式轉(zhuǎn)儲盡可能多的信息到控制臺上偏塞，從而能更醒目地讓你意識到你的javascript下一步需要做什么。
在具備調(diào)試功能的瀏覽器上邦鲫，window對象中會注冊一個名為console的成員變量灸叼，指代調(diào)試工具中的控制臺。通過調(diào)用該console對象的log()函數(shù)庆捺，可以在控制臺中打印信息古今。比如，以下代碼將在控制臺中打印”Sample log”：
console.log("Sample log");
console.log()可以接受任何字符串滔以、數(shù)字和JavaScript對象捉腥。與alert()函數(shù)類似，console.log()也可以接受換行符\n以及制表符\t你画。console.log()語句所打印的調(diào)試信息可以在瀏覽器的調(diào)試控制臺中看到抵碟。
- 什么是alert()?
在JavaScript代碼中桃漾，可以使用window對象的alert()函數(shù)來顯示一段文本，從而進(jìn)行程序的調(diào)試拟逮，或者向用戶警示相關(guān)信息撬统。代碼如下：
alert("sample text");
- console.log()和alert()的異同
- 相同點(diǎn)
- 兩者都可以調(diào)試程序
- 兩者都可以接受變量并將其與別的字符串進(jìn)行拼接
- 不同點(diǎn)
- alert()函數(shù)可以用來向用戶警示信息,console()不能
- alert()有阻塞作用，不點(diǎn)擊確定敦迄，后續(xù)代碼無法繼續(xù)執(zhí)行,console()可在打印臺輸出
- console.log()可以接受變量作為參數(shù)傳遞到字符串中恋追，alert()不行
總結(jié)：對于JavaScript程序的調(diào)試，相比于alert()颅崩，使用console.log()是一種更好的方式几于，原因在于：alert()函數(shù)會阻斷JavaScript程序的執(zhí)行，從而造成副作用沿后；而console.log()僅在控制臺中打印相關(guān)信息沿彭，因此不會造成類似的顧慮
（盡管查閱相關(guān)資料，但是JS知識還沒學(xué)到尖滚，并不能很好的融會貫通喉刘，需以后再慢慢消化）
擴(kuò)展閱讀：
Window alert() 方法
JavaScript中的alert()函數(shù)使用技巧詳解
JavaScript調(diào)試技巧之console.log()詳解
簡介alert()與console.log()的不同
4.
text-align有幾個值，分別有什么作用
| 值 | 作用 |
|---|---|
| left | 把文本排到左邊 |
| right | 把文本排到右邊 |
| center | 把文本排到中間 |
| justify | 兩端對齊 |
| inherit | 規(guī)定應(yīng)該從父元素繼承text-align屬性的值 |
附實(shí)例：
5.
px漆弄、em睦裳、rem分別是什么？有什么區(qū)別撼唾？如何使用
px廉邑、em、rem分別是什么倒谷？有什么區(qū)別蛛蒙？
- CSS有哪些單位
| 單位 | 描述 |
|---|---|
| % | 百分比 |
| in | 英寸 |
| cm | 厘米 |
| mm | 毫米 |
| em | 1em等于當(dāng)前的字體尺寸；2em等錢字體尺寸的2倍渤愁。例如牵祟，如果某元素以12pt顯示，那么2em是24pt |
| ex | 一個 ex 是一個字體的 x-height抖格。 (x-height 通常是字體尺寸的一半诺苹。) |
| pt | 磅 (1 pt 等于 1/72 英寸) |
| pc | 12 點(diǎn)活字 (1 pc 等于 12 點(diǎn)) |
| px | 像素 (計(jì)算機(jī)屏幕上的一個點(diǎn)) |
-
px、em雹拄、rem區(qū)別介紹
- px
px像素（Pixel）收奔。相對長度單位。像素px是相對于顯示器屏幕分辨率而言的滓玖。 - IE無法調(diào)整那些使用px作為單位的字體大小筹淫。
- em
em是相對長度單位。相對于當(dāng)前對象內(nèi)文本的字體尺寸。如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置损姜，則相對于瀏覽器的默認(rèn)字體尺寸饰剥。 - IE無法調(diào)整那些使用px作為單位的字體大小。
- em會繼承父級元素的字體大小摧阅。
（注意：任意瀏覽器的默認(rèn)字體高都是16px汰蓉。所有未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。那么12px=0.75em,10px=0.625em棒卷。為了簡化font-size的換算顾孽，需要在css中的body選擇器中聲明Font-size=62.5%，這就使em值變?yōu)?16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數(shù)值除以10比规，然后換上em作為單位就行了若厚。
所以我們在寫CSS的時候，需要注意：
（1）body選擇器中聲明Font-size=62.5%蜒什；
（2）將你的原來的px數(shù)值除以10测秸，然后換上em作為單位；
（3）重新計(jì)算那些被放大的字體的em數(shù)值灾常。避免字體大小的重復(fù)聲明霎冯。）
- px
rem
rem是CSS3新增的一個相對單位（root em，根em）钞瀑，這個單位引起了廣泛關(guān)注沈撞。這個單位與em有什么區(qū)別呢？區(qū)別在于使用rem為元素設(shè)定字體大小時雕什，仍然是相對大小缠俺，但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優(yōu)點(diǎn)于一身贷岸，通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小晋修，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。
(注意： 選擇使用什么字體單位主要由你的項(xiàng)目來決定凰盔，如果你的用戶群都使用最新版的瀏覽器，那推薦使用rem倦春，如果要考慮兼容性户敬，那就使用px,或者兩者同時使用。)px 與 rem 的選擇睁本？
對于只需要適配少部分手機(jī)設(shè)備尿庐，且分辨率對頁面影響不大的，使用px即可 呢堰。
對于需要適配各種移動設(shè)備抄瑟，使用rem，例如只需要適配iPhone和iPad等分辨率差別比較挺大的設(shè)備枉疼。使用實(shí)例
6. 對chrome 審查元素的功能做個簡單的截圖介紹
- Elements
允許我們從瀏覽器的角度看頁面鞋拟，也就是說我們可以看到chrome渲染頁面所需要的的HTML、CSS和DOM(Document Object Model)對象惹资。此外贺纲，還可以編輯這些內(nèi)容更改頁面顯示效果； - Console
顯示各種警告與錯誤信息褪测，并且提供了shell用來和文檔猴誊、開發(fā)者工具交互； - Sources
主要用來調(diào)試js侮措； - Network
可以看到頁面向服務(wù)器請求了哪些資源懈叹、資源的大小以及加載資源花費(fèi)的時間，當(dāng)然也能看到哪些資源不能成功加載分扎。此外澄成，還可以查看HTTP的請求頭，返回內(nèi)容等笆包； - Timeline
提供了加載頁面時花費(fèi)時間的完整分析环揽，所有事件，從下載資源到處理Javascript庵佣，計(jì)算CSS樣式等花費(fèi)的時間都展示在Timeline中歉胶； - Profiles
分析web應(yīng)用或者頁面的執(zhí)行時間以及內(nèi)存使用情況； - Resources
對本地緩存（IndexedDB巴粪、Web SQL通今、Cookie、應(yīng)用程序緩存肛根、Web Storage）中的數(shù)據(jù)進(jìn)行確認(rèn)及編輯辫塌； - Security
- Audits
分析頁面加載的過程，進(jìn)而提供減少頁面加載時間派哲、提升響應(yīng)速度的方案臼氨。
擴(kuò)展閱讀：
Chrome開發(fā)者工具使用教程
7. 如下代碼，設(shè)置p為幾rem芭届，讓h1和p的字體大小相等?
<h1>饑人谷</h1>
<p>饑人谷</p>
<style>
html{
font-size: 62.5%;
}
p{
font-size: ?rem;
}
h1{
font-size: 60px;
}
</style>
結(jié)論：
分析過程：
任意瀏覽器的默認(rèn)字體高都是16px储矩，所以所有未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px；
那么12px=0.75em,10px=0.625em褂乍；
為了簡化font-size的換算持隧，需要在css中的body選擇器中聲明Font-size=62.5%；
這就使em值變?yōu)?16px*62.5%=10px逃片；
rem表現(xiàn)為相對于html根元素的相對大小屡拨，此時html跟元素為1em，即10px；
h1表現(xiàn)為60px呀狼，即6em裂允，故p只需為6em,即6rem，即可與h1字體大小相等
代碼:
本教程版權(quán)歸本人和饑人谷所有赠潦，轉(zhuǎn)載須說明來源
