CSS基础

2018-08-07 本文已影响0人饥人谷张雪莲

1.css的全称：（cascading style sheets）层叠样式表

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

1.内联样式

<h1 style="color:red; font-size:20px;> </h1>

2.内部样式

<style type="text/css">
h1{
   color:red;
   font-size:20px;
}
</style>

3.外部样式:使用链接引入来加载页面

a:<head>
        <link rel="stylesheet" type="text/css" href="index.css">
  </head>
b:<style>
       @import url ("hello css");
       @import "world.css"
</style>

4.浏览器默认样式

link 和@import 有什么区别?

link和@import的本质都是为了加载CSS文件，但是还是存在一些细微的差别

link属性xhtml标签，而@import完全属于css提供的一种方式。link标签除了加载css以外，还可以做很多其他的事情，比如定义rss，定义rel链接属性，而@import只能加载css。
加载顺序的差别，当一个页面被加载的时候，link引用的css会同时被加载，而@import引用的css会被等到页面被下载完以后再加载，所以有时候浏览@import引用的css加载页面时性能较差。
兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

3. 以下这几种文件路径分别用在什么地方，代表什么意思?

··/表示当前文件夹所在层级的上一层级；
·/表示当前文件夹所在层级；
/表示根目录;

css/a.css:相对路径；引入当前页面目录的同级文件夹下css中的a.css文件；
./css/a.css：相对路径；引入当前页面目录的同级文件夹下css中的a.css文件；
b.css：相对路径；引入当前页面目录同级文件夹的b.css文件；
../imgs/a.png：表示上一级文件目录下imgs文件夹下的a.png文件;
/Users/hunger/project/css/a.css:绝对路径；表示a.css的绝对路径，在本地硬盘中真实存在的地址；
/static/css/a.css：网络路径；最前面有斜线，表示当前主域名下的路径去寻找a.css文件，例如，主域名为localhost：8080，那么就以licalhost：8080/static/css/a.css的路径去寻找a.css文件，如果没有最前面的斜线，就是在相对当前html的同级目录下以static/css/a.css去寻找a.css；
http://cdn.jirengu.com/kejian1/8-1.png：8-1.png被上传到互联网上，这是它在互联网中真实准确的地址网络路径；

4.如果我想在js.jirengu.com上展示一个图片，需要怎么操作?

直接把图片上传到服务器，用相对路径。
网上图片获得图片地址，用网络路径，本地图片可以上传到图床获得地址。

5.列出5条以上html和 css 的书写规范

html:
1.一行代码表示一个内容
2.代码缩写使用tab键
3.标签与它的属性必须小写
4.所有的标签必须合理嵌套
5.大部分标签有属性格式：属性=“属性值”（多个属性之间用空格隔开）
css:
1.选择器{ 属性:值;} ：与值之间空一个空格
2.属性值是0的省略单位
3.块内容缩写
4.ID和class用有意义的单词
5.有可能就用缩写

6.截图介绍 chrome 开发者工具的功能区

wode.png

Elements 查看元素
Console 控制台，用于调试
Sources 文件资源情况
Network 网络状况
timeline 页面渲染时间