getability Eight--for-end revie

Cascading Style Sheets 层叠样式表

• 内联样式
  <h1 style="color: red; font-size: 20px;"></h1>
• 内部样式

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

• 外部样式

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

link与@import的区别

本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别

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

---

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

• .相对路径css/a.css 当前目录下的css文件夹中的a.css./css/a.css 当前目录中css文件夹中的a.css文件b.css 当前目录下的b.css文件../imgs/a.png 上级目录中的imgs 文件夹中的a图片
• 绝对路径（本地文件的绝对地址）/User/hunger/project/css/a.css 本地绝对路径中的a.css文件
• 网站路径/static/css/a.css 网站中也可以使用相对路径http://cdn.jirengu.com/kejian1/8-1.png25 网络中的路径

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

• 稳定的做法：上传到服务器内部并用相对路径读取。减小服务器压力的做法：直接盗用其他网站上的图片链接或上传到图床使用图床的绝对链接。

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

• 1.语法统一使用小写
• 2.不使用内联样式的style元素定义样式，建议采用外部css
• 3.id和class使用有区分度的单词
• 4.块内容缩进
• 5.属性名：后面加一个space

chrome 开发者工具的功能区

图片

9/5/2017