CSS : Border [2]

posted on 15 May 2006 14:29 by lemonice  in TuTorial

อะ..โอ๊ย!!! มาล่ะๆ ตอนที่ 2 ของ Episode 3 ไปๆมาๆ ชักจะมีภาคย่อยมากขึ้น
เรื่อยๆ จะเป็นหนัง Star War ไปซะแล้ว (นอกเรื่องจิงๆ) วันนี้ก็เหมือนเดิมค่อยๆ
อ่านกันไปล่ะกัน อิอิ...

วันนี้ขอพูดในส่วนของ

+|+ Border +|+

Border-color : #รหัสสี;
อันแรกเลย เป็นโค้ดที่ไว้กำหนดสีของกรอบ ก็เช่นเดียวกับ BG ที่สอนไปคราว
ที่แล้ว ว่าตัวสีที่ใช้จะต้องเป็นรหัสสี 6 หลัก หรือ ไม่ก็ชื่อสี ลองกลับไปอ่านใน
บทที่แล้ว เพื่อความเข้าใจ

.Name { Border-color : #รหัสสี; }

Border-style : ค่า Value;


โค้ดนี้เป็นโค้ดที่ช่วยเพิ่มความสวยงามให้กับกรอบของเราอย่างมาก โดยการ
เปลี่ยนสไตล์ของขอบกรอบของเราให้เป็นรูปแบบอื่นๆ อ่าว..แล้วเราจะใส่อะไร
ลงไปดีล่ะ..ใจเย็น. อ่านต่อ..


.Name { Border-style : ค่า Value;}


รูปแบบของกรอบ (Value)

none


dotted


dashed


solid


 double


groove


 ridge


 inset


 outset


Border-width: ค่าความกว้างหรือลักษณะ;


ถ้าเราอยากกำหนดให้ขอบของเราหนาบางเท่าไร ก็ต้องใช้โค้ดตัวนี้เลย อ่ะนะ
โดยกำหนดเป็นตัวเลขหรือลักษณะอย่างใดอย่างหนึ่ง

.Name { Border-width: ค่าความกว้างหรือลักษณะ;}

ตัวเลข กำหนดขนาดเป็นตัวเลข แล้วตามด้วยหน่วยที่เป็นพอยต์ (pt), นิ้ว(in), เซ็นติเมตร(cm) หรือ พิกเซล (px)
 ลักษณะ thin, medium หรือ thick

Thin = บาง

Medium = ปกติ

Thick หนา


เพิ่มเติมหน่อยนึง
ถ้าเราต้องการให้ขอบทั้งสี่ด้านมีรูปแบบแตกต่างกันล่ะ โอ๊ย..ง่ายมาก
ก็เติม Top Right Bottom Left ลงไปตรงกลางของคำสั่ง

เช่น ส่วนของ Style
border-top-style กำหนดแบบของเส้นขอบบน
border-right-style กำหนดแบบของเส้นขอบขวา
border-bottom-style กำหนดแบบของเส้นขอบล่าง
border-left-style กำหนดแบบของเส้นขอบซ้าย

หรือ

Border-Style : Value (ใช้ค่าเดียวกันทั้ง 4 ด้าน) <-- อันนี้คือปกติ ใช่ป่ะ
Border-Style : Value1(บน,ล่าง),Value2(ซ้าย,ขวา)
Border-Style : Value1(บน),Value2(ซ้าย,ขวา),Value3(ล่าง)
Border-Style : Value1(บน),Value2(ขวา),Value3(ล่าง),Value4(ซ้าย)

พอเข้าใจม่ะ อันล่างนี่คือเราไม่ต้องพิมพ์ หลายรอบ รอบเดียวจบ value ที่เรา
กำหนดจะแสดงผลตามลำดับ หุหุ.. เลือกใช้เอาละกันน่ะ เอาอันที่ไม่งง หรืองง
ทั้งสองอัน ก็...อ่านใหม่อีกรอบ

ค่อยต่อพรุ่งนี้ ..ไปล่ะ

33 Comments

Comment



smilebig smileopen-mounthed smileconfused smilesad smileangry smiletonguequestionembarrassedsurprised smilewinkdouble winkcry

^^

#1 By ดร เดวิล (202.62.97.38) on 2006-05-15 14:31

blog น่ารักจังครับ ขอบคุณนะครับที่มาแบ่งปันความรู้ให้

#2 By IndyJ on 2006-05-15 14:47

โอ๊ ขอบคุณมากๆเลยฮะ
แง่บๆ

#3 By :: แมวดาว :: on 2006-05-15 14:50

โอ้ ขอยืมไปใช้หน่อยเน้อ

#4 By กัสจัง on 2006-05-15 15:03

อย่างนี้นี่เอง

#5 By *** on 2006-05-15 15:24

ตามเรียนต่อไป

#6 By ๏~ G♥J ~๏ on 2006-05-15 15:36

อื้อๆๆๆ ได้รู้อะไรเพิ่มขึ้นอีกแล้ว ^^

#7 By ★+::+@MilY+::+★ on 2006-05-15 15:49

มารอเรียน เย้

#8 By JaPaN♀ on 2006-05-15 16:05

ว้าวๆๆๆ ความรู้สุดยอด อยากรู้เรื่องพวกนี้พอดีเลย กะจะแก้ตรงกล่องคอมเม้นท์ในธีมหน้า
ขอบคุณมากน่อ มะนาวน้ำแข็ง

#9 By chonchonjung on 2006-05-15 16:06

สุดยอดเลยครับ

#10 By Gori ซัง on 2006-05-15 16:12

โอ๊ะ... กรอบ.. เดี๋ยวเอาไปใช้มั่งนะงิ >w< ขอบคุณมากๆฮะ

#11 By ||- Kutzuki -|| on 2006-05-15 16:45

ว้าว กลับมาแว้ว วันนี้ปวดหัววันหลังมาอ่านต่อ

#12 By Kung on 2006-05-15 17:42

ความรู้ๆ
ลองเอาไปทำล่ะค่า

#13 By หมึก หมก มุ่น on 2006-05-15 18:39

=[]=''
คารวะ ท่านอาจารย์ หงึกๆ

ขอจิ้มไปใช้หละน่อ~ > <

#14 By samta on 2006-05-15 19:43

งื้มมมมมม
ตามต่อไปๆๆๆ

#15 By ~ヽ(´▽｀)ノ【tomoe】 on 2006-05-15 19:57

*0*
โอ้ว ขอบคุณมากๆค่ะ

#16 By Luscinia on 2006-05-15 20:29

thanks...มากๆ ค่ะ

#17 By ~ Fan of the Hollywood ~ on 2006-05-15 20:36

อ๊ะอ๋า......ความรู้ประดับสมอง
และต้องนำไปใช้

#18 By Pleng on 2006-05-15 21:08

ง่า ... เข้าจัยแล้วค่ะ ไว้วันหลังจะลองเอาไปปรับใช้ดูนะคะ

แต่ว่าอยากรู้ตั้งนานแล้วน่ะคะ
ทำยังงัยถึงเอาวันที่ ที่อยู่แถบข้างๆ
กะ Link หายไปได้ล่ะคะ???
อยากรู้จังเลยง่ะคะ???

#19 By Neii ~ Fic on 2006-05-15 21:41

โอ้วววว พี่เต้ ขอบคุณมากๆ เลยงิ >w<

กำลังอยากรู้พอดีเลยงะ ต้องเก็บเอาไว้

#20 By ♥KAREN 純粋 ,, ●● version 20 [ BUN ,, BUN ] on 2006-05-15 22:33

สุดยอดเหมือยเดิม อิอิ แอบเข้ามาบ่อยๆ เป็นไรป่าวเนี่ย

#21 By นาย O a T on 2006-05-16 00:52

หนูเต้กลับมาอย่างเป็นทางการแล้ว

#22 By Fenix M. Lastwaltz on 2006-05-16 02:55

โอ้ว กลับมาอีกทีเป็นผู้เชี่ยวชาญซะแล้วไม่ได้เข้าซะนาน

css นี่พี่ไปกดใน Dreamweaver เอาเรยอะ

#23 By หมูทอดซามะ on 2006-05-16 10:32

สูบความรู้เจ้าค่า.... อิ่มจังเลย

#24 By on 2006-10-06 00:32

โอ้.... ขอบคุณสำหรับความรู้นี้มักมากเลยค่า

#25 By || noinazama || on 2006-10-14 14:44

เยียมโคตรๆๆ

#26 By Mild on 2006-10-25 09:28

คุงงับ (แต่ยังมะค่อยเข้าใจเยยง่า...หัวมานทึบT^T)

#27 By I2ikka on 2006-11-03 19:13

ขอบคุณนะคะ

#28 By H o u s E 108 on 2006-11-29 18:49

ทำเก่งจัง

#29 By กิ๊ปค่ะ (124.120.203.80) on 2006-12-04 21:54

Google is the best search engine

#30 By ZafrbArpBBd (85.255.113.74) on 2007-03-02 20:20

i really ur top most logo,
a guy riding horse,
color and lines r so balances,
however, if u can add more details into the image, the overall would look much better

#31 By Tom (124.120.172.91) on 2007-09-07 23:17

i missed the word 'like' on my previous message

#32 By Tom (124.120.172.91) on 2007-09-07 23:18

แง้ว... มันไม่เหนแล้วอ่าครับ = ="
ไฟล์รูปโดนลบไปหมดแล้วอ่ะ ><
รบกวนลงรูปหน่อยได้ไหมครับ
อยากจะรุว่ามันแตกต่างกันยังไง
คำสั่งแต่ละคำสั่งเนี่ย

ขอบคุนล่วงหน้าครับบ

ปล.จะบอกเป็นข้อความก้อได้ครับ ไม่ว่ากัน

#33 By ::~BilNZ~:: on 2007-09-24 00:01