CSS 功能索引式參考手冊
Cascading Style Sheets Standard Design Guide
img float
Div22 外框是紅色
imgc1 外框是藍色 圖片
文字 
                        .pText {
                            font-size:1.25em;
                            color:#CC4444;
                            background-color:#eeeeee;
                            text-align:center;  /*left, right justify (左右分散 , 目前的瀏灠器都不支援中文的左右分散)*/
                            vertical-align:middle;
                            font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
                            line-height:1.5em;
                            width:420px;
                            font-weight:bold;
                            letter-spacing:0.5em;
                            word-spacing:0.25em;
                            text-indent:2em;    /*(首行縮排)*/
                        }
他接連走上幾條岔道，這才漸漸放心，心下稍寬，頭臉手足擦破處便痛將起來，尋思：「這姑娘脾氣如此古怪，說不定她父母雙亡，一生遭逢無數不幸之事。 也說不定她相貌醜陋無比，以致不肯以面目示人，倒也是個可憐之人。啊喲，鍾夫人那只黃金鈿盒卻還在她身邊。」可是要回去向她取還，卻無論如何不敢了， 心想：「我見了爹爹，最多答允跟他學武功，爹爹自然會去救鍾姑娘，就算爹爹不親自去，派些人去便是，這隻金盒也沒多大用處。只是我沒了坐騎，這般徒步而去大理， 勢必半路上毒發而死。鍾姑娘苦待救援，渡日如年，她如見我既不回去，她父親又不來相救，只道我沒給她送信。好歹我得趕到無量山去，和她死在一塊，也好教她明白我決不相負之意。」 One of the first interesting things to notice about floated elements is that margins around floated elements do not collapse. If you float an image with 20-pixel margins, there will be at least 20 pixels of space around that image. If other elements adjacent to the image—and that means adjacent horizontally and vertically—also have mar‐ gins, those margins will not collapse with the margins on the floated image, as you can see in Figure 3:
white-space pre         -->原來有多少空白或多少tab那就會顯示原來的,不會自動換行
nowrap  -->連續的會縮減成一個半形空格來顯示 , 不會自動換行
normal   -->連續的會繪減成一個半形空格來顯示 , 會自動換行
text-transform uppercase
lowercase
capitalize (各字母的第一個字大寫)
none
font-variant small-caps
normal (大寫字體縮成小寫方式顯示)
字體大小單位 em , ex , % 皆為相對大小的字體 , 在巢狀的狀態下指字每個相對的字體大小時 ,會如下方一樣愈來愈大 
                                    <style type="text/css">
                                    p {
                                        font-size: 2em;
                                    }
                            
                                    em {
                                        font-size: 2em;
                                    }
                            
                                    span {
                                        font-size: 2em;
                                    }
                                </style>
                                <p>pppp  
                                    <em>em  
                                        <span>span</span>
                                    </em>
                                </p>

pppp em span

區塊的設定
清單
list-style-image url(124.jpg) 用圖片顯示項目符號
list-style-position inside (內文左側對齊)
outside (在內文右側(預設值))
項目符號
  • 項目一
  • 項目二
  • 項目三
圖片與物件
vertical-align middle 垂直位置 , 置中
float left
right
none
文繞圖 置右設定在圖片上或文章上都會有不一樣的效果

有文繞圖動作時..要指定width , 否則width預設是100%..那文繞圖就失效了..

一個float:left
另一個float:right
也可以兩個都是left 或 兩個都是 right

圖片 圖片 這是一種被稱為"mukkuri", 由竹子製成的樂器。竹子經由切削後, 在兩端分別繫上繩子,當簧片震動便會發出聲音。而且所發出的聲音非常奇妙, 有種令人不可思議的感覺生。如果能夠熟悉操作的話, 還能夠一次吹出多個音符, 甚至是一首曲子。此外, 若能再訓練其他的吹奏技巧, 將能體驗更多不同的吹奏感受。

clear 解除文繞圖的功能 , 在要解除的文章區塊直接使用即可 left
right
both
none
filter gray
瀘鐿..以灰階顯示
IE的功能 , 未包含在CSS標準規格中.
background-image 背景圖 url(logo_white.gif)
background-repeat 重覆 no-repeat -->
repeat-x   --> 在X軸重覆
repeat-y   --> 在Y軸重覆
repeat      --> 重覆
background-position 背景圖的位置 -10px 5px
100% 50%
left center
background-attachment fixed
scroll
固定圖片 , 使它不會隨著scroll而到處跑
預設值 , 會隨著scroll到底跑
first-letter 用法：p : first-letter {......}
設定第一個字母的樣式
有像疑態類別處理器的用法

p : first-letter {
 float:left;
 font-size:3em;
 font-weight:bold;
 padding-right: 0.1em;
 color: #339900;
 background: #ffffff;
}
可用margin或padding指定圖片四周的空白

可以設定 <input> <textarea>的背景色及背景圖 , 下拉式選單無法使用背景圖 , 否則會瀏灠器錯誤
尺寸不同的圖片放在同樣大小的框裡 讓圖片好好裝在盒子裡
超連結
 a : link 未使用過的連結
 a : visited 連結過的顏色
 a : hover  滑鼠移上時的顏色
 a : active 按下滑鼠動作時  ( 放最後 , 最具優先權 )
text-decoration underline : 底線
overline : 頂線
line-through : 刪除線
none :變成不顯示底線 要上下都有就 underline overline

 a.special :link{ }  ( 表示<a class='special'> 這個標籤裡的link動作套用此樣式表 )

.special a:link { } (表示在 <div class='special'> ..</div> 類別為special的標籤內的所有超連結都套用
表格
table-layout fixed
auto
表格的顯示方式
fixed : 讀出表格的第一行寬度後便決定各行的寬度
border-collapse collapse框線為連續直線 (折疊框線)
separate框線為獨立分開 (預設)儲存格框線的顯示方式
collapse的框線為連續直線 , 適用在tr, thead, tbody, tfoot, col, colgroup
border-spacing 1em         --代表上下左右的間隔
1em 2em --1->左右間隔 , 2->上下間隔儲存格框線的間隔
empty-cells show
hide(空儲存格的顯示與否)
vertical-align top
border none
表單類
<optgroup label = " "></optgroup> 下拉式選單予以分類... 
                                    input:focus {
                                        font-size:1.5em;
                                        color:red;
                                        border:2px solid #6A5ACD;
                                    }
第二個群組欄位
< input type= "text" tabindex="1"> 用tab跳項的順序
< input type= "text" accesskey="a"> 用鍵盤的Alt + a 直接跳到這裡
其他 How To Style A Checkbox With CSS

1.