HTML-2

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

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>

```

本教程版权归王康和饥人谷所有，转载需要说明来源。

HTML-2

1.样式有几种引入方式? link和@import有什么区别？

2.文件路径../main.css 、./main.css、main.css有什么区别

3.console.log是做什么用的

4.text-align有几个值，分别有什么作用

5.px、em、rem分别是什么？有什么区别？如何使用？

6.对chrome 审查元素的功能做个简单的截图介绍

7.如下代码，设置p为几 rem，让h1和p的字体大小相等?

推荐阅读更多精彩内容

1.样式有几种引入方式? `link`和`@import`有什么区别？

4.`text-align`有几个值，分别有什么作用

5.`px`、`em`、`rem`分别是什么？有什么区别？如何使用？

7.如下代码，设置`p`为几 rem，让`h1`和`p`的字体大小相等?