body
{
background: url(blue-image.gif) 0 0 repeat-y
}
7. block / inline 屬性
任何一個HTML元素都是block或者inline的。
block元素的特性包括:
總是另起一行開始顯示
height, line-height, top/bottom margin屬性可以被設(shè)置
width缺省值是100%,除非你指定了另外的width值
這一類的HTML元素包括<div>, <p>, <h1>, <form>, <ul> 以及 <li>等。
inline元素的特性包括:
直接跟在當(dāng)前行的后面顯示
height, line-height, top/bottom margin屬性不能改變
width值就等于包含其中的文字/圖片的寬度,并且這個值不能被改變
這一類的HTML元素包括<span>, <a>, <label>, <input>, <img>, <strong> 以及 <em>等。
你可以通過設(shè)置元素屬性display: inline 或 display: block來改變元素的以上特性。
8. 設(shè)置頁面的最小寬度
CSS語法中很有用的一個屬性是 min-width 。通過這個屬性你可以設(shè)置任何元素的最小寬度。也就是說你也可以用這個來限制頁面顯示的最小寬度。
但有個小問題是:IE瀏覽器無法為<body>元素設(shè)置min-width,因此要讓這個屬性起作用,我們需要走點(diǎn)彎路。
首先在<body>后面插入一個<div>:
<body>
<div class="container">
然后在CSS定義里面定義最小寬度為600px:
#container
{
min-width: 600px;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}
第一個屬性是最小寬度定義的標(biāo)準(zhǔn)寫法;第二個屬性則是只有IE能夠理解的javascript表達(dá)式。
你也可以同時(shí)設(shè)定頁面的最大最小寬度:
#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
}
9. Text-transform 屬性
這個屬性可能也是CSS當(dāng)中用的人不多但卻很有用處的屬性之一。其常見的可用值包括:text-transform: uppercase, text-transform: lowercase 以及 text-transform: capitalize。第一個將把所有的字母轉(zhuǎn)化成大寫;第二個將把所有字母轉(zhuǎn)成小寫;第三個則把每個單詞的首字母轉(zhuǎn)成大寫。不過對于非英文網(wǎng)站來說,這個功能確實(shí)就沒什么用了。
10. IE中消失的文字和圖片
IE有個很莫名其妙的Bug:有時(shí)候文字或者背景圖片死活顯示不出來。如果你全選整個頁面,會發(fā)現(xiàn)那些內(nèi)容實(shí)際上還在那里,或者重新刷新一下頁面顯示就正常了。
通常來說這個問題都發(fā)生在那些跟在浮動元素后面顯示的文字或背景圖片身上。要解決這個問題,可以試試給你的那些消失的元素加上position: relative 屬性。如果還不行,再試試設(shè)置一下width屬性。一般來說這樣做之后問題就解決了。
11. 顏色的縮寫
我們可以將#ff0033縮寫成#f03
17. 關(guān)閉輸入法狀態(tài)
使用戶只能輸入英文狀態(tài)下的字符,類似輸入密碼
input {ime-mode: disabled ; }