1.樣式有幾種引入方式? link和@import有什么區(qū)別柄瑰？
I. 樣式在HTML中有三種引入方式，分別是
- 內(nèi)聯(lián)樣式栖雾，樣式作為元素的
style屬性寫在元素開始標(biāo)簽內(nèi)改抡。例如：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>內(nèi)聯(lián)樣式</title>
</head>
<body>
<div style="background-color:#888">
<h1 class="title" style="font-size:30px;color:red">采用內(nèi)聯(lián)樣式的標(biāo)題</h1>
<p class="p1" style="font-size:16px;color:blue">這是一個段落。這是一個段落斤葱。這是一個段落慷垮。這是一個段落揖闸。這是一個段落。<br/>這是一個段落料身。這是一個段落汤纸。這是一個段落。這是一個段落惯驼。這是一個段落蹲嚣。這是一個段落。
</p>
</div>
</body>
</html>
效果：
Paste_Image.png
- 內(nèi)部樣式祟牲，嵌入樣式應(yīng)用于整個網(wǎng)頁文檔隙畜，這些樣式放在
head部分的<style>元素中。例如：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>內(nèi)部樣式</title>
<style type="text/css">
.div1 {
background-color:#333;
}
.div1 h1 {
font-size:30px;
color:#11bbaa;
}
.div1 p{
font-size:16px;
color:#ff22bb;
}
</style>
</head>
<body>
<div class="div1">
<h1 class="title" style="">采用內(nèi)部樣式的標(biāo)題</h1>
<p class="p1" style="">這是一個段落说贝。這是一個段落议惰。這是一個段落。這是一個段落乡恕。這是一個段落言询。<br/>這是一個段落。這是一個段落傲宜。這是一個段落运杭。這是一個段落。這是一個段落函卒。這是一個段落辆憔。
</p>
</div>
</body>
</html>
效果
Paste_Image.png
- 外部樣式，外部樣式是包含CSS樣式規(guī)則的文本文件报嵌，使用.css擴(kuò)展名虱咧。這種.css文件同服哦link元素與網(wǎng)頁關(guān)聯(lián)，因此锚国，多個網(wǎng)頁可以關(guān)聯(lián)同一個.css文件腕巡。.css文件中部包含任何HTML標(biāo)記，他只包含CSS樣式規(guī)則血筑。例如：
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>外部樣式</title>
<link rel="stylesheet" type="text/css" href="06-07.css">
</head>
<body>
<div class="div1">
<h1 class="title" >采用外部樣式的標(biāo)題</h1>
<p class="p1" >這是一個段落绘沉。這是一個段落。這是一個段落豺总。這是一個段落梆砸。這是一個段落。<br/>這是一個段落园欣。這是一個段落。這是一個段落休蟹。這是一個段落沸枯。這是一個段落日矫。這是一個段落。
</p>
</div>
</body>
</html>
CSS
.div1 {
background-color:#333;
}
.div1 h1 {
font-size:30px;
color:#11bbaa;
}
.div1 p{
font-size:16px;
color:#ff22bb;
}
效果:
Paste_Image.png
II.
link元素位于HTML文本的head部分绑榴，用于將外部CSS文件鏈接到該文件哪轿。而@import用作將外部樣式導(dǎo)入內(nèi)部樣式或者導(dǎo)入另一個外部樣式表。
2.文件路徑../main.css 翔怎、./main.css窃诉、main.css有什么區(qū)別
../main.css指向當(dāng)前目錄的上一層目錄下的的main.css文件；./main.css赤套、main.css指向當(dāng)前目錄下的main.css文件飘痛。link元素沒有兼容性問題，而@import則從CSS2.1才開始支持容握。
3.console.log是做什么用的
console.log用于調(diào)試javascript宣脉，并將信息展示在控制臺上。
4.text-align有幾個值剔氏，分別有什么作用
text-align屬性配置文本和內(nèi)聯(lián)元素在塊元素中的對齊方式塑猖，屬性值包括：
left（默認(rèn)）：左對齊
right：右對齊
center：水平居中
justify：兩端對齊
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>text-align屬性</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
div{
border:#333 solid 1px;
width:300px;
height:200px;
}
#p1 {
text-align:left;
}
#p2 {
text-align:right;
}
#p3 {
text-align:center;
}
#p4 {
text-align:justify;
}
</style>
</head>
<body>
<h4>text-align:left</h4>
<div>
<p id="p1">In grand celebrations to mark her milestone birthday, the Queen on Saturday sported a daring neon green outfit as she greeted the public, impossible to miss in her horse and open carriage, even past the thousands of viewers and hundreds of marching officers.</p>
</div>
<h4>text-align:right</h4>
<div>
<p id="p2">In grand celebrations to mark her milestone birthday, the Queen on Saturday sported a daring neon green outfit as she greeted the public, impossible to miss in her horse and open carriage, even past the thousands of viewers and hundreds of marching officers.</p>
</div>
<h4>text-align:center</h4>
<div>
<p id="p3">In grand celebrations to mark her milestone birthday, the Queen on Saturday sported a daring neon green outfit as she greeted the public, impossible to miss in her horse and open carriage, even past the thousands of viewers and hundreds of marching officers.</p>
</div>
<h4>text-align:justify</h4>
<div>
<p id="p4">In grand celebrations to mark her milestone birthday, the Queen on Saturday sported a daring neon green outfit as she greeted the public, impossible to miss in her horse and open carriage, even past the thousands of viewers and hundreds of marching officers.</p>
</div>
</body>
</html>
實(shí)現(xiàn)效果：
Paste_Image.png
Paste_Image.png
5.px、em谈跛、rem分別是什么羊苟？有什么區(qū)別？如何使用感憾？
-
px：像素（顯示屏幕上的一個點(diǎn)） -
em：em是一種相對字體單位蜡励，在網(wǎng)頁中，em相對于父元素（通常是網(wǎng)頁的body元素）所用的字體字號吹菱。1em=當(dāng)前字體尺寸巍虫，2em=2倍當(dāng)前字體尺寸。 -
rem：rem類似于em鳍刷，也是一種相對單位占遥，不過是相對于根元素字體大小(在HTML元素上設(shè)置的字體大小)的單位。
6.對chrome 審查元素的功能做個簡單的截圖介紹
無標(biāo)題.png
7.如下代碼输瓜，設(shè)置p為幾 rem瓦胎，讓h1和p的字體大小相等?
瀏覽器默認(rèn)字體大小為16px，則該網(wǎng)頁根元素（HTML）字體大小為16px*62.5=12px尤揣，即1rem=12px搔啊，由于h1字體大小為60px，所以設(shè)置p為5rem時h1和p字體大小相等北戏。
代碼：
```
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>第7題</title>
<style type="text/css">
html {
font-size:62.5%;
}
h1{
font-size:60px;
}
p {
font-size:;
}
</style>
</head>
<body>
<h1 >饑人谷</h1>
<p>饑人谷</p>
</body>
</html>
```
本教程版權(quán)歸王康和饑人谷所有负芋，轉(zhuǎn)載需要說明來源。
