課程目標(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ù).不過像外部樣式表那樣加載外部文件需要時(shí)間如果有少量的,只在本頁面使用的css時(shí)推薦這種方式.
- 內(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去改變樣式的時(shí)候，只能使用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)化時(shí)為什么不建議使用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的時(shí)候，需要注意：
（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è)定字體大小時(shí)，仍然是相對大小，但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優(yōu)點(diǎn)于一身，通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。
(注意： 選擇使用什么字體單位主要由你的項(xiàng)目來決定，如果你的用戶群都使用最新版的瀏覽器，那推薦使用rem，如果要考慮兼容性，那就使用px,或者兩者同時(shí)使用。)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)的時(shí)間，當(dāng)然也能看到哪些資源不能成功加載。此外，還可以查看HTTP的請求頭，返回內(nèi)容等； - Timeline
提供了加載頁面時(shí)花費(fèi)時(shí)間的完整分析，所有事件，從下載資源到處理Javascript，計(jì)算CSS樣式等花費(fèi)的時(shí)間都展示在Timeline中； - Profiles
分析web應(yīng)用或者頁面的執(zhí)行時(shí)間以及內(nèi)存使用情況； - Resources
對本地緩存（IndexedDB、Web SQL、Cookie、應(yīng)用程序緩存、Web Storage）中的數(shù)據(jù)進(jìn)行確認(rèn)及編輯； - Security
- Audits
分析頁面加載的過程，進(jìn)而提供減少頁面加載時(shí)間、提升響應(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根元素的相對大小，此時(shí)html跟元素為1em，即10px；
h1表現(xiàn)為60px，即6em，故p只需為6em,即6rem，即可與h1字體大小相等
代碼:
本教程版權(quán)歸本人和饑人谷所有，轉(zhuǎn)載須說明來源
