Leah's Life

幫助一開始研究 css 的網友們
css 的簡介以及基本屬性說明


★何謂 css 與標籤?

　css 為「Cascading Style Sheets」的縮寫
　中文稱為 : 串聯樣式表
　應用在網頁中可控制版面的色彩、文字、背景、排版... 等
　可使原始檔更為精簡，可縮短讀取時間唷!!

　常常聽會寫 css 的人說「標籤」，到底是什麼意思呢?
　標籤，顧名思義，就是為某個區塊貼上屬於他的標籤.
　以此標籤寫入 css 樣式後，就可以幫此區塊編輯樣式囉!!

　有些標籤是相同的，有些標籤是唯一的，怎麼分辨呢?
　開啟網頁原始檔後，常常會出現 :
　＜div id="links"＞ 或 ＜div class="box"＞
　這就代表此 div 區塊已經被貼上屬於它的標籤了
　「id」和「class」又有什麼分別呢?
　id 代表此網頁中只有唯一一個此標籤，不能有重複
　class 代表此網頁中可有數個同樣為此標籤的區塊，可以重複

　只要運用這些標籤，編輯 css 之後，頁面就可以美輪美奐了唷!!


★基本樣式指定說明

　font-size: 10px; /*文字大小，可以 px 或 pt 為單位*/
　font-family: arial; /*文字字型，一般常用為 arial 或 verdana*/
　color: #色碼; /*內容顏色，即文字的顏色，可參閱網路色碼表*/
　width: 123px; /*寬度，以 px 為單位*/
　height: 456px; /*高度，以 px 為單位*/
　background: #色碼 url(圖片網址) no-repeat fixed left top; /*背景指定*/
　　註：色碼即背景色，url(圖片網址) 請貼入圖片網址
　　　　no-repeat 表不重複顯示
　　　　可改成 repeat (重複顯示)、repeat-x (重複 x 軸)、repeat-y (y 軸)
　　　　fixed 表鎖定背景不隨捲軸捲動，刪除則反之
　　　　left top 表示圖片開始位置，表左上
　　　　可改right top (右上)、left bottom (左下)、right bottom (右下)
　　　　　　left center (左中)、right center (右中)、center top (中上)
　　　　　　center bottom (中下)、center center (置中)
　　　　或是以百分比指定位置 100% 100% 表最右下，0% 0% 最左上
　　　　前者為 x 軸指定，後者為 y 軸指定
　　　　↑ 也可用 px 微調或精確指定背景位置
　line-height: 18px; /*行高，可以 px、pt、百分比為單位*/
　border: 1px solid #色碼; /*框線指定*/
　　註：依序為「框線粗細」、「框線樣式」、「框線顏色」
　　　　solid 表直線，dotted 表點線 (2px以上較為明顯)
　　　　dashed 表虛線，double 表雙框線 (3px以上較為明顯)
　　　　此為整圈框線指定，可分開指定上下左右之框線~
　　　　border-top: ; /*上框線*/
　　　　border-bottom: ; /*下框線*/
　　　　border-left: ; /*左框線*/
　　　　border-right: ; /*右框線*/
　padding: 10px 20px 10px 20px; /*區塊空白距離*/
　margin: 5px 0px 5px 0px; /*區塊邊界距離*/
　　註：空白與邊界怎麼分別?
　　　　簡單說來就是此區塊框線外與內的空白距離唷!!
　　　　欲指定框線外的距離，即 margin
　　　　欲指定框線內的巨哩，即 padding
　　　　依序是 : 上、右、下、左，若為 margin: 5px; 即上下左右皆 5px
　　　　也可以分開指定上下左右~
　　　　padding-top、margin-left:;... (與框線設定方式相同，以此類推)
　text-align: left; /*文字靠左對齊*/
　text-align: right; /*文字靠右對齊*/
　text-align: center; /*文字置中對齊*/
　letter-spacing: 1px; /*文字間距*/
　　註：使用文字間距時，斷行會出現要 enter 兩次才可順利斷行的問題
　　　　此時可以在樣式表加入 br { letter-spacing: 0px; } 解決

--
以上，待續
可參考各大教學網站