css規則整理

DIV+CSS規則整理

一、善用css縮寫規則

 

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

 

1. 關於邊距（4邊）：

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

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

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

1px （四邊都相同）

 

2. 簡化所有：

*/ body{margin:0}------------表示網頁內所有元素的margin為0

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

 

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

Border:1px solid #ffffff;

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

 

4. 關於文字的縮寫規則：

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.5emarrial,sans-serif;

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

 

5. 關於背景圖片的：

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

 

6. 關於列表：

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 關係

 

type 資料型別,有多種

 

href 路徑

 

部分瀏覽器支援候選樣式,關鍵字: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.內部樣式塊

<style>

<!–

h1{color:red;}

–>

</style>

 

3.@import

@import url{a.css}

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

建議放在一個html註釋中,<!– –>瀏覽器會不顯示註釋內的內容,而import等css程式碼能正常工作

 

4.內聯樣式

<p style=”color:red;”>

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

1.規則結構：

h1 {color:red;}

選擇器 {屬性:值;}

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

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

常用語法

1)分組：

選擇器和宣告都可以分組:

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

2)類選擇器,即通過class=”stylename”應用的宣告

 

定義:

.stylename{color:red;}

注意:

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

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

定義:

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

 

 

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

1)父子結構,跟文件結構圖對應

如p span{border:1px solidred;}對應的是<p>下面的<li>標籤,這個很用用途,可以準確定位.

一些特殊應用(IE7支援):

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

(2) p + span{} ,匹配緊接著p元素後出現的第一個span標籤,2者要有相同的父標籤

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

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

表示對應有alt屬性的img標籤,當然可以支援多個屬性對應,如img[alt][title]{};表示這個2個屬性都有的img標籤,

也可以與具體值對應:如:img[alt=”攝影”]{};

屬性選擇器中的高階應用,特殊匹配:

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

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

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

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

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

3)偽類和偽元素

日常使用中主要是<a>標籤的幾個偽類:link:hover:active:visited

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

注意:動態偽類可以應用到任何元素,如,input:focus{background:red;}當input標籤獲得焦點時背景變紅

以上語法組合使用,就能實現定位準確、簡單間接的樣式了。

 

 

 

 

 

 

 

 

 

 

三、選擇器分類整合

 

優先順序別遵循：行內樣式 >ID >Class >標記

 

基本選擇器標記選擇器（eg:<p></p>）

類別選擇器(eg:class)

ID選擇器

複合選擇器

“交集”複合選擇器(eg:p.menu{color:red})必須是

 

 

標記+類別/ID組合

“並集”複合選擇器(eg:h1,h2,h3{color:red})

“後代”複合選擇器(eg: #menu.menulist{ ... })

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

 

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

 

示例結構：

<div id="menu">

<div class="menulist">

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

</div>

</div>

 

示例CSS：

#menu { ... }

#menu .menulist { ... }

#menu .menulist .selectit { ... }

 

五、使用組選擇器為不同元素應用相同的樣式

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

則h1,h2,h3,div元素的樣式都為字型16畫素，字型粗體

 

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

 

將偽類和類組合起來用，就可以在同一個頁面中做幾組不同的連結效果了，例如，我們定義一組連結為紅色，

訪問後為藍色；另一組為綠色，訪問後為黃色：

a.red:link {color: #FF0000}

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

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

a.blue:visited {color: #FF00FF}

現在應用在不同的連結上：

<a class="red"href="...">這是第一組連結</a>

<a class="blue" href="...">這是第二組連結</a>

 

七、CSS的最近優先原則

 

/*如果對一個元素定義了多次樣式，則以最近的一級優先，最近一級的樣式將覆蓋其他行內樣式 >ID > Class>標記*/

 

以下是引用片段：

CSS:

p{color:red}

.blue{color:blue}

.yellow{color:yellow}

HTML:

 

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

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

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

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

注意：

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

--元素style設定

 

--head區<style></style>中的設定

 

--外部引用css檔案

 

（2）優先順序不是按訪問順序來設定的，而是又css中的宣告順序來設的。

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

的後面。

 

八、書寫正確的連結樣式

 

當用css定義連結的各種狀態時，要注意書寫的順序即：:link :visited :hover :active利用首字母：L V H A，

你可以通過記憶LoVe,Hate,兩個單詞來記住其順序。

 

:link --------連結的顏色

:visited -----滑鼠點選後的顏色

:hover -------滑鼠放上去未點的顏色（懸停）

:active-------滑鼠點選瞬間的顏色

 

 

九、:hover的靈活運用

 

IE6不支援除a標籤以外的:hover屬性，我們瞭解:hover屬性是滑鼠懸停效果。在IE7和FF中，對幾乎任意元素

都可以設定: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標籤要注意的小問題

 

當我們定義a{color:red;}時，它代表了A的四種狀態的樣式，如果此時要定義一個滑鼠放上的狀態只要定義

a:hover就可以了，其它三種狀態就是A中所定義的樣式。

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

 

十一、禁止內容換行與強制內容換行

 

在表格或層中我們可能希望內容不換行或強制換行，我們可以通過一些css屬性來達到這些要求。

禁止換行：white-space:nowrap

強制換行：word-break:break-all; white-space: normal;

 

十二、區別relative和absolute

 

Absolute---CSS中的寫法是：position:absolute; 他的意思是絕對定位，他是參照瀏覽器的左上角，配合

TOP、RIGHT、BOTTOM、LEFT(下面簡稱TRBL)進行定位，在沒有設定TRBL，預設依據父級的做標原始點為

原始點。如果設定TRBL並且父級沒有設定position屬性，那麼當前的absolute則以瀏覽器左上角為原始點進行

定位，位置將由TRBL決定。

Relative---CSS中的寫法是：position:relative;他的意思是絕對相對定位，他是參照父級的原始點為原始點，

無父級則以BODY的原始點為原始點，配合TRBL進行定位，當父級內有padding等CSS屬性時，當前級的原始

點則參照父級內容區的原始點進行定位。

 

十三、區別塊級元素block和內聯元素inline

 

塊級---可定義寬高，另起獨佔一行（如：divul）

內聯---不可定義寬高，如文字元素（如a span）

 

十四、區別display和visibility

display:none和visibility:hidden都可以隱藏一個元素,但visibility:hidden只是隱藏了元素的內容，但其使用的

位置空間仍然被保留。而display:none則相當把元素從頁面中去除，其佔用位置也將被刪除。

 

十五、背景background的一些語法

 

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

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

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

background-repeat 改變背景圖片的重複並排的設定

 

說明

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%; 右邊下方

 

以關鍵字定位

關鍵字說明

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的命名規範

 

1. id的命名

(1)頁面結構

容器: container

頁頭：header

內容：content/container

頁面主體：main

頁尾：footer

導航：nav

側欄：sidebar

欄目：column

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

左右中：left right center

 

(2)導航

導航：nav

主導航：mainnav

子導航：subnav

頂導航：topnav

邊導航：sidebar

左導航：leftsidebar

右導航：rightsidebar

選單：menu

子選單：submenu

標題: title

摘要: summary

 

(3)功能

標誌：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

 

 

2. class的命名

(1)顏色:使用顏色的名稱或者16進位制程式碼,如

 

.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }

 

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

.font12px { font-size: 12px; }

.font9pt {font-size: 9pt; }

 

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

.left { float:left; }

.bottom { float:bottom; }

 

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

.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

補丁 mend.css

列印 print.css

 

十八、Padding影響寬度問題

 

如果一組要巢狀的標籤之間需要些間距的話，那就留給位於裡面的標籤的margin屬性吧，而不要去定義位

於外面的標籤的padding

 

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

 

table{border-collapse:collapse;}

td{border:1px solid #000;}

 

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

 

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

 

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

 

當樣式表前定義瞭如p{padding:1px2px 3px 4px}時，在後續工程中又增加了一個樣式上補白5px，下補白

6px。我們並不一定要寫成p.style1{padding:5px 6px 3px 4px}。可以寫成p.style1{paddingtop:5px;padding-right:6px;},你可能會感覺這樣寫還不如原來那樣好，但你想沒想過，你的那種寫法重複定義

了樣式，另外你可以不必去找原來的下補白與左補白的值是多少！如果以後前一個樣式P變了話，你定義的

p.style1的樣式也要變。(此種方法對後期修改樣式很重要)

 

 

 

 

 

 

 

 

二十二、幾個常用到的CSS細節處理上的樣式

 

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

2）固定寬度漢字截斷：overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(不讓其換行，不過只能

處理文字在一行上的截斷，不能處理多行。)（IE5以上）FF不能，它只隱藏。

 

***萬能強制換行：white-space:normal;word-break:break-all

禁止換行：white-space:nowrap

強制換行：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>用滑鼠放在前面的文

字上看效果。這個效果在國外的很多網站都可以看到，而國內的少又少。

 

 

5）圖片設為半透明：.halfalpha { background-color:#000000;filter:Alpha(Opacity=50)}在IE6及IE5測試通

過，FF未通過，這是因為這個樣式是IE私有的東西；

 

 

6）FLASH透明：選中swf,開啟原始碼視窗，在</object>前輸入<paramname=”wmode”

value=”transparent”> 以上是針對IE的程式碼。

針對FIREFOX 給<embed> 標籤也增加類似引數wmode=”transparent”

 

 

7）在做網頁時常用到把滑鼠放在圖片上會出現圖片變亮的效果，可以用圖片替換的技巧，也可以用如下的濾

鏡：

 

.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)單行內容在層中垂直對齊問題

 

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

 

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

 

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

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

如：一個層寬度是400，高度是300。使用絕對定位距離上部與左部都設定成50%。而margin-top的值為

－150。margin-left的值為－200。這樣我們就實現了層垂直居中於瀏覽器的樣式編寫。

請看例項程式碼：

div {

 

position:absolute;

top:50%;

left:50%;

margin:-150px 0 0 -200px;

width:400px;

height:300px;

border:1px solid red;

}

 

11）CSS控制圖片自適應大小

 

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元素務必指定width屬性

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

width屬性。

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

 

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

IE在顯示指定了margin和padding的float元素時有bug。因此不要對float元素指定margin和padding屬性(可

以在float元素內部巢狀一個div來設定margin和padding)。也可以使用hack方法為IE指定特別的值。

 

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

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

 

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

 

1.CSS hack:區分IE6，IE7，firefox

區別FF，IE7，IE6：

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

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

 

 

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

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

另外再補充一個，下劃線”_“,IE6支援下劃線，IE7和firefox均不支援下劃線。

於是大家還可以這樣來區分firefox，IE7，IE6

 

 

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

 

 

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

 

 

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

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

注意這兩個margin的順序一定不能寫反，!important這個屬性IE不能識別，但別的瀏覽器可以識別。所以在IE

下其實解釋成這樣：div{maring:30px;margin:28px}重複定義的話按照最後一個來執行，所以不可以只寫

margin:XXpx!important;

 

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

<!–[if IE 6]>

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

<![endif]–>

4.區分IE8

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

 

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

*background-color: #0066FF; /*IE6、IE7會變為藍色*/

_background-color: #009933; /*IE6會變為綠色*/

 

IE8相容IE7

[metahttp-equiv="X-UA-Compatible" content="IE=EmulateIE7"/]

在[title]的上面,注意:把[]換成<>

 

 

二十五、W3C遵循的標準原則

 

1. 在排布表格之前，請大家一定要好好思考一個最佳的方案，表格的巢狀儘量控制在三層以內，並且應該儘量

避免 <colspan><rowspan> 兩個標記，經驗表明，這兩個標記會帶來許多麻煩。

2. 一個網頁要儘量避免用整個一張大表格，所有的內容都巢狀在這個大表格之內，因為瀏覽器在解釋頁面的元

素時，是以表格為單位逐一顯示，如果一張網頁是巢狀在一個大表格之內，那麼很可能造成的後果就是，當瀏

覽者敲入網址，他要先面對一片空白很長時間，然後所有的網頁內容同時出現。如果必須這樣做，請使用

<tbody>標記，以便能夠使這個大表格分塊顯示。

3. 排版中我們經常會遇到需要進行首行縮排的處理，不要使用或者全形空格來達到效果，規範的做法是在樣

式表中定義 p { text-indent:2em; } 然後給每一段加上 <p> 標記，注意，一般情況下，請不要省略 </p> 結束

標記 。

4. 原則上，我們禁止用 <img width=? height=?> 來人為干預圖片顯示的尺寸，而且建議 <img> 標籤中不

要帶上width 和height 兩個屬性，這是因為製作過程中，圖片往往需要反覆的修改，這樣可以避免人為干預圖

片顯示的尺寸，儘可能的發揮瀏覽器自身的功能；但是這樣的一個副作用是當網頁還未載入圖片時，不會留出

圖片的站位大小，可能會造成網頁在載入過程中抖動（如果圖片是插在一個固定大小的表格裡的，不會有這個

現象），尤其是當圖片的尺寸較大時，這種現象會很明顯，所以當預料到這種會明顯導致網頁抖動的情況會發

生時，請大家務必在最後給 <img>附上 width 和 height 屬性。

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

6. 不同語種的文字之間應該有一個半形空格，但避頭的符號之前和避尾的符號之後除外漢字之間的標點要用全

角標點，英文字母和數字周圍的括號應該使用半形括號。

7. 所有的字號都應該用樣式表來實現，禁止在頁面中出現 <font size=?> 標記。

8. 請不要在網頁中連續出現多於一個的也儘量少使用全形空格（英文字符集下，全形空格會變成亂碼），空白

應該儘量使用 text-indent,padding, margin, hspace, vspace 以及透明的gif 圖片來實現。

9. 中英文混排時，我們儘可能的將英文和數字定義為verdana 和arial 兩種字型。

 

 

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

11. 網站中的路徑全部採用相對路徑，一般連結到某一目錄下的預設檔案的連結路徑不必寫全名，如我們不必

這樣：<a href=”aboutus/index.htm”> 而應該這樣：<a href=”aboutus/”>

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

13.“網頁大小”定義為網頁的所有檔案大小的總和，包括HTML檔案和所有的嵌入的物件。使用者喜歡快的而

不是新奇的站點。對於解調器使用者，網頁大小保持在34K以下為合適。

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

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

width屬性。

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

 

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

IE在顯示指定了margin和padding的float元素時有bug。因此不要對float元素指定margin和padding屬性

（可以在float元素內部巢狀一個div來設定margin和padding）。也可以使用hack方法為IE指定特別的值。

 

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

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

 

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

 

<ul>

<li>內容1</li>

<li>內容2</li>

</ul>

<dl>

<dt>標題<dt>

<dd>內容描述1</dd>

 

<dd>內容描述2</dd>

</dl>

 

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

 

二十七、清除浮動

 

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

在Firefox中，當子級都為浮動時，那麼父級的高度就無法完全的包住整個子級，那麼這時用這個清除浮動的

HACK來對父級做一次定義，那麼就可以解決這個問題。

.clearfix {

 

 

display:inline-block;

}

/* Hides from IE-mac \*/

 

* html .clearfix {

height:1%;

}

.clearfix {

 

display:block;

}

/* End hide from IE-mac */

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

 

二十八、文字的處理

 

1. 一般的字型：

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

標題字型（h1/h2）：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 silang</rt></ruby>

 

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

 

Div{

 

min-height:450px;

 

height:auto!important;

 

height:450px;

 

overflow:visible;

}

 

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

 

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

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

· 三畫素文字慢移不必慌，高度設定幫你忙；

· 相容各個瀏覽須注意，預設設定行高可能是殺手；

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

· 學佈局須思路，路隨佈局原理自然直，輕鬆駕馭html，流水佈局少hack，程式碼清爽，相容好，友好引擎

喜歡迎。

· 所有標籤皆有源，只是預設各不同，span是無極，無極生兩儀—內聯和塊級，img較特殊，但也遵法

理，其他只是改造各不同，一個*號全歸原，層疊樣式理須多練習，萬物皆規律。

· 圖片連結排版須小心，圖片連結文字連結若對齊，padding和vertical-align:middle要設定，雖差微細

倒無妨。

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

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

 

三十一、Web中的字型應用

總結幾套實用而簡單的font-family

 

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

Verdana 系的寬扁字型。推薦在11px以下環境使用。

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

襯線字型的不二之選。 多用於大號的標題字型16px以上。

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

一系列等寬字型。寫程式碼很好用。另外，如果覺得LucidaConsole太寬的話，可以換成比較窄的Lucida Sans

Typewriter。話說老趙blog上的程式碼塊使用的就是Lucida SansTypewriter 喲~

 

 

如果在div的style中把visibility設為hidden則div隱藏，但是它會佔據空白空間，而如果設定成display：none

則不佔據空白空間；

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