web前端學習筆記，實踐篇（三）CSS基礎屬性

權重值：

　　1.一個標籤的值是1分。

　　2.一個類別選取器的值是10分。

　　3.一個ID選取器的值是100分。

　　4.一個內建樣式的值是1000分。

權重的問題，在於，如果一個樣式屬性中設定有三種字型，或者三種顏色，那麼最後決定於誰作用於標籤中呢？這就是權重的問題。在CSS中已經提供了一套公式，來確定究竟由誰的值來賦給所在的標籤，如下是列子：

<h1 id="de" class="dell"></h1>

h1{border:2px #000 slide;}   //1分

#de{border:4px #000 slide;}  //100分

.dell{border:4px #000 slide;} //10分

那麼在例子中，三個屬性都定義了border的邊框，通過權重值的計算，最後勝出的永遠是ID。於是邊框上會有了4像素而且是黑色的視覺反饋。

初始化字資訊：

字型：font-family:Arial; font-family:微軟雅黑; 如果需要對字型有詳細的研究，請參閱http://www.codestyle.org/font-family

文本顏色：

　　color:#3e8888;【可以用photoshop工具取色】 十六進位顏色。

　　color:rgb(100%,100%,100%)。color:aqua;

　　【顏色取值請參閱網頁設計師色澤書籍】這個，親們，我就不介紹了，因為我是專門寫js滴...

字型大小：

　　font-size:12px;【國內用像素值的多】

　　font-size:1em;【em單位在國外用的多】

　　font-size:100%;百分比用於字型大小，這個屬性，隨著遊覽器定義好的字型大小而來。

　　font-size:large;【關鍵字】

格式化字型：

　　font-style:italic; 斜體

　　font-style:normal; 非斜體

　　font-weight:bold;加粗

　　text-transform: //這個屬性用於字母大小寫

　　text-decoration: //這個樣式有四個屬性，比如底線，中間線，無底線等等。underline,overline,line-through blink none

 　  letter-spacing:像素值；這個屬性是控制文字間距離

 　  text-align: //這個屬性常用的三個屬性 center left right 置中，左對其，靠右對齊

 　  text-index:像素值；這個屬性用於縮排

其他屬性請詳細參閱《CSS權威指南第三版》

 盒模型的概念：

 

在HTML中DIV SPAN這樣的標籤，可以用塊級來表示，整個模型中，margin padding 來標識外內邊距來控制。例子如下：

.de{width:1322px; height:679px;}

<div class="de"></div> 

可以把它看作一個盒子，寬是1322，高是679的盒子，margin屬性，可以控制這個盒子與另一個盒子的距離。而padding屬性則是控制盒子裡的內容與盒子的距離。

注意：盒模型的概念，對於DHTML的開發至關重要

盒模型概念，請參閱《CSS權威指南第三版》