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; } 解決 -- 以上，待續 可參考各大教學網站