F0NTCAMP02 | เบซิกเบสิก CSS

หนูอร · 17 ส.ค. 2009, 13:38 น.

เราทำอะไรกับ div ได้บ้าง?

พื้นฐานลักษณะของ div นั้นเป็นเหมือนกล่องสองชั้น ซึ่งสามารถแบ่งออกได้เป็น margin กับ padding

โดย margin นั้นคือขอบของกรอบซึ่งปกติจะกำหนดหน่วยเป็น px แต่ถ้าตั้งค่าเป็น 0 ก็จะไม่มีขอบให้เห็น
ส่วน padding คือระยะรอบกรอบอีกชั้นหนึ่ง ที่ปกติใช้หน่วยเป็น px เหมือนกัน ซึ่งเราจะเห็นเป็นช่องเว้นว่างที่ล้อมรอบกรอบ

ในหน้า CSS เรากำหนด margin, padding และขนาด div ได้แบบนี้

โค้ด เลือกทั้งหมด


#div1{
   margin: 0;
   padding: 0;
   width:100px;
   height:300px;
}

สำหรับ border นั้น เป็นการออกแบบกรอบซึ่งสามารถตั้งค่าได้หลายส่วน

border-width กำหนดขนาดกรอบ ปกติใช้หน่วย px
border-style กำหนดรูปแบบกรอบ none dotted dash solid groove

โค้ด เลือกทั้งหมด


<div style="border-width:5px"> </div>

ถ้าเปรียบเทียบ div เป็นบ้าน.. margin ก็คือการกำหนดรั้วบ้าน และ padding ก็คือคูที่อยู่รอบบ้านซึ่งจะเว้นไม่ให้ไปติดกับขอบอื่น โดยมี border เป็นแบบดีไซน์ของรั้วอีกที

รายละเอียดเกี่ยวกับ margin

เวลาเราเขียนค่ากรอบ margin ทั้งหมด 4 ค่าแบบนี้

โค้ด เลือกทั้งหมด


{margin: 10px 0 50px 0;
	 /*margin-top:10px;
	    margin-right:50;
	    margin-bottom:0;
	    margin-left:0;*/
}

* การใส่เครื่องหมาย /*ข้อความ*/ คร่อมไว้แบบนี้ใน CSS เป็นเหมือนการเขียน comment หรือ note เอาไว้เพื่อช่วยในการจดจำข้อมูลส่วนต่างๆ โดยสิ่งที่เราเขียนจะไม่ถูกแสดงในหน้าเวปค่ะ

ถ้าใส่ค่า margin แค่สองค่า จะมีค่าเท่ากับแกน x กับแกน y ถ้าใส่ค่าซ้ายด้านเดียว จะแสดงค่าเท่ากันทั้งซ้ายขวา
กรณีกำหนดค่าแกน y แล้วกำหนดค่าแกน x เป็น auto จะทำให้ div (กรอบ) นั้นมาอยู่ตรงกลาง = จัดมาอยู่กลางหน้าเว็บ

คำสั่งอื่นๆที่ใช้กับ div

overflow: auto;         จะขึ้น scroll bar มาให้ดูในส่วนที่เลย div ออกไป
overflow: hidden;      ส่วนที่เกินจากช่องจะซ่อน ไม่แสดง
white-space: nowrap;      ทำให้ข้อความล้นออกมาจากกรอบเพราะไม่ตัดคำ

หนูอร · 17 ส.ค. 2009, 13:41 น.

ถ้ามีตรงไหนเขียนผิดอะไรยังไง หรือมีอะไรจะเสริมบอกด้วยนะจ๊ะ
เพราะอรเองก็ไม่สันทัดกับการเขียน code น่ะค่ะ

จดมาก็ไม่รู้ผิดไหมเนี่ย

iannnnn · 17 ส.ค. 2009, 14:17 น.

เสริมเรื่อง DIV หรือวัตถุอื่นๆ (อาจจะเป็น p หรือ li หรือหมาแมวอะไรก็ได้)

เราสามารถกำหนดคุณสมบัติ ความกว้าง ความยาว สีสัน ฟอนต์ การจัดชิดซ้ายขวา
รวมถึงเส้นขอบ และระยะเว้นทั้งนอก (margin) ใน (padding) ได้ด้วยเด้อ

กากก่อเกรียนนู้บ · 17 ส.ค. 2009, 14:23 น.

ว้าวๆๆๆๆ

กวางจ้ะ · 17 ส.ค. 2009, 14:44 น.

เพื่อให้เข้าใจเรื่อง div ง่ายยิ่งขึ้น

ทำโจทย์กันดีกว่า

โจทย์ :
ให้สร้างก้อน div ชื่อว่า divdiv1 และ divdiv2 โดยมีลักษณะดังนี้

divdiv1
- ให้เป็นสี่เหลี่ยมสีชมพูตั้งอยู่มุมขวาล่างหน้าจอ แม้เลื่อน scrollbar ก็ให้อยู่ตำแหน่งเดิม
- ขนาดกว้าง 200px ยาว 200px
- ในก้อนนี้มีข้อความสีขาวว่า my name is divdiv1 อยู่ห่างจากขอบ 10px
- ไร้ขอบ

divdiv2
- ให้เป็นสี่เหลี่ยมสีดำตั้งอยู่มุมซ้ายบนหน้าจอ
- ขนาดกว้าง 300px ยาว 1000px
- ในก้อนนี้มีข้อความสีขาวว่า I'm in black ชิดขอบ
- มีขอบชีสสีส้มแบบทึบ กว้างประมาณ 5px

testdiv.css

อ้างอิง#divdiv1{
position: fixed; /*กำหนดสถานะก้อน divdiv1 หากมี position อื่นมาเบียด ก็ให้คงที่ตำแหน่งเดิม*/
top: 350px; /*ค่า top กำหนดตำแหน่งในการแสดงผลก้อน divdiv1 ในแกน y โดยวัดจากด้านบนของเว็บ 350px*/
left: 780px; /*ค่า left ไว้กำหนดตำแหน่งในการแสดงผลก้อน divdiv1 ในแกน x โดยวัดจากด้านซ้ายของเว็บ 780px*/
width: 200px; /*ความกว้างของ divdiv1 ขนาด 200px*/
height: 200px; /*ความยาวของ divdiv1 ขนาด 200px*/
padding: 10px; /*ระยะห่างจากขอบ divdiv1 ถึงตัวอักษร 10px*/
background-color: deeppink; /*สีของพื้น divdiv1 เป็นสี deeppink*/
color: white; /*สีตัวอักษรที่อยู่ใน divdiv1 เป็นสีขาว*/
}

#divdiv2{
position: absolute; /*กำหนดสถานะก้อน divdiv2
หากมีก้อน div ที่ position เป็น relative มาแสดงตนและตำแหน่งทับกับตัวเอง
ก็ให้แปรผันตามก้อน div ที่แสดงตนเป็น relative นั้น*/
margin: 0; /*ให้อยู่มุมบนซ้ายของหน้าเว็บ*/
width: 300px; /*ความกว้างของ divdiv2 ขนาด 300px*/
height: 1000px; /*ความยาวของ divdiv2 ขนาด 1000px*/
border: solid 5px; /*กรอบของ divdiv2 เป็นแบบทึบ หนา 5px*/
border-color: orange; /*สีกรอบของ divdiv2 เป็นสีส้ม*/
background-color: black; /*สีพื้นของก้อน divdiv2 เป็นสีดำ*/
color: white; /*สีตัวอักษรที่อยู่ใน divdiv2 เป็นสีขาว*/
padding: 0px; /*หากมีตัวอักษรในก้อน divdiv 2 ให้ตัวอักษรชิดขอบมุมซ้ายบนของ divdiv2*/
}

testdiv.html

อ้างอิง<html>
<head>
<link rel="stylesheet" type="text/css" href="testdiv.css">
</head>
<body>
<div id="divdiv1">my name is divdiv1</div>
<div id="divdiv2">I'm in black</div>
</body>
</html>

การแสดงผลบนเว็บ browser ใช้ได้ดี เป็นมิตรกับ firefox นะจ๊ะ

เมื่อนำโค้ดไปลองเล่นดูจะเห็นว่ามี scroll bar อยู่ด้านขวามือ เพราะก้อน divdiv2 นั้นสูง 1000px ซึ่งล้นหน้าจอ
แต่สังเกตว่าเจ้าก้อน divdiv1 เนี่ยมันก็ยังอยู่กับที่ ถึงแม้ว่าเราจะเลื่อน scroll bar ลงมาด้านล่างก็จะยังคงอยู่ที่เดิมไม่ไปไหน

ตัวอย่างการใช้งานก้อน divdiv1 ที่พวกเราเคยเห็น เช่น
โลโก้มาสคอตเว็บนี้ >> http://bow.iannnnn.com/ << ที่อยู่มุมขวาล่างตลอดเวลาที่เราเปิดเว็บ (โปรดสังเกต)

เมื่อเราเลื่อน scroll bar ลงปั๊บ

มันก็ยังคอยตามหลอกหลอน

ไม่เข้าใจยกมือถามได้นะจ๊ะ

ออยอิชี่ · 17 ส.ค. 2009, 14:48 น.

กวางสุดยอดดด

ไล่อ่านใหม่อีกครั้ง
ทำไมเข้าใจกว่าตอนเรียนกับพี่แอน

เดอะบุ๋ม · 17 ส.ค. 2009, 14:52 น.

เพราะใช้แมค

iannnnn · 17 ส.ค. 2009, 14:56 น.

papos · 17 ส.ค. 2009, 15:07 น.

ความรู้ๆ +++

Ah! · 17 ส.ค. 2009, 15:09 น.

อรกะกวางเจ๋งมาก อธิบายได้เข้าใจง่ายสุดๆ
ขอบคุณมากครับ

แต่ฮาบักแอนว่ะ

ออยอิชี่ · 17 ส.ค. 2009, 15:22 น.

อ้างคำพูดจาก: เดอะบุ๋ม เมื่อ 17 ส.ค. 2009, 14:52 น.
เพราะใช้แมค

อ้างคำพูดจาก: iannnnn เมื่อ 17 ส.ค. 2009, 14:56 น.

แว้กกกก

eThics · 17 ส.ค. 2009, 15:41 น.

ชอบบรรยากาศแบบนี้จัง...ช่วยเหลือและแบ่งปันความรู้กัน

อยากรวยเว้ย จะร่วมกับพี่หน่อยเป็นผู้สนับสนุนโครงการทุกเดือน

แต่ได้ข่าวว่า...
ยังไม่ได้ถามความสมัครใจจากพี่หน่อยเลยนะคะ

ออยอิชี่ · 17 ส.ค. 2009, 15:46 น.

พี่หน่อยก็จะตอบว่า
"ถ้าไม่ติดธุระ ก็ ได้ค่า"

moophong · 17 ส.ค. 2009, 16:02 น.

ในที่สุดสิ่งที่เรารอคอยก็มาถึงแล้ว

ขอบคุณน้องอรและน้องกวางมาก

เลยที่ช่วยกันสรุปเนื้อหา ที่ครบถ้วน

จริงๆ บางทีตอนเรียนพิมพ์ไป จดไป

จนลืมฟังสาระในบางช่วงไปก็มานั่ง

อ่านในสรุปอีกครั้งนึ่ง

ปล.รอ version รวมเล๋มอยู่นะครับ

อิอิ ตอนนี้รวมใส่ notepad ไว้อ่านก่อน

มุมมืดของสังคม · 17 ส.ค. 2009, 16:26 น.

กวางกับอรยอดเยี่ยมมากครับ

อ้าวออย
ไหนบอกรู้ทางตัวเองแล้วไง
หนหน้าไม่ต้องมาเรียนแล้ว ชิ้วๆ