任务六

一 CSS的全称是什么？

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

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

• CSS有几种引入方式？

1. 内联样式
   <p style="color:red ; font-size :12px">内联样式</p>

2. 内部样式

<style type="text/css">
  p{
    color = red;
    font-size = 20px；
  }
</style>
<p>内部样式</p>

3. 外部样式

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

• link 和 @import 有什么区别？

1. link 是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

2. link 引用CSS时，在页面加载时同时加载；@impot，需要页面网页完全载入后加载。

3. link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

4. link支持使用Javascript控制DOM去改变样式；而@import不支持。

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

• 相对路径

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 直接通过链接的形式取得网上的图片

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

• 上传到服务器上，再使用相对路径取得
• 直接采用其他网站上的图片，将图片链接引入HTML

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

• 文件规范

1. 文件名用英文单词，多个单词用驼峰命名法

例如： MaginLeft...

2. 一些浏览器会将含有这些词作为广告拦截，文件命名、ID、CLASS等所有命名避免以上词汇。

例如：ad、ads、adv、banner、sponsor、gg、guangg、guanggao等

• HTML 书写规范

1. 文档类型声明，统一为HTML5文档类型声明
2. 语义化HTML
3. 标签、属性、属性命名使用小写英文、数字和-组成，且所有标签必须闭合，属性值使用双引号。
4. 尽量减少<div>嵌套
5. 在页面header标签中引入CSS样式文件，在页面底部引入Javascript文件

HTML书写规范

• CSS 书写规范

1. 引入CSS时 必须指明 rel="relstylesheet",无需指明type属性。
2. 在 head 中引入页面需要的所有 CSS 资源。
3. 选择器 与 { 之间必须包含空格。
4. 属性名 与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格。
5. 当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。

CSS书写规范

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

7953763-cf41781e75deb7fc.png