CSS tableHTML table borderHTML table style

第3 章- CSS排版語言

文章推薦指數： 80 %
投票人數：10人

在前一章當中，我們介紹了HTML 的語法，我們可以透過HTML 的表格排出某些格式，但是卻很難讓整個頁面足夠美觀。

舉例而言，假如我們想讓表格的標頭欄以黑底白字的方式顯示 ... 專為中學生寫的JavaScript程式書-《網站設計篇》 Introduction 第1章-網站設計概論 第2章-HTML網頁設計 第3章-CSS排版語言 第4章-網頁中的JavaScript 第5章-jQuery查詢與操控 第6章-Bootstrap彈性樣版 第7章-Koa伺服端框架 第8章-專案:wikidown網誌系統 PoweredbyGitBook 第3章-CSS排版語言 第3章-CSS排版語言 CSS簡介 在前一章當中，我們介紹了HTML的語法，我們可以透過HTML的表格排出某些格式，但是卻很難讓整個頁面足夠美觀。

舉例而言，假如我們想讓表格的標頭欄以黑底白字的方式顯示，那麼就得靠CSS來幫忙了。

CSS是CascadingStyleSheets的簡稱，中文可翻譯為「串接樣式表」，CSS主要是用來設定HTML的顯示版面，包含「字體、大小、顏色、邊框、背景」等等，一個好的CSS可以讓您的網頁變得很美觀，而且不需要大幅修改網頁的內容，只要加入一個CSS引用即可。

當套用不同的CSS時，網頁的風格就可以產生完全不同的感覺，這讓你的網頁可以輕易的更換成不同的版型。

事實上、當您在blogspot或wordpress網誌平台套用不同版型的時候，只不過是更換了CSS樣版而已。

在HTML當中，CSS有兩種寫法，一種是內嵌式的寫法，另一種是外連式的寫法。

為了說明CSS的語法，先讓我們回顧一下，一個簡單沒有格式化的HTML表格，其寫法如下：

欄1 欄2
列1 1,1 1,2
列2 2,1 2,2
檢視檔案：table.htm 如果我們將上述表格的th部分，都加上style="background-color:black;color:white;"這樣的CSS語法，那麼我們就會得到一個黑底白字的表格。

欄1 欄2 列1 列2
1,1 1,2
2,1 2,2
檢視檔案：tablecss_embed.htm 我們使用CSS排版前與排版後的結果可以對照如下： 您可以看到在這種寫法當中，我們幾乎都一直在th重複撰寫style="background-color:black;color:white;"這一行文字，總共重複了5次，這顯然是很浪費時間的行為。

如果我們可以改用統一的方式，寫出「對於所有th而言，我都要用background-color:black;color:white;這樣的方式顯示」那不就簡單多了嗎？ 是的、CSS確實可以讓您這樣做，讓我們將上述範例修改成統一設定格式的版本，如下所示。

欄1 欄2
列1 1,1 1,2
列2 2,1 2,2
上述統一將CSS寫在裏的這種寫法，比起內嵌式的顯然簡短多了，這種寫法正是CSS的精華之所在。

但是、如果我們想要對整個網站的所有檔案，都套用同一種格式的話，那麼在每個HTML的頭部都要嵌入一整套CSS語法，那就不太方便了，萬一我們想要改變版面格式，不就每個HTML檔案都要更改，這顯然還不夠好用。

要解決這個問題，可以將表頭的CSS獨立到一個檔案中，然後再用連結的方式引用，這樣只要修改那個CSS檔案，整個網站的風格就跟著改變，所以上述檔案就可以改寫如下。

檔案：table_css.htm
欄1 欄2
列1 1,1 1,2
列2 2,1 2,2
檔案：mystyle.css th{background-color:black;color:white;} 透過這種方式，我們就可以為網頁設計統一的風格，也比較容易更換網頁的排版風格了，這就是CSS語法的用途了。

當然、上述的網頁還不夠好看，如果我們將mystyle.css修改如下，您就會發現表格變得好看多了。

table{border-collapse:collapse;border:1pxsolid#373737;} th{background-color:black;color:white;padding:10px;margin:10px;} td{padding:10px;margin:10px;} 路徑,tag,id與class 即使有了可以統一套用的方式，有時我們還是會感覺到不方便，舉例而言，如果我們想要對某個表格套上A格式，然後在對另一個表格套上B格式，這時採用上述方法就不太夠用了。

為了解決這種問題，HTML發展出了id與class這兩個屬性，我們可以根據id或class的名稱分別套用不同的CSS樣式。

舉例而言，以下網頁中有兩個div框，我們可以分別為這兩個框套用不同的格式，其中classA前面加了點符號，成為「.classA」，代表要比對的是class屬性，如果想要比對的是id屬性，那麼就可以加上井字符號#(像是範例中#topbar的情況)。

頂區塊 A區塊 B區塊 檢視檔案：div_css.htm 到目前，我們可以看到有三種css的指定方式，也就是「標記tag、代號id與類別class」，可以用CSS來定位。

事實上、這些指定方式還可以互相串接，以下是一些範例： .classAtable{...}//套用到class="classA"內部的table標記 #topbar{....}//套用到id="topbar"的元素上 table.classAa{....}//套用到table內具有class="classA"類別裏的超連結a標記上。

更棒的是、這些選取方式之間還可以共用，只要利用逗點符號「,」分隔就可以了，以下是一些範例： .classA,#topbar{...}//套用到class="classA"或id="topbar"的元素上 #topbara,.classAa{....}//套用到id="topbar"或class=".classA"裏的a元素上 一個實用的CSS的範例 如果您想進一步學習CSS的各個屬性與用法，請參考下列網址，我們將不一一說明這些屬性的用法。

http://www.w3schools.com/css/default.asp 在此、筆者將自己常用的一個CSS檔案列出，讀者觀察後可以自行複製修改使用。

html,body,div,span,applet,object,iframe, h1,h2,h3,h4,h5,h6,p,blockquote,pre, a,abbr,acronym,address,big,cite,code, del,dfn,em,img,ins,kbd,q,s,samp, small,strike,strong,sub,sup,tt,var, b,u,i,center, dl,dt,dd, fieldset,form,label,legend, table,caption,tbody,tfoot,thead,tr,th,td, article,aside,canvas,details,embed, figure,figcaption,footer,header,hgroup, menu,nav,output,ruby,section,summary, time,mark,audio,video{ margin:0; padding:0; border:0; font:inherit; vertical-align:baseline; line-height:160%; } h1,h2,h3,h4,h5,h6{ color:#333333; margin:0; font-family:'標楷體','TimesNewRoman'; font-weight:bold; } p{ margin:10px015px0; font-size:100%; } li{ font-size:100%; } footerp{ color:#f2f2f2; } a{ text-decoration:none; color:#007edf; text-shadow:none; transition:color0.5sease; transition:text-shadow0.5sease; -webkit-transition:color0.5sease; -webkit-transition:text-shadow0.5sease; -moz-transition:color0.5sease; -moz-transition:text-shadow0.5sease; -o-transition:color0.5sease; -o-transition:text-shadow0.5sease; -ms-transition:color0.5sease; -ms-transition:text-shadow0.5sease; } table{ border-collapse:collapse; border-spacing:0; border:1pxsolid#373737; margin-bottom:20px; text-align:left; margin-left:auto; margin-right:auto; } th{ padding:10px; background-color:black; color:white; } td{ padding:10px; border:1pxsolid#373737; } em{font-weight:bold;} #topbar{ margin:0; padding:1px; border:0; font:inherit; vertical-align:baseline; background-color:black; color:white; color:white; width:95%; text-align:right; font-weight:bold; } #content{ margin:10px; padding:10px; } pre{ border:1pxsolid#373737; background-color:#dddddd; color:#333333; font-size:medium; width:95%; padding:10px; } img{ border:1pxsolid#373737; margin-left:auto; margin-right:auto; display:block; } .figure.caption{ text-align:center; } #footer{ text-align:center; font-size:small; color:#666666; margin:10px; padding:10px; } 參考文獻 http://www.w3schools.com/css/default.asp http://css.maxdesign.com.au/listutorial/ resultsmatching"" Noresultsmatching""

請為這篇文章評分？

延伸文章資訊