任务5-HTML2

2016-07-11 本文已影响21人饥人谷_任磊

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

有5种写入样式方式：
1.行内式，在html元素标签中使用style属性来规定样式。

<p style="color:red">行内式</p>

2.嵌入式，在head元素中使用style标签，对整个页面中的各个元素进行设置。

<head>
<style type="text/css">
p {
   color: red;
}
</style>
</head>

3.链入外部样式，使用link标签来引入一个外部样式表，也就是css文件。

<head>
    <meta charset="UTF-8">
    <title>饥人谷</title>
    <link rel="stylesheet" type="text/css" href="demo.css">
</head>

4.导入式，使用@import导入外部样式表。

<style type="text/css">        
 @import "demo.css";
</style>

link和@import有什么区别

最主要的区别：link是XHTML标签，除了加载css外，还可以定义RSS，定义rel链接属性等，@import属于css范畴，只能加载css。
加载顺序的区别：link引入css时，在页面加载时同时加载，@import需要在网页完全载入以后加载。所以说一直有一个观点就是为了提高web网页性能，让用户得到更快的页面显示，不要使用@import而去使用link。
兼容性的区别：link是XHTML标签，无兼容性的问题，@import是在CSS2.1提出的，低版本的浏览器不支持。
使用dom控制样式的区别：link支持使用javascript控制DOM去改变样式，而@import不支持。

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

../main.css表示打开上一级目录下的main.css文件。
./main.css和main.css表示的意思是一样，都是打开当前目录下的main.css文件。

3.console.log 是做什么用的？

console.log的功能是在控制台打印出你想要的数据，相对于alert(),它不会打断你javascript程序的执行，是一种更好的javascript程序的调试方式。
关于console.log的使用以及javascript的调试还不是很了解，先分享一个博客Chome开发者工具不完全指南（二、进阶篇）,在以后的学习中再慢慢熟悉开发者工具。

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

text-align 属性规定元素中的文本的水平对齐方式。

值	描述
left	把文本排列在左边
right	把文本排列在右边
center	把文本排列在中间
justify	实现两端对齐本文效果
inherit	规定应该从父元素继承text-align属性的值。
默认值	如果 direction 属性是 ltr，则默认值是 left；如果 direction 是 rtl，则为 right。

注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
代码测试如下：

text-align测试
在测试的时候发现text-align: justify;出现了问题，直接使用这段代码并没有生效。后来参考了大漠的这篇文章Text-align:Justify和RWD,使用伪类：after解决了问题。
关于这段伪类代码我是这么理解的：使用伪类after创建了一个content属性为空白的内联块元素，由于这个元素的width为100%，它会导致一个换行符出现，这样一来它前面的内容就实现了两端对齐。
这种方法是文章中作者推荐的，更简洁更有语义。

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

px，是一种像素尺寸，在html可以直接用来指定字体的大小，假设一个字体的高度为14像素，这说明字母的最低部分和最高部分之间有14像素。
em,类似于百分数，是一个相对度量单位，使用em时，要指定一个比例因子，就像这样：

font-size:1.2em;

这表示该元素的字体大小是它父元素的字体大小的1.2倍。

rem，是css3中增加的相对度量单位，是相对于根元素(即html元素)计算值的倍数。
注意：浏览器默认的字体大小是16px。
他们的区别在于px的值是固定的，而em、rem的值是相对的。em是相对于父元素，而rem是相对于根元素。
使用方法用一段代码表示：

字体方法

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

chrome

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

题目

浏览器的默认字体大小是16px，所以html的字体大小是16*62.5%=10px，所以p为6rem情况下可以让h1与p的字体大小相等。

本教程版权归饥人谷_任磊和饥人谷所有，转载须说明来源。