CSS相关知识

CSS是什么

css 全称Cascading Style Sheets， 层叠样式表，用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）

CSS的引入方式，link与@import的区别

引入方式：

• 内联方式
  

  我是一个段落

• 内部样式

• 外部样式

通过link方式

  

通过@import方式

  @import url(index.css)  /*路径引号可有可无，也可以写成  @import "index.css" */

• link与@import的区别如下
  • link 是 XHTML 标签，除了加载 CSS 外，还可以定义RSS等其他事务；@import 是 CSS 的一个语法，只能加载 CSS 。
  • link 引用 CSS 时，在页面载入时同时加载；@import 需要页面网页完全载入以后加载。
  • link是 XHTML 标签，无兼容问题；@import 是在 CSS2.1 提出的，低版本的浏览器不支持，只有IE5以上才能识别。
  • link 支持使用 Javascript 控制 DOM 去改变样式；而 @import 不支持。

为体现内容，样式，行为分离原则，目前的大多数网页的css是通过link来引入。

常见文件路径写法

相对路径

• css/a.css 当前目录css文件夹里面的 a.css 文件
• ./css/a.css 同上，上面的写法不过是将./省略而已
• b.css 当前目录下的 b.css 文件
• ../imgs/a.png 当前目录的上一级目录里面 imgs 文件夹里面的 a.png 文件

绝对路径
/user/hunger/project/css/a.css 本地电脑 user/hunger/project/css文件夹下的a.css文件

网站路径
/static/css/a.css 网站相对路径 网站根目录下static文件夹下的css文件夹下的 a.css 文件
http://cdn.jirengu.com/kejian1/8-1.png 网上的一张图片，通过网站路径引入一张图片

在 js.jirengu.com 上展示一张图片

首先将图片上传到饥人谷的服务器，然后在页面上将img的scr属性设置成刚刚上传图片的路径即可。

html和css的书写规范

html书写规范

1. html中不要混入样式代码
2. id和class的命名要有意义
3. html不区分大小写，但统一小写
4. 做好缩进，使代码便于阅读
5. link 中type属性可省略，默认值就是我们需要的值

css书写规范

1. 属性值时0的可以省略单位，属性值是 0.2 等可以省略0 写成 .2
2. 一些可缩写的属性就缩写，既精简代码又便于阅读
3. 在需要写多个样式的时候，影响元素位置的属性写在前面，颜色等外观写在后面
4. 简写形式的十六进制值，例如，用 #fff 代替 #ffffff
5. 所有声明语句都应当以分号结尾