:: Mr. 戀上 Miss. :::簡易HTML 教學

<< CSS 學習步驟 | 回blog首頁 | 如何調整上下段的字間距？！ >>

June 26,2005

簡易HTML 教學

→

有一位朋友，覺得自己老是跟CSS 有過節
( 不用懷疑！！就是妳‧‧Dear 茉妍 )

倫家我可是特地為了妳又寫了這篇教學呢 ^^"

簡單的帶妳進入CSS 和HTML

1、段行HTML
我把教學網找出來，特別指到那一頁
由於網站教學已經寫的很清楚了，所以我就不多寫
而且這個教學網站最下面都會有一個語法測試區唷
段行語法＜br＞ & ＜p＞

2、字體大小
字體大小語法

3、字的變化 ( 如顏色、字型 )
這部份我希望大家多重視在顏色這部份 → 字的變化

以下是顏色語法的網站
‧阿盛色碼網

‧原色大辭典
　↑這裡有比較淡一點的顏色

4、超連結
(1) 開啟原始頁面 ( 就是不開新網頁 )
＜a href="網址"＞網頁名稱＜/a＞

(2) 開啟另一頁面
＜a href="網址"target="_blank"＞網頁名稱＜/a＞

以上為HTML 的部份

接下來要進入到CSS 的部份

(A) BACKGROUND : #FF3300 或 Background-color: #FF3300

大家如果看到「Background」or「Background-color」
通常後面接的CSS 語法都是指背景色的語法
這個時候，什麼都不要動，只要修改「#」後面的英文+數字
如‧‧FF3300 是紅色，我想改成綠色，那就把FF3300 改成669900

顏色的語法是由英文+數字合起來的，總共6個數字

(B) CSS 全文裡面被我用灰底色圈起來的CSS

我拿兩個過來舉例：

A.acalendar {COLOR: #0066CC; TEXT-DECORATION: underline}
A.acalendar:link {COLOR: #0066CC; TEXT-DECORATION: underline}
A.acalendar:visited {TEXT-DECORATION: underline;color: #0066CC;}
A.acalendar:active {}
A.acalendar:hover {COLOR: #003399; TEXT-DECORATION: none}

A.acontinues {COLOR: #8EC63F; TEXT-DECORATION: underline}
A.acontinues:link {COLOR: #8EC63F; TEXT-DECORATION: underline}
A.acontinues:visited {TEXT-DECORATION: underline}
A.acontinues:active {}
A.acontinues:hover {COLOR: #709F2F; TEXT-DECORATION: none}

有沒有發現這兩個CSS 有哪裡相同嗎？
仔細看，會發現其實它們各自為同一個區塊的CSS
也就是說，如果想要改顏色，就要把那些改成同一種顏色
再看看，會發現最後一列的CSS 語法顏色色碼會跟上面幾個不同
這是因為，HOVER 的顏色是指當滑鼠移到那個字上面會顯示的顏色
如果不想要有變化，那就把最後一列的色碼改成跟上面的色碼一樣就行了

有沒有發現有的時候「visited」裡面並不會有色碼出現
在這裡，我建議大家最好還是自行給它補上
至於要怎麼補，就照著其他語法的排列方式給它補上就行了 ^^"

再來，藍色字的地方就是他們相同的地方
看完這兩個CSS 的比較，再回到CSS 全文看看其他一樣被我用灰底色圈起來的區塊，仔細看看，就會發現藍色字的部份完全都是重複的，而紅色字的部份呢？那個就是在修改字體顏色的字碼

(C) BORDER-BOTTOM : 1PX #BBB SOLID
「border」是指邊框樣式
接下來我針對幾個跟「border」有關的CSS 語法解說

(1) border:3px double #FFCC66
3px → 指的是線的粗細，數字越大，線體越粗
double → 雙線的意思，意思就是指雙線框 → 範例
#FFCC66 → 線體色碼，把「#」後面的色碼改成自己想要的

(2) border-top: 1px dashed #fff0f5
border 後面接「top」指的是線體是在上方
top 上；bottom 下；right 右；left 左

dashed → 是虛線；solid → 是實線 ( 就是直直的一條線 )

(D) FONT-WEIGHT : BOLD
「Font-weight」是指字體的粗細

bold → 粗體字；normal → 細體字

(E) FONT-SIZE : 12PT
「Font-size」是指字體的大小
數字越大，字體就越大，一般都是訂在12 px

(F) FONT-FAMILY : TAHOMA, VERDANA
「Font-family」是指字型
想更改字體的字型就是在這裡改
不過我不提供字型唷！麻煩大家自行上網查 ^^"

(G) padding:10px
「padding」是指邊框離文字上下左右的距離，一般訂為10 px 差不多吧

基本上，不想對CSS 進行太多修改的朋友
有以上這些資訊我想應該是夠用了 ^^"

了解以上小區塊的基本構造之後
再進入到我寫的CSS 學習步驟

希望這篇能幫到大家

Posted by happy1211230 at 樂多Roodo! │14:49 │回應(69) │Miss. 分享

樂多分類：網路/3C 共同主題：讓Blog更有自己的風格工具：編輯本文

回應文章

歹勢，留一個跟這篇沒關係的留言！
你的小水滴已經會「鳥」這個技能啦！
剛看到一隻鳥飛過去你家小水滴頭上，
還拉了一坨便便下來，真猛！
哈.......

Posted by 依戀魚 at June 27,2005 00:10

站長好 !
我想問一下如果我要主欄跟邊欄平排在一起,
應該改那裡 ?
我已經張主欄的寬度收窄了,
但邊欄為什麼沒自己彈上去填補
那個因為主欄縮小了的空白位裡呢 ?

Posted by MrGuest at June 28,2005 10:33

回覆：

>> MrGuest

我到你家回覆你囉 ^_^

Posted by 版主 at June 29,2005 16:11

喵~
要怎麼回留言呢?
我找不到地方耶!

Posted by carlo at July 2,2005 09:38

回覆：

>> carlo

第一時間看到就到妳家回覆完畢囉 ^_^

Posted by 版主 at July 2,2005 22:23

站長好
請問一下要如何像您一樣在回應處

放上美美ㄉ圖案

就在我寫回應ㄉ地方

您是放美女入浴圖

我也好想要喔

Posted by 廖小妹 at July 30,2005 15:42

你好我想請教邊匡個問題

我的計數器太長我想把他縮短

這個也是用邊匡嗎

請問如果是 ccs要怎麼寫

另外我不知道怎樣才能在浩瀚的程式語言中

找到計數器的框

一個剛踏入blog的新手留

Posted by amigo at August 2,2005 13:17

請問版面上的文章要怎麼收納起來呢?
就是類似顯示/隱藏下文這樣子...

Posted by SD at August 2,2005 22:58

好深澳*.*~

看你們說說即可!

Posted by andy at September 23,2005 09:07

你好:
我想請問~blog和一般網頁所使用的HTML是
一樣嗎?還有~要怎麼把醜醜的滑鼠變成可愛的
指標呢？

Posted by amy at October 31,2005 23:25

回覆：

>> amy

http://blog.roodo.com/happy1211230/archives/111553.html

滑鼠的問題我有寫教學文，網址在上面

至於blog 和網頁使用的HTML 我也不知道一不一樣 ^^"
不過‧‧blog 還是有應用到HTML 語法
所以如果是指在更改方面，我相信懂得HTML 語法的人，應該對blog 很容易上手滴

希望我的回答能幫到你 ^^"

Posted by 版主 at November 2,2005 00:11

唔...我是路人甲^^

部落格新開幕

歡迎來逛逛玩玩哦

有好笑又好玩的東西等著你^0^

也歡迎把我的部落格加入最愛哦^^

Posted by 會飛滴麵包 at February 5,2006 03:45

哇~~~~~
我怎找不到留言版
之前只留妳的新網頁..但留言版卻也一起消失了

Posted by 妹仔 at February 12,2006 08:13

回覆：

>> 妹仔

Sorry ^^"
我沒有把另一個網址給妹仔嗎？

我現在也有在樂多寫日記
人家說‧‧狡兔有三窟，我也差不多吧 ^^"

Posted by 版主 at February 12,2006 16:46

I`m happy to see your site. Thanx!
http://ativan.friko.pl/Ativan.html ,
http://ativan.friko.pl/Buy-ativan.html ,
http://ativan.friko.pl/Ativan-withdrawal.html ,
http://ativan.friko.pl/Ativan-lorazepam.html ,
http://ativan.friko.pl/Ativan-effects.html ,
http://phlog.net/user/oxycodone

Posted by Ativan at June 5,2006 13:02

Surfing the web found and love this site.
http://bfioricet.blogspot.com/ ,
http://bfioricet.blogspot.com/2006/05/fioricet-buy.html ,
http://bfioricet.blogspot.com/2006/05/buy-fioricet_31.html ,
http://butalbitalbuy.proboards102.com ,
http://carisoprodol.ebloggy.com/

Posted by Fioricet at June 7,2006 14:39

Great website! Bookmarked! I am impressed at your work!

http://republika.pl/propropecia/
http://phlog.net/user/oxycodone
http://xenical.drugstorelinks.net/
http://diazepambuy.proboards107.com/

Posted by Xenical at June 16,2006 02:23

Very nice site. I Like it!
http://catalog.blox.pl/resource/ativan.html
http://catalog.blox.pl/resource/butalbital.html
http://catalog.blox.pl/resource/clonazepam.html
http://catalog.blox.pl/resource/diazepam.html
http://catalog.blox.pl/resource/fioricet.html
http://catalog.blox.pl/resource/hoodia.html
http://catalog.blox.pl/resource/prozac.html
http://catalog.blox.pl/resource/ultram.html

Posted by Drugs and medications at June 19,2006 23:54

Nice site.
http://fioricetbuy.proboards107.com/ ,
http://diazepambuy.proboards107.com/ ,
http://wellbutrinbuy.proboards91.com/ ,
http://butalbitalbuy.proboards102.com/ ,
http://hydrocodonebuy.proboards99.com/

Posted by Buy diazepam at June 24,2006 06:16

Posted by Hoodia at June 27,2006 12:24

Hi. I like your site very much!
http://avtoinsurance.blogspot.com/ ,
http://avtoinsurance.blogspot.com/2006/05/auto-insurance-quote.html ,
http://combowasher.proboards91.com/ ,
http://phlog.net/user/roulette-strategy ,
http://republika.pl/cufflink/

Posted by Auto insurance at July 1,2006 05:42

Posted by Celexa at July 28,2006 01:10

Posted by Texas Holdem Poker at August 4,2006 03:57

Posted by Medical insurance at August 17,2006 22:17

Posted by Met at November 1,2006 03:50

Was lookin' for this... I might even
have to throw down a bookmark.

Nickster
_____________________________
Buy Iphone

Posted by Soapsiships at October 21,2007 21:30

Yhanks you : \nLimewire Music Downloads = free music downloads = free music downloads = free mp3 = legal free music downloads limewire = free limewire = free mp3 downloads = music downloads = free mp3 downloads\nhttp://music.besh.net/music/ free ipod music downloads :: http://musicdownloads.tripod.com/index.html free music downloads :: http://homepage.mac.com/fmp3musicdownloads/free-mp3-downloads.htm free ipod music downloads :: http://www.fixgrout.com/cgi/musicpage44.html mp3 music :: http://musicdownloads.tripod.com/legal-free-music-downloads-limewire.html legal free music downloads limewire :: http://musicdownloadsmp3.tripod.com/music_downloads.html limewire music :: http://www.stormpages.com/free1music/musicdownload.html mp3 downloads :: http://www.fixgrout.com/cgi/musicpage2.html music downloads :: http://www.geocities.com/musicdowmoads4f/free-mp3-downloads.htm free mp3 downloads :: http://www.fixgrout.com/cgi/musicpage31.html Free Music Download :: http://www.stormpages.com/free1music/ free music download \n[url=http://music.besh.net/music/]free ipod music downloads[/url] .. [url=http://musicdownloads.tripod.com/index.html]free music downloads[/url] .. [url=http://homepage.mac.com/fmp3musicdownloads/free-mp3-downloads.htm]free ipod music downloads[/url] .. [url=http://www.fixgrout.com/cgi/musicpage44.html]free mp3 music download[/url] .. [url=http://musicdownloads.tripod.com/legal-free-music-downloads-limewire.html]legal free music downloads limewire[/url] .. [url=http://musicdownloadsmp3.tripod.com/music_downloads.html]Limewire[/url] .. [url=http://www.stormpages.com/free1music/musicdownload.html]mp3 downloads[/url]
fe776dcbafac5f089a89ae3dec4a9916

Posted by free music downloads at October 24,2007 05:03

http://wqaredbfdsear.host.com
desk3
[url=http://wqasedbfdsear.host.com]desk4[/url]
[link=http://wqaaedbfdsear.host.com]desk6[/link]

Posted by Evannnf at January 8,2008 08:01

Hi! beach commercial county palm realtor cape henlopen school district delaware game of room scape.com Eduardo ezequiel madrigal silva y yahoo cost of living calculator ANIMAL EAT HAPPENS IF RABIES animated picture for cell phone apartment rental airway heights washington auto fantasy nascar racing sports hsing hua i long yu

Posted by Dannynns at January 10,2008 01:32

Hey! phentermine phentermine viagra cialis hydrocodone xanax phentermine tramadol levitra phentermine

Posted by Kenvbc at January 10,2008 21:37

Yo! VIAGRA viagra xanax valium viagra cialis phentermine cialis viagra adipex

Posted by Janetbcw at January 11,2008 01:33

Hey! ambien levitra viagra Levitra levitra cialis phentermine viagra viagra viagra

Posted by Bradnvg at January 11,2008 06:54

Hi! cialis cialis phentermine cialis vicodin levitra levitra viagra cialis viagra

Posted by Aprilacv at January 11,2008 10:52

Hey! cheap viagra order cialis diazepam online order tramadol cialis buy ultram cheap phentermine viagra xanax cheap cialis

Posted by Brentlxz at January 11,2008 14:45

Hey! cheap cialis cheap adipex buy cialis buy viagra viagra buy phentermine cheap cialis phentermine

Posted by Terripnm at January 11,2008 18:27

Hi! phentermine online

Posted by Anneibz at January 12,2008 05:10

Yo! buy soma buy tramadol buy viagra buy cialis buy cialis buy cialis buy viagra buy viagra buy ultram buy phentermine

Posted by Jasonspi at January 13,2008 10:49

Yo! buy soma buy tramadol buy viagra buy cialis buy cialis buy cialis buy viagra buy viagra buy ultram buy phentermine

Posted by Jasonspi at January 13,2008 10:50

Yo! buy xanax buy viagra buy viagra buy phentermine buy ambien buy diazepam buy levitra buy cialis buy phentermine buy cialis

Posted by Dianakmf at January 13,2008 16:46

Yo! order viagra online buy adipex without prescription buy levitra from online pharmacy buy levitra buy phentermine no rx no prescription adipex best price for levitra buy cialis generic online buy cialis pharmacy buy cialis generic online

Posted by Jacobvcx at January 15,2008 04:03

Hey! buy levitra buy viagra cheap phentermine buy levitra online buy adipex buy cialis online buy adipex buy ultram cheap viagra

Posted by Seanrmp at January 16,2008 22:20

Yo! buy levitra online buy phentermine buy phentermine cheap levitra buy levitra cheap phentermine buy phentermine online buy ultram buy xanax cheap levitra

Posted by Bryceotx at January 17,2008 03:53

Yo! buy phentermine order cialis cheap levitra buy phentermine online phentermine online cheap cialis buy cialis buy tramadol buy hydrocodone order levitra

Posted by Saratlc at January 17,2008 16:11

Hey! cheap cialis cheap viagra buy cialis online buy levitra buy cialis buy viagra cheap viagra buy tramadol cheap adipex buy viagra online

Posted by Annine at January 17,2008 22:24

Yo! info look look look look here info info here look

Posted by Jessedlo at January 18,2008 03:21

[URL=http://www.wertino.cn/atlante-stradale] atlante stradale [/URL] atlante stradale [URL=http://www.wertino.cn/erik-truffaz] erik truffaz [/URL] erik truffaz [URL=http://www.wertino.cn/centri-dimagrimento] centri dimagrimento [/URL] centri dimagrimento

Posted by Juan at June 15,2008 20:44