當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

html语言书写注意事项,CSS命名规范参考及书写注意事项

發布時間：2023/11/27 生活经验 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 html语言书写注意事项,CSS命名规范参考及书写注意事项小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

CSS書寫順序

/*顯示屬性*/

display

position

float

clear

cursor

…

/*盒模型*/

margin

padding

width

height

/*排版*/

vertical-align

white-space

text-decoration

text-align

…

/*文字*/

color

font

content

/*邊框背景為什么要把 boder和background放在最后的原因是修改的頻率會較之前的頻繁，放在最后查看起來方便，哈哈。*/

border

background

}

下表順序為從上到下，從左到右：

========================

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

text-overflow

text-align

text-indent

line-height

white-space

vertical-align

cursor

CSS命名規則：

一．文件命名規范

全局樣式：global.css；

框架布局：layout.css；

字體樣式：font.css；

鏈接樣式：link.css；

打印樣式：print.css；

主要的 master.css

專欄 columns.css

主題 themes.css

主要的 master.css

模塊 module.css

基本共用 base.css

表單 forms.css

補丁 mend.css

二．頁面結構

容器: container

頁頭：header

內容：content

頁面主體：main

頁尾：footer

欄目：column

頁面外圍控制整體布局寬度：wrapper

左右中：left right center

三．導航

導航：nav

主導航：mainbav

子導航：subnav

頂導航：topnav

邊導航：sidebar

左導航：leftsidebar

右導航：rightsidebar

菜單：menu

子菜單：submenu

摘要: summary

四．功能

標志：logo

廣告：banner

登陸：login

登錄條：loginbar

注冊：regsiter

搜索：search

功能區：shop

標題：title

加入：joinus

狀態：status

按鈕：btn

滾動：scroll

標簽頁：tab

文章列表：list

提示信息：msg

當前的: current

小技巧：tips

圖標: icon

注釋：note

指南：guild

服務：service

熱點：hot

新聞：news

下載：download

投票：vote

合作伙伴：partner

友情鏈接：link

版權：copyright

Container div

#container

容器

Layout

#layout

布局

Header or banner div

#head, #header

頁頭部分

Footer div

#foot, #footer

頁腳部分

Navigation list

#nav

主導航

Sub-navigation list

#subNav

二級導航

#menu

菜單

Sub Menu

#submenu

子菜單

Left or right side columns

#sidebar_a, #sidebar_b

左邊欄或右邊欄

Main div

#main

頁面主體

Tag

#tag

標簽

Message

#msg #message

提示信息

Tips

#tips

小技巧

Vote

#vote

投票

Friend Link

#friendlink

友情連接

Title

#title

標題

Summary

#summary

摘要

Search input

#searchInput

搜索輸入框

Search output

#search_output

搜索輸出和搜索結果相似

#search

搜索

Search bar

#searchBar

搜索條

Search results

#search_results

搜索結果

#copyright

版權信息

brand

#branding

商標

branding-logo

#logo

LOGO

Site information

#siteinfo

網站信息

#siteinfoLegal

法律聲明

Designer or other credits

#siteinfoCredits

信譽

Join us

#joinus

加入我們

Partnership opportunities

#partner

合作伙伴

Services

#service

服務

Regsiter

#regsiter

注冊

Arrow

arr/arrow

箭頭

Little

#little

標題

Website map

#sitemap

List

#list

列表

Home page

#homepage

首頁

Sub page

subpage

二級頁面子頁面

Toolbar

#tool, #toolbar

工具條

Next pulls

#drop

下拉

Next pulls menu

#dorpmenu

下拉菜單

Status

#status

狀態

Container div

#container

容器

Header or banner div

#header

頁頭部分

Main or global navigation div

#mainNav

主導航

#menu

菜單

Sub Menu

#submenu

子菜單

Left or right side columns

#sidebarA, #sidebarB

左邊欄或右邊欄

Main div

#main

頁面主體

Content div

#content

內容部分

The main content area

#contentMain

主要內容區域

Footer div

#footer

頁腳部分

Tag

#tag

標簽

Message

#msg #message

提示信息

Tips

#tips

小技巧

Vote

#vote

投票

Friend Link

#friendlink

友情連接

Title

#title

標題

Summary

#summary

摘要

Sub-navigation list

#subNav

二級導航

Search input

#searchInput

搜索輸入框

Search output

#searchOutput

搜索輸出和搜索結果相似

#search

搜索

Search results

#searchResults

搜索結果

#copyright

版權信息

brand

#branding

商標

branding-logo

#brandingLogo

LOGO

Site information

#siteinfo

網站信息

#siteinfoLegal

法律聲明

Designer or other credits

#siteinfoCredits

信譽

Join us

#joinus

加入我們

Partnership opportunities

#partner

合作伙伴

Services

#service

服務

Regsiter

#regsiter

注冊

Status

#status

狀態

Products

.products

產品

Products prices

.productsPrices

產品價格

Products description

.productsDescription

產品描述

Products review

.productsReview

產品評論

Editor’s review

.editorReview

編輯評論

New release

.newsRelease

到

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

7. 給每一個表格和表單加上一個唯一的、結構標記id

8. 給重要的區塊加上注釋,如：

9. 給圖片加上alt標簽

10. 所有的標簽必須進行合理的嵌套

11. 根元素前必須有元素，宣告使用那一種DTD

12. 根元素必須有xmlns屬性來指定使用http://www.w3.org/1999/xhtml的namespace

一. 常規書寫規范及方法

1. 選擇DOCTYPE：

XHTML 1.0 提供了三種DTD聲明可供選擇：

過渡的(Transitional):要求非常寬松的DTD，它允許你繼續使用HTML4.01的標識(但是要符合xhtml的寫法)。完整代碼如下：

-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

嚴格的(Strict):要求嚴格的DTD，你不能使用任何表現層的標識和屬性，例如
。完整代碼如下：

-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>

框架的(Frameset):專門針對框架頁面設計使用的DTD，如果你的頁面中包含有框架，需要采用這種DTD。完整代碼如下：

-//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. 指定語言及字符集：

為文檔指定語言：

為了被瀏覽器正確解釋和通過W3C代碼校驗，所有的XHTML文檔都必須聲明它們所使用的編碼語言；如：

常用的語言定義：

標準的XML文檔語言定義：

針對老版本的瀏覽器的語言定義：

為提高字符集，建議采用“utf-8”。

3. 調用樣式表：

外部樣式表調用：

頁面內嵌法：就是將樣式表直接寫在頁面代碼的head區。如：

外部調用法：將樣式表寫在一個獨立的.css文件中，然后在頁面head區用類似以下代碼調用。

在符合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文檔都應采用結構化的書寫方式，邏輯清晰易于閱讀。如：

”#” >首頁
”#” >介紹
”#” >服務

/*=====主導航=====*/

#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;”

10．注釋書寫規范

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;

}

/*=====搜索條結束=====*/

3．協助注釋

非作者維護時所加入的表示修改時間、修改人等標識信息。

在區域注釋或單行注釋的基礎上加上修改人和修改時間等信息。

例(區域注釋)：

...

/*=S 注釋內容[修改人和修改時間]*/

.class{

...

}

.class{

...

}

/*=E 注釋內容[修改人和修改時間]*/

例(單行注釋)：

...

.class{

/*注釋內容[修改人和修改時間]*/

...

}

11．樣式屬性代碼縮寫

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;}

12．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可識別：

Only IE

只有IE5.0可以識別:

Only IE 5.0

IE5.0包換IE5.5都可以識別:

Only IE 5.0+

僅IE6可識別:

Only IE 6-

IE6以及IE6以下的IE5.x都可識別:

Only IE 6/+

僅IE7可識別:

Only IE 7/-

13、清除浮動：

在Firefox中，當子級都為浮動時，那么父級的高度就無法完全的包住整個子級，那么這時用這個清除浮動的HACK來對父級做一次定義，那么就可以解決這個問題。

select:after {

content:”.”;

display:block;

height:0;

clear:both;

visibility:hidden;

}

注意事項:

1. id和class命名采用該版塊的英文單詞或組合命名，并第一個單詞小寫，第二個單詞首個字母大寫，如:newRelease(最新產品/new+Release)

常用類的命名應盡量以常見英文單詞為準，做到通俗易懂，并在適當的地方加以注釋。對于二級類/ID命名，則采用組合書寫的模式，后一個單詞的首字母應大寫：諸如“搜索框”則應命名為“searchInput”、“搜索圖標”命名這“searchIcon”、“搜索按鈕”命名為 “searchBtn”……

2. CSS樣式表各區塊用注釋說明

3. 盡量使用英文命名原則

4. 不用加中杠和下劃線

5. 盡量不縮寫，除非一看就明白的單詞

6．檢查HTML元素是否有拼寫錯誤、是否忘記結束標記

即使是老手也經常會弄錯div的嵌套關系。可以用dreamweaver的驗證功能檢查一下有無錯誤。

7. 檢查CSS是否正確

檢查一下有無拼寫錯誤、是否忘記結尾的 } 等。可以利用CleanCSS來檢查 CSS的拼寫錯誤。CleanCSS本是為CSS減肥的工具，但也能檢查出拼寫錯誤。

8. 確定錯誤發生的位置

如果錯誤影響了整體布局，則可以逐個刪除div塊，直到刪除某個div塊后顯示恢復正常，即可確定錯誤發生的位置。

9. 利用border屬性確定出錯元素的布局特性

使用float屬性布局一不小心就會出錯。這時為元素添加border屬性確定元素邊界，錯誤原因即水落石出。

10. float元素的父元素不能指定clear屬性

MacIE下如果對float的元素的父元素使用clear屬性，周圍的float元素布局就會混亂。這是MacIE的著名的bug，倘若不知道就會走彎路。

11. float元素務必指定width屬性

很多瀏覽器在顯示未指定width的float元素時會有bug。所以不管float元素的內容如何，一定要為其指定width屬性。

另外指定元素時盡量使用em而不是px做單位。

12. float元素不能指定margin和padding等屬性

IE在顯示指定了margin和padding的float元素時有bug。因此不要對float元素指定margin和padding屬性(可以在float元素內部嵌套一個div來設置margin和padding)。也可以使用hack方法為IE指定特別的值。

13. float元素的寬度之和要小于100%

如果float元素的寬度之和正好是100%，某些古老的瀏覽器將不能正常顯示。因此請保證寬度之和小于99%。

14. 是否重設了默認的樣式？

某些屬性如margin、padding等，不同瀏覽器會有不同的解釋。因此最好在開發前首先將全體的margin、padding設置為0、列表樣式設置為none等。

15、float的div一定要閉合。

例如：(其中floatA、floatB的屬性已經設置為float:left;)

程序代碼

#div>

這里的NOTfloatC并不希望繼續平移，而是希望往下排。

這段代碼在IE中毫無問題，問題出在FF。原因是NOTfloatC并非float標簽，必須將float標簽閉合。在程序代碼

#div>

之間加上程序代碼

#div>

這個div一定要注意聲明位置，一定要放在最恰當的地方，而且必須與兩個具有float屬性的div同級，之間不能存在嵌套關系，否則會產生異常。

并且將clear這種樣式定義為為如下即可：

程序代碼

.clear{

clear:both;}

此外，為了讓高度能自動適應，要在wrapper里面加上overflow:hidden;

當包含float的box的時候，高度自動適應在IE下無效，這時候應該觸發IE的layout私有屬性(萬惡的IE啊！)用zoom:1;可以做到，這樣就達到了兼容。

例如某一個wrapper如下定義：

程序代碼

.colwrapper{

overflow:hidden;

zoom:1;

margin:5px auto;}

16、margin加倍的問題。

設置為float的div在ie下設置的margin會加倍。這是一個ie6都存在的bug。

解決方案是在這個div里面加上display:inline;

例如：

#div>

相應的css為

程序代碼

#IamFloat{

float:left;

margin:5px;/*IE下理解為10px*/

display:inline;/*IE下再理解為5px*/}

17、關于容器的包涵關系

很多時候，尤其是容器內有平行布局，例如兩、三個float的div時，寬度很容易出現問題。在IE中，外層的寬度會被內層更寬的div擠破。一定要用Photoshop或者Firework量取像素級的精度。

18、關于高度的問題

如果是動態地添加內容，高度最好不要定義。瀏覽器可以自動伸縮，然而如果是靜態的內容，高度最好定好。(似乎有時候不會自動往下撐開，不知道具體怎么回事)

常見兼容問題：

1.DOCTYPE 影響 CSS 處理

2.FF: div 設置 margin-left, margin-right 為 auto 時已經居中, IE 不行

3.FF: body 設置 text-align 時, div 需要設置 margin: auto(主要是 margin-left,margin-right) 方可居中

4.FF: 設置 padding 后, div 會增加 height 和 width, 但 IE 不會, 故需要用 !important 多設一個 height 和 width

5.FF: 支持 !important, IE 則忽略, 可用 !important 為 FF 特別設置樣式

6.div 的垂直居中問題: vertical-align:middle; 將行距增加到和整個DIV一樣高 line-height:200px; 然后插入文字，就垂直居中了。缺點是要控制內容不要換行

7.cursor: pointer 可以同時在 IE FF 中顯示游標手指狀， hand 僅 IE 可以

8.FF: 鏈接加邊框和背景色，需設置 display: block, 同時設置 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設置高度是為了避免底邊顯示錯位, 若不設 height, 可以在 menubar 中插入一個空格。

9.在mozilla firefox和IE中的BOX模型解釋不一致導致相差2px解決方法：

div{margin:30px!important;margin:28px;}

注意這兩個margin的順序一定不能寫反，據阿捷的說法!important這個屬性IE不能識別，但別的瀏覽器可以識別。所以在IE下其實解釋成這樣：

div{maring:30px;margin:28px}

重復定義的話按照最后一個來執行，所以不可以只寫margin:XXpx!important;

10.IE5 和IE6的BOX解釋不一致

IE5下程序代碼

div{width:300px;margin:0 10px 0 10px;}

div的寬度會被解釋為300px-10px(右填充)-10px(左填充)最終div的寬度為280px，而在IE6和其他瀏覽器上寬度則是以300px+10px(右填充)+10px(左填充)=320px來計算的。這時我們可以做如下修改

div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}

關于這個/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的話，請告訴我一聲，謝了！：)

11.ul標簽在Mozilla中默認是有padding值的,而在IE中只有margin有值所以先定義

程序代碼ul{margin:0;padding:0;}

注意書寫格式的問題：

一定要注意縮進。對齊。要有良好的編程習慣。

總結

以上是生活随笔為你收集整理的html语言书写注意事项,CSS命名规范参考及书写注意事项的全部內容，希望文章能夠幫你解決所遇到的問題。

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