我的CSS學習筆記

1.文字修飾中text-decoration:blink(文字閃爍)在現在的瀏覽器中已經無法顯示效果.

2.排列元素中的文本text-align:justify的效果為使文字行左右對齊.但是要注意的是,不足一行的文字無法顯示該效果,且段落的最後一行也無法顯示該效果.

3.設定文字陰影與模糊效果text-shadow,是控制網頁中文字陰影屬性的樣式(Style)，但是，目前只有Safari瀏覽器支援text-shadow。如果是其他瀏覽器想實現文字陰影製作效果，必須使用一些其他的技術或是屬性。當然，純“CSS”也是可以的。其文法為:
text-shadow : color 　length　length　opacity
其中,
color :  設定陰影顏色;
length :  設定陰影水平方向的延長值;
length :  設定陰影垂直方向的延長值;
opacity :  由浮點數字和單位標識符組成的長度值.不可為負值.指定模糊效果的作用距離.如果你僅僅需要模糊效果,將前兩個length全部設定為0.
注意：此屬性只支援Safari瀏覽器.
注意：上述4個屬性是寫在一起的.
注意:可以被用於偽類:first-letter和 :first-line.

4.white-space:pre 用等寬字型顯示預先格式化的文本。不合并字間的空白距離和進行左右對齊.但是實際上並看不到效果,多個空格還是會被合并成一個,因為ie對white-space:pre的解析不符合css1標準，是個bug.

5.text-underline-position只能與text-decoration:underline聯用才能有效果,與其他屬性,例如text-decoration:overline,text-decoration:line-through等都不能產生效果.text-underline-position:above的效果等同於text-decoration:overline.

6.border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
none : 　無邊框。與任何指定的border-width值無關
hidden : 　隱藏邊框。IE不支援
dotted : 　在MAC平台上IE4+與WINDOWS和UNIX平台上IE5.5+為點線。否則為實線
dashed : 　在MAC平台上IE4+與WINDOWS和UNIX平台上IE5.5+為虛線。否則為實線
solid : 　實線邊框
double : 　雙線邊框。兩條單線與其間隔的和等於指定的border-width值
groove : 　根據border-color的值畫3D凹槽
ridge : 　根據border-color的值畫菱形邊框
inset : 　根據border-color的值畫3D凹邊
outset : 　根據border-color的值畫3D凸邊
說明：
如果提供全部四個參數值，將按上－右－下－左的順序作用於四個邊框。
如果只提供一個，將用於全部的四條邊。
如果提供兩個，第一個用於上－下，第二個用於左－右。
如果提供三個，第一個用於上，第二個用於左－右，第三個用於下。
要使用該屬性，必須先設定對象的height或width屬性，或者設定position屬性為absolute。
如果border-width不大於0，本屬性將失去作用.
對應的指令碼特性為borderStyle.

7.border-bottom : border-width || border-style || border-color
其中border-width : medium | thin | thick | length 的參數有:
medium : 　預設寬度
thin : 　小於預設寬度
thick : 　大於預設寬度
length : 　由浮點數字和單位標識符組成的長度值。不可為負值.
注意:
如果提供全部四個參數值，將按上－右－下－左的順序作用於四個邊框.
如果只提供一個，將用於全部的四條邊.
如果提供兩個，第一個用於上－下，第二個用於左－右.
如果提供三個，第一個用於上，第二個用於左－右，第三個用於下.
要使用該屬性，必須先設定對象的height或width屬性，或者設定position屬性為absolute.
如果border-style設定為none，本屬性將失去作用.
對應的指令碼特性為borderWidth.

8.margin又名外補丁,表示邊距,定義元素周圍的空間;padding又名內補丁,表示填充,定義元素邊框與元素內容之間的空白.

9.list-style:list-style-type|list-style-position|list-style-image
同時使用所有屬性的例子:list-style:disc inside url("xx.jpg")

10.list-style-type設定清單項目標記的類型(以下標記有CSS1的是可以使用的值):
disc : 　CSS1　實心圓
circle : 　CSS1　空心圓
square : 　CSS1　實心方塊
decimal : 　CSS1　阿拉伯數字
lower-roman : 　CSS1　小寫羅馬數字
upper-roman : 　CSS1　大寫羅馬數字
lower-alpha : 　CSS1　小寫英文字母
upper-alpha : 　CSS1　大寫英文字母
none : 　CSS1　不使用項目符號
armenian : 　CSS2　傳統的亞美尼亞數字
cjk-ideographic : 　CSS2　淺白的表意數字
georgian : 　CSS2　傳統的喬治數字
lower-greek : 　CSS2　基本的希臘小寫字母
hebrew : 　CSS2　傳統的希伯萊數字
hiragana : 　CSS2　日文平假名字元
hiragana-iroha : 　CSS2　日文平假名序號
katakana : 　CSS2　日文片假名字元
katakana-iroha : 　CSS2　日文片假名序號
lower-latin : 　CSS2　小寫拉丁字母
upper-latin : 　CSS2　大寫拉丁字母
說明:
若list-style-image屬性為none或指定映像不可用時，list-style-type屬性將發生作用.
僅作用於具有display值等於list-item的對象（如li對象）.
注意：ol對象和ul對象的type特性為其後的所有清單項目（如li對象）指明列表屬性.
IE5.5尚不支援所有CSS2的值.
對應的指令碼特性為listStyleType.

11.list-style-position:inside|outside設定列表中清單項目標記被放置的位置
outside : 　清單項目標記放置在文本以外，且環繞文本不根據標記對齊
inside : 　清單項目標記放置在文本以內，且環繞文本根據標記對齊
說明:
僅作用於具有display值等於list-item的對象（如li對象）.
注意：ol對象和ul對象的type特性為其後的所有清單項目（如li對象）指明列表屬性.
對應的指令碼特性為listStylePosition.

12.line-height:number設定一個數字，此數字會與當前的字型尺寸相乘來設定行間距.

13.clip:rect(top,right,bottom,left)
Clipping的中文解釋就是剪輯的意思，這個屬性決定了對象的哪個部位可以被看到.它不會改變任何對象的性質.
Clipping 的地區是一個矩形， 而這個矩形的尺寸取決于于四個邊的位置.
這四個邊用 top, right, botton, left 來表示.
請注意：這四個邊的位置是相對於對象的而不是相對於視窗的,且這個屬性要和position:absolute一起用才有效果.例如:
img
{
position:absolute;
clip:rect(0px,50px,200px,0px)
}
指令碼文法:object.style.clip="rect(0px,50px,200px,0px)"

14.IE不支援偽類:lang

 

15.設定寬度以自適應解析度

min-width:760px;

width: expression(document.body.clientWidth < 840? "800px": "85%" );

 

 16.讓超出table 中td寬度的文字自動產生“...”

首先在table的style中加上“table-layout:fixed”，然後在td的style中加上“overflow:hidden; text-overflow:ellipsis; white-space:nowrap”即可實現。