css學習小記（一）
1.em單位是相對於包含它的規則而言
2.css用於將網頁的內容與表現分離，所有的核心，框架性的內容放在（x）html檔案中，而實際樣式則是放在樣式表文件中
3.關於顏色：http://en.wikipedia.org/wiki/Web_colors
web安全顏色主要有216種，表示在任何平臺上都能正常地顯示216種顏色,當然會逐漸被淘汰
css語言和HTML4規範一樣都定義了16種具名顏色。加上css2.1新增的orange，一共是17種具名顏色。如圖：
| 黑色（black） | #000000 |
| 藏藍色（navy） | #000080 |
| 綠色（green） | #008000 |
| 海藍色（teal） | #008080 |
| 銀色（silver） | #c0c0c0 |
| 藍色（blue） | #0000ff |
| 酸橙色（lime） | #00ff00 |
| 淺綠色（aqua） | #00ffff |
| 絳紫色（maroon） | #800000 |
| 紫色（purple） | #800080 |
| 橄欖色（olive） | #808000 |
| 灰色（gray） | #808080 |
| 紅色（red） | #ff0000 |
| 紫紅色（fuchsia） | #ff00ff |
| 黃色（yellow） | #ffff00 |
| 橙色（orange） | #ffa500 |
| 白色（white） | #ffffff |
4.關於web調色盤的一些基礎網站。
ColorBlender:http://colorblender.com
Color Palette Generator: www.degraeve.com/color-palette/index.php
Color Lovers:www.colourlovers.com
Color Scheme Generator 2 :wellstyled.com/tools/colorscheme2/
深入的站點：
www.web-colors-explained.com
http://en.wikipedia.org/wiki/Web_colors
5.gif格式是背景影象最理想的影象格式，它通過使用特有的壓縮模式使得檔案大小達到最小
gif一般用來儲存那些具有純淨顏色塊得影象，比如說簡單的logo或者簡單的模式，對於大影象而言，它主要用來儲存不帶漸變色的影象
jpeg一般採用照片影象的有失真壓縮的標準方法，在反覆的編輯和儲存過程中，jpeg檔案將逐漸退化，這一點和對照片副本進行再複製有點像，照片影象最好是以無損的非jpeg格式儲存，如tiff
6.背景影象：
重複：background-repeat：no-repeat/repeat-x/repeat-y/
定位：background- position：top left/top center/top right;center left/center center/center right;bottom..
x-%/y-%;x-pos/y-pos
粘連：background-attachment：scroll/fixed
縮寫：background：顏色、影象、位置、重複
7.列表：
無需列表本身距離容器的上邊框約10畫素（預設margin）。大部分瀏覽器將列表項置於距離無序列表左邊框30畫素處（預設padding）；
內聯列表（display:inline） 不顯示預設列表專案符。
特定列表專案符：list-style-type
預設情況下，列表以小實心圓作為列表專案符，即使容器沒有內部padding，列表距左邊框也約有30畫素。列表專案符一下五種經常使用：
none;disc;circle;square;latin;
另外三種：
upper-alpha：A,B,C,D,E
lower-alpha:a,b,c,d,e
upper-roman:I II III IV
ul設定的是它的第一級子列表的顏色，背景影象需要在每一級列表中設定。
ul{
color:#000;
font-size:20px; //或者字型也可以在li中進行設定
}
li{
background-image:url(pic/o.gif);
}
8.表格
使用表格的訣竅是，只在必要的時候使用表格，然後將它們設計的完全可以理解並且看上去非常漂亮。
表格易於訪問的適當要求：《web Accessibility：web standards and Regulatory compliance,Jim Thatcher等著【friends of ED,2006】包括了一些可訪問表格的重要資訊。
【樣式表在使用的過程中一定要考慮被移除後出現的後果，這是一種比較成熟的設計思維】
各自都有定義的那一條宣告，可以在公共宣告中刪除。
border-color:#ccc #666 #000 #ccc ------------灰色邊框
border-color:#fff #aaa #666 #fff--------------三維邊框
css不使用外邊距來新增間隔；
有關表格模型和相關瀏覽器的支援資訊，在www.w2.org/TR/REC-CSS2/tables.html中可以檢視
border-collapse：collapse可以消除表格之間的間隔
類主要是用來在整體中修改區域性的。
padding是為了讓元素內部的內容看起來不聚成一團，更舒展一些。
margin是用來定義元素與元素之間的距離。
9.定義列表
所有的定義列表由三個基本元素組成：容器<dl>，定義項<dt>，定義描述<dd>;
定義列表十分靈活，與無序列表合用，功能會更強大。但記住，搜尋引擎一般不把定義列表的內容用期望的方式編入索引中。主要是因為雖然給<dt>定義了樣式，但是Google並不把它看看成是標題。
可以在定義描述中使用塊級元素，但不能在定義項元素中使用塊級元素。
推薦閱讀：Max Design網站： www.maxdesign.com.au/presentation/definition，上的Definition lists-misused or misunderstood這篇文章。有很多經典css應用的例子
10.表單
一、和HTML不同，XHTML要求所有的<input>元素都要有一個自封閉的斜槓。
text
maxlength
size
checkbox
radio
<input type="submit" />
<textarea></textarea>
<select></select>
為了保證表單設計的靈活性，以及希望一些視力較差的甚至盲人使用者也能使用表單，以下的元素比較有效
<fieldset>主要目的是將<input>域按節分組，相當於一個容器。在預設情況下，<fieldset>在內容周圍畫一個簡單的邊框，以定義表單節。不用說，由於<fieldset>擔當了主父元素，它需要承擔很多應用到表單的樣式。
<legend>元素的功能與用於識別表格的<caption>元素作用很相似。
<lable></label>可以確保表單有輸入焦點，並且具有良好的結構
tabindex屬性允許使用者只用鍵盤（通常用Tab鍵）來導航表單元素的輸入焦點。通常按照數字順序，為每個屬性給一個數字值。tabindex是覆蓋瀏覽器預設的順序並指定你所希望的順序的工具。
accesskey
二、表單在不同的瀏覽器上有不同的顯示方式，而且他們也給form元素應用了它們各自特定的margin和padding值。
設定width=100%可以保證所有的輸入元素延伸並填滿包含他們的元素
關於表單的推薦閱讀：《styling Form Controls》（www.456bereastreet.com/archive/200409/styling_form_controls）Roger Johansson
11.文字的屬性
大小（font-size），顏色(font-color)，字型(font-family)
行距（line-height:150%），間距（letter-spacing:2px）
font-weight:bold，font-style:normal/italic/oblique
大小寫字母：font-variant：normal/small-caps （用於將文字顯示為小型大小寫字母）
text-transform：none/uppercase（用於將所有的字元顯示為大寫字母但是不縮小字號）/capitalize(可以保證任何單詞的首字元都顯示為大寫字元)
12.padding縮寫為padding:2px 10px;時，表示上內邊距為2px，左內邊距為10px。
容器A和容器B，容器B在容器A中，注意設定容器A的內邊距和設定容器B的外邊距的區別。