10 GP
認識CSS
作者:雲│2007-09-01 17:42:03│巴幣:7│人氣:622
【什麼是HTML】
HTML就是超文件標示語言(HyperText Markup Language)。主要是在瀏覽器中顯示一份文件的內容。它本身並非程式設計,只不過是標示(Mark-up),用來強調及組織一般性的文字。HTML是由一些標記(tags)所構成,每個標記對瀏覽器下一個特定的指令,這些指令會告訴瀏覽器如何顯示文件的內容。
編輯HTML不需要多麼高級的軟體配備,你只要有『記事本』這項軟體就可以了。但記得,HTML文件的副檔名有些奇怪,你必須設定為 .htm 或是 .html 才行。例如: index.htm 是一個合法的HTML檔名,但 index.txt 就不是了。你可能聽過一些HTML的編輯程式如:HotDog、CutrHTML....等。對初學者而言,使用這些工具並不太好。雖然它們的設計目的是幫助你更容易使用 HTML 來工作。但不幸的是,其中有許多會將 HTML 的代碼隱覽起來,造成學習上的困難。那麼,編輯好的HTML檔要怎麼看呢?你要有瀏覽器,不論是 IE 或 是NetScape 都行。利用瀏覽器中的『開啟檔案』的功能就可以看到你所編輯的HTML檔了。
HTML是由很多的文件標記( Document Tags )所組成,這些標記在你建立的每一個HTML文件都會用到。它們會對文件檔中不同的部份作不同的定義。大部分的標記都是成對的( 圍堵標記 Container Tags),即包含『起始標記』 和『結束標記』。如表示網頁的開始,而代表網頁的結束。起始標記和結束標記差別就在於前面的斜線符號而己。標記本身沒有大小寫的區分,不過建議是使用大寫字母,以便在文字編輯器中容易識別。
2。 【一個簡單的範例】
1: <html> 這個代表了一個HTML檔的開始,告訴瀏覽器這是一個HTML檔。
2: <head> 檔頭部分,亦即是設定瀏覽器標題、語系、頁面進出效果的地方。
3: <title>一個簡單的範例</title> 此為瀏覽器標題列的文字,並有結束標記。
4: </head> 告訴瀏覽器結束檔頭部分。
5: <body bgcolor="#DEFE7A" text="#000000"> 代表這是正式內文。由這個標籤至結束標籤前,這些東西都會被顯示在瀏覽器中。
6: <br> 這是分行符號。在HTML中,在原始碼中輸入Enter不會視作分行,必須使用此標記。此標記沒有結束標記。
7: 網頁正文<br> 表示在網頁上顯示這些文字並分行。
8: <img src="title.gif"> 表示在網頁上顯示title.gif圖片(此圖片必須命名為標記中所示的title.gif並存放在跟此網頁同一個資料夾內)。通常網上的圖片都是GIF(圖片文換格式)或JPG(全彩的圖片壓縮格式),因為該兩種圖片格式體積較小。此標記沒有結束標記。
9: <a href="abc.htm">按我!</a> 宣告按下這些文字便連結到abc.htm(此網頁必須命名為標記中所示的abc.htm並存放在跟本網頁同一個資料夾內),並結束標記。
10: </body> 宣告結束正式內文。
11: </html> 宣告一個HTML檔的結束。
然後將此存檔,檔案類型是所有檔案,檔名為index.htm或default.htm(這是大多數伺服器認可的首頁名稱)。
再設計一個abc.htm供文字連結使用,這就是一個兩頁的網頁啦!然後你可以找一個免費網頁空間上傳發佈。
【補充資料】
<HTML>..........起始HTML
<HEAD>..........起始「頭」HTML的「頭」,是最先載入的部份
<TITLE>.........起始標題,在與結束標題中間的文字會被認作HTML文件的標題
</TITLE>........結束標題
</HEAD>.........結束「頭」
<BODY>..........起始「身」,裡邊載的東西就是網頁中看到的部份,HTML的核心
</BODY>.........結束「身」
</HTML>.........結束HTML
3。 【 CSS串聯樣式表教學『基礎篇』 】
CSS是「Cascading Style Sheets」縮寫,一般稱為【串聯樣式表】
CSS有甚麼好處呢?為甚麼要學呢?以下說明幾點你就會發現使用CSS的好處:
■它能更精確的控制網頁版面的文字、背景、字型等...
■它能讓我們只修正一個CSS文件,便可同時更新眾多的網頁版面外觀及格式。
■它可以使用html的文件內碼更精簡,縮小檔案下載的速度。
■適用於各種作業平台。
【 認識CSS的標準語法 】
先來認識CSS的標準語法,例如:
H3,H5{color:#525050;font-family:新細明體}
「H3與H5」我們稱之為"選擇器",意思就是透過這個樣式,給「H3與H5」標籤定義
color:#525050(文字灰色)。font-family:新細明體(字型為新細明體)。
定義多個標籤相同屬性「H3,H5」就是以「 , 」號分開
定義標籤多個屬性「color:#525050;font-family:新細明體」就是以「 ; 」號分開
【 CSS串聯樣式表的種類 】
CSS串聯樣式表種類有分為幾種,以下說明較常用的排版樣式:
■在<head></head>之間定義多個標籤的樣式↓
<style type=text/css>
<!--
H3,H5{color:#525050;font-family:新細明體}
-->
</style>
■在<body></body>之間定義多個標籤的樣式↓
<H3 style="color:#525050;font-family:新細明體">內容</H3>
【 範例教學 】
現在為您做個簡單的範例加上說明就會明白:
<style type=text/css>
<!--
body,table{
color:#525050 ; /*文字色彩*/
font-family;新細明體 ; /*文字字型*/
font-size:9pt ; /*文字大小*/
}
-->
</style>
這樣一個css就是定義:body(整個網頁) 和 table(表格) 內的文字為灰色 新細明體、9pt的大小。您可以試試看將上方的語法複製起來用在網頁的<head></head> 標籤之間。
CSS看來複雜,不過巴哈可以藉由CSS設定部落格
要來好好研究一下,佈置自己的小窩
呵呵@@
引用網址:https://home.gamer.com.tw/TrackBack.php?sn=342551
All rights reserved. 版權所有,保留一切權利
相關創作
留言共 9 篇留言
這裡荒廢了:
哇~真多資料,蠻實用的。^^
原來巴哈可以使用CSS設定..,
來慢慢試看看吧!
09-01 18:01
雲:
正在研究中
一起努力吧^^
09-01 18:08
小:
好厲害!
佩服佩服呢:D
09-01 18:11
雲:
厲害的不是我
是巴哈^^
09-01 18:39
海馬肛四郎:
耶...巴哈居然也可以使用CSS?
啊要在哪裡編輯呀?
09-01 18:29
雲:
佈置小屋>選擇小屋佈景主題>自訂CSS
^^
09-01 18:38
倫:
剛剛才想起來要給這篇文章GP~~XD
昨天就把你這篇收錄精華區了^^
希望我也能應用css做出更漂亮的小屋~~
09-02 14:34
雲:
我的精華區
收錄一些實用教學
可以看看哦
09-02 14:42
南無阿彌陀佛:
好難呀…XD
存起來慢慢用~~
09-03 10:54
我要留言提醒:您尚未登入,請先
登入再留言
10喜歡★style9992003 可決定是否刪除您的留言,請勿發表違反站規文字。
前一篇:星夜...
後一篇:DX10 震撼遊戲畫面...