Learn HTML&CSS the hard way

2016-05-31 本文已影响27人 INTERNALENVY

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

1.<style>标签：

<style>

p

    {

     background-color:balck;

    }

</style>

2.<link>标签:

<link rel="stylesheet" type="text/css" href="./index.css">

3.内联样式：

<p style="border：1px solid #fff">hello world</p>

link与import区别：

1.link与页面同时加载，import是在页面完全载入后加载

2.link除了载入css之外还可以定义RSS和连接属性，import只能负责载入

3.link兼容性更高，import需要IE5以上版本

4.采用dom控制样式时，只能使用link，dom无法控制import

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

../main.css返回上一级并查找main.css

./main.css 与 main.css相同，都是在当前路径下查找main.css

console.log（）是做什么用的

会在审查元素的console中显示括号中的内容

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

text-align: left;文本左对齐

text-align: right;右对齐

text-align: center;居中

text-align: justify;两端对齐，除了最后一行

text-align: justify-all;两端对齐，包括最后一行

text-align: start;内容对齐开始边界

text-align: end;内容对齐结束边界

px,em,rem分别是什么，有什么作用，怎么用

用于表示字体大小，px为像素，用于设置固定值，em和rem是相对大小，em根据父元素当大小乘以前面的倍数，rem根据根元素当大小乘以前面的倍数。

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

如图：

elements表示元素，可以看到html&css代码以及盒模型。

console表示控制台，console.log的字符会显示在这，调试js

sources表示当前页面的资源，图片，代码等资源会保存于此

network表示网络，网络活动会显示在这

timeline时间线，事件发生的顺序

profiles，分析收集代码消耗cpu性能

resources，cookies等保存于此

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

答案为6rem,16X62.5=10px,6X10=60px,所以是6rem。效果如图，代码上传github，