31條css的語法規(guī)則

小編給大家分享一下31條css的語法規(guī)則，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

css規(guī)則是什么?

在這里整理了31條css的語法規(guī)則：

一、 善用css縮寫規(guī)則

/*注意上、右、下、左的書寫順序*/

1. 關(guān)于邊距（4邊）：

1px 2px 3px 4px (上、右、下、左)

1px 2px 3px （省略的左等于右）

1px 2px (省略的上等于下)

1px （四邊都相同）

2. 簡化所有：

*/ body{margin:0}------------表示網(wǎng)頁內(nèi)所有元素的margin為0

#menu{ margin:0}------------表示menu盒子下的所有元素的margin為0

3. 縮寫（border）特定樣式：

Border:1px solid #ffffff;

Border-width:0 1px 2px 3px;

4. 關(guān)于文字的縮寫規(guī)則：

Font-style:italic; 斜體形式

Font-variant:small-caps/normal; 變體樣式：小型大寫字母/正常

Font-weight:bold;

Font-size:12px;

Line-height:1.2em(120%)/1.5em(150%);

Font-family:arrial,sans-serif,verdana;

縮寫成：

Font:italic small-caps bold 12px/1.5em arrial,sans-serif;

注意：Font-size和Line-height用斜杠組合在一起不能分開寫。

5. 關(guān)于背景圖片的：

Background:#FFF url(log.gif) no-repeat fixed top left;

6. 關(guān)于列表：

List-style-type:square/none;

List-style-position:inside;

List-style-image:url(filename.gif);

縮寫成：

List-style:none inside url(filename.gif)

二、 運用4種方法來引入CSS樣式

1.link

<link rel=”stylesheet” type=”text/css” href=”a.css”>

rel 關(guān)系

type 數(shù)據(jù)類型,有多種

href 路徑

部分瀏覽器支持候選樣式,關(guān)鍵字:alternate:

<link rel=”stylesheet” type=”text/css” href=”a.css”>

<link rel=”alternate stylesheet” type=”text/css” href=”b.css”>

<link rel=”alternate stylesheet” type=”text/css” href=”c.css”>

2.內(nèi)部樣式塊

<style>

<!–

h2{color:red;}

–>

</style>

3.@import

@import url{a.css}

注意:此指令必須放在<style>容器中,并且在所有樣式之前

建議放在一個html注釋中,<!– –>瀏覽器會不顯示注釋內(nèi)的內(nèi)容,而import等css代碼能正常工作

4.內(nèi)聯(lián)樣式

<p style=”color:red;”>

選擇器是css的一個基本概念，基本規(guī)則如下：

1.規(guī)則結(jié)構(gòu)：

h2 {color:red;}

選擇器 {屬性:值;}

這類是元素選擇器，基本可以包括所有html的元素

屬性值可以包括多個元素，如：border：1px solid red;

常用語法

1)分組：

選擇器和聲明都可以分組:

h2,h3,h4{color:red;background:#fff;} ,選擇器用“,”分割開,屬性用”;”分割

2)類選擇器,即通過class=”stylename”應(yīng)用的聲明

定義:

.stylename{color:red;}

注意:

在html中可以使用多類選擇:如class=”cn1 cn2 cn3″

3)ID選擇器,即與id屬性對應(yīng)的樣式

定義:

#a{color:red;} ->這個定義對用id=”a”的元素

2.這部分都是我們常見的css語法，下面談一下我們不常見的選擇器語法

1)父子結(jié)構(gòu),跟文檔結(jié)構(gòu)圖對應(yīng)

如p span{border:1px solid red;}對應(yīng)的是<p>下面的<li>標(biāo)簽,這個很用用途,可以準(zhǔn)確定位.

一些特殊應(yīng)用(IE7支持):

(1) p > span{},匹配所有p下所有的span

(2) p + span{} ,匹配緊接著p元素后出現(xiàn)的第一個span標(biāo)簽,2者要有相同的父標(biāo)簽

2)屬性選擇器:(注意:屬性選擇器ie7才開始支持,以下版本并不支持,其他的瀏覽器基本可以)

語法:img[alt]{border:1px solid;}

表示對應(yīng)有alt屬性的img標(biāo)簽,當(dāng)然可以支持多個屬性對應(yīng),如img[alt][title]{};表示這個2個屬性都有的img標(biāo)簽,也可以與具體值對應(yīng):如:img[alt=”攝影”]{};

屬性選擇器中的高級應(yīng)用,特殊匹配:

(1)img[class~=”b”], ~= : 與屬性中的一個值對應(yīng)的,即與<img class=”a b c”>對應(yīng)

(2)[class^=”a”],以a開頭的

(3)[class$=”a”],以a結(jié)束的

(4)[class*=”a”],包含a的

(5)[class|=”a”],等于a或以a開頭的

3)偽類和偽元素

日常使用中主要是<a>標(biāo)簽的幾個偽類:link:hover:active:visited

以及:first-child:first:before:left:right:lang:focus:fist-line等等

注意:動態(tài)偽類可以應(yīng)用到任何元素,如,input:focus{background:red;}當(dāng)input標(biāo)簽獲得焦點時背景變紅

以上語法組合使用,就能實現(xiàn)定位準(zhǔn)確、簡單間接的樣式了。

三、 選擇器分類整合

優(yōu)先級別遵循：行內(nèi)樣式 >ID > Class >標(biāo)記

基本選擇器 標(biāo)記選擇器（eg:<p></p>）

類別選擇器(eg:class)

ID選擇器

復(fù)合選擇器 “交集”復(fù)合選擇器(eg:p.menu{color:red}) 必須是標(biāo)記+類別/ID組合

“并集”復(fù)合選擇器(eg:h2,h3,h4{color:red})

“后代”復(fù)合選擇器(eg: #menu .menulist{ ... })

“子” 復(fù)合選擇器(eg: #menu .menulist .selectit { ... })

四、 使用子選擇器減少id和class的定義

示例結(jié)構(gòu)：

<div id="menu">

<div class="menulist">

<div class="selectit">content</div>

</div>

</div>

示例CSS：

#menu { ... }

#menu .menulist { ... }

#menu .menulist .selectit { ... }

五、 使用組選擇器為不同元素應(yīng)用相同的樣式

如h2,h3,h4,div{font-size:16px;font-weight:bold}

則h2,h3,h4,div元素的樣式都為字體16像素，字體粗體

六、 偽類和選擇符的配合使用

將偽類和類組合起來用，就可以在同一個頁面中做幾組不同的鏈接效果了，例如，我們定義一組鏈接為紅色，訪問后為藍(lán)色；另一組為綠色，訪問后為黃色：

a.red:link {color: #FF0000}

a.red:visited {color: #0000FF}

a.blue:link {color: #00FF00}

a.blue:visited {color: #FF00FF}

現(xiàn)在應(yīng)用在不同的鏈接上：

<a class="red" href="...">這是第一組鏈接</a>

<a class="blue" href="...">這是第二組鏈接</a>

七、 CSS的最近優(yōu)先原則

/*如果對一個元素定義了多次樣式，則以最近的一級優(yōu)先，最近一級的樣式將覆蓋其他 行內(nèi)樣式 >ID > Class >標(biāo)記 */

以下是引用片段：

CSS:

p{color:red}

.blue{color:blue}

.yellow{color:yellow}

HTML:

<p>此處顯示為紅色</p>

<p class="blue">此處顯示為藍(lán)色</p>

<p class="blue" style="color:green">此處顯示為綠色</p>

<p class="blue yellow">此處顯示為黃色</p>

注意：

（1）注意樣式的幾個優(yōu)先順序(優(yōu)先級由上至下遞減，下面的樣式覆蓋上面的樣式)：

--元素style設(shè)定

--head區(qū)<style></style>中的設(shè)定

--外部引用css文件

（2）優(yōu)先級不是按訪問順序來設(shè)定的，而是又css中的聲明順序來設(shè)的。

如上例中<p class="yellow blue">此處顯示為黃色</p>也顯示為黃色，因為在css定義中.yellow在.blue的后面。

八、 書寫正確的鏈接樣式

當(dāng)用css定義鏈接的各種狀態(tài)時，要注意書寫的順序即：:link :visited :hover :active利用首字母：L V H A，你可以通過記憶LoVe,Hate,兩個單詞來記住其順序。

:link --------鏈接的顏色

:visited -----鼠標(biāo)點擊后的顏色

:hover -------鼠標(biāo)放上去未點的顏色（懸停）

:active-------鼠標(biāo)點擊瞬間的顏色

九、 :hover的靈活運用

IE6不支持除a標(biāo)簽以外的:hover屬性，我們了解:hover屬性是鼠標(biāo)懸停效果。在IE7和FF中，對幾乎任意元素都可以設(shè)置:hover屬性效果。這對我們做不同的訪問效果很好。

如：

p {

width : 360px;

height : 80px;

padding : 20px;

margin : 50px auto 0 auto;

border : 1px solid #ccc;

line-height : 25px;

background : #fff;

}

p:hover {

border : 1px solid #000;

background : #ddd;

}

----------------此效果針對IE7和FF

p a {

color : #00f;

text-decoration : none;

font-size : 13px;

}

p a:hover {

color : #036;

text-decoration : underline;

}

-----------------此效果針對IE6

十、 定義A標(biāo)簽要注意的小問題

當(dāng)我們定義a{color:red;}時，它代表了A的四種狀態(tài)的樣式，如果此時要定義一個鼠標(biāo)放上的狀態(tài)只要定義a:hover就可以了，其它三種狀態(tài)就是A中所定義的樣式。

只定義了一個a:link時，一定要記得把其它三種狀態(tài)定義出來！

十一、 禁止內(nèi)容換行與強(qiáng)制內(nèi)容換行

在表格或?qū)又形覀兛赡芟Ｍ麅?nèi)容不換行或強(qiáng)制換行，我們可以通過一些css屬性來達(dá)到這些要求。

禁止換行：white-space:nowrap

強(qiáng)制換行：word-break: break-all; white-space: normal;

十二、 區(qū)別relative和absolute

Absolute---CSS中的寫法是：position:absolute; 他的意思是絕對定位，他是參照瀏覽器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面簡稱TRBL)進(jìn)行定位，在沒有設(shè)定TRBL，默認(rèn)依據(jù)父級的做標(biāo)原始點為原始點。如果設(shè)定TRBL并且父級沒有設(shè)定position屬性，那么當(dāng)前的absolute則以瀏覽器左上角為原始點進(jìn)行定位，位置將由TRBL決定。

Relative---CSS中的寫法是：position:relative; 他的意思是絕對相對定位，他是參照父級的原始點為原始點，無父級則以BODY的原始點為原始點，配合TRBL進(jìn)行定位，當(dāng)父級內(nèi)有padding等CSS屬性時，當(dāng)前級的原始點則參照父級內(nèi)容區(qū)的原始點進(jìn)行定位。

十三、 區(qū)別塊級元素block和內(nèi)聯(lián)元素inline

塊級---可定義寬高，另起獨占一行 （如：div ul）

內(nèi)聯(lián)---不可定義寬高，如文本元素 （如a span）

十四、 區(qū)別display和visibility

display:none和visibility:hidden都可以隱藏一個元素,但visibility:hidden只是隱藏了元素的內(nèi)容，但其使用的位置空間仍然被保留。而display:none則相當(dāng)把元素從頁面中去除，其占用位置也將被刪除。

十五、 背景background的一些語法

background-image:url(背景圖案.jpg,gif,bmp);

background-color:#FFFFFF; （背景顏色）

background-color : transparent; <--設(shè)定背景為透明色 –>

background-repeat 改變背景圖片的重復(fù)并排的設(shè)定

說明

repeat 背景圖片并排

repeat-x 背景圖片以X方向 并排

repeat-y 背景圖片以Y方向 并排

no-repeat 背景圖片不 以并排的方式處理

background-attachment是否固定圖片位置

說明

scroll 拉動卷軸時，背景圖片會跟著移動（缺省值）

fixed 拉動卷軸時，背景圖片不會跟著移動

以長度定位background-position: x y

使用百分比定位 background-position: x% y%

說明

x% 往右移

y% 往下移

backgroud-position: 0% 0%; 左邊上方

backgroud-position: 0% 50%; 左邊中間

backgroud-position: 50% 0%; 中間上方

backgroud-position: 50% 50%; 正中間

backgroud-position:100% 0%; 右邊上方

backgroud-position: 0% 100%; 左邊下方

backgroud-position: 100% 50%; 右邊中間

backgroud-position: 50% 100%; 中間下方

backgroud-position: 100% 100%; 右邊下方

以關(guān)鍵字定位

關(guān)鍵字 說明

top 上 ( y = 0 )

center 中 ( x = 50, y = 50 )

bottom 下 ( y = 100 )

left 左 ( x= 0 )

Exp:

background-position:center;

圖片在指定背景中央X=50% Y=50%位置

background-position: 200px 30px

十六、 注釋的寫法

在Html中：

<-- footer -->

content

<-- end footer -->

在CSS中：

/* ---------- header ----------------- */

style

十七、 CSS的命名規(guī)范

1. id的命名

(1)頁面結(jié)構(gòu)

容器: container

頁頭：header

內(nèi)容：content/container

頁面主體：main

頁尾：footer

導(dǎo)航：nav

側(cè)欄：sidebar

欄目：column

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

左右中：left right center

(2)導(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

(3)功能

標(biāo)志：logo

廣告：banner

登陸：login

登錄條：loginbar

注冊：regsiter

搜索：search

功能區(qū)：shop

標(biāo)題：title

加入：joinus

狀態(tài)：status

按鈕：btn

滾動：scroll

標(biāo)簽頁：tab

文章列表：list

提示信息：msg

當(dāng)前的: current

小技巧：tips

圖標(biāo): icon

注釋：note

指南：guild

服務(wù)：service

熱點：hot

新聞：news

下載：download

投票：vote

合作伙伴：partner

友情鏈接：link

版權(quán)：copyright

2. class的命名

(1)顏色:使用顏色的名稱或者16進(jìn)制代碼,如

.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }

(2)字體大小,直接使用"font+字體大小"作為名稱,如

.font12px { font-size: 12px; }

.font9pt {font-size: 9pt; }

(3)對齊樣式,使用對齊目標(biāo)的英文名稱,如

.left { float:left; }

.bottom { float:bottom; }

(4)標(biāo)題欄樣式,使用"類別+功能"的方式命名,如

.barnews { }

.barproduct { }

注意事項::

u 一律小寫;

u 盡量用英文;

u 不加中杠和下劃線;

u 2個組合的單詞不用中杠和下劃線可以將第二個單詞的首字母大寫（eg:mainContent）；

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

3. 主要的站點css文件

主要的 master.css

模塊 module.css

基本共用 base.css（root.css）

布局，版面 layout.css

主題 themes.css

專欄 columns.css

文字 font.css

表單 forms.css

補(bǔ)丁 mend.css

打印 print.css

十八、 Padding影響寬度問題

如果一組要嵌套的標(biāo)簽之間需要些間距的話，那就留給位于里面的標(biāo)簽的margin屬性吧，而不要去定義位于外面的標(biāo)簽的padding

十九、 完美的單象素外框線表格

table{border-collapse:collapse;}

td{border:1px solid #000;}

二十、 如果文字過長,則將過長的部分變成省略號顯示

<style=”width:120px;height:50px;overflow:hidden;text-overflow:ellipsis; white-space:nowrap”>

二十一、 并不是所有樣式都要簡寫

當(dāng)樣式表前定義了如p{padding:1px 2px 3px 4px}時，在后續(xù)工程中又增加了一個樣式上補(bǔ)白5px，下補(bǔ)白6px。我們并不一定要寫成p.style1{padding:5px 6px 3px 4px}?？梢詫懗蓀.style1{padding-top:5px;padding-right:6px;},你可能會感覺這樣寫還不如原來那樣好，但你想沒想過，你的那種寫法重復(fù)定義了樣式，另外你可以不必去找原來的下補(bǔ)白與左補(bǔ)白的值是多少！如果以后前一個樣式P變了話，你定義的p.style1的樣式也要變。(此種方法對后期修改樣式很重要)

二十二、 幾個常用到的CSS細(xì)節(jié)處理上的樣式

1）中文字兩端對齊：text-align:justify;text-justify:inter-ideograph;

2）固定寬度漢字截斷：overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(不讓其換行，不過只能處理文字在一行上的截斷，不能處理多行。)（IE5以上）FF不能，它只隱藏。

***萬能強(qiáng)制換行：white-space:normal;word-break:break-all

禁止換行：white-space:nowrap

強(qiáng)制換行：word-wrap: break-word; word-break: normal;

.AutoNewline

{

/*word-break: break-all; 方法一 必須*/

/*word-wrap:break-word;overflow:hidden; 方法二 */

/*word-wrap:break-word; word-break: normal; 方法三 */

word-wrap:break-word; word-break:break-all;

}

.NoNewline

{

/*word-break: keep-all; 方法一 必須*/

white-space:nowrap;

}

3）固定寬度漢字（詞）折行：table-layout:fixed; word-break:break-all;（IE5以上）FF不能。

4）<acronym title=”輸入要提示的文字” style=”cursor:help;”>文字</acronym>用鼠標(biāo)放在前面的文字上看效果。這個效果在國外的很多網(wǎng)站都可以看到，而國內(nèi)的少又少。

5）圖片設(shè)為半透明：.halfalpha { background-color:#000000;filter:Alpha(Opacity=50)}在IE6及IE5測試通過，F(xiàn)F未通過，這是因為這個樣式是IE私有的東西；

6）FLASH透明：選中swf,打開原代碼窗口，在</object>前輸入<param name=”wmode” value=”transparent”> 以上是針對IE的代碼。

針對FIREFOX 給<embed> 標(biāo)簽也增加類似參數(shù)wmode=”transparent”

7）在做網(wǎng)頁時常用到把鼠標(biāo)放在圖片上會出現(xiàn)圖片變亮的效果，可以用圖片替換的技巧，也可以用如下的濾鏡：

.pictures img {

filter: alpha(opacity=45); }

.pictures a:hover img {

filter: alpha(opacity=90); }

8）層在瀏覽器中居中對齊問題

body { text-align: center }

#content { text-align: left; width: 700px; margin: 0 auto }

9)單行內(nèi)容在層中垂直對齊問題

# content{height:19px; line-height:19px; }缺點是要內(nèi)容不要換行。

10）層在瀏覽器中垂直居中對齊問題

缺點是：水平、垂直方向上不能出現(xiàn)滾動條，只能是在一屏的情況下

其實解決的思路是這樣的：首們需要position:absolute;絕對定位。而層的定位，使用外補(bǔ)丁margin負(fù)值的方法。負(fù)值的大小為層自身寬度高度除以2。

如：一個層寬度是400，高度是300。使用絕對定位距離上部與左部都設(shè)置成50%。而margin-top的值為－150。margin-left的值為－200。這樣我們就實現(xiàn)了層垂直居中于瀏覽器的樣式編寫。

請看實例代碼：

div {

position:absolute;

top:50%;

left:50%;

margin:-150px 0 0 -200px;

width:400px;

height:300px;

border:1px solid red;

}

11）CSS控制圖片自適應(yīng)大小

div img {

max-width:600px;

width:600px;

width:expression(document.body.clientWidth>600?"600px":"auto");

overflow:hidden;

}

二十三、 使用float屬性的元素要注意的問題

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

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

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

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

3. float元素務(wù)必指定width屬性

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

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

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

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

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

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

二十四、 瀏覽器的兼容性問題（針對FF/IE6/IE7）

1.CSS hack:區(qū)分IE6，IE7，firefox

區(qū)別FF，IE7，IE6：

background:green !important; background:orange; *background:blue;

IE6能識別*，但不能識別 !important,

IE7能識別*，也能識別!important;

FF不能識別*，但能識別!important;

另外再補(bǔ)充一個，下劃線”_“,

IE6支持下劃線，IE7和firefox均不支持下劃線。

于是大家還可以這樣來區(qū)分firefox，IE7，IE6

background:green!important; *background:orange; _background:blue;

注：不管是什么方法，書寫的順序都是firefox的寫在前面，IE7的寫在中間，IE6的寫在最后面。

2.在firefox和IE中的BOX模型解釋不一致導(dǎo)致相差2px解決方法

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

注意這兩個margin的順序一定不能寫反，!important這個屬性IE不能識別，但別的瀏覽器可以識別。所以在IE下其實解釋成這樣：div{maring:30px;margin:28px}重復(fù)定義的話按照最后一個來執(zhí)行，所以不可以只寫margin:XXpx!important;

3.條件性注釋來選擇不同的瀏覽器（比CSS hack簡潔）

<!–[if IE 6]>

<link rel=”stylesheet” type=”text/css” href=”ie6.css” mce_href=”ie6.css”>

<![endif]–>

4.區(qū)分IE8

.color{

background-color: #CC00FF; /*所有瀏覽器都會顯示為紫色*/

background-color: #FF0000\9; /*IE6、IE7、IE8會顯示紅色*/

*background-color: #0066FF; /*IE6、IE7會變?yōu)樗{(lán)色*/

_background-color: #009933; /*IE6會變?yōu)榫G色*/

二十五、 W3C遵循的標(biāo)準(zhǔn)原則

1. 在排布表格之前，請大家一定要好好思考一個最佳的方案，表格的嵌套盡量控制在三層以內(nèi)，并且應(yīng)該盡量避免 <colspan> <rowspan> 兩個標(biāo)記，經(jīng)驗表明，這兩個標(biāo)記會帶來許多麻煩。

2. 一個網(wǎng)頁要盡量避免用整個一張大表格，所有的內(nèi)容都嵌套在這個大表格之內(nèi)，因為瀏覽器在解釋頁面的元素時，是以表格為單位逐一顯示，如果一張網(wǎng)頁是嵌套在一個大表格之內(nèi)，那么很可能造成的后果就是，當(dāng)瀏覽者敲入網(wǎng)址，他要先面對一片空白很長時間，然后所有的網(wǎng)頁內(nèi)容同時出現(xiàn)。如果必須這樣做，請使用 <tbody>標(biāo)記，以便能夠使這個大表格分塊顯示。

3. 排版中我們經(jīng)常會遇到需要進(jìn)行首行縮進(jìn)的處理，不要使用 或者全角空格來達(dá)到效果，規(guī)范的做法是在樣式表中定義 p { text-indent: 2em; } 然后給每一段加上 <p> 標(biāo)記，注意，一般情況下，請不要省略 </p> 結(jié)束標(biāo)記 。

4. 原則上，我們禁止用 <img width=? height=?> 來人為干預(yù)圖片顯示的尺寸，而且建議 <img> 標(biāo)簽中不要帶上width 和height 兩個屬性，這是因為制作過程中，圖片往往需要反復(fù)的修改，這樣可以避免人為干預(yù)圖片顯示的尺寸，盡可能的發(fā)揮瀏覽器自身的功能；但是這樣的一個副作用是當(dāng)網(wǎng)頁還未加載圖片時，不會留出圖片的站位大小，可能會造成網(wǎng)頁在加載過程中抖動（如果圖片是插在一個固定大小的表格里的，不會有這個現(xiàn)象），尤其是當(dāng)圖片的尺寸較大時，這種現(xiàn)象會很明顯，所以當(dāng)預(yù)料到這種會明顯導(dǎo)致網(wǎng)頁抖動的情況會發(fā)生時，請大家務(wù)必在最后給 <img>附上 width 和 height 屬性。

5. 為了最大程度的發(fā)揮瀏覽器自動排版的功能，在一段完整的文字中請盡量不要使用<br> 來人工干預(yù)分段。

6. 不同語種的文字之間應(yīng)該有一個半角空格，但避頭的符號之前和避尾的符號之后除外漢字之間的標(biāo)點要用全角標(biāo)點，英文字母和數(shù)字周圍的括號應(yīng)該使用半角括號。

7. 所有的字號都應(yīng)該用樣式表來實現(xiàn)，禁止在頁面中出現(xiàn) <font size=?> 標(biāo)記。

8. 請不要在網(wǎng)頁中連續(xù)出現(xiàn)多于一個的也盡量少使用全角空格（英文字符集下，全角空格會變成亂碼），空白應(yīng)該盡量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 圖片來實現(xiàn)。

9. 中英文混排時，我們盡可能的將英文和數(shù)字定義為verdana 和arial 兩種字體。

10. 行距建議用百分比來定義，常用的兩個行距的值是line-height:120%/150%.

11. 網(wǎng)站中的路徑全部采用相對路徑，一般鏈接到某一目錄下的缺省文件的鏈接路徑不必寫全名，如我們不必這樣：<a href=”aboutus/index.htm”> 而應(yīng)該這樣：<a href=”aboutus/”>

12. 嵌入圖形文本的使用較大的字體，建議不要在圖形中包括文本。

13.“網(wǎng)頁大小”定義為網(wǎng)頁的所有文件大小的總和，包括HTML文件和所有的嵌入的對象。用戶喜歡快的而不是新奇的站點。對于解調(diào)器用戶，網(wǎng)頁大小保持在34K以下為合適。

14. float元素務(wù)必指定width屬性

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

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

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

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

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

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

二十六、 列表元素ul ol li dl dt dd釋義

　<ul>

<li>內(nèi)容1</li>

<li>內(nèi)容2</li>

</ul>

<dl>

<dt>標(biāo)題<dt>

<dd>內(nèi)容描述1</dd>

<dd>內(nèi)容描述2</dd>

</dl>

l dt 和dd中可以再加入 ol ul li和p

二十七、 清除浮動

clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}

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

.clearfix {

display:inline-block;

}

/* Hides from IE-mac \*/

* html .clearfix {

height:1%;

}

.clearfix {

display:block;

}

/* End hide from IE-mac */

**這種用法在進(jìn)行圖文混排時比較多，但是不太好控制，用margin配合clear{clear:both}直接來控制。

二十八、 文字的處理

1. 一般的字體：

font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, "宋體",sans-serif;

標(biāo)題字體（h2/h3）：font-family: Cambria, Georgia, "Times New Roman", Times, serif;

2. 首字下沉：

P:first-letter{padding:10px,fontsize:32pt;float:left}

3. 拼音漢字：

<ruby>布魯斯狼<rt style="font-size: 11px;">bu lu si lang</rt></ruby>

二十九、 Min-height多瀏覽器兼容問題

Div{

min-height:450px;

height:auto!important;

height:450px;

overflow:visible;????

}

三十、 CSS布局口訣 - CSS BUG順口溜

· IE邊框若顯若無，須注意，定是高度設(shè)置已忘記；

· 浮動產(chǎn)生有緣故，若要父層包含住，緊跟浮動要清除，容器自然顯其中；

· 三像素文本慢移不必慌，高度設(shè)置幫你忙；

· 兼容各個瀏覽須注意，默認(rèn)設(shè)置行高可能是殺手；

· 獨立清除浮動須銘記，行高設(shè)無，高設(shè)零，設(shè)計效果兼瀏覽；

· 學(xué)布局須思路，路隨布局原理自然直，輕松駕馭html，流水布局少hack，代碼清爽，兼容好，友好引擎喜歡迎。

· 所有標(biāo)簽皆有源，只是默認(rèn)各不同，span是無極，無極生兩儀—內(nèi)聯(lián)和塊級，img較特殊，但也遵法理，其他只是改造各不同，一個*號全歸原，層疊樣式理須多練習(xí)，萬物皆規(guī)律。

· 圖片鏈接排版須小心，圖片鏈接文字鏈接若對齊，padding和vertical-align:middle要設(shè)定，雖差微細(xì)倒無妨。

· IE浮動雙邊距，請用display：inline拘。

· 列表橫向排版，列表代碼須緊靠，空隙自消須銘記。

三十一、 Web中的字體應(yīng)用

總結(jié)幾套實用而簡單的font-family

font-family: Tahoma, Helvetica, Arial, sans-serif;

Tahoma 系的中性字體。推薦使用在13px以上的環(huán)境。

font-family: Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;

Verdana 系的寬扁字體。推薦在11px以下環(huán)境使用。

font-family: Geogia, Times New Roman, Times, serif;

襯線字體的不二之選。 多用于大號的標(biāo)題字體16px以上。

font-family: Lucida Console, Monaco, Courier New, mono, monospace;

一系列等寬字體。寫代碼很好用。另外，如果覺得Lucida Console太寬的話，可以換成比較窄的Lucida Sans Typewriter。話說老趙blog上的代碼塊使用的就是Lucida Sans Typewriter 喲~

如果在div的style中把visibility設(shè)為hidden則div隱藏，但是它會占據(jù)空白空間，而如果設(shè)置成display：none則不占據(jù)空白空間；

而visible="false"則div不返回在html中；

以上是“31條css的語法規(guī)則”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！