码规范

CSS样式表是一个序列通用字符集，传输和存储过程中，这些字符必须由支持 US-ASCII（例如 UTF-8, ISO 8859-x, SHIFT JIS 等）字符编码方式编译

文档内嵌样式表编码

When a style sheet is embedded in another document, such as in the STYLE element or "style" attribute of HTML, the style sheet shares the character encoding of the whole document.

当样式出现在其它文档，如 HTML 的 STYLE 标签或标签属性 "style"，样式的编码由文档的决定。

文档外链样式表编码

When a style sheet resides in a separate file, user agents must observe the following priorities when determining a style sheet's character encoding (from highest priority to lowest):

An HTTP "charset" parameter in a "Content-Type" field (or similar parameters in other protocols)BOM and/or [@charset ]()or other metadata from the linking mechanism (if any)charset of referring style sheet or document (if any)Assume UTF-8

文档外链样式表的编码可以由以下各项按照由高到低的优先级顺序决定：

1. HTTP “Content-Type” 字段参数 “charset”（或其它协议相似的参数）
2. BOM（byte-order mark）和（或）[@charset ]()
3. Link 中的元数据设置（如果有的话）
4. 引用样式表字符集或文档编码（如果有的话）
5. 假定为 UTF-8 编码

样式表编码

Authors using an [@charset ]() rule must place the rule at the very beginning of the style sheet, preceded by no characters. (If a byte order mark is appropriate for the encoding used, it may precede the [@charset ]() rule.)

[@charset ]() must be written literally, i.e., the 10 characters '[@charset ]() "' (lowercase, no backslash escapes), followed by the encoding name, followed by '";'.

• @charset规则一定要在样式文件的第一行首个字符位置开始，否则的话就会有机会让 BOM 设置生效（如果有设置 BOM 的话）而优于 [@charset ]() 作为样式表的编码
• @charset ""; 一定要写上，并且用小写字母，不能出现转义符

团队约定

• 样式文件必须写上 [@charset ]() 规则，并且一定要在样式文件的第一行首个字符位置开始写，编码名用 “UTF-8”
• 字符 [@charset ]() ""; 都用小写字母，不能出现转义符，编码名允许大小混写
• 考虑到在使用“UTF-8”编码情况下 BOM 对代码的污染和编码显示的问题，在可控范围下，坚决不使用 BOM。（更多关于 BOM 可参考 BOM的介绍 和 「带 BOM 的 UTF-8」和「无 BOM 的 UTF-8」有什么区别？ ）

推荐：

@charset "UTF-8";

.jdc{}

不推荐：

/**
 * @desc File Info
 * @author Author Name
 * @date 2015-10-10
 */
 
/* @charset规则不在文件首行首个字符开始 */
@charset "UTF-8";

.jdc{}

@CHARSET "UTF-8";
/* @charset规则没有用小写 */

.jdc{}

/* 无@charset规则 */
.jdc{}

更多关于样式编码：CSS style sheet representation

代码风格

代码格式化

样式书写一般有两种：一种是紧凑格式 (Compact)

.jdc{ display: block;width: 50px;}

一种是展开格式（Expanded）

.jdc{
    display: block;
    width: 50px;
}

团队约定

统一使用展开格式书写样式

代码大小写

样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。

/* 推荐 */
.jdc{
    display:block;
}
    
/* 不推荐 */
.JDC{
    DISPLAY:BLOCK;
}

选择器

• 尽量少用通用选择器 *
• 不使用 ID 选择器
• 不使用无具体语义定义的标签选择器

/* 推荐 */
.jdc {}
.jdc li {}
.jdc li p{}

/* 不推荐 */
*{}
#jdc {}
.jdc div{}

代码缩进

统一使用四个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）

.jdc {
    width: 100%;
    height: 100%;
}

分号

每个属性声明末尾都要加分号；

.jdc {
    width: 100%;
    height: 100%;
}

代码易读性

左括号与类名之间一个空格，冒号与属性值之间一个空格

推荐：

.jdc { 
    width: 100%; 
}

不推荐：

.jdc{ 
    width:100%;
}

逗号分隔的取值，逗号之后一个空格

推荐：

.jdc {
    box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
}

不推荐：

.jdc {
    box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc;
}

为单个css选择器或新申明开启新行

推荐：

.jdc, 
.jdc_logo, 
.jdc_hd {
    color: #ff0;
}
.nav{
    color: #fff;
}

不推荐：

.jdc,jdc_logo,.jdc_hd {
    color: #ff0;
}.nav{
    color: #fff;
}

颜色值 rgb() rgba() hsl() hsla() rect() 中不需有空格，且取值不要带有不必要的 0

推荐：

.jdc {
    color: rgba(255,255,255,.5);
}

不推荐：

.jdc {
    color: rgba( 255, 255, 255, 0.5 );
}

属性值十六进制数值能用简写的尽量用简写

推荐：

.jdc {
    color: #fff;
}

不推荐：

.jdc {
    color: #ffffff;
}

不要为 0 指明单位

推荐：

.jdc {
    margin: 0 10px;
}

不推荐：

.jdc {
    margin: 0px 10px;
}

属性值引号

css属性值需要用到引号时，统一使用单引号

/* 推荐 */
.jdc { 
    font-family: 'Hiragino Sans GB';
}

/* 不推荐 */
.jdc { 
    font-family: "Hiragino Sans GB";
}

属性书写顺序

建议遵循以下顺序：

1. 布局定位属性：display / position / float / clear / visibility / overflow
2. 自身属性：width / height / margin / padding / border / background
3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient ...

.jdc {
    display: block;
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    margin: 0 10px;
    padding: 20px 0;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #333;
    background: rgba(0,0,0,.5);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

mozilla官方属性顺序推荐

CSS3浏览器私有前缀写法

CSS3 浏览器私有前缀在前，标准前缀在后

.jdc {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

更多关于浏览器私有前辍写法：#Vendor-specific extensions

参考阅读

Google Code Guide

天我们来学习HTML基本格式。

H1 标签定义了一个文档的标题 ，虽然在浏览器里显示了预期的效果 ，但它并不是一个符合规范的 html 文档，今天我们就来定义一个标准的 html 文档。

这是一个 html 文档的基本格式 ，来深入的剖析一下

<!DOCTYPE html> 这个标签会告诉浏览器，后面书写的是HTML5规范 的语法，浏览器会按照 HTML5 的语法规范进行解析

<html lang='en'> 包裹了整个页面的所有内容，有时被称为根元素。

<head> 是所有头部元素的容器，描述了文档的各种属性和信息，比如文档的标题，文档引用的样式表和JS脚本文件，页面元信息等等，绝大多数文档头部包含的数据，都不会真正作为内容显示给浏览者。

<meta charset="utf-8"> 将文档应该使用的字符集设置为UTF-8，它包括了书面语言的大多数字符，基本上可以处理放在页面上的任何文本内容，它可以帮助你解决页面乱码的问题。

<title> 设置页面的标题，也就是出现在浏览器标签中的内容，它描述页面被加入入书签或收藏时的标题

<body> 它包含了页面展示的所有内容，比如文字，图片，视频，游戏，可播放的音乐等等

一般情况下 一个符合规范的 html 文档 都应该使用这个基本格式

回到编辑器 我们创建一个文件 名字叫 base.html 我们快速的编写好 html 基本格式， 在 <body> 标签里写一个 h1 在里面写一些内容，浏览器中打开页面正常的显示了，每个页面都写这么多东西很麻烦 我们有 vscode。

删除所有内容 在页面里只需一个感叹号 ，再按一下 tab 键 ，html 基本格式自动生成了，这时就可以直接在 body 内编写网页内容了。

通过观察基本结构发现 标签前面有的有空格 有的没有空格 这是为什么呢 实际上 当出现标签嵌套的时候 需要保持一个固定的缩进 ，一般采用两个或者四个空格 具体看个人习惯和开发团队的规范，为了方便阅读不推荐混用 。 有些标签嵌套在一起，这就是标签结构嵌套

在一个标签内再次书写一个标签 他们之间形成了这样的包裹关系 ，别包裹的叫做子标签，包裹的就是父标签。

在父子标签嵌套的时候子标签整体相对于父标签多一套缩进，更加方便阅读。