我的前端学习笔记5-html+css

知识点总结区

任性而为，内容无关

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

CSS：

• 外部引入样式：
  
• 内部样式：
  1，内联样式（html元素内部）：

  段落

  
  2，内部样式（位于标签内部）：

JAVA SCRIPT：

• 外部引入样式：
  
• 内部样式：
  

link和@import有什么区别：

link和@import写法区别

• link：可以共用相同文件，减少工作量
• @import url(引入文件)可以缩短网页加载时间

link 和 @import的区别在于：1.link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显.由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

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

../main.css代表到上一目录中寻找
./main.css代表在本目录中寻找文件
main.css与./main.css相同
/main.css代表根目录```

> 3，console.log是做什么用的
能将内容展示在浏览器中，很方便。
console 控制台log 日志意思是在控制台输出日志信息,控制台也叫开发者工具,是浏览器的一部分，便于开发者调试用的。
- 相比于alert()更加直观。

> 4，text-align有几个值，分别有什么作用？为什么text-align:justify没有效果？写截图说明区别

- text-align:left 使文本居左。
- text-align:right  使文本居右。
- text-align:center 使文本居中
- text-align:justify 是文本两端对齐


- text-align:justify无效果情况：

![无效](http://upload-images.jianshu.io/upload_images/3706166-c1ededc4030b95eb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- text-align:justify有效果情况：
![有效](http://upload-images.jianshu.io/upload_images/3706166-a71212ded559a1a1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- text-align:right情况：

![没用justify](http://upload-images.jianshu.io/upload_images/3706166-52ec02f6feba7b76.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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

px含义是像素，就是一种计量单位。
em和rem则是相对变量。
em是相对于父级（上一级）字体的px量进行某倍的变化。
rem是相对于html文件的font-size进行倍数变化。
> 6,对chrome 审查元素的功能做个简单的截图介绍

略

> 7，设置body的字体为微软雅黑，字号16px， 行高1.5倍，字体颜色 #333
![](http://upload-images.jianshu.io/upload_images/3706166-bbea9ea5426f7831.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

.
> 8，设置段落颜色#000, 首行缩进两个字体宽度，1.5倍行高

.
![add.png](http://upload-images.jianshu.io/upload_images/3706166-a39e6c79cccfe45a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

![](http://upload-images.jianshu.io/upload_images/3706166-8d09791f26f5ae32.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
.
>  id和class的区别？

 - id和class都是为了在小范围内运用样式的一个属性
 - 任何元素都可以添加id和class，格式如下：

![](http://upload-images.jianshu.io/upload_images/3706166-0fead169c75099ed.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

 - id定位了页面上唯一的元素，所以定义id的时候id之间一定不能重名

![](http://upload-images.jianshu.io/upload_images/3706166-f33076e4a0124aa8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

 - class是定义一类的，class和id的名字可以相同

###TIP
![本文所有权归李连成所有，私转必究](http://img5.imgtn.bdimg.com/it/u=230900514,2030090921&fm=11&gp=0.jpg)