CSS 使用規則總結
2024-07-11 08:46:18
供稿：網友
一.縮寫規則
關于邊距 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
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% 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;}
如果文字過長,則將過長的部分變成省略號顯示
并不是所有樣式都要簡寫
當樣式表前定義了如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）文字用鼠標放在前面的文字上看效果。這個效果在國外的很多網站都可以看到，而國內的少又少。
5）圖片設為半透明：.halfalpha { background-color:#000000;filter:Alpha(Opacity=50)}在IE6及IE5測試通過，FF未通過，這是因為這個樣式是IE私有的東西；
6）FLASH透明：選中swf,打開原代碼窗口，在前輸入 以上是針對IE的代碼。
針對FIREFOX 給 標簽也增加類似參數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均不支持下劃線。
