html引入css的几种方式（复习笔记）
一.html引入css的方式
1.内联样式
在html标签内的style属性中设定CSS样式，例如：
<a style="color:red;">你好</a>
注：在内联样式里无法写hover样式，并且这种方式不推荐使用，因为它只能改变当前标签样式，多处使用会导致代码的可维护性极差。
2.内部样式
在html内的head头部内的style标签对中设定CSS样式，例如：
<head type="text/css">
<style>
a{color:red;}
</style>
</head>
注：此方法可以一目了然的查看HTML结构和CSS样式，但此方法的CSS只对当前网页有效，如果当多个页面需要引入相同CSS代码时，这样写会导致代码冗余，不利于维护。
3.外部样式（链接式）
在HTML的head头部用link标签引入一个独立的css文件。例如：
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
注：用此方便要特别主要href的路径，不能将css文件放在桌面，因为网页无法读取本地文件。这种方式不仅仅可以引入css文件还可以引入其他文件。推荐使用这种方式，具有良好的可维护性。
4.外部样式（导入式）
使用CSS的语法规则引入一个外部独立的 .css 文件。例如：
<style>
@import url(style.css);
</style>
注：这种方式与链接式link一样，将CSS代码存储在一个外部独立的文件中，也具有良好的可维护性，但这种方式也有缺点：白屏和无样式内容闪烁。
二. 外部样式链接式link和导入式@import的区别
1.从属关系不同
- link属于html标签。
- @import属于css语法
link标签的href属性不仅仅可以引入css样式，还可以定义RSS、rel属性等。而@import只可以引入样式。
2.加载顺序
- 使用link标签引入的CSS样式在加载页面时被同时加载
- 使用@import导入的CSS样式将在页面加载完毕之后才被加载
3.兼容性
- link属于html标签，不存在兼容性问题，但@import低版本的浏览器不支持，只可在 IE5+ 才能被识别。
4.link支持使用Javascript控制DOM去改变样式，而@import不支持。
5.link引入的样式权重大于@import引入的样式。
三.其他一些作业。
1.文件路径../main.css、./main.css、main.css、/main.css有什么区别。
-
../main.css表示上一级目录中的main.css文件。
./main.css和main.css都表示当前目录下的main.css文件。
/main.css表示根目录下的main.css文件。
2.console.log是做什么用的？
- .console指代调试工具中的控制台，通过调用该console对象的log()函数，可以在控制台中打印信息。
- 对于JavaScript程序的调试，相比于alert()，使用console.log()是一种更好的方式，原因在于：alert()函数会阻断JavaScript程序的执行，从而造成副作用；而console.log()仅在控制台中打印相关信息，因此不会造成类似的顾虑
3.text-align有几个值，分别什么作用？为什么text-align：justify没有效果？
-
text-align属性是用来描述一个行内元素是如何在身为父元素的块级元素中对齐。text-align属性并不能控制块级元素的对齐方式，它只对块级元素内的行内元素生效。
他的属性值分别是:left、right、center、jsutify。
text-align: left;<!-- 内容左对齐-->
text-align: right;<!-- 内容右对齐-->
text-align: center;<!--内容居中对齐-->
text-align: justify;<!-- 内容两端对齐，但对于强制打断的行（被打断的这一行）及最后一行
（包括仅有一行文本的情况，因为它既是第一行也是最后一行）不做处理-->
text-align: inherit;<!-- 继承父元素对齐方式-->
文字不满一行或者用强制换行则text-align: justify;无效果。
4.px、em、rem分别是什么？有什么区别？如何使用？
- px表示一个像素；
- em 相对单位，表示是由当前元素的像素大小决定的；
- rem 相对单位，表示相对于<html>元素定义的像素的倍数。
一般，都使用px决定像素大小；
em一般用于首行缩进或是设置行高；
rem较多用于移动端页面设置字体大小。
5.对Chrome审查元素的功能做个简单的截图介绍
-
打开Chrome审查元素功能的方式：1.快捷键：Ctrl+Shift+c;2.鼠标右键-查看源代码。
