Microsoft Word - CSS1.doc

Size: px

Start display at page:

Download "Microsoft Word - CSS1.doc"

琳寅广
6 years ago
Views:

1 篇名 : 無名 CSS 作者 : 蔡仕揚台北縣立雙溪高中高二 2 班曹哲儒台北縣立雙溪高中高二 2 班王志浩台北縣立雙溪高中高二 2 班 1

2 壹前言有許多的方式可以做成網頁, 又網頁上有很多種方式可以製作, 在製作方式亦稱程式語言上, 目前常用及普遍使用的如下 : HTML JavaScript VBScript DHTML ASP PHP JSP ASP.NET 等, 而又在這些程式語言中, 大部份都是各自擁有支援的其餘程式語言, 而關於這些其餘各自支援的程式語言來講, 這些程式語言的使用方法又是各有千秋, 當然, 這些使用方法不可能一一介紹, 在此篇小論文中, 我們選擇了在網路上的無名小站中所使用的 CSS 來做介紹, 也是因為在網路上, 無名小站使用率高, 而有些人想使用 CSS 來更改自己的網頁, 卻不會使用 CSS, 此篇小論文就是研究 CSS 並做基本的使用介紹貳正文一.CCS 基本簡介基礎用途 < 應用 > CSS 是 Cascading Style Sheets 的縮寫我們中文稱為串聯樣式表 CSS 有甚麼好處公用? 為甚麼需要學? 以下說明幾點你就會發現使用 CSS 的功用註一一個網頁的讀者和作者都可以使用 CSS 來決定文件的顏色字體排版等顯示特性 CSS 最主要的目的是將文件的結構與文件的顯示分隔開來這個分隔有許多功用 : 1. 文件的可讀性被加強 : 適用於各種作業平台 2. 文件的結構更加靈活 : 它能讓我們更精確的控制網頁版面的文字背景字型等作者和讀者可以自己決定文件的顯示 : 它能只修正一個 CSS 文件, 便可同時更新眾多的網頁版面外觀及格式 4. 文件的結構簡化了 : 它可以使 html 的文件內碼更精簡, 縮小檔案下載的速度 2

3 CSS 還可以使用其他的顯示方式,CSS 還可以與其他結構文件一起使用, 唯一條件是顯示這種文件的瀏覽器裝備了接受 CSS 的功能 CSS 的語法很簡單, 它使用一組英語詞來表示不同的樣式和特徵一個式樣表由一組規則組成每個規則由一個選擇器 (selector) 和一個定義部分組成每個定義部分包含一組由半形分號 (;) 分離的定義這組定義放在一對大括弧 ({ ) 之間每個定義由一個特性, 一個半形冒號 (:) 和一個值組成選擇器 (Selector) 通常為檔中的元素 (element), 如 html 中的 <body>,<p>,<strong> 等標籤, 多個選擇器可以半形逗號 (,) 隔開屬性 (property) CSS1 CSS2 CSS3 規定了許多的屬性, 目的在控制選擇器的樣式值 (value) 指屬性接受的設定值, 可由各種關鍵字 (keyword) 組成, 多個關鍵字時大都以空格隔開以上為基本用途之名詞介紹註二二. 無名 CSS 優缺點顧名思義,CSS 主要是管理網頁中 style( 樣式 ) 部分, 也就是網頁中與板面 ( 如 : 文字背景連結按鈕表格等 ) 相關的部份都可以用 CSS 去做修改在網頁設計當中, 可以利用設定好的 CSS 樣式表, 指定給某一種 HTML 標籤或某一群組 HTML 標籤來使用, 增加了更多的樣式定義方式來輔助 HTML 它的優點 : 1. 語法簡潔, 可以很容易的控制 HTML 標記, 易於掌控網頁元素的位置 ( 只要更改標籤就可以任意且快速的做更改 ) 2. 多種文字變化可以減少圖檔的使用, 加快了網頁的傳輸速度 3. 集中管理樣式, 使許多網頁共用一份 CSS, 減少了網頁的體積, 維護及建立風格一致的網站更加容易 ( 對於相同的設定, 如背景表格超連結... 等, 只要寫一份共用的 CSS, 供你 3

4 的網頁用, 那麼整個網頁的設定就會變的一致, 要做更動時也不需要一個網頁又一個網頁做更改, 集體設定的功能佳 ) 無名網頁的修改, 使用 CSS 語法, 跟 HTML 很像, 不過 CSS 在排版的效果增加了更多的樣式定義方式來輔助 HTML HTML 在不同的網頁或同一網頁的不同位置都必須各自設定, 但 CSS 修改定義標籤的樣式則其它相同標籤的顯現格式都會跟著改變,CSS 就是用來延伸 HTML 在文字樣式與版面編排的彈性與多樣化 CSS 可以在開頭的地方就將這些設定給做好, 不需要再反覆輸入同樣的標籤, 這樣編輯會比較方便, 也能降低將來維護網頁的困難度再加上 IE 5 內建的濾鏡特效更可以取代原來需要圖片才能呈現出的效果, 讓網頁下載的速度提高, 如果將 CSS 樣式存成獨立檔案讓多個網頁共同使用還可以集中管理 ; 反過來也可以在同一個網頁上套用多個 CSS 檔案, 也就是將樣式分類如 : 顏色字型分別存放在兩個檔案中然後套用在同一個網頁上, 以增加設計與維護上的效率它的缺點它唯一的缺點, 就是瀏覽器的支援程度, 編寫網頁最頭痛的地方就是, 使用不同的瀏覽器看同一個網頁, 往往會有不同的結果, CSS 在這方面比 HTML 還要嚴重, 所以在使用 CSS 的時候要特別注意, 不同的瀏覽器是否都能支援你的語法註三三. 認識 CSS 的標準語法以下是語法的各種使用方法 : H3,H5{color : # ; font-family : 細明體 H3 與 H5 我們稱之為" 類別選擇器 " 意思是說透過這個樣式給 H3 與 H5 標籤定義 color : #999999( 文字灰色 ) font-family : 細明體 ( 字型為細明體 ); 也就是說網頁裡所有定義為 H3 與 H5 標籤的文字, 都會變成灰色細明體定義多個標籤相同屬性 H3,H5 就是以, 號分開定義標籤多個屬性 color:#999999; font-family: 細明體就是以 ; 號分開 CSS 串聯樣式表的種類 4

5 CSS 串聯樣式表的種類有分為幾種, 以下說明較常用的排版樣式 : 在之間定義多個標籤的樣式在之間定義單一標籤的樣式 TEXT 範例簡說現在做個簡單的範例加上說明 : 將下方的語法用在網頁的標籤之間這樣一個 css 就是定義 : body( 整個網頁 ) 和 table( 表格 ) 內的文字為灰色 verdana 字型 9pt 的大小使用範例你的網頁不可以是空白的, 一定要包含文字內容註四 CSS 串聯樣式表教學選擇器運用基礎中我們有提到何謂選擇器, 例如 :table{font-size:9pt 裡面的 table 就稱為選擇器, 就是選用 table( 表格 ) 在 { 裡定義樣式, 這個選擇器當然你可以自己設定為別的名稱, 讓網頁指定的地方來使用, 或者你想每行用不同的文字顏色或不同的表格顏色, 沒問題, 用自訂選擇器一定讓你更容易掌握種類一 :CLASS=" 名稱 " <>class="abc"> 這裡的文字是粉色 9pt 的大小 <>class="def"> 這裡的文字是藍色 9pt 字的距離 4pt 的大小單 "> <>class="abc" type="text" name="t1" size="20" value=" 這裡是表種類二 :ID=" 名稱 " 5

6 還有一種方式就是使用 ID, 其實這跟上方的意思是相同的,CLASS 選擇器是在前方加上小數點, 不同的是 ID 是在前方加上 #, 來看下面的範例 : 可以試試看是不是跟 class 選擇器範例結果是一樣的 #ABC{ color : #cc6699 ; /* 文字色彩 */ font-size : 9pt /* 文字大小 */ #DEF{ color : # ; /* 文字色彩 */ letter-spacing : 3pt;/* 字距 */ font-size : 9pt /* 文字大小 */ 注意 : CLASS 選擇器可以在同一個網頁重複運用 ID 選擇器是不可重複使用的 CSS 串聯樣式表教學外部檔案還記的基礎篇我提到 CSS 的好處第二項 : 它能讓我們只修正一個 CSS 文件, 便可同時更新眾多的網頁版面外觀及格式現在就來教你如何將 CSS 樣式存在一個獨立的檔案, 讓每個網頁來引用連結樣式表和匯入樣式表的分別匯入 (import) 樣式表和下面介紹的 LINK 連結樣式表功能是相同的, 只是運作方式不同如果 HTML 文件以 import 的方式匯入樣式檔案, 那瀏覽器在讀取 HTML 文件時, 會將樣式表複製一份到 HTML 文件內 ; 如果使用連結樣式表的方式 (LINK), 瀏覽器會再 HTML 文件內的標籤需要格式設定時, 才會向所連結的樣式表索取樣式 1.font-size : 9pt; /* 文字大小 */ 2.letter-spacing : 2pt ;/* 字間距離 */ 3.line-height : 150% ;/* 設定行高 */ 4.A:link /* 超連結 */ 5.{color:#c69;/* 文字色彩 */ 6.text-decoration:none;/* 刪除連結線 */ 7.A:visited /* 瀏覽過的超連結 */ 6

7 {color:#c69;/* 文字色彩 */ 8.text-decoration:none;/* 刪除連結線 */ 9.A:active /* 按下連結 */ 10.{color:#c69;/* 文字色彩 */ 註一 11.text-decoration:none;/* 刪除連結線 */ 12.A:hover /* 滑鼠移至連結 */ 13.{color:#c30;/* 文字色彩 */ 14.border-top : 1px solid #000 ; /* 上框 */ 15.border-bottom : 1px solid #000 ; /* 下框 */ 四. 關於 CSS 何 XML 的差別 CSS 與 XSL 的比較同樣在樣式表的語法上, 有 CSS 與 XSL 這兩種語法較常用現在對這兩種語法做簡單的比較 : CSS XSL Can be used with Yes HTML? Can be used with XML? Yes No Yes Transformation language? No Yes 比較完發現 :CSS 雖然可以提供強大的版面編排功能, 但是不同廠商及不同版本的瀏覽器所支援的功能及呈現出的效果都有差異, 所以使用時, 需要對不同的瀏覽器進行測試或是標明您的網頁需要用那一個瀏覽器來閱讀註一參結論 CSS 是一種多功能的方便程式, 不僅可讓自己無名的字體顏色排版等等更加多樣化目前常用及普遍使用的網頁如下 : HTML JavaScript VBScript DHTML ASP PHP JSP ASP.NET 等, 而又在這些程式語言中大部分都有 7

8 自己所支援的程式, 但 CCS 可以支援部份的功能現在的社會, 是青少年的社會, 無名小站, 這種東西好像現在青少年的專利, 為了讓自己的無名小站的版面等等變的綺麗, 大家都在想辦法現在, 有了 CSS 這種程式, 讓青少年們更加改裝自己的無名小站在這些資料下, 從程式語言的介紹中發現, 大部分的修改其實都是由字面上來翻譯, 由此當作程式語言的命令, 其餘關於特有名詞和其他關於修改的樣式就是和其餘 Microsoft 旗下 office 產品一樣, 顏色編號也是一樣的在這些資料下, 不只可以了解程式語言的運作方法, 也可以對於知識的擴充更加充沛肆引註資料註一 OECSPACE 註二維機百科全書註三奇摩知識家 dge.yahoo.com/question/?qid= 註四書名 :CSS 大全第三版作者 :Eric A. Meyer 出版社 : 歐萊禮出版日期 : 2007 年 04 月頁數 :548 頁 8

F477

F477 FrontPage & Flash 連 CSIE, NTU September 15, 2007 Outline September 15, 2007 Page 2 連 FrontPage September 15, 2007 Page 3 連 FTP Email FrontPage HTML tag September 15, 2007 Page 4 連 September