任務(wù)五
樣式有幾種引入方式? link和 @import有什么區(qū)別
- 外部樣式
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head> - 內(nèi)部樣式
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head> - 內(nèi)聯(lián)樣式
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
區(qū)別
- link是HTML標(biāo)簽，除了加載CSS外，還可以定義RSS等其他事務(wù)；@import只能加載CSS。
- link引用CSS時(shí)，在頁面載入時(shí)同時(shí)加載；@import需要頁面網(wǎng)頁完全載入以后加載。
- link無兼容問題；@import在低版本的瀏覽器不支持。
- link支持使用Javascript控制DOM去改變樣式；而@import不支持。
文件路徑../main.css 、./main.css、main.css、/main.css有什么區(qū)別
- ../main.css:當(dāng)前層級(jí)的上一個(gè)層級(jí)尋找main.css
- ./main.css:當(dāng)前層級(jí)尋找main.css
- main.css:當(dāng)前層級(jí)尋找main.css
- /main.css：根目錄引入main.css
console.log是做什么用的
- 用來分析和調(diào)試的一個(gè)JS函數(shù)，可以在瀏覽器的開發(fā)工具控制臺(tái)中使用，改變參數(shù)值，調(diào)試和完善頁面。
text-align有幾個(gè)值，分別有什么作用？寫截圖說明區(qū)別
-
text-align:center/水平居中對(duì)齊
text-align:right/把文本排列到右邊
text-align:left/把文本排列到左邊
text-align：justify/實(shí)現(xiàn)兩端對(duì)齊文本效果
text-align：inherit/從父元素繼承text-align屬性
代碼圖
成果圖
px、em、rem分別是什么？有什么區(qū)別？如何使用
- px稱為像素，相對(duì)長(zhǎng)度單位，像素是固定大小的單元，用于屏幕媒體(即在電腦屏幕上讀取)。一個(gè)像素等于電腦屏幕上的一個(gè)點(diǎn) (是你屏幕分辨率的最小分割)。
em是相對(duì)長(zhǎng)度單位，相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸，如當(dāng)前對(duì)行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對(duì)于瀏覽器的默認(rèn)字體尺寸。
rem是CSS3新增的一個(gè)相對(duì)長(zhǎng)度單位，只相對(duì)根目錄即HTML元素。
對(duì)chrome 審查元素的功能做個(gè)簡(jiǎn)單的截圖介紹
chrome調(diào)試
本文章著作權(quán)歸（饑人谷_MAO）和饑人谷(QQ 群: 222459918) 所有，轉(zhuǎn)載須說明來源
