CSS命名规则
2019獨角獸企業重金招聘Python工程師標準>>>
1.通用命名規則：
1) ? ? ?所有ID或者class字母和數字之間用“_”連接，如: ?#col_1、#col_2
2) ? ? ? 所有ID或者class兩個單詞之間的鏈接采用駱駝式命名法，如: ?mianNav、footNav
3) ? ? ? 頁面主體框架布局命名：Lay_1、Lay_2 、Lay_3
4) ? ? ? 欄目布局容器命名一律采用: col_1、col_2、col_3、col_4、col_N
5) ? ? ? 欄目標題塊命名一律采用title。元素標簽采用:<h4> 如：<div><h4>標題</h4></div>
6) ? ? ? 頁面所有圖片區域全部采用：pic_1、pic_2、pic_3、pic_N
7) ? ? ? 頁面文本列表區域全部采用： Lst_1、Lst_2、Lst_3、Lst_N
8) ? ? ? 頁面上按鈕采用：btn_1、btn_2、btn_3、btn_N
9) ? ? ? 廣告區域：ad_1,ad_2,ad_3,ad_N
2.主框架命名規則：
1) ? ? ?#header (頁面頭部)
2) ? ? ?#main (頁面主體)
3) ? ? ?#footer (頁面尾部)
3.通用命名規則：
主 ?體：main
外 層：wrap
功能條：funcBar
主導航：mainNav
子導航：subNav
友情鏈接：friendLink
版 ?權：copyright
頁 眉：header
頁 腳：footer
標 題：title
子菜單：subMenu
注 ?釋：note
面包屑：breadcrumb
容 ?器：container
內 ?容：content
搜 ?索：search
登 ?陸：Login
當前狀態：current
頁頭：header
標志：logo
側欄：sidebar
廣告：banner
導航：nav
子導航：subnav
菜單：menu
子菜單：submenu
搜索：search
滾動：scroll
頁面主體：main
內容：content
標簽頁：tab
文章列表：list
信息：msg
提示技巧：tips
欄目標題：title
指南：guide
服務：service
熱點：hot
新聞：news
下載：download
注冊：reg（register）
狀態：status
按鈕：btn
投票：vote
4.常用簡寫命名規則：
bd：Body?
hd：Header?
fnt：字體?
nav：導航?
tb：表格?
lnk：鏈接?
ml/mr：margin-left/margin-right?
lst：列表?
pl / pr / pd：padding-left/-right/padding?
col：欄目?
frm：表單?
con：內容?
inf：信息?
lg：Logo?
inp：Input?
ft：Footer?
btn：Button?
more：更多?
fl /fr float:left/float:right?
tit 標題欄?
spr 空行?
t / d / mid / l / r：上 / 下 / 中 / 左 / 右?
bdr：邊?
w：寬?
h：高?
網站布局和樣式文件命名
1. ? ? 網站樣式文件命名和樣式從屬關系
?1) ? ? ? ? 全局CSS文件：global.css ，其中global.css包括cssreset（用來清除默認值）、全局性的一些屬性值的定義
2) ? ? ? ? 全局布局共用CSS文件：layout （網站布局容器的共用的CSS部分：頁眉、頁腳、搜索共用CSS）
3) ? ? ? ? 頻道私有CSS文件：home.css （當前頻道或者頁面的CSS獨有屬性值以及為了兼容不同的瀏覽器的所采用的hack）
?2. ? ? 網站布局：
?網站采用目前最流行的960寬度布局；布局類型分為3欄和2欄兩種方式。
兩欄布局：主容器寬度為700px 副容器寬度為240px
三欄布局：依次為190px、510px、240px；
?3. ? ? 網站欄目：
web頁面上不同內容的組合方式：圖片展示、圖文組合、文字列表、標題段落、按鈕等幾種。所以common樣式文件中按照如下規則定義：
1) ? ? ? 全局框架通用樣式
2) ? ? ? 頁眉
3) ? ? ? 導航
4) ? ? ? 搜索
5) ? ? ? 頁腳
6) ? ? ? 內容列表通用樣式
7) ? ? ? 圖片通用樣式
8) ? ? ? 表單通用樣式
?4. ? ? 頻道私有CSS文件：針對網站頻道不同風格所以各部分需要獨自私有定義，但是通用布局不需要再重新設置，只需要設置私有部分。
?XHTML文檔結構
1.Xhtml基本框架結構
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/global.css" />
<link rel="stylesheet" type="text/css" href="css/home.css" />
<title>圖書門戶</title>
</head>
?<body>
?<div id="header">
<!--start-->?
……
<!--end-->?
</div>
?<div id="main">?
<!--start-->?
……
<!--end-->?
</div>
?<div id="footer">
<!--start-->?
……
<!--end-->?
</div>
</body>
</html>
2.Xhtml標準的Doctype聲明。
圖書門戶采用XHTML1.0 Transitional標準
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
?3. 編碼聲明。默認使用UTF-8編碼。
4. meta，title等處填寫相應的關鍵詞和描述。
<meta name="keywords" content="關鍵詞" />
<meta name="description" content="頁面描述" />
<title>標題</title>
5.基本結構:
#header
#globalNav
#logo ? ??
#loginBar
#mainNav
#search
#main
?#lay_1: (布局容器1)
#col_1 (內容塊1)
#col_2 (內容塊2)
#lay_2: (布局容器2)
#col_3 (內容塊3)
#col_4 (內容塊4)
#footer:
#link
#copyright
?Web頁面切圖和CSS注意事項
?1. ? Web頁面切圖
1) ? ? ? Web頁面的切圖類型可以歸納為背景（bg）、列表項目的符號（li）、內容中插入的圖片（pic）、按鈕（btn）、圖標等幾種形式（ico）。
2) ? ? ? 建議把用CSS背景加載的圖片拼合成一張圖片。這樣可減少對服務器的請求。從而提升頁面加載速度。
3) ? ? ? 除頁面頭部大圖保存格式為JPG外，其他圖片一律采用gif格式
?2. ? CSS相關事項：
1) ? ? ? 所有的xhtml代碼小寫
2) ? ? ? 每個標簽都要有開始和結束，且要有正確的層次,沒有結束標簽的，標簽后加上"/"。 如：<img />、<br />
3) ? ? ? 所有的屬性必須用引號""括起來
4) ? ? ? 文檔類型必須聲明，禁止文檔類型亂用
5) ? ? ? 所有<和&特殊符號用編碼表示
6) ? ? ? 必須正確使用代碼縮進，縮進時使用tab(鍵盤中的TAB鍵)，禁止無縮進、亂縮進，禁止使用空格縮進
7) ? ? ? CSS加載的背景圖片要預定義寬度和高度，路徑采用絕對路徑可以直接從訪問者計算機緩存中加載，提高頁面加載速度。
8) ? ? ? 要盡可能做到表現與結構完全分離，代碼中不涉及到表現元素，如style、font、bgColor、border、b。
9) ? ? ? <h1>到<h6>的定義，應遵循從大到小的原則，體現文檔的結構，并有利于搜索引擎的查詢。采用繼承方式，否則個性定義就會失效。
10) ? ? Font的縮寫為：樣式 粗細 大小 行高 字體 （font:italic bold 12px/30px “simsun”）
11) ? ?class和id選擇器，id只能在同一頁面中不能重復適用
12) ? ?給頁面的布局和重要的區塊加上注釋,如：<!—header -->
13) ? ?給圖片加上alt標簽，利于搜索引擎的查詢。
14) ? ?所有的標簽必須進行合理的嵌套。
15) ? ?頁面的實現過程中出現的問題是有規律的幾種：3個像素的bug、雙倍浮動空白邊距、文字溢出bug。盡可能采用合理布局可以避免不同瀏覽器下所產生的問題。css的hack應該盡量避免采用。
16) ? ?盡可能的合理的去用繼承，好處是代碼結構清晰，方便其他修改人員辨認頁面結構、減少css的代碼的重復定義。
17) ? ?網站上經常會出現用戶輸入一大段字符和字母以至于文字無法正常折行，把版式破壞，這樣我們就要參考以下樣式：word-wrap:break-word; overflow:hidden; 當然必須得有寬度屬性值。
18) ? ?文字過長要出現省略號樣式如下：
white-space: nowrap; text-overflow:ellipsis; overflow:hidden;
19) ? ?一個完整的表單應該包括：
<fieldset>
<legend></legend>
<label></label>
<input />
</fieldset>
20) ? ?頁面上的列表元素除了ul ol外，我們還可以采用dl dt dd組合。
21) ? ?合理采用多重樣式定義可以有效的增加樣式的重用性。
22) ? ?我們要清楚那些標簽是塊狀元素和內聯元素。一般我們可以把css元素分為block（塊狀）和inline（內聯）。熟悉這些元素屬性有利于我們深入理解css。
23) ? ?按照推薦Css屬性書寫順序：
顯示屬性：
display || visibility
list-style : list-style-type || list-style-position || list-style-image
position
top || right || bottom || left
z-index
clear
float
自身屬性：
width
max-width || min-width
height
max-height || min-height
overflow || clip
margin : margin-top || margin-right || margin-bottom || margin-left
padding : padding-top || padding-right || padding-bottom || padding-left
outline : outline-color || outline-style || outline-width
border
background : background-color || background-image || background-repeat || background-attachment || background-position
文本屬性：
color
font : font-style || font-variant || font-weight || font-size || line-height || font-family
font : caption | icon | menu | message-box | small-caption | status-bar
text-overflow
text-align
text-indent
line-height
white-space
vertical-align
cursor
CSS命名規范
一．文件命名規范
全局樣式：global.css；
框架布局：layout.css；
字體樣式：font.css；
鏈接樣式：link.css；
打印樣式：print.css；
二．常用類/ID命名規范
頁 眉：header
內 容：content
容 器：container
頁 腳：footer
版 權：copyright
導 航：menu
主導航：mainMenu
子導航：subMenu
標 志：logo
標 語：banner
標 題：title
側邊欄：sidebar
圖 標：Icon
注 釋：note
搜 索：search
按 鈕：btn
登 錄：login
鏈 接：link
信息框：manage
……
常用類的命名應盡量以常見英文單詞為準，做到通俗易懂，并在適當的地方加以注釋。對于二級類/ID命名，則采用組合書寫的模式，后一個單詞的首字母應大寫：諸如“搜索框”則應命名為“searchInput”、“搜索圖標”命名這“searchIcon”、“搜索按鈕”命名為“searchBtn
CSS書寫規范及方法
一. 常規書寫規范及方法
1. 選擇DOCTYPE：
XHTML 1.0 提供了三種DTD聲明可供選擇：
過渡的(Transitional):要求非常寬松的DTD，它允許你繼續使用HTML4.01的標識(但是要符合xhtml的寫法)。完整代碼如下：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
嚴格的(Strict):要求嚴格的DTD，你不能使用任何表現層的標識和屬性，例如<br>。完整代碼如下：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
框架的(Frameset):專門針對框架頁面設計使用的DTD，如果你的頁面中包含有框架，需要采用這種DTD。完整代碼如下：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd“>
理想情況當然是嚴格的DTD，但對于我們大多數剛接觸web標準的設計師來說，過渡的DTD(XHTML 1.0 Transitional)是目前理想選擇(包括本站，使用的也是過渡型DTD)。因為這種DTD還允許我們使用表現層的標識、元素和屬性，也比較容易通過W3C的代碼校驗。
2. 指定語言及字符集：
為文檔指定語言：
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”>
為了被瀏覽器正確解釋和通過W3C代碼校驗，所有的XHTML文檔都必須聲明它們所使用的編碼語言；如：
常用的語言定義：
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
標準的XML文檔語言定義：
<?xml version=”1.0″ encoding=” utf-8″?>
針對老版本的瀏覽器的語言定義：
<meta http-equiv=”Content-Language” content=” utf-8″ />
為提高字符集，建議采用“utf-8”。
3. 調用樣式表：
外部樣式表調用：
頁面內嵌法：就是將樣式表直接寫在頁面代碼的head區。 如：
<style type=”text/css”><!– body { background : white ; color : black ; } –> </style>
外部調用法：將樣式表寫在一個獨立的.css文件中，然后在頁面head區用類似以下代碼調用。
<link rel=”stylesheet” rev=”stylesheet” href=”css/style.css” type=”text/css” media=”all” />
在符合web標準的設計中，推薦使用外部調用法，可以不修改頁面只修改.css文件而改變頁面的樣式。如果所有頁面都調用同一個樣式表文件，那么改一個樣式表文件，可以改變所有文件的樣式。
4、選用恰當的元素：
根據文檔的結構來選擇HTML元素，而不是根據HTML元素的樣式來選擇。例如，使用P元素來包含文字段落，而不是為了換行。如果在創建文檔時找不到適當的元素，則可以考慮使用通用的div 或者是span；
避免過渡使用div和span。少量、適當的使用div和span元素可以使文檔的結構更加清晰合理并且易于使用樣式；
盡可能少地使用標簽和結構嵌套，這樣不但可以使文檔結構清晰，同時也可以保持文件的小巧，在提高用戶下載速度的同時，也易于瀏覽器對文檔的解釋及呈視；
5、派生選擇器：
可以使用派生選擇器給一個元素里的子元素定義樣式，在簡化命名的同時也使結構更加的清晰化，如：
.mainMenu ul li {background:url(images/bg.gif;)}
6、輔助圖片用背影圖處理：
這里的”輔助圖片”是指那些不是作為頁面要表達的內容的一部分，而僅僅用于修飾、間隔、提醒的圖片。將其做背影圖處理，可以在不改動頁面的情況下通過CSS樣式來進行改動，如：
#logo {background:url(images/logo.jpg) #FEFEFE no-repeat right bottom;}
7、結構與樣式分離：
在頁面里只寫入文檔的結構，而將樣式寫于css文件中，通過外部調用CSS樣式表來實現結構與樣式的分離。
8、文檔的結構化書寫：
頁面CSS文檔都應采用結構化的書寫方式，邏輯清晰易于閱讀。如：
<div id=”mainMenu”>
<ul>
<li><a href=”#” >首頁</a></li>
<li><a href=”#” >介紹</a></li>
<li><a href=”#” >服務</a></li>
</ul>
</div>
/*=====主導航=====*/
#mainMenu {
width:100%;
height:30px;
background:url(images/mainMenu_bg.jpg) repeat-x;
}
#mainMenu ul li {
float:left;
line-height:30px;
margin-right:1px;
cursor:pointer;
}
/*=====主導航結束=====*/
9、鼠標手勢：
在XHTML標準中，hand只被IE識別，當需要將鼠標手勢轉換為“手形”時，則將“hand”換為“pointer”，即“cursor:pointer;”
二．注釋書寫規范
1、行間注釋：
直接寫于屬性值后面，如：
.search{
border:1px solid #fff;/*定義搜索輸入框邊框*/
background:url(../images/icon.gif) no-report #333;/*定義搜索框的背景*/
}
2、整段注釋：
分別在開始及結束地方加入注釋，如：
/*=====搜索條=====*/
.search {
border:1px solid #fff;
background:url(../images/icon.gif) no-repeat #333;
}
/*=====搜索條結束=====*/
三．樣式屬性代碼縮寫
1、不同類有相同屬性及屬性值的縮寫：
對于兩個不同的類，但是其中有部分相同甚至是全部相同的屬性及屬性值時，應對其加以合并縮寫，特別是當有多個不同的類而有相同的屬性及屬性值時，合并縮寫可以減少代碼量并易于控制。如：
#mainMenu {
background:url(../images/bg.gif);
border:1px solid #333;
width:100%;
height:30px;
overflow:hidden;
}
#subMenu {
background:url(../images/bg.gif);
border:1px solid #333;
width:100%;
height:20px;
overflow:hidden;
}
兩個不同類的屬性值有重復之處，剛可以縮寫為：
#mainMenu,#subMenu {
background:url(../images/bg.gif);
border:1px solid #333;
width:100%;
overflow:hidden;
}
#mainMenu {height:30px;}
#subMenu {height:20px;}
2、同一屬性的縮寫：
同一屬性根據它的屬性值也可以進行簡寫，如：
.search {
background-color:#333;
background-image:url(../images/icon.gif);
background-repeat: no-repeat;
background-position:50% 50%;
}
.search {
background:#333 url(../images/icon.gif) no-repeat 50% 50%;
}
3、內外側邊框的縮寫：
在CSS中關于內外側邊框的距離是按照上、右、下、左的順序來排列的，當這四個屬性值不同時也可直接縮寫，如：
.btn {
margin-top:10px;
margin-right:8px;
margin-bottom:12px;
margin-left:5px;
padding-top:10px;
padding-right:8px;
padding-bottom:12px;
padding-left:8px;
}
則可縮寫為：
.btn {
Margin:10px 8px 12px 5px;
Padding:10px 8px 12px 5px;
}
而如果當上邊與下邊、左邊與右邊的邊框屬性值相同時，則屬性值可以直接縮寫為兩個，如：
.btn {
margin-top:10px;
margin-right:5px;
margin-bottom:10px;
margin-left:5px;
}
縮寫為：
.btn {margin:10px 5px;}
而當上下左右四個邊框的屬性值都相同時，則可以直接縮寫成一個，如：
.btn {
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
}
縮寫為：
.btn{margin:10px;}
4、顏色值的縮寫：
當RGB三個顏色值數值相同時，可縮寫顏色值代碼。如：
.menu { color:#ff3333;}
可縮寫為:
.menu {color:#f33;}
四．hack書寫規范?
因為不同瀏覽器對W3C標準的支持不一樣，各個瀏覽器對于頁面的解釋呈視也不盡相同，比如IE在很多情況下就與FF存在3px的差距，對于這些差異性，就需要利用css 的hack來進行調整，當然在沒有必要的情況下，最好不要寫hack來進行調整，避免因為hack而導致頁面出現問題。
1、 IE6、IE7、Firefox之間的兼容寫法：
寫法一：
IE都能識別*;標準瀏覽器(如FF)不能識別*；
IE6能識別*，但不能識別 !important,
IE7能識別*，也能識別!important;
FF不能識別*，但能識別!important;
根據上述表達，同一類/ID下的CSS hack可寫為：
.searchInput {
background-color:#333;/*三者皆可*/
*background-color:#666 !important; /*僅IE7*/
*background-color:#999; /*僅IE6及IE6以下*/
}
一般三者的書寫順序為：FF、IE7、IE6.
寫法二：
IE6可識別“_”，而IE7及FF皆不能識別，所以當只針對IE6與IE7及FF之間的區別時，可這樣書寫：
.searchInput {
background-color:#333;/*通用*/
_background-color:#666;/*僅IE6可識別*/
}
寫法三：
*+html 與 *html 是IE特有的標簽, Firefox 暫不支持。
.searchInput {background-color:#333;}
*html .searchInput {background-color:#666;}/*僅IE6*/
*+html .searchInput {background-color:#555;}/*僅IE7*/
屏蔽IE瀏覽器：
select是選擇符，根據情況更換。第二句是MAC上safari瀏覽器獨有的。
*:lang(zh) select {font:12px ?!important;} /*FF的專用*/
select:empty {font:12px ?!important;} /*safari可見*/
IE6可識別：
這里主要是通過CSS注釋分開一個屬性與值，注釋在冒號前。
select { display /*IE6不識別*/:none;}
IE的if條件hack寫法：
所有的IE可識別：
<!–[if IE]> Only IE <![end if]–>
只有IE5.0可以識別:
<!–[if IE 5.0]> Only IE 5.0 <![end if]–>
IE5.0包換IE5.5都可以識別:
<!–[if gt IE 5.0]> Only IE 5.0+ <![end if]–>
僅IE6可識別:
<!–[if lt IE 6]> Only IE 6- <![end if]–>
IE6以及IE6以下的IE5.x都可識別:
<!–[if gte IE 6]> Only IE 6/+ <![end if]–>
僅IE7可識別:
<!–[if lte IE 7]> Only IE 7/- <![end if]–>
2、清除浮動：
在Firefox中，當子級都為浮動時，那么父級的高度就無法完全的包住整個子級，那么這時用這個清除浮動的HACK來對父級做一次定義，那么就可以解決這個問題。
select:after {
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}
轉載于:https://my.oschina.net/u/2255071/blog/377345
總結
- 上一篇： POI--HSSFCellStyle类
- 下一篇： CSS 基本样式