CSS基础

** CSS **全称为 Cascading Style Sheets，层叠样式表。

@charset "utf-8"
在CSS一般不需要加，但在css中有中文并且想显示时，加入该代码可以正常显示中文。

引用css的几种方法。

1. 内链样式：

<div style="color:red;width:100px;font-size:14px;"></div

2. 内部样式：

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

3. 外部样式：

方法一：link

<link rel="stylesheet" type="text/css" href="../css/index.css">

link为html中的一个标签。
方法二：@import

<style>
@import url("hello.css");
@import "world.css";
</style>

@impor 为css的一个语法。可以放到style中也可以放在其他css文件中。

文件路径：

• 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 在该网址获取图片8-1.png * 网页路径 *

在jsbin中展示图片

1. 上传到图床得到图片链接，使用网络路径。
2. 在网上找到图片和图片链接，使用网络路径。
3. 把图片上传到服务器中，使用相对路劲。

HTML 和 CSS的书写规范

HTML

• id和class使用有意义的单词，单词之间的分隔符建议使用-
• 尽量使用无兼容性问题的HTML标签
• 尽可能减少div嵌套
• img添加alt属性，增加可访问性
• 考虑并且提高代码的可重复性

CSS

• 语法统一使用小写
• 尽量不使用内联的style属性定义样式
• 属性值为0的省略单位
• 块内容缩进
• 属性名冒号后添加一个空格
• 选择器与{之间添加一个空格
• >``+``~选择器的两边各保留一个空格
• 属性定义后必须以分号结尾
• 可以使用缩写的情况下，尽量使用属性缩写
• 当元素需要撑起高度以包含内部的浮动元素时，通过对伪类设置clear或触发BFC的方式进行clearfix。尽量不使用添加空标签的方式。
• 参考