編輯 | web前端開發

來源?| web前端開發

我們在用html+css進行網頁的排版布局時，經常會遇到CSS命名，如果是在團隊多人協作開發時，團隊里都會有自己的命名規范與要求。

但如果是自己在個人學習的時候，又特別不了解應該怎么對CSS命名的話，我今天把自己之前學習的一些資料重新整理了一份CSS命名規范，方便自己與大家學習查閱使用。

雖然說，命名沒有什么特別要求，但是為了體現一個人技術素養，我建議大家還是按照以下常規規范來。

一、規則說明

1)、所有的命名最好采用一種命名規范，比方全部小寫或者駝峰命名

2)、屬性的值一定要用雙引號("")括起來，且一定要有值，例如,id="web"

3)、每個標簽都要有開始和結束，且要有正確的層次，排版有規律工整

4)、表現與結構一定分離，代碼中不涉及任何的表現元素，如style、font、bgColor、border等

5)、

到

的定義，應遵循從大到小的原則，體現文檔的結構，并有利于搜索引擎的查詢。

6)、給每一個表格和表單加上一個唯一的、結構標記id，給圖片加上alt標簽

7)、盡量使用英文命名原則，盡量不縮寫，除非一看就明白的單詞

二、CSS命名規則參考表

CSS樣式命名	說明
#wrapper	頁面外圍控制整體布局寬度
#container或#content	容器,用于最外層
#layout	布局
#head, #header	頁頭部分
#foot, #footer	頁腳部分
#nav	主導航
#subnav	二級導航
#menu	菜單
#submenu	子菜單
#sideBar	側欄
#sidebar_a, #sidebar_b	左邊欄或右邊欄
#main	頁面主體
#tag	標簽
#msg #message	提示信息
#tips	小技巧
#vote	投票
#friendlink	友情連接
#title	標題
#summary	摘要
#loginbar	登錄條
#searchInput	搜索輸入框
#hot	熱門熱點
#search	搜索
#search_output	搜索輸出和搜索結果相似
#searchBar	搜索條
#search_results	搜索結果
#copyright	版權信息
#branding	商標
#logo	網站LOGO標志
#siteinfo	網站信息
#siteinfoLegal	法律聲明
#siteinfoCredits	信譽
#joinus	加入我們
#partner	合作伙伴
#service	服務
#regsiter	注冊
arr/arrow	箭頭
#guild	指南
#sitemap	網站地圖
#list	列表
#homepage	首頁
#subpage	二級頁面子頁面
#tool, #toolbar	工具條
#drop	下拉
#dorpmenu	下拉菜單
#status	狀態
#scroll	滾動
.tab	標簽頁
.left .right .center	居左、中、右
.news	新聞
.download	下載
.banner	廣告條(頂部廣告條)
.products	產品
.products_prices	產品價格
.products_description	產品描述
.products_review	產品評論
.editor_review	編輯評論
.news_release	最新產品
.publisher	生產商
.screenshot	縮略圖
.faqs	常見問題
.keyword	關鍵詞
.blog	博客
.forum	論壇

CSS文件命名	說明
master.css,style.css	主要的
module.css	模塊
base.css	基本共用
layout.css	布局，版面
themes.css	主題
columns.css	專欄
font.css	文字、字體
forms.css	表單
mend.css	補丁
print.css	打印

三、借助翻譯工具

如果遇到不常用的一些名稱，可以借助翻譯工具進行翻譯取其英文命名。平時我用的比較多的就是有道翻譯或者谷歌在線翻譯。

谷歌在線翻譯：http://translate.google.cn/

有道在線翻譯：http://fanyi.youdao.com/

我們為了規范命名最好使用英文命名，通常命名與自己布局內容相符。

四、常用CSS代碼

css的屬性雖然很多，但是我們經常使用的屬性，真的不多的，這個也是我自己之前收集整理的一些CSS常用屬性代碼，希望可以幫助到一些新人，對于老司機就忽略吧。

字體屬性：(font)

大小 {font-size: x-large;}(特大) xx-small;(極小) 一般中文用不到，只要用數值就可以，單位：PX、PD

樣式 {font-style: oblique;}(偏斜體) italic;(斜體) normal;(正常)

行高 {line-height: normal;}(正常) 單位：PX、PD、EM

粗細 {font-weight: bold;}(粗體) lighter;(細體) normal;(正常)

變體 {font-variant: small-caps;}(小型大寫字母) normal;(正常)

大小寫 {text-transform: capitalize;}(首字母大寫) uppercase;(大寫) lowercase;(小寫) none;(無)

修飾 {text-decoration: underline;}(下劃線) overline;(上劃線) line-through;(刪除線) blink;(閃爍)

常用字體：(font-family)

"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana

背景屬性：(background)

色彩 {background-color: #FFFFFF;}

圖片 {background-image: url();}

重復 {background-repeat: no-repeat;}

滾動 {background-attachment: fixed;}(固定) scroll;(滾動)

位置 {background-position: left;}(水平) top(垂直);

簡寫方法 {background:#000 url(..) repeat fixed left top;} /*簡寫·這個在閱讀代碼中經常出現，要認真的研究*/

區塊屬性：(Block) /*這個屬性第一次認識，要多多研究*/

字間距 {letter-spacing: normal;} 數值 /*這個屬性似乎有用，多實踐下*/

對齊 {text-align: justify;}(兩端對齊) left;(左對齊) right;(右對齊) center;(居中)

縮進 {text-indent: 數值px;}

垂直對齊 {vertical-align: baseline;}(基線) sub;(下標) super;(下標) top; text-top; middle; bottom; text-bottom;

詞間距word-spacing: normal; 數值

空格white-space: pre;(保留) nowrap;(不換行)

顯示 {display:block;}(塊) inline;(內嵌) list-item;(列表項) run-in;(追加部分) compact;(緊湊) marker;(標記) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格標題) /*display 屬性的了解很模糊*/

方框屬性：(Box)

width:; height:; float:; clear:both; margin:; padding:; ? ??

順序：上右下左

邊框屬性：(Border)

border-style: dotted;(點線) dashed;(虛線) solid(實線); double;(雙線) groove;(槽線) ridge;(脊狀) inset;(凹陷) outset;

border-width:; 邊框寬度

border-color:#;

簡寫方法border：width style color; /*簡寫*/

列表屬性：(List-style)

類型list-style-type: ? ?disc;(圓點) circle;(圓圈) square;(方塊) decimal;(數字) lower-roman;(小羅碼數字) upper-roman; lower-alpha; upper-alpha;

位置list-style-position: outside;(外) inside;

圖像list-style-image: url(..);

定位屬性：(Position)

Position: absolute; relative; static;

visibility: inherit; visible; hidden;

overflow: visible; hidden; scroll; auto;

clip: rect(12px,auto,12px,auto) (裁切)

CSS文字屬性

color : #999999; /*文字顏色*/

font-family : 宋體,sans-serif; /*文字字體*/ ?

font-size : 9pt; /*文字大小*/ ?

font-style:itelic; /*文字斜體*/ ?

font-variant:small-caps; /*小字體*/ ?

letter-spacing : 1pt; /*字間距離*/ ?

line-height : 200%; /*設置行高*/ ?

font-weight:bold; /*文字粗體*/ ?

vertical-align:sub; /*下標字*/ ?

vertical-align:super; /*上標字*/ ?

text-decoration:line-through; /*加刪除線*/ ?

text-decoration: overline; /*加頂線*/ ?

text-decoration:underline; /*加下劃線*/ ?

text-decoration:none; /*刪除鏈接下劃線*/ ?

text-transform : capitalize; /*首字大寫*/ ?

text-transform : uppercase; /*英文大寫*/ ?

text-transform : lowercase; /*英文小寫*/ ?

text-align:right; /*文字右對齊*/ ?

text-align:left; /*文字左對齊*/ ?

text-align:center; /*文字居中對齊*/ ?

text-align:justify; /*文字分散對齊*/ ?

vertical-align屬性

vertical-align:top; /*垂直向上對齊*/ ?

vertical-align:bottom; /*垂直向下對齊*/ ?

vertical-align:middle; /*垂直居中對齊*/ ?

vertical-align:text-top; /*文字垂直向上對齊*/ ?

vertical-align:text-bottom; /*文字垂直向下對齊*/ ?

邊框空白

padding-top:10px; /*上邊框留空白*/ ?

padding-right:10px; /*右邊框留空白*/ ?

padding-bottom:10px; /*下邊框留空白*/ ?

padding-left:10px; /*左邊框留空白

符號屬性

list-style-type:none; /*不編號*/ ?

list-style-type:decimal; /*阿拉伯數字*/ ?

list-style-type:lower-roman; /*小寫羅馬數字*/ ?

list-style-type:upper-roman; /*大寫羅馬數字*/ ?

list-style-type:lower-alpha; /*小寫英文字母*/ ?

list-style-type:upper-alpha; /*大寫英文字母*/ ?

list-style-type:disc; /*實心圓形符號*/ ?

list-style-type:circle; /*空心圓形符號*/ ?

list-style-type:square; /*實心方形符號*/ ?

list-style-image:url(/dot.gif); /*圖片式符號*/ ?

list-style-position: outside; /*凸排*/ ?

list-style-position:inside; /*縮進*/??

背景樣式

background-color:#F5E2EC; /*背景顏色*/ ?

background:transparent; /*透視背景*/ ?

background-image : url(/image/bg.gif); /*背景圖片*/ ?

background-attachment : fixed; /*浮水印固定背景*/ ?

background-repeat : repeat; /*重復排列-網頁默認*/ ?

background-repeat : no-repeat; /*不重復排列*/ ?

background-repeat : repeat-x; /*在x軸重復排列*/ ?

background-repeat : repeat-y; /*在y軸重復排列*/ ?

指定背景位置

background-position : 90% 90%; /*背景圖片x與y軸的位置*/ ?

background-position : top; /*向上對齊*/ ?

background-position : buttom; /*向下對齊*/ ?

background-position : left; /*向左對齊*/ ?

background-position : right; /*向右對齊*/ ?

background-position : center; /*居中對齊*/ ?

連接屬性

a /*所有超鏈接*/ ?

a:link /*超鏈接文字格式*/ ?

a:visited /*瀏覽過的鏈接文字格式*/ ?

a:active /*按下鏈接的格式*/ ?

a:hover /*鼠標轉到鏈接*/ ?

鼠標光標樣式

鏈接手指 CURSOR: hand ?

十字體 cursor:crosshair ?

箭頭朝下 cursor:s-resize ?

十字箭頭 cursor:move ?

箭頭朝右 cursor:move ?

加一問號 cursor:help ?

箭頭朝左 cursor:w-resize ?

箭頭朝上 cursor:n-resize ?

箭頭朝右上 cursor:ne-resize ?

箭頭朝左上 cursor:nw-resize ?

文字I型 cursor:text ?

箭頭斜右下 cursor:se-resize ?

箭頭斜左下 cursor:sw-resize ?

漏斗 cursor:wait ?

光標圖案(IE6) ? p {cursor:url("光標文件名.cur"),text;} ?

CSS框線一覽表：

border-top : 1px solid #6699cc; /*上框線*/ ?

border-bottom : 1px solid #6699cc; /*下框線*/ ?

border-left : 1px solid #6699cc; /*左框線*/ ?

border-right : 1px solid #6699cc; /*右框線*/ ?

以上是建議書寫方式,但也可以使用常規的方式 如下:

border-top-color : #369 /*設置上框線top顏色*/ ?

border-top-width :1px /*設置上框線top寬度*/ ?

border-top-style : solid/*設置上框線top樣式*/ ?

其他框線樣式

solid /*實線框*/ ?

dotted /*虛線框*/ ?

double /*雙線框*/ ?

groove /*立體內凸框*/ ?

ridge /*立體浮雕框*/ ?

inset /*凹框*/ ?

outset /*凸框*/??

CSS邊界樣式

margin-top:10px; /*上邊界*/ ?

margin-right:10px; /*右邊界值*/ ?

margin-bottom:10px; /*下邊界值*/ ?

margin-left:10px; /*左邊界值*/ ?

字體樣式(Font Style)??

字體樣式 {font:font-style font-variant font-weight font-size font-family}?

字體類型 {font-family:"字體1","字體2","字體3",...} ?

字體大小 {font-size:數值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small} ?

字體風格 {font-style:inherit|italic|normal|oblique} ?

字體粗細 ? {font-weight:100-900|bold(粗體)|bolder(特粗)|lighter(細體)|normal(正常);} ?

字體顏色 ? {color:數值;} ?

陰影顏色 {text-shadow:16位色值} ?

字體行高 ? {line-height:數值|inherit|normal;} ?

字 間 距 ? {letter-spacing:數值|inherit|normal} ?

單詞間距 {word-spacing:數值|inherit|normal} ?

字體變形 {font-variant:inherit|normal|small-cps } ?

英文轉換 {text-transform:inherit|none|capitalize|uppercase|lowercase} ?

字體變形 {font-size-adjust:inherit|none} ?

字體 {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider} ?

文本樣式(Text Style)??

行 間 距 {line-height:數值|inherit|normal;} ?

文本修飾 {text-decoration:inherit|none|underline|overline|line-through|blink} ?

段首空格 ? {text-indent:數值|inherit} ?

水平對齊 {text-align:left|right|center|justify} ?

垂直對齊 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super} ?

書寫方式 {writing-mode:lr-tb|tb-rl} ?

背景樣式??

背景顏色 {background-color:數值} ?

背景圖片 {background-image: url(URL)|none} ?

背景重復 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}??

背景固定 {background-attachment:fixed|scroll}??

背景定位 {background-position:數值|top|bottom|left|right|center} ?

背影樣式 {background:背景顏色|背景圖象|背景重復|背景附件|背景位置} ?

框架樣式(Box Style)??

邊界留白: {margin:margin-top margin-right margin-bottom margin-left}??

補 ?白: {padding:padding-top padding-right padding-bottom padding-left} ?

邊框寬度: {border-width:border-top-width border-right-width border-bottom-width border-left-width} ?

寬度值：thin|medium|thick|數值 ?

邊框顏色: {border-color:數值 數值 數值 數值} ?數值：分別代表top、right、bottom、left顏色值 ?

邊框風格:?

{border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}?邊 ?框 {border:border-width border-style color}??

上 邊 框 {border-top:border-top-width border-style color} ?

右 邊 框 {border-right:border-right-width border-style color} ?

下 邊 框 {border-bottom:border-bottom-width border-style color} ?

左 邊 框 {border-left:border-left-width border-style color} ?

寬 ?度 {width:長度|百分比| auto} ?

高 ?度 {height:數值|auto} ?

漂 ?浮 {float:left|right|none} ?

清 ?除 {clear:none|left|right|both} ?

分類列表??

控制顯示 {display:none|block|inline|list-item} ?

控制空白 {white-space:normal|pre|nowarp} ?

符號列表 {list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none} ?

圖形列表 {list-style-image:URL} ?

位置列表 {list-style-position:inside|outside} ?

目錄列表 {list-style:目錄樣式類型|目錄樣式位置|url} ?

鼠標形狀 {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}

總結

以上是生活随笔為你收集整理的css宋体代码_前端开发必备的CSS命名规范与常用CSS代码集合的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。