CSS相关知识
2017-05-16 本文已影响0人
leocz
CSS是什么
css 全称Cascading Style Sheets， 层叠样式表，用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）
CSS的引入方式，link与@import的区别
引入方式：
- 内联方式
<p style="color:red,font-size:16px,">我是一个段落</p> - 内部样式
<style>
p{
color: red;
font-size: 16px;
}
</style>
- 外部样式
通过link方式
<head>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
通过@import方式
<head>
@import url(index.css) /*路径引号可有可无，也可以写成 @import "index.css" */
</head>
- 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书写规范
- html中不要混入样式代码
- id和class的命名要有意义
- html不区分大小写，但统一小写
- 做好缩进，使代码便于阅读
- link 中type属性可省略，默认值就是我们需要的值
css书写规范
- 属性值时0的可以省略单位，属性值是 0.2 等可以省略0 写成 .2
- 一些可缩写的属性就缩写，既精简代码又便于阅读
- 在需要写多个样式的时候，影响元素位置的属性写在前面，颜色等外观写在后面
- 简写形式的十六进制值，例如，用 #fff 代替 #ffffff
- 所有声明语句都应当以分号结尾
