您可以利用下列 3 種方式,將 CSS 指定的格調加諸于網(wǎng)頁上:
1. 在 HTML 檔案里加一個超連結,連到外在的 CSS 檔
這個方法最方便管理整個網(wǎng)站的網(wǎng)頁風貌。它讓網(wǎng)頁的文字內(nèi)容與版面設計分開。您只要在一個 CSS 檔內(nèi)(副檔名為 .CSS)定義好網(wǎng)頁的外觀風格,所有參考連結到此 CSS 檔的網(wǎng)頁,便會依照指示,反應出定義好的風格。
它的寫法是:
HREF="http://www.xyz.com/xyz.css";
TYPE="text/css">
此種方法 Navigator4 支援得仍十分 Buggy,請小心使用。
2. 在 HTML 檔案的 ....... 標簽間,加一段 CSS 的敘述文
這個方法適用于指定某個網(wǎng)頁,除了展現(xiàn)外在的 CSS 檔定義好的網(wǎng)頁風格外,同時還要展現(xiàn)本身 HTML 檔內(nèi)加注的 CSS 。
如果內(nèi)在加注的 CSS 敘述與外在連結的 CSS 敘述相沖突的話,網(wǎng)頁的展現(xiàn)將以內(nèi)在加注的 CSS 敘述為主。
它的寫法是:
開始本頁內(nèi)容…
特別值得注意的是,為了防止不支援 CSS 的瀏覽器誤將 標簽間的 CSS 風格敘述當成普通字串,而展現(xiàn)于網(wǎng)頁上,您最好將 CSS 的敘述文字插入 標簽之間。
3. 在 HTML 檔的字里行間中,隨時有需要,隨時加一小段 CSS 的敘述指定
這個方法適用于指定網(wǎng)頁內(nèi)的某一小段文字的呈現(xiàn)風格。
導覽器除了會展現(xiàn)出外在的 CSS 檔與此 HTML 檔 內(nèi)定義的 CSS 風格(如果有的話),同時還會展現(xiàn)字里行間的 CSS 風格。
如果字里行間的 CSS 敘述與 內(nèi)在定義的 CSS 或外在連結的 CSS 敘述相沖突的話,導覽器的展現(xiàn)將以字里行間的 CSS 敘述為主。
它的寫法是:
它的寫法是:
開始本頁內(nèi)容…
上述的 3 種 CSS,可以同時并用,也可以擇您所好,單一或成雙地使用。如果各 CSS 間的敘述相沖突,則內(nèi)在定義的 CSS 會蓋過外在連結的 CSS ,字里行間的 CSS 會蓋過 內(nèi)在定義的 CSS 。
這樣一層一層地推展、補充下來,使得「階層性格調控制」清楚又有效率地幫助網(wǎng)頁設計者,一方面中央統(tǒng)籌整個網(wǎng)站的網(wǎng)頁風貌,另一方面又可以隨著各個網(wǎng)頁、各個文字段落的特別需要,而分別調配不同的格調。十分有條不紊,十分方便管理,所以稱之為「階層性」的格調控制。
CSS 語言的基本語法
CSS 的語言與網(wǎng)頁排版語言 HTML,在內(nèi)容上有一點點類似重覆,但是語法卻大不相同。它的基本語法是: H1 {font-size: 16pt;
font-weight: bolder;
color: red}
上例中,H1表示您想要界定的標簽元件為 H1,font-size、font-weight、color 這些擴充屬性則表示您想指定 H1 應該長成什么模樣。在上例中,我界定我的 H1 應該展現(xiàn)出字體大小 16 點,特粗黑體,紅色的模樣。
簡化之
因此,順著這個基本寫法,我們可以繼續(xù)定義其他的標簽元件: H1 {font-size: 16pt;
font-weight: bolder;
color: red}
H2 {font-size: 16pt;
font-weight: bolder;
color: red}
H3 {font-size: 16pt;
font-weight: bolder;
color: red}
上例中,H1、H2、H3 界定的標簽元件均長得一模一樣,因此我們可以將它們簡化寫成: H1, H2, H3 {font-size: 16pt;
font-weight: bolder;
color: red}
而如果您想要讓您的 H1, H2, H3 各自擁有各自不同的風格,那么您必須一筆一筆地條列說明清楚: H1 {font-size: 16pt;
font-weight: bolder;
font-family: Times, serif;
color: red}
H2 {font-size: 14pt;
font-weight: bold;
font-family: Georgia, serif;
color: green}
H3 {font-size: 12pt;
font-weight: bold;
font-family: "New York", serif;
color: gray}
另一種簡化方法
雖然在上例中, H1, H2, H3 各自擁有各自不同的風格,使得您必須一筆一筆說明清楚。但是您會注意到,我們在指定 H1, H2, H3 各自不同的風格時,其實大都是在指定 H1, H2, H3 的字體表現(xiàn)(字體大小、字體粗細、字體的形體)。因此,我們可以將所有以 font字眼開始的敘述,整合在一個 font 大項里: H1 {font: 16pt bolder Times, serif;
color: red}
H2 {font: 14pt bold Georgia, serif;
color: green}
H3 {font: 12pt bold "New York", serif;
color: gray}
特別值得注意的是,在上例中,H3 的字體使用 "New York" 字體, "New York" 是兩個字,所以必須將它 "括號" 起來。而 H1, H2, H3 的顏色規(guī)定,并不能一道并入 font 大項中,而必須另外標清楚。
順便一提的是,CSS 與 HTML 一樣,都有「注解」的符號。HTML 使用 做「注解」;而 CSS 使用 /* 這里是注解 */。
CSS 中 Font 的擴充屬性
前言:
1. CSS-Cascading Style Sheet 只能展現(xiàn)于有支援 Style Sheet 的瀏覽器內(nèi),例如:網(wǎng)景的 Navigator4 與微軟的 IE3, IE4。版本不夠新的瀏覽器顯現(xiàn)不出 Style sheet 規(guī)定的風格。
2. 本系列文章只說明介紹 Navigator4 與 IE3、IE4 瀏覽器 共同支援的 CSS1 擴充屬性。至于 W3C 詳細規(guī)定的完整 CSS1 文件,或者 網(wǎng)景 、 微軟各自支援的 CSS 擴充屬性,請到其網(wǎng)站的 Style Sheet 部門觀看。
3. CSS 的寫法使用大寫或小寫均可。
{font-family: Times}
此屬性用來指定字體的形體。畫底線的部分可以用各式各樣的字體來替換之。您可以同時指定好多種字體,以防 user 端沒有第一種字體時,可以繼續(xù)依照您的指示,選用第二、第三種字體。
參考范例:
P {font-family: Times,"New York"}
LI {font-family: "中黑體"}
BLOCKQUOTE {font-family: monospace}
特別值得注意的是,在上例中,字體 "New York" 、 "中黑體" 因為是兩個字(以上),所以必須將它們 "括號" 起來。此外,第三例中的 monospace 是用來指定寫程序碼時使用的等距字體。
{font-weight: bold}
此屬性用來指定字體的粗細。畫底線的部分可以使用下列 2 組表示法來替換之:
* normal, bold, bolder, lighter
* 100, 200, 300..........900
此屬性的內(nèi)定值為 normal。
參考范例:
H1 {font-weight: bolder}
BLOCKQUOTE {font-weight: 200}
{font-size: medium}
此屬性用來指定字體的大小。畫底線的部分可以使用下列 4 組表示法來替換之:
* 絕對 size: xx-small, x-small, small,medium, large, x-large, xx-large
* 相對 size: larger, smaller(與母標簽相對比)
* 字體的點數(shù) (point): 12pt,16pt, 20pt....
* 百分比: 80%, 120% .... (與母標簽相對比)
此屬性的內(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 指的是行距的高度。
事實上,{font: … } 可以集結所有跟 font 有關的擴充屬性在此標簽內(nèi),所以您除了在 {font: … } 內(nèi)指定字體大小與行 距高度外,還可以在此標簽內(nèi)加入所有上述介紹過的屬性。
參考范例:
P {font: italic bold 12pt/14pt}
STRONG {font: 14pt/18pt bolder italic Times, serif}
CSS 中 Color 的擴充屬性
{color: red}
此屬性用來指定字體的顏色。畫底線的部分可以用各式各樣的顏色來替換之。您可以使用16 進位顏色碼表示(如:#00ff77)或利用瀏覽器既定的英文單字表示顏色(如:gray, blue..... 詳細請見: Table 的擴充屬性 )。
如果您指定的顏色如同 #00ff77 一般,是兩位數(shù)字、兩位數(shù)字重覆組成的話 (00, ff,77 而非 03, 8f,7e ) ,您可以直接使用 #0f7簡化表示之。
參考范例:
BLOCKQUOTE {color: navy}
LI {color: #eedd44}
LI {color: #ed4}
P {color: #007f3a}
{background-color: red}
此屬性用來指定整個網(wǎng)頁的背景顏色,或某一段落,某一區(qū)塊的背景顏色。畫底線的部分可以用各式各樣的顏色來替換之。您可以使用16 進位顏色碼表示(如:#00ff77)或利用瀏覽器既定的英文單字表示顏色(如:gray, blue..... 詳細請見: Table 的擴充屬性 )。
如果您指定的顏色如同 #00ff77 一般,是兩位數(shù)字、兩位數(shù)字重覆組成的話 (00, ff,77 而非 03, 8f,7e ) ,您可以直接使用 #0f7簡化表示之。
參考范例:
BODY {background-color: #ed4}
BLOCKQUOTE {background-color: navy}
H2 {background-color: #007f3a}
{background-image: url (/images/xyz.gif)}
此屬性用來指定網(wǎng)頁或某一區(qū)塊的背景圖案。畫底線的部分可以使用圖檔的絕對位置或相對位置來表示之。
使用此標簽時,最好同時也指定一個類似的顏色做背景顏色。
參考范例:
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: (…)}
此標簽可以集結所有跟 background 有關的擴充屬性在此一標簽內(nèi),所以您可以將所有上述介紹過的 background 屬性一起加進來。
參考范例:
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 的擴充屬性
{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}
此屬性用來指定文字是向左、向中、或向右對齊。畫底線的部分可以用 left, right, center, justify 來替換之。
參考范例:
P {text-align: left}
H1 {text-align: center}
{text-indent: 2cm}
此屬性用來指定文字向右凹進去多少公分、厘米、英寸、點數(shù)(point)、圖素(pixel)、或多少 % 。測量單位可以用 cm, mm, in, pt, px, %來表示之。 % 是以母標簽來相對比。
參考范例:
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也可以用 % 表示之。 % 是以母標簽來相對比。
參考范例:
BODY {
font-size: 12pt;
line-height:14pt
}
H1 {
font-size: 150%;
line-height: 200%
}
H4 {font: 16pt/20pt bold italic}
CSS 中 Margin, Padding 的擴充屬性
{margin: 3cm}
此屬性用來指定網(wǎng)頁的上下左右邊緣,各需留白多少公分、厘米、英寸、點數(shù)(point)、圖素(pixel)、或多少 % 。測量單位可以用 cm, mm, in, pt, px, %來表示之。 % 是以母標簽來相對比。
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ū)塊間,上下左右邊緣各需留白多少公分、厘米、英寸、點數(shù)(point)、圖素(pixel)、或多少 % 。測量單位可以用 cm, mm, in, pt, px, %來表示之。 % 是以母標簽來相對比。
padding 可以用 padding-top, padding-bottom, padding-left, padding-right來替換之。
此屬性的內(nèi)定值為 0。IE3 不支援所有與 padding 相關的標簽。
參考范例:
BODY {margin: 15pt}
DL {
padding-top: 22px;
padding-left: 20%;
}