碼規范

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 內編寫網頁內容了。

通過觀察基本結構發現 標簽前面有的有空格 有的沒有空格 這是為什么呢 實際上 當出現標簽嵌套的時候 需要保持一個固定的縮進 ，一般采用兩個或者四個空格 具體看個人習慣和開發團隊的規范，為了方便閱讀不推薦混用 。 有些標簽嵌套在一起，這就是標簽結構嵌套

在一個標簽內再次書寫一個標簽 他們之間形成了這樣的包裹關系 ，別包裹的叫做子標簽，包裹的就是父標簽。

在父子標簽嵌套的時候子標簽整體相對于父標簽多一套縮進，更加方便閱讀。