关于CSS知识

1. CSS的全称是什么?

CSS就是一种叫做样式表（stylesheet）的技术。也有的人称之为层叠样式表（Cascading Style Sheet）。
在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。

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

有4种引入方式

<p style="color: red;font-size: 16px;">这是一个内联样式或者说行内样式</p>
ps:尽量不要使用行内样式
这通常是个很糟糕的书写方式，它只能改变当前标签的样式，如果想要多个 <div>拥有相同的样式，你不得不重复地为每个<div>添加相同的样式，如果想要修改一种样式，又不得不修改所有的 style 中的代码。很显然，内联方式引入 CSS 代码会导致 HTML 代码变得冗长，且使得网页难以维护。

<style>
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: 18px;
        color: black;
    }
</style>这是一个内部样式

嵌入方式的 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中，所以会使得代码比较集中，当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。因为嵌入的 CSS 只对当前页面有效，所以当多个页面需要引入相同的 CSS 代码时，这样写会导致代码冗余，也不利于维护。

<head> <link rel="stylesheet" type="text/css" href="index.css"> </head> 这是一个外部样式
这是最常见的也是最推荐的引入 CSS 的方式。使用这种方式，所有的 CSS 代码只存在于单独的 CSS 文件中，所以具有良好的可维护性。并且所有的 CSS 代码只存在于 CSS 文件中，CSS 文件会在第一次加载时引入，以后切换页面时只需加载 HTML 文件即可。

<style> @import url("hello.css"); @import "world.css"; </style>
使用 CSS 规则引入外部 CSS 文件

区别

本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别
差别1：老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。
link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
差别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显（梦之都加载CSS的方式就是使用@import，我一边下载一边浏览梦之都网页时，就会出现上述问题）。
差别3：兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
差别4：使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
差别5：@import可以在css中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表,这样更利于修改和扩展.

ps:这样做有一个缺点，会对网站服务器产生过多的HTTP请求，以前是一个文件，而现在却是两个或更多文件了，服务器的压力增大，浏览量大的网站还是谨慎使用。有兴趣的可以观察一下像新浪等网站的首页或栏目首页代码，他们总会把css或js直接写在html里，而不用外部文件。
大致就这几种差别了,从上面的分析来看，还是使用link标签比较好。

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 绝对路径
根目录下的Users文件夹下hunger文件夹下project文件夹下css文件夹中的a.css文件
/static/css/a.css 绝对路径根目录下的static文件夹下css中的a.css文件
http://cdn.jirengu.com/kejian1/8-1.png 网路路径
ps:
如果是../开头, 就是相对路径
如果是/开头就是绝对路径

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

如果这个图片本来就存在网络线上,可以直接使用图片的网络绝对路径链接的方式在页面上添加url引用这张图片

如果图片在本地，可将图片上传到极简图床，生成一个线上网址，或将图片文件存于本地服务器，开启本地服务即可使用。

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

HTML规范

id class建议单词全字母小写，单词间以 -分隔。同项目必须保持风格一致。
HTML 标签的使用应该遵循标签的语义。
禁止 img的 src取值为空。延迟加载的图片也要增加默认的 src
使用 button元素时必须指明 type 属性值。
在 CSS 可以实现相同需求的情况下不得使用表格进行布局

CSS规范

属性名与之后的 :之间不允许包含空格， :与属性值之间必须包含空格
选择器的嵌套层级应不大于 3级，位置靠后的限定条件应尽可能精确
在可以使用缩写的情况下，尽量使用属性缩写
尽量不使用 !important声明。
将 z-inde 进行分层，对文档流外绝对定位元素的视觉层级关系进行管理

css规范参考

6. display:none和visibility:hidden的区别

display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，
就当他从来不存在。

visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。