样式的引入方式,link 和 @import的区别
1.外部引入式
使用link标签或者@import标签从外部引入后缀名为.css的样式文件,语法分别是:
@import url(路径+###.css);```
2.嵌入式
把样式写在当前<style></style>标签内,语法是:
```<style>p {color:red; text-align:center;}</style>```
3.内联式
在所要添加样式的开始标签内添加样式(不能在结束标签添加),语法为:
```<p style="color:yellow,font-size:20px">我是P标签内容</p>```
link 和 @import的区别:
- link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。
- link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。
- link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。
- link支持使用Javascript控制DOM去改变样式;而@import不支持。
# 文件路径../main.css 、./main.css、main.css、/main.css的区别
> ../main.css代表上级目录的main.css文件
./main.css代表当前目录main.css文件
main.css代表当前目录的main.css文件
/main.css 是在当前目录的根目录寻找 css文件
# console.log的作用
用于调试代码,在控制台中更改变量。
# text-align的用法
共五种:
> text-align:left 表示文本排列到左边
text-align:center 表示本文居中
text-align:right 表示文本排列到右边
text-align:inherit 表示文本继承父元素text-align属性值进行排列
text-align:justify表示文本排列水平对
![4.PNG](http://upload-images.jianshu.io/upload_images/2772338-5848bbb2cadd04e2.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
# px、em、rem
- px(Pixel),代表像素。
- em为相对长度单位,所有未经调整的浏览器都符合: 1em=16px。em为相对父级元素的单位大小而产生变化。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em。
- rem也为相对长度单位,但只为相对根元素的单位大小产生变化。
# chrome 的审查元素功能
![5.PNG](http://upload-images.jianshu.io/upload_images/2772338-3146e42416e117c0.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)