Lesson3 Border เรื่องเส้นๆกรอบๆในโค้ด
posted on 01 Dec 2006 21:37 by house108 in Make-theme...
วันนี้เอาเรื่องเส้นๆมาลง คือ border น่ะแหละ
จะสอนเรื่องต่างๆก่อน จะเข้า Css เพราะถ้าไม่รู้ว่าคืออะไร จะงงๆนะ
ก่อนอื่น ขอบคุณ http://lemonice.exteen.com สำหรับข้อมูลเยอะแยะด้วยนะคะ
เส้นในCss เห็นได้บ่อยๆ เช่น
* สีของลิงค์ */
a:link, a:visited{
color:#B8D9EC;
border-bottom:1px dotted #B8D9EC;
text-decoration:none;
}
a:hover{
color:#B8D9EC;
border-bottom:1px solid #B8D9EC;
ส่วนที่เน้นหนา นั่นคือส่วนของโค้ดเส้นค่ะ
สามารถกำหนดความหนา(px) สี
และรูปแบบได้(ตรงที่เราเน้นสีเหลืองง่ะ เช่น พวกเส้นประ)
อันนี้เป็นเส้นใต้(border-bottom) มีอยู่5แบบมี เส้นบน เส้นซ้าย-ขวา เส้นใต้ และรอบทิศ
ตัวอย่าง
border-top:1px solid #B8D9EC; <<เส้นบน
border-left:1px solid #B8D9EC; <<เส้นซ้าย
border-right:1px solid #B8D9EC; <<เส้นขวา
border-bottom:1px solid #B8D9EC; <<เส้นใต้
border:1px solid #B8D9EC; <<รอบๆ(รอบทิศ)
ความหนา ปรับตรงนี่
ตัวอย่าง
border-bottom:1px solid #B8D9EC;
ส่วนเลขหน้า px (Pixels) ค่ายิ่งมากเส้นยิ่งหนา
รูปแบบ
border-bottom:1px solid #B8D9EC;
คือไอ้ที่เน้นนั่นแหละถ้าเปลี่ยน กรอบนอกก็จะเปลี่ยนรูปแบบได้
เช่นเส้นประ ฯลฯ ลองเปลี่ยนตัวที่เน้นเป็นตามนี้ แล้วจะได้เส้นแบบตามที่เลือกเอง
Dotted |
None |
Dashed |
Solid |
Double |
Groove |
Ridge |
inset |
outset |
นอกจากนี้ก็ไม่รู้อะไรมากค่ะ ลองใช้ความคิดสร้างสรรค์สลับดูเองน่อ
กลัวไปแก้ๆอะไรมันแล้วพังอีกจัง
แล้วอย่าลืมเอามาให้ดูกันอีกนะ
#1 By ~ Ka Ren ~ on 2006-12-01 21:44