审查元素html表格后缀,CSS的简单功能及chrome审查元素简单介绍

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

①最常用的方式，引入样式表。在外部创建一个样式表(xxxx.css)，在此样式表中编写样式，然后在html中引入样式，一般来说要创建一个单独的css文件夹来存放css样式表，引入方式如下：

这种方式一般放在

Ps：

浏览器一般会默“index.html"为初始页面，所以一般将初始页面名称设置为这个，这样，在进入这个页面的时候，就不需要多输入“www.xxxxxx.com/index.html"

②在Html中用

body {

样式规则表

}

将样式表写于

③在标签里面直接编写行内样式：

使用STYLE属性，将STYLE属性直接加在个别的元件标签里。

例：

这种方式只对当前元素有效。

④使用@import引入：

跟link用法很像，但必须包含在中。

@import url=(引入的样式表路径、名称);

例：

@import url(http://css/xxxx.css);

注意：行末的分号必不可少的。

link和@import都是外部引用CSS的方式，但是存在一定的区别：

区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。

@import最优写法:

@import的写法一般有下列几种：

1.@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别

2.@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不识别

3.@import url(style.css) //Windows NS4, Macintosh NS4不识别

4.@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别

5.@import url("style.css") //Windows NS4, Macintosh NS4不识别由上分析知道，@import url(style.css) 和@import url("style.css")是最优的选择，兼容的浏览器最多。从字节优化的角度来看@import url(style.css)最值得推荐。

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

../main.css是指上一级目录中的css文件

./main.css是指本目录中的css文件，”./"可以省略，所以“./main.css”与“main.css"代表的意义相同

引申：绝对路径与相对路径的区别

绝对路径：

平时使用计算机时要找到需要的文件就必须知道文件的位置，而表示文件的位置的方式就是路径，例如只要看到这个路径：c:/website/img/photo.jpg我们就知道photo.jpg文件是在c盘的website目录下的img子目录中。这样完整的描述文件位置的路径就是绝对路径。我们不需要知道其他任何信息就可以根据绝对路径判断出文件的位置。

相对路径：

所谓相对路径，顾名思义就是自己相对与目标位置。不论将这些文件放到哪里，只要他们的相对关系没有变，就不会出错。

我们使用“../”来表示上一级目录，“../../”表示上上级的目录，以此类推。

例：

比方C盘ABC文件夹有个1文件,还有一个DEF文件夹,而DEF文件下有个2文件.

那1和2的文件路径分别为:(都是绝对路径)

C:\ABC\1

C:\ABC\DEF\2

如果让1文件来表示2文件的路径

绝对路径: C:\ABC\DEF\2

相对路径: DEF\2 (因为1和2文件前面的C:\ABC这段路径相同就不用写出来了)。

3.console.log是做什么用的

主要是方便调式javascript。可以看到你在页面中输出的内容。

相比alert他的优点是：

console能看到结构话的东西，如果是alert，弹出一个对象就是[object object],但是console能看到对象的内容。

console不会打断你页面的操作，如果用alert弹出来内容，如果不先点弹出框，整个页面就会卡死，无法进行其他动作，但是console输出内容后你页面还可以正常操作。

4.text-align有几个值，分别有什么作用

①left  把文本排列到左边。

②right  把文本排列到右边。

③center  把文本排列到中间。

④justify  实现两端对齐效果,在一行文字较多时，使用此效果，可以使文字较为均匀的分布于行内，由于字数较多，字间距较小，视觉效果可以忽略。

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

①px像素(Pixel) 相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

②rem 是相对于HTML根元素的相对长度单位。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

③em 是相对长度单位，在html中是根据其父级元素为标准的。这个单位过于灵活，只要有一个父单位被改变，此单位就会随之改变，所以一般来说用的少一些。

6.chrome 审查元素功能简单的截图介绍

7.如下设置p为几个rem，让h1和p的字体大小相等？

浏览器默认字体大小是16px，h1的字体大小是60px，则16×0.625×?=60px。解出来为6，所以是6rem。

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