CSS基础

1、CSS全称是什么？

CSS全称是Cascading Style Sheets，意思是层叠样式表，我们如果新建一个css文件，有的win电脑可以显示这是一个”层叠样式表文件“。

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

引入方式：

1. 行内样式，例如<div style="color:#f00; width:300px; height:300px;"></div>；

2. 内部样式（内联样式），例如

   
   one.png
3. 外部样式，即在文档的head中引入一个外部文件，例如<link rel="stylesheet" href="style.css">，除此之外，我们也可以这样声明
   two.png 利用@import语法写外部样式

link和@import有什么区别

• link是HTML的语法，link标签不只是可以引入css，但是@import是CSS的语法，它只能够引入CSS用；link可以在HTML文档头部直接写，但是@import要写在HTML文档中就必须要包裹在一对 <style></style>标签中才能够生效。
• @import可以在CSS文件中直接声明引入其他CSS文件，但是link标签在CSS文件中是不生效的。
• 加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁，当css被加载出来之后会突然出现样式，很怪异），网速慢的时候还挺明显。
• 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。但是现在看这个问题可以忽略因为国内现在基本可以忽略IE6的用户了
• 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

3、以下几种文件路径分别用在什么地方？代表什么意思？

1. css/a.css
2. ./css/a.css
3. b.css
4. ../imgs/a.png
5. /Users/hunger/project/css/a.css
6. static/css/a.css
7. http://cdn.jirengu.com/kejian1/8-1.png

答案

1234是相对路径，最为常见

• 1：和HTML文件同级的CSS文件夹下的a.css文件
• 2：HTML文件的上一级的CSS文件夹中的a.css
• 3：和HTML文件同级的b.css
• 4：HTML文件的上一级的imgs文件夹下的a.png（图片）
  5为绝对路径，不常见
• 这个是文件的物理路径，从根目录开始一级一级找到目前这个文件，即Users文件夹下的hunger文件夹下的project文件夹下的CSS文件夹下的a.css
  67为网站路径
• 6：网站中的相对路径
• 7：这个是网络资源文件，引入的话需要有网络才能访问到这个文件。

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

网络图片需要获取到URL然后可以使用这个路径进行上传；

img.png

或是直接将图片上传至服务器，使用相对路径找到这个图片引用即可。

5、html和css规范

• 不大小写混排，建议都使用小写，符合行业习惯
• HTML中嵌套时使用缩进，一般是4个空格或两个空格，这样层级关系更加明显，能增加可读性，易于维护
• HTML中每个元素的id和class名称需要有意义，尽量使用英文单词来命名

• css文件中对每个标签或class的属性定义的时候清晰明了，例如按照下面的格式来写

  
  css.png
  

  但是不要按照下列格式来写，不清晰不容易维护

  
  wrong.png
• 在没有特殊情况下，不要使用行内样式，非常不易维护，可读性比较差。
• 使用link引入css样式而不是用@import来引入样式
• 对于属性的定义，确保全部使用双引号，绝不要使用单引号。
• 不要在自闭合（self-closing）元素的尾部添加斜线 -- HTML5 规范中明确说明这是可选的。
• css文件中，避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;。
• 为了代码的易读性，在每个声明块的左花括号前添加一个空格。声明块的右花括号应当单独成行。

6、谷歌浏览器功能区

work6.png