任务6

CSS的全称是什么?

• 全称是Cascading Style Sheets层叠样式表。

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

• 内联样式

• 内部样式

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

饥人谷

• 外部样式

• 浏览器默认样

image.png

• link 和@import 的区别参考：

1. link是HTML的标签，他可以放到HTML的任何的方，而@import是css语法。
2. 加载顺序的差别：在加载页面的时候link引用的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.png
• 绝对路径:
  /Users/hunger/project/css/a.css：本地绝对路径中的a.css文件
• 网站路径：
  /static/css/a.css：代表当前域名下的static文件夹下的css文件夹下的a.css文件
  http://cdn.jirengu.com/kejian1/8-1.png :网站的图片地址

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

• 可以直接将图片上传到服务器，在HTML页面用相对路径的方式展示。
• 如果这个图片在网络的服务器上，可以直接用其网站上的图片链接。

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

• 语法不区分大小写，但建议统一使用小写
• 不使用内联的style属性定义样式
• d和class使用有意义的单词，分隔符建议使用-
• 有可能就是用缩写
• 属性值是0的省略单位
• 块内容缩进
• 属性名冒号后面添加一个空格

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

C-_Users_Administrator_Desktop_作业_图片_任务6.gif

• 1.Elements:查看当前页面的HTML和CSS元素，可以修改CSS样式。
• 2.Console: 显示各种警告与错误信息，并且提供了shell用来和文档、开发者工具交互。
• 3.Sources:主要用来调试JS。
• 4.Network：可以看到页面向服务器请求了哪些资源、资源的大小以及加载资源花费的时间，当然也能看到哪些资源不能成功加载。另外，还可以查看HTTP请求头，返回内容等。
• 5.Performance：查看CPU的执行时间和内存的占用.
• 6.Application:记录网站加载的所以资源信息。
• 7.Styles:当前元素的样式。
• 8.查看当前页面在移动端的样式。