样式的几种引入方式
- 外部样式:
<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的几个值以及作用
- text-align: left;文本左对齐,默认值
- text-align: center;文本居中
- 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>
本教程版权归饥人谷和作者所有,转载须说明来源。