css
■ FONT-FAMILY屬性：
每部機器上都裝有多種字型，瀏覽器會使用預設的字型瀏覽網頁，比如簡體中文版WINDOWS漢字預設是宋體，英文預設是ARIAL。 使用FONT-FAMILY屬性則可以規定瀏覽器用什麼字型解讀網頁。
■ FONT-FAMILY文法執行個體：
h2 {font-family:times,impact,sans-serif}
說明如下:
helvetica是瀏覽器首先尋找的字型名稱，如果有就使用它。在helvetica字型沒有找到的情況下，則會尋找impact字型，如果找到就使用它。如果以上兩種字型都沒有找到，則指示瀏覽使用sans-serif（通用字型）。在你不能保證你列出的字型瀏覽者一定會安裝時，將一種通用字型加在字型列表中是一種好的做法。因此我們提倡使用最基本的字型製作網頁，比如中文用宋體，英文用ARIAL，這樣使得你的網頁不會因為瀏覽器沒能使用合適的字型解讀而變樣。
■ 其它相關內容：
- 通用字型有以下幾類，其中cursive和fantasy不被NC支援：
- "serif"(比如Times);
- "sans-serif"(比如Helvetica);
- "cursive"(比如Comic Sans);
- "fantasy"(比如Western);
- "monospace"(比如Courier)
- 其他使用事項：
- 如果一種字型的名稱中有空格，如"Times New Roman"，在CSS語句中要用引號包含該字型。
- 例：Body {font-family:"Times New Roman",serif}
- 如果該語句已在雙引號裡，則字型名降級為單引號。
- 例：<P style="font-family:'Times New Roman',serif">
- 如果該語句包括其它CSS規則，字型說明應放在最後。
- 例:H2 {color:red;margin:10px;font-family:"Times New Roman",serif}
■ 繼承：
繼承：就是在子項目沒有定義樣式的情況下，它將採用上一級元素的樣式定義。
優先順序：根據繼承來理解優先順序也就容易。最近的樣式優先順序最高。 比如:
CSS在<heda>聲明 I{font-family:impact}；
但在HTML語句中又如下定義：<P> 要顯示的文字在<I><font face="Times">這裡</font></I></P> 在此例中樣式表要求用IMPACT字型，而FONT標記要求用TIMES字型，最終瀏覽器使用的會是TIMES。作為CSS標準制定者，要求將CSS優先，他們認為像以上的例子中應該用IMPACT字型。可以瀏覽器產商照顧使用者的舊習慣，使用了FONT標記中的字型，儘管FONT已不被提倡。
■ 更好的方法--關聯：
我並講不出拋棄FONT標記的理由，只知道這是潮流。顯然CSS提供更好的方法避免你在像上面的例子一樣使用FONT標記，那就是： 關聯。 可以在HEAD部分的CSS定義中加入如下行： P I {font-family:times} /*P和I之間的空格不能少*/
在HTML中： <P>要顯示的文字在<I>這裡</I></p>
雖然你沒有使用FONT FACE，但根據HEAD部分的CSS定義，P標記裡的I標記使用的字型一定是TIMES。要提起注意的是那行CSS樣式只作用於P標記裡的I標記。
■ 大小控制方法：
以下是控制文字大小的三種方法：
- 使用大小單位，pt(點),px(像素),em,及其他單位；
- 使用關鍵字(xx-small,x-small,small,medium,large,x-large,xx-large)；
- 使用比例參數(150%等)。
例如：
- p {font-size:12pt};
- p {font-size:large};
- p {font-size:200%};
■ 字型風格：
- 斜體 p {font-style:italic};
- 粗體 p {font-weight:bold};
在字重的設定方面，還有lighter(更輕)和bolder(更重)，還可以使用數字100,200到900最重。
字型風格和字重都有一個共同的參數normal，一旦設為normal也就取消了字重和風格設定。
■ FONT-VARIANT：
FONT-VARIANT 可以將正常文字尺寸縮小一半後轉為大寫：
- h2 {font-variant:small-caps}
■ TEXT-TRANSFORM：
完全控制字母大小寫：
- 全部大寫：h2 {text-transform:uppercase};
- 全部小寫：h2 {text-transform:lowercase};
- 單詞第一個字母大寫：h2 {text-transform:capitalize};
- 取消所有設定：h2 {text-transform:none};
■ TEXT-DECORATION：
哪天你突發奇想，希望連結沒有底線，現在你可以做到：
- 文字底線：A:link{text-decoration:underline};
- 文字上劃線：A:link{text-decoration:overline};
- 文字刪除線：A:link{text-decoration:line-through};
- 文字閃爍：A:link{text-decoration:blink};
- 不要任何效果：A:link{text-decoration:none}
■ 字間距：
利用字間距屬性word-spacing，可以調整單詞間的距離。
■ 字母間距： 利用字母間距屬性letter-spacing，可以調整單詞中每個字母間的距離。
- h2 {letter-spacing:10pt};
■ 行高： 與字距不同的是行距line-height，它調整的是行與行間垂直方向的距離，有三種方法設定：
- 數值：h3 {font-size:12pt; line-height:2};/*此處line-height=2x12pt=24pt */
- 長度單位：h3 {font-size:12pt; line-height:24pt};
- 比例：h3 {font-size:12pt; line-height:200%};
無論是字距或字母間距或行距都有一個共同的參數：normal，一旦設為normal就是要瀏覽器使用預設值。
■ 水平對齊：
利用文字對齊屬性text-align，可以控制段落的水平對齊：
- h2 {text-align:center}
- h2 {text-align:left}
- h2 {text-align:right}
這項屬性可作用於<P>,<h1>-<h6>,<blockquote>和<ul>標記。
■ 垂直對齊：
利用垂直對齊屬性vwrtical-align，可以控制對象（包括文字或圖形）相對於母體的垂直位置：
- h2 {vertical-align:top}
- h2 {vertical-align:text-top}
- h2 {vertical-align:bottom}
- h2 {vertical-align:text-bottom}
- h2 {vertical-align:baseline}
- h2 {vertical-align:middle}
- h2 {vertical-align:sub}/*上標*/
- h2 {vertical-align:super}/*下標*/
這些屬性具體對齊效果如何，希望大家自已去實驗。
■ 首行縮排：
首行縮排text-indent，在文檔排版中經常用到：
- h3 {text-indent:24pt}; ■ 容器的概念：
根據CSS對網頁樣式的定義，頁面上的所有元素都放在一個容器裡，這個容器叫BOX。BOX也就包括：
- 元素本身；
- 圍繞元素的空格；(padding)
- 圍繞元素空格外的邊框；(border)
- 邊框外的邊距。(margin)
■ 四個邊距： margin用於設定上，右，下，左，邊距：
- body {margin-top:10px;margin-right:20px;margin-bottom:30px;margin-left:40px}
- body {margin:10px 20px 30px 40px}/*效果與上面方式相同*/
以上參數值同樣可以是其他長度單位（如：pt,em等）或比例。
■ 頂，底，左，右空格填充：
padding用於設定空格填充範圍，用法與邊距屬性相同：
- h3 {margin-top:10px;margin-right:20px;margin-bottom:30px;margin-
left:40px};
- h3 {margin:10px 20px 30px 40px}
■ 邊框： border可設定的屬性很多，包括顏色和寬度，關鍵是可以指定每個邊的寬度和每個邊的顏色 。
- 邊框寬度border-width可以是thin,medium,thick或長度值：
- h3 {border-top-width:2px;border-right-width:4px;border-bottom-width:6px;border-left-width:8px};
- h3 {border-width:2px 4px 6px 8px}/*與上面相同*/
- p {border-top-width:thin;border-right-width:medium;border-bottom-
width:thick;border-left-width:none};
- p {border-width:thin medium thick none}/*與上面相同，左邊框將不顯示*/
- 邊框顏色border-color定義方法與寬度定義相似，顏色值也可以用RGB值（如#ff00ff）：
- h3 {border-color:red blue yellow green}/*上:紅；右：藍；下：黃；左：綠*/
- h3 {border-color:red blue }/*上，下:紅；右，左：藍；*/
- h3 {border-color:#ff00ff }/*所有邊框為#ff00ff色*/
- 邊框線的線條式樣border-style，有九個關鍵字來描述：
- none /*不畫邊框，不論邊框厚度是多少*/
- dotted /*由點組成的虛線*/
- dash /*由短線組成的虛線*/
- solid /*實線 */
- double /*雙實線*/
- groove /*3D溝狀*/
- ridge /*3D脊狀*/
- inset /*3D內嵌*/
- outset /*3D外嵌*/
其使用方法與厚度、顏色相似，不再多講。
- 一條邊框的顏色，厚度，線條式樣可以在一條語句中定義。例：
- h1 {border-top:5px solid red}
這麼多的參數，這麼多的組合，要想得心應手，不下一番功夫去練習是不可能達到的。
■ 背景顏色：
background-color，用它可以指定整個網頁的背景顏色，也可以是某一個單詞。在傳統的HTML中要將背景顏色應用到一段文字上是一件麻煩事，要將文字放在表格中再設定表格的背景。CSS使之變得非常容易。
P.colorback {background-color:#ff0000}
顏色可以是顏色名(如red)、十六進位數(如#ff0000)、RGB值(如RGB(255,0,0))。
■ 背景圖片：
background-image，用它可以指定整個網頁的背景圖片(將它放在BODY標籤內)，也可以是某一個單詞。
- background-repeat 是否迴圈背景
- p {background-repeat:no-repeat;background-image:url(background.gif)}/*不迴圈*/
- p {background-repeat:repeat;background-image:url(background.gif)}/*迴圈*/
- background-attachment 是否固定背景
- body {background-attachment:scroll;background-image:url(background.gif)}/*隨文字一起滾動*/
- body {background-attachment:fixed;background-image:url(background.gif)}/*固定不動*/
P.colorback {background-color:#ff0000}
顏色可以是顏色名(如red)、十六進位數(如#ff0000)、RGB值(如RGB(255,0,0))。
■ 背景定位：
background-position用於設定背景的位置：
- p {background-position:top;background-image:url(background.gif)};
background-position其參數可以是關鍵字、長度數、比例值。
- 關鍵字;
- top /*背景映像與前景對象的頂部對齊*/
- bottom /*背景映像與前景對象的底部對齊*/
- left /*背景映像與前景對象的左邊對齊*/
- right /*背景映像與前景對象的右邊對齊*/
- center /*與前面四個任一個組合，變成水平或垂直置中*/
- 長度數；
- 可以是任何一種以前學過的長度單位(pt,px,ems...)，例如：
p{background-position:100px 50px;
background-image:url(background.gif)}表示從左上方起水平100像素，垂直50像素的位置擺放。
- 比例值；
- 例如：p{background-position:85% 50%;
background-image:url(background.gif)}
表示從距離段落的右邊85%，垂直距離段落頂端50%的位置擺放。
