HTML2：html基础和css样式基础

2016-06-30 本文已影响85人饥人谷_张世钧

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

css有三种引入方式：

1.外部样式表<link rel="stylesheet" type="text/css" href="文件名.css(例如main.css)">

2.内部样式表（位于标签内部）

color:red;

}

</style>

3.内联样式（在HTML元素内部）

js有2种方式：

1.外部js

2.内部js

console.log(hello);

</script>

其他方法

1.@import url（文件名.css(例如main.css)）

2.浏览器缺省设置：在不设置样式的情况下，浏览器使用默认的样式设置，例如：<h(1~6)>,<p>标签等；

ps:相对于内部样式表和内联样式，外部样式表更常用，因为在做网页时，不会只写一篇程序，如果css和js在HTML里同时出现，会显得很乱，重要的是不方便后期修改和维护。

link和@import都用于外部引用，link引用css时，页面会在加载的同时加载css，@import引用css时，页面会在加载完之后加载，造成页面一开始没有样式。

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

../main.css:在上一级目录文件中寻找该文件

./main.css:在当前目录文件中寻找该文件

main.css：在当前目录文件中寻找该文件

3.console.log是做什么用的

用于调试JavaScript，不会像alert一样每次都会有弹窗，并且不能显示字符串，console.log会在控制台输出信息，不会影响页面运行。

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

1.text-align:center是文本居中显示

2.text-align:left是文本往左边对其

3.text-align:right是文本往右边对其

4.text-align:justify是文字有多行的时候，让文字左右两边对其

ps:如果对div设置text-align，就是对div的所有内容设置了text-align

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

PX：像素单位，几PX就是几像素

em：倍数，相对于父元素的倍数

rem：倍数，相对于根元素的倍数

PX是固定的，几PX就是几像素，不会随着其他改变而改变，（chrome设置字体大小默认最小12px，即使设置了更小的字号，也是显示12px大小的字）使用：font-size：12px；border：1px；

em是相对于父元素字体的倍数，1em是父元素字体的1倍，2em是父元素字体的2倍

rem是相对于根元素字体的倍数，1em是根元素字体的1倍，2em是根元素字体的2倍

rem是对于根元素的固定元素，无论其他元素如何变化，它只遵循根元素的字体变化，em是不固定元素，它随父元素的变化而变化。

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

Chrome提供了审查元素功能，只需右键点击"审查元素"(名字)，即可打开Chrome Inspector，获得网页各种元素的加载时间、Javascript函数、Object等信息。

审查元素可以在页面内查看该页面任何元素的HTML、CSS和JavaScript信息，再想查看元素的位置点击右键点击检查，可以看见所有信息，以及修改和添加信息，并且能够以alert和console.log的方式检查代码显示情况。

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

应该设置为6rem。

浏览器默认字体大小是16px,16px*62.5%是10px,根节点字体大小是10px。h1的字体大小60px，是10px的6倍，p要和h1大小相等，需要设置为6rem

本文章版权属饥人谷_张世钧和饥人谷所有，如需转载请务必注明出处。