1.样式有几种引入方式? link和@import有什么区别？
I. 样式在HTML中有三种引入方式，分别是
- 内联样式，样式作为元素的
style属性写在元素开始标签内。例如：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>内联样式</title>
</head>
<body>
<div style="background-color:#888">
<h1 class="title" style="font-size:30px;color:red">采用内联样式的标题</h1>
<p class="p1" style="font-size:16px;color:blue">这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。<br/>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。
</p>
</div>
</body>
</html>
效果：
Paste_Image.png
- 内部样式，嵌入样式应用于整个网页文档，这些样式放在
head部分的<style>元素中。例如：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>内部样式</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="">采用内部样式的标题</h1>
<p class="p1" style="">这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。<br/>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。
</p>
</div>
</body>
</html>
效果
Paste_Image.png
- 外部样式，外部样式是包含CSS样式规则的文本文件，使用.css扩展名。这种.css文件同服哦link元素与网页关联，因此，多个网页可以关联同一个.css文件。.css文件中部包含任何HTML标记，他只包含CSS样式规则。例如：
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" >采用外部样式的标题</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用作将外部样式导入内部样式或者导入另一个外部样式表。
2.文件路径../main.css 、./main.css、main.css有什么区别
../main.css指向当前目录的上一层目录下的的main.css文件；./main.css、main.css指向当前目录下的main.css文件。link元素没有兼容性问题，而@import则从CSS2.1才开始支持。
3.console.log是做什么用的
console.log用于调试javascript，并将信息展示在控制台上。
4.text-align有几个值，分别有什么作用
text-align属性配置文本和内联元素在块元素中的对齐方式，属性值包括：
left（默认）：左对齐
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>
实现效果：
Paste_Image.png
Paste_Image.png
5.px、em、rem分别是什么？有什么区别？如何使用？
-
px：像素（显示屏幕上的一个点） -
em：em是一种相对字体单位，在网页中，em相对于父元素（通常是网页的body元素）所用的字体字号。1em=当前字体尺寸，2em=2倍当前字体尺寸。 -
rem：rem类似于em，也是一种相对单位，不过是相对于根元素字体大小(在HTML元素上设置的字体大小)的单位。
6.对chrome 审查元素的功能做个简单的截图介绍
无标题.png
7.如下代码，设置p为几 rem，让h1和p的字体大小相等?
浏览器默认字体大小为16px，则该网页根元素（HTML）字体大小为16px*62.5=12px，即1rem=12px，由于h1字体大小为60px，所以设置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>
```
本教程版权归王康和饥人谷所有，转载需要说明来源。
网友评论