css規則是什麼

css規則是什麼?

在這裡整理了31條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.5em arrial,sans-serif;

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

5. 關於背景圖片的：

Background:#FFF url(log.gif) no-repeat fixed 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

rel 關係

type 資料型態,有多種

href 路徑

部分瀏覽器支援候選樣式,關鍵字:alternate:

2.內部樣式塊

3.@import

@import url {a.css}

注意:此指令必須放在中的設定

--外部引用css檔案

（2）優先權不是依照存取順序來設定的，而是又css中的宣告順序來設的。

如上例

此處顯示為黃色

也顯示為黃色，因為在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% 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

######################################################################## ####標籤頁：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;}

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

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

當樣式表前定義瞭如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）

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簡潔）

#

4.區分IE8

#.color{

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

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

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

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

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

1. 在排布表格之前，請大家一定要好好思考一個最佳的方案，表格的嵌套盡量控制在三層以內，並且應該盡量避免 兩個標記，經驗表明，這兩個標記會帶來許多麻煩。

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

3. 排版中我們常常會遇到需要進行首行縮排的處理，不要使用或全角空格來達到效果，規範的做法是在樣式表中定義p { text-indent: 2em; } 然後在每一段加上

標記，注意，一般情況下，請不要省略

結束標記。

4. 原則上，我們禁止用 來人為幹預圖片顯示的尺寸，而且建議 標籤中不要帶上width 和height 兩個屬性，這是因為製作過程中，圖片往往需要反覆的修改，這樣可以避免人為幹預圖片顯示的尺寸，盡可能的發揮瀏覽器自身的功能；但是這樣的一個副作用是當網頁還未加載圖片時，不會留出圖片的站位大小，可能會造成網頁在加載​​過程中抖動（如果圖片是插在一個固定大小的表格裡的，不會有這個現象），尤其是當圖片的尺寸較大時，這種現象會很明顯，所以當預料到這種會明顯導致網頁抖動的情況會發生時，請大家務必在最後給附上width 和height 屬性。

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

6. 不同語種的文字之間應該有一個半角空格，但避頭的符號之前和避尾的符號之後除外漢字之間的標點要用全角標點，英文字母和數字周圍的括號應該使用半角括號。

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

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

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

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

11. 網站中的路徑全部採用相對路徑，一般連結到某一目錄下的缺省文件的連結路徑不必寫全名，如我們不必這樣： 而應該這樣：

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 li dl dt dd釋義

　

• 內容1

##

• 內容1
• 內容2

標題

內容描述1

內容描述2

#l 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. 拼音漢字：

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

二十九、 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 ;

Tahoma 系的中性字體。建議使用在13px以上的環境。

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;

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

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

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

以上是css規則是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！