样式的几种引入方式

• 外部样式：<link rel="stylesheet" href="./css/index.css" media="screen" title="no title" charset="utf-8">
• 内部样式：<style>...</style>
• 内联样式：<p style="font-size: 2em">...</p>

link 和 @import的区别：

区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。

几种不同的文件路径

• ../main.css：main.css文件在当前目录的父目录下
• ./main.css：main.css文件在当前目录下
• main.css：main.css文件在当前目录下
• /main.css：main.css文件当前目录的根目录下

console.log的作用

在当前页面的控制台中输出内容，相对于alert来说不会打断页面的操作。

text-align的几个值以及作用

1. text-align: left;文本左对齐，默认值
2. text-align: center;文本居中
3. text-align: right:文本右对齐

例

px、em、rem分别是什么？有什么区别？

• px：像素，图像的基本采样单位
  <p style="font-size: 16px">这是一个段落</p>
• em：相对单位，相对于父元素
  <p id="p1" style="font-size: 2em">我是子元素em</p>
• rem：相对单位，相对于根节点元素
  <p class="p2" style="font-size: 2rem">我也是子元素rem</p>

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