HTML+CSS樣式設定——CSS一學就會
HTML+CSS樣式設定
CSS：（Cascading Style Sheets）層疊樣式設定表。
網頁的展示效果跟其排版有很大的關係。排版則主要依靠CSS來設定、調節。
下面說CSS與HTML的聯合使用的過程：
（1）新建CSS檔案（一般放在與HTML檔案同一路徑下的css資料夾中）。
（2）在HTML的<head>標籤中，用<link />對CSS進行引用
<link rel=”stylesheet” type=”text/css” href=”檔案地址/css檔名.css” /> 。
（3）根據HTML的標籤或識別符號，在
CSS的基本語法為：選擇器（Selector）、屬性（Property）和屬性值（Value）
程式碼形式為：selector{property：value} 。
主要的選擇器：tag標籤（html自身的標籤）、class識別符號（自定義）和id識別符號（自定義）
選擇器使用語法為：
（1）tag標籤直接使用標籤後跟{}，例body{}、table{}、p{}、font{}等。
（2）Class識別符號，用“.識別符號{ 屬性:屬性值; }”的形式，例 .xs{ color:blue; } 。
（3）id識別符號，用“
補充：tag標籤選擇器在使用時，若多個標籤設定相同效果，可聯合寫。將多個標籤用空格隔開用一個{}進行設定即可，不同的效果可單獨外加設定。例table tr
td{ color:red }。
舉例：
HTML程式碼：
<html> <head> <title>網頁標題</tiltle> <link type=”text/css” rel=”stylesheet” </head> <body> <div id=”all”> <table><!--建立一個表格，1行2列--> <tr> <td class=”set”>第1行第1列 內容</td> <td>第1行第2列 內容</td> </tr> </table> </div> </body> </html>
CSS程式碼：
/*id識別符號·示例*/
#all{
Background-color:#F0F0F0; /*設定背景顏色為淡灰色*/
width:600px; /*設定這個版塊的寬度為600畫素*/
height:700px; /*高度為700畫素*/
}
.set{ /*針對第1行第1列樣式設定*/
text-align:center; /*文字居中*/
font-weight:bold /*文字加粗*/
}
table{ /*對錶格整體進行樣式設定*/
width:500px; /*設定表格的寬度為500畫素*/
height:400px; /*表格高度400畫素*/
}常用的3種為：
（1）直接寫在標籤中，如
<table style=”border-left-width:2px ”></table> /*設定表格左邊框寬度為2畫素*/（2）寫在<head>中，語法為：
<style type=”text/css”>
p{ text-align:center; } /*設定p標籤的文字居中*/
</style>（3）儲存為外部.css檔案，通過<link />語句引用。例
<link rel=”stylesheet” type=”text/css” href=”css/setTable.css” /> 樣式表setTable.css檔案放在css資料夾中。
這裡抽出重點，將CSS的大體框架簡要介紹，目的在於能輕鬆入手，或在長時間未用的情況下，瞅上一眼能回憶起。CSS有豐富的處理效果設定，若全貼於本文，那就成了殺手了。因此，再次埋一個望遠鏡——CSS的詳細處理效果，建議簡要瀏覽