CSS回顧復(fù)習(xí)二（CSS書寫規(guī)范、順序和命名規(guī)則——CSS書寫順序與命名規(guī)則）
- • 發(fā)表于 8年前
- • 作者 茂茂
- • 5547 人瀏覽
- • 17 條評(píng)論
- • 最后編輯時(shí)間 8年前
- • 來(lái)自 [技 術(shù)]
原創(chuàng)聲明:本文為作者原創(chuàng)，未經(jīng)允許不得轉(zhuǎn)載，經(jīng)授權(quán)轉(zhuǎn)載需注明作者和出處
一、CSS書寫順序
1.位置屬性: position，top，right，bottom，left，z-index，display，float
2.寬高: width，height，padding，margin
3.文字系列: font，line-height，letter-spacing，color，text-align
4.背景: background，border，opacity
5.動(dòng)畫: animation，transition
例子：
.maomao {
/*定位*/
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/*盒模型*/
display: block;
float: right;
width: 100px;
height: 100px;
padding: 20px;
margin: 30px;
/*字體*/
font: italic small-caps 700 12px/1.5 "微軟雅黑";
color: #666;
text-align: center;
/*背景*/
background: #229 url(maomao.png) no-repeat 15px center/20px content-box
border: 1px solid #000;
border-radius: 5px;
opacity: 1;
/*動(dòng)畫*/
animation: maomao 10s ease-in-out 3s 2 alternate
transition: width 10s ease-in-out 3s
}
/*2016/12/13新增*/
二、CSS命名規(guī)則
頁(yè)面結(jié)構(gòu)
- 容器: container
- 頁(yè)頭：header
- 內(nèi)容：content/container
- 頁(yè)面主體：main
- 頁(yè)尾：footer
- 導(dǎo)航：nav
- 側(cè)欄：sidebar
- 欄目：column
- 頁(yè)面外圍控制整體佈局寬度：wrapper
- 左右中：left right center
導(dǎo)航
- 導(dǎo)航：nav
- 主導(dǎo)航：mainnav
- 子導(dǎo)航：subnav
- 頂導(dǎo)航：topnav
- 邊導(dǎo)航：sidebar
- 左導(dǎo)航：leftsidebar
- 右導(dǎo)航：rightsidebar
- 菜單：menu
- 子菜單：submenu
- 標(biāo)題: title
- 摘要: summary
功能
- 標(biāo)志：logo
- 廣告：banner
- 登錄條：loginbar
- 登陸：login
- 注冊(cè)：register
- 搜索：search
- 加入：joinus
- 狀態(tài)：status
- 按鈕：btn
- 滾動(dòng)：scroll
- 列表：list
- 當(dāng)前的: current
- 提示：tips
- 圖標(biāo): icon
- 注釋：note
- 指南：guild
- 服務(wù)：service
- 熱點(diǎn)：hot
- 新聞：news
- 下載：download
- 投票：vote
- 合作伙伴：partner
- 友情鏈接：link
- 版權(quán)：copyright
注意：
- 一律小寫
- 盡量用英語(yǔ)單詞命名
- CSS注釋：
/* 注釋內(nèi)容 */
喜歡的小伙伴們就打賞下（嘿嘿）
上期回顧：CSS回顧復(fù)習(xí)一（什么是CSS）
下期內(nèi)容：CSS回顧復(fù)習(xí)三（CSS書寫規(guī)范、順序和命名規(guī)則——CSS書寫規(guī)范）
共17條評(píng)論
Ctrl+Enter
