|
網(wǎng)站建設(shè)是指使用標(biāo)識(shí)語言（markup language)，通過一系列設(shè)計(jì)、建模、和執(zhí)行的過程將電子格式的信息通過互聯(lián)網(wǎng)傳輸，最終以圖形用戶界面（GUI）的形式被用戶所瀏覽。簡(jiǎn)單來說，網(wǎng)頁(yè)設(shè)計(jì)的目的就是產(chǎn)生網(wǎng)站。簡(jiǎn)單的信息如文字，圖片（GIF，JPEG，PNG）和表格，都可以通過使超文件標(biāo)示語言、可擴(kuò)展超文本標(biāo)記語言等標(biāo)示語言放置到網(wǎng)站頁(yè)面上。
您可以利用下列 3 種方式，將 CSS 指定的格調(diào)加諸于網(wǎng)頁(yè)上：
1. 在 HTML 檔案里加一個(gè)超連結(jié)，連到外在的 CSS 檔
這個(gè)方法最方便管理整個(gè)網(wǎng)站的網(wǎng)頁(yè)風(fēng)貌。它讓網(wǎng)頁(yè)的文字內(nèi)容與版面設(shè)計(jì)分開。您只要在一個(gè) CSS 檔內(nèi)（副檔名為 .CSS）定義好網(wǎng)頁(yè)的外觀風(fēng)格，所有參考連結(jié)到此 CSS 檔的網(wǎng)頁(yè)，便會(huì)依照指示，反應(yīng)出定義好的風(fēng)格。
它的寫法是： <HTML>
<HEAD>
<TITLE>
本頁(yè)標(biāo)題
</TITLE>
<LINK REL="stylesheet"
起來。此外，第三例中的 monospace 是用來指定寫程序碼時(shí)使用的等距字體。
{font-weight: bold}
此屬性用來指定字體的粗細(xì)。畫底線的部分可以使用下列 2 組表示法來替換之：
* normal, bold, bolder, lighter
* 100, 200, 300..........900
此屬性的內(nèi)定值為 normal。
參考范例：
H1 {font-weight: bolder}
BLOCKQUOTE {font-weight: 200}
{font-size: medium}
此屬性用來指定字體的大小。畫底線的部分可以使用下列 4 組表示法來替換之：
* 絕對(duì) size: xx-small, x-small, small,medium, large, x-large, xx-large
* 相對(duì) size: larger, smaller（與母標(biāo)簽相對(duì)比）
* 字體的點(diǎn)數(shù) (point): 12pt,16pt, 20pt....
* 百分比: 80%, 120% .... （與母標(biāo)簽相對(duì)比）
此屬性的內(nèi)定值為 medium。
參考范例：
BODY {font-size: medium}
H1 {font-size: 18pt}
H2 {font-size: 90%}
{font-style: normal}
此屬性用來指定字體的正體或斜體。畫底線的部分可以使用 normal, italic, oblique (僅 IE4 支援 oblique） 來替換之。
此屬性的內(nèi)定值為 normal。
參考范例：
H4 {font-style: italic}
P {font-style: oblique}
{font: 12pt/14pt}
此屬性用來指定字體的大小與每行行距的高度。上例中，12pt 指的是字體的大小，14pt 指的是行距的高度。
事實(shí)上，{font: … } 可以集結(jié)所有跟 font 有關(guān)的擴(kuò)充屬性在此標(biāo)簽內(nèi)，所以您除了在 {font: … } 內(nèi)指定字體大小與行距高度外，還可以在此標(biāo)簽內(nèi)加入所有上述介紹過的屬性。
參考范例：
P {font: italic bold 12pt/14pt}
STRONG {font: 14pt/18pt bolder italic Times, serif}
CSS 中 Color 的擴(kuò)充屬性
{color: red}
此屬性用來指定字體的顏色。畫底線的部分可以用各式各樣的顏色來替換之。您可以使用16 進(jìn)位顏色碼表示（如：#00ff77）或利用瀏覽器既定的英文單字表示顏色（如：gray, blue..... 詳細(xì)請(qǐng)見： Table 的擴(kuò)充屬性 ）。
如果您指定的顏色如同 #00ff77 一般，是兩位數(shù)字、兩位數(shù)字重覆組成的話 (00, ff,77 而非 03, 8f,7e ) ，您可以直接使用 #0f7簡(jiǎn)化表示之。
參考范例：
BLOCKQUOTE {color: navy}
LI {color: #eedd44}
LI {color: #ed4}
P {color: #007f3a}
{background-color: red}
此屬性用來指定整個(gè)網(wǎng)頁(yè)的背景顏色，或某一段落，某一區(qū)塊的背景顏色。畫底線的部分可以用各式各樣的顏色來替換之。您可以使用16 進(jìn)位顏色碼表示（如：#00ff77）或利用瀏覽器既定的英文單字表示顏色（如：gray, blue..... 詳細(xì)請(qǐng)見： Table 的擴(kuò)充屬性 ）。
如果您指定的顏色如同 #00ff77 一般，是兩位數(shù)字、兩位數(shù)字重覆組成的話 (00, ff,77 而非 03, 8f,7e ) ，您可以直接使用 #0f7簡(jiǎn)化表示之。
參考范例：
BODY {background-color: #ed4}
BLOCKQUOTE {background-color: navy}
H2 {background-color: #007f3a}
{background-image: url (/images/xyz.gif)}
此屬性用來指定網(wǎng)頁(yè)或某一區(qū)塊的背景圖案。畫底線的部分可以使用圖檔的絕對(duì)位置或相對(duì)位置來表示之。
使用此標(biāo)簽時(shí)，最好同時(shí)也指定一個(gè)類似的顏色做背景顏色。
參考范例：
BODY {
background-image: url (/images/2T_logo.gif);
background-color: #ededff
}
LI {
background-image: url (http://www.2T.com/2T_logo.gif);
background-color: #cef
}
{background: (…)}
此標(biāo)簽可以集結(jié)所有跟 background 有關(guān)的擴(kuò)充屬性在此一標(biāo)簽內(nèi)，所以您可以將所有上述介紹過的 background 屬性一起加進(jìn)來。
參考范例：
BODY {background: white url (/images/2T_logo.gif) repeat-y}
LI {background: #cc88ff url (http://www.2T.com/2T_logo.gif) no-repeat}
CSS 中 Text 的擴(kuò)充屬性
{text-decoration: none}
此屬性用來指定文字是否畫有底線或被線條杠掉（如：被線條杠掉此例）。畫底線的部分可以用 none, underline, line-through 來替換之。
此屬性的內(nèi)定值為 none。
參考范例：
P {
color: navy;
text-decoration: none
}
A:link, A:visited, A:active {
text-decoration: underline
}
{text-align: left}
此屬性用來指定文字是向左、向中、或向右對(duì)齊。畫底線的部分可以用 left, right, center, justify 來替換之。
參考范例：
P {text-align: left}
H1 {text-align: center}
{text-indent: 2cm}
此屬性用來指定文字向右凹進(jìn)去多少公分、厘米、英寸、點(diǎn)數(shù)(point)、圖素(pixel)、或多少 % 。測(cè)量單位可以用 cm, mm, in, pt, px, %來表示之。 % 是以母標(biāo)簽來相對(duì)比。
參考范例：
P {text-indent: 3cm}
LI {text-indent: 60px}
BLOCKQUOTE {text-indent: 20%}
{line-height: 14pt}
此屬性用來指定每行行距的高度。line-height 常與字體大小 font-size 一起并用，寫成 12pt/14pt (12pt 指的是字體的大小，14pt 指的是行距的高度)。line-height也可以用 % 表示之。 % 是以母標(biāo)簽來相對(duì)比。
參考范例：
BODY {
font-size: 12pt;
line-height:14pt
}
H1 {
font-size: 150%;
line-height: 200%
}
H4 {font: 16pt/20pt bold italic}
CSS 中 Margin, Padding 的擴(kuò)充屬性
{margin: 3cm}
此屬性用來指定網(wǎng)頁(yè)的上下左右邊緣，各需留白多少公分、厘米、英寸、點(diǎn)數(shù)(point)、圖素(pixel)、或多少 % 。測(cè)量單位可以用 cm, mm, in, pt, px, %來表示之。 % 是以母標(biāo)簽來相對(duì)比。
margin 可以用 margin-top, margin-bottom, margin-left, margin-right來替換之。
此屬性的內(nèi)定值為 0。
參考范例：
BODY {
margin-top: 44px;
margin-bottom: 2cm;
margin-left: 66px;
margin-right: 1.5in
}
P {margin: 15pt}
{padding: 14px}
此屬性用來指定各段落或各區(qū)塊間，上下左右邊緣各需留白多少公分、厘米、英寸、點(diǎn)數(shù)(point)、圖素(pixel)、或多少 % 。測(cè)量單位可以用 cm, mm, in, pt, px, %來表示之。 % 是以母標(biāo)簽來相對(duì)比。
padding 可以用 padding-top, padding-bottom, padding-left, padding-right來替換之。
此屬性的內(nèi)定值為 0。IE3 不支援所有與 padding 相關(guān)的標(biāo)簽。
參考范例：
BODY {margin: 15pt}
DL {
padding-top: 22px;
padding-left: 20%;
}
大多數(shù)人在上網(wǎng)的時(shí)候，都會(huì)瀏覽網(wǎng)頁(yè)提供給我們的信息。
|
