HTML4.0新語法應用-CSS探究

眾所屬目的CSS語法，在HTML4.0的標準草案出爐後，網頁的編寫即將面臨重大的改革。

網頁編寫者對於頁面文字的呈現，不外乎設定其字形、大小與顏色，但這樣的設定對文字變化較多的網頁來說，無疑是一件煩人的工作。CSS(cascading style sheets)語法的產生，就是希望能將頁面呈現的設定與頁面本文分開，減少重覆設定的工作。設定的對象不僅只有文字，還包括圖片與媒體的呈現。

目前CSS的語法在Explorer3.0以上以及Netscape4.0以上的版本有部份支援，但是並非所有的語法都可以在目前的瀏覽器上看到﹐目前對文字部分的語法支援較完全﹐對圖片與媒體的支援較少。而HTML4.0中的CSS2(cascading style sheets level 2)新標準，更是少見於目前網頁編寫的應用。瀏覽器對於CSS標準的支援看來將會是個大工程。

下面將舉例說明CSS的用法，讓大家瞭解到CSS對未來網頁的架構將發生重大的影響，(以下所引用的例子IE3.0與Netscape4.0以上的版本都支援)下面是一個傳統語法控制一段文字大小與顏色的方法:
＜HTML＞＜TITLE＞＜/TITLE＞
＜BODY＞
＜H1＞＜font color=0000ff＞這段文字是籃色的＜/font＞＜/H1＞
＜BODY＞
若使用CSS的語法，則會像是:
＜HTML＞＜TITLE＞＜/TITLE＞
＜STYLE TYPE=”TEXT/CSS”＞
H1 {color:blue}
＜/STYLE＞
＜BODY＞
＜H1＞這段文字是籃色的＜/H1＞
＜BODY＞
CSS設定的範圍，可以區分為三種：局部設定(Local)、
整頁設定(Global)與外部設定(External)，舉例如下:
局部設定(Local)：
設定的範圍只在一個標駐語法之中，下面的範例說明
如何設定單一＜h2＞＜/h2＞標註之中的文字顯示：
＜h2 style=font-size: 35pt; color: red; line-height: 30pt;
font-weight: bold; font-family: ”Verdana,Ariel,Helvetica”＞
這是局部設定(Local)的例子 ＜/h2＞
整頁設定(Global)：
設定的範圍包含整個頁面，CSS設定的語法必需包在
＜STYLE＞＜/STYLE＞之中，
而＜STYLE＞＜/STYLE＞必需置於＜TITTLE＞與＜BODY＞之間。
下面的範例說明整頁設定(Global)的模式會使得網頁上所有用到＜h2＞＜/h2＞ 的地方都會依照＜STYLE＞＜/STYLE＞內的設定來顯示：
＜HTML＞＜TITLE＞＜/TITLE＞
＜BODY＞
＜H1＞＜font color=0000ff＞這段文字是籃色的＜/font＞＜/H1＞
＜/BODY＞
若使用CSS的語法，則會像是:
＜HTML＞＜TITLE＞＜/TITLE＞
＜STYLE TYPE=”TEXT/CSS”＞
H2 {font-size: 35pt; color: red; line-height: 30pt;
font-weight: bold; font-family: ”Verdana,Ariel,Helvetica”}
＜/STYLE＞
＜BODY＞
＜H2＞這是整頁設定(Global)的例子＜/H2＞
＜/BODY＞
外部設定(External)：
外部設定的感覺就像是把CSS設定寫成檔案，使其它使用相同設定的網頁直接連結參照，尤其是同時編寫的網頁有數十頁甚至數百頁時，外部設定不僅能減少每篇設定的負擔，也同時減少檔案的大小，節省記憶體空間。設定檔必需用”.css”
為副檔名，引用範例如下：
＜head＞
＜link rel=stylesheet href=”name.css” type=”text/css”＞
＜/head＞
style.css設定檔格式範例如下：
＜html＞
＜style type=”text/css”＞
＜!--
body {font: 10pt ”Verdana, sans-serif”};
h2 {font: 50pt ”Verdana, sans-serif”;
font-weight: bold;
color: #58F734}
h3 {font: 13pt/15pt ”Verdana, sans-serif”; font-weight: bold;
color: red;
margin-left: 0.5in;
margin-top: -10px;
line-height: 30px}
em {margin-top: -105px}
p {font: 10pt/12pt ”Verdana, sans-serif”;
color: black;
margin-left: 0.5in;
margin-top: -10px;
line-height: 20px}
--＞
＜/style＞
＜body＞
＜/body＞
＜/html＞
從上面的例子中，可以看出CSS不僅是對文字控制還包括網頁邊界、線條的設定。此外，設定的項目包括字體、字型大小、時間、顏色、頻率、長度與超連結等等，例如：
BODY { background: url(http://www.bg.com/pinkish.gif) }
設定了BODY的背景用圖。

目前HTML的CSS2的標準可以說還在努力的階段，跟CSS1標準比起來，CSS2主要的制定對項是各類媒體設定的標準。