CSS使用規則總結

 

一.縮寫規則

   關於邊距 margin（4邊）：

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

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

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

      1px （四邊都相同）

   簡化所有：

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

#menu{ margin:0}------------表示menu控制項下的所有元素的margin為0

縮寫（border）特定樣式：

Border:1px solid #ffffff;

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

關於文字的縮寫規則：

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用斜杠組合在一起不能分開寫。

關於背景圖片的：

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

關於列表：

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 solid red;}對應的是<p>下面的<li>標籤,這個很用用途,可以準確定位.

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

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

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

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

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

表示對應有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">

<div class="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中的聲明順序來設的。

如上例中<p class="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

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

內聯---不可定義寬高，如文本元素 （如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的命名規範

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

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

注意事項::

一律小寫;

盡量用英文;

不加中杠和底線;

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

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

主要的網站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:1px 2px 3px 4px}時，在後續工程中又增加了一個樣式上補白5px，下補白6px。我們並不一定要寫成p.style1{padding:5px 6px 3px 4px}。可以寫成p.style1{padding-top: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>前輸入<param name=”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屬性的元素要注意的問題

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

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

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

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

float元素務必指定width屬性

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

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

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

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

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均不支援底線。

來源文件 <http://www.cnblogs.com/fxl87/archive/2009/11/20/1606557.html>