創作內容

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
letmedo
哈哈~~~謝謝喔

09-02 08:18


不客氣09-02 14:43

剛剛才想起來要給這篇文章GP~~XD
昨天就把你這篇收錄精華區了^^
希望我也能應用css做出更漂亮的小屋~~

09-02 14:34


我的精華區

收錄一些實用教學

可以看看哦

09-02 14:42
無言
佩服佩服

09-02 15:04

南無阿彌陀佛
好難呀…XD

存起來慢慢用~~

09-03 10:54

澀柿子
好文推推

09-13 18:55

永恆之門
感謝教導

01-27 15:52

我要留言提醒:您尚未登入,請先登入再留言

10喜歡★style9992003 可決定是否刪除您的留言,請勿發表違反站規文字。

前一篇:星夜... 後一篇:DX10 震撼遊戲畫面...

追蹤私訊切換新版閱覽

作品資料夾

Lobster0627全體巴友
大家可以多多來我的YT頻道看看哦(*´∀`)~♥https://www.youtube.com/@lobstersandwich看更多我要大聲說昨天15:59


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】