มาทำความรู้จักกับพื้นฐานและ 9 properties กัน

CSS properties ที่ต้องรู้

สวัสดีค่ะ ชาวค่าย codecamp ทุกท่าน ก่อนที่จะเริ่มเชื่อว่าทุกท่านคงมีคำถามอยู่ในใจกันอยู่แล้วใช่ไหมคะ อย่างเช่น “เอ ดูจากหัวข้อแล้วก็เป็นเรื่องพื้นฐานที่รู้กันอยู่แล้ว ทำไมถึงไม่พูดถึงเรื่องอื่นที่มันลงลึกมากกว่านี้ล่ะ” หรือ “ทำไมจะต้องเป็น 9 properties นี้ด้วย ในเมื่อ css มี properties อยู่ตั้งมากมาย” เป็นต้น ซึ่งก็เห็นด้วยค่ะ ว่าเนื้อหาที่จะเขียนถึงในวันนี้ เป็นเรื่องพื้น ๆ แต่ว่าที่เอามาเขียนก็เพราะว่ามีจุดประสงค์ที่จะให้ทุกท่านได้ทบทวนพื้นฐานเหล่านี้ให้จำได้ขึ้นใจและสิ่งที่เลือกนำเอามาลงนั้นก็คือ properties ที่เราจะได้เห็นได้ใช้บ่อย ๆ ในการทำเว็บนั่นเองค่ะ พูดมาซะยาวแล้ว เพื่อไม่เป็นการเสียเวลาเรามาเริ่มกันเลยดีกว่านะคะ


 

Display

Property แรกนี้เป็นสิ่งที่เราต้องเจอและต้องใช้บ่อยมากเวลาที่เราต้องการที่จะจัด box ของ element แต่ละ element ให้เป็นไปตามที่เราต้องการ ซึ่งการกำหนดค่าของ display นั้นจะมีอยู่ 4 แบบด้วยกัน

แบบที่ 1  display: block;

แบบแรกนี้จะเป็นลักษณะของการแสดงผลบน browser ที่มีไว้เพื่อเป็นโครงสร้างหลักของเว็บไซต์ โดยที่ element แบบ block จะมีความกว้างของ box ที่ครอบข้อความของ element  เต็มบรรทัด หากเราจะเพิ่ม element อีก element ใหม่นั้นจะถูกดันให้ไปอยู่บรรทัดถัดไป

Test.html

<body>

<div> Hello World! </div>

</body>

Result

จากภาพนั้นคือการแสดงผลของตัวอย่างของ tag <div></div> ซึ่งหากสังเกตดี ๆ ทุกท่านจะเห็นได้ว่ารอบ ๆ คำว่า Hello World! นั้นมี box สีฟ้าคลุมอยู่โดยที่ box นั้นมีความกว้างเต็มบรรทัดตามที่ได้กล่าวไว้ในนิยามด้านบนนั่นเอง ซึ่งสิ่งที่ทุกท่านเห็นนั้นก็สามารถที่จะเป็นเหตุผลที่ว่าทำไม element อื่น ๆ ไม่สามารถมาวางข้าง ๆ element ที่เป็น block ได้อย่างดี

แบบที่ 2 display: inline;

มาต่อกันที่แบบที่สองเลยนะคะ แบบที่สองนี้จะมีคุณสมบัติที่ตรงกันข้ามกับแบบแรกอย่างเห็นได้ชัด ซึ่งจุดประสงค์ของแบบที่ 2 นี้มีไว้เพื่อเสริมรายละเอียดในโครงสร้างของแบบที่ 1 โดย element ที่เป็นแบบ inline นี้จะมีขนาดของ box เท่ากับความยาวของข้อความ และ หากมี element อื่นเพิ่มเข้ามาก็สามารถที่จะวาง element นั้นในบรรทัดเดียวกันกับ element ที่เป็น inline ได้ ซึ่งถ้าหากใครยังไม่เห็นภาพล่ะก็ สามารถเลื่อนลงมาดูตัวอย่างกันได้เลยค่ะ

Test.html

<body>

<div>The heart is like a <span> Rolling </span> Stone. </div>

</body>

Result

จากภาพและโค้ดด้านบนนะคะ ทุกท่านจะเห็นได้ว่า tag <span></span> ที่มีข้อความคำว่า Rolling นั้นถูก box สีฟ้าล้อมรอบข้อความไว้อยู่ ซึ่งในจุดนี้เราจะพบความแตกต่างระหว่าง block กับ inline ได้จากความกว้างของ box จะเห็นได้ว่า box สีฟ้ามีความกว้างสุดแค่ตัวอักษรสุดท้ายของข้อความเท่านั้น ไม่ได้ยืดเต็มบรรทัดเหมือน block และอีกสิ่งหนึ่งที่สอดคล้องกับนิยามด้านบนของ inline นั้นก็คือคำว่า Stone ที่สามารถวางอยู่บนบรรทัดเดียวกันกับ Rolling ได้นั่นเองค่ะ

แบบที่ 3 display: inline-block;

เป็นแบบที่เราจะรวมคุณสมบัติของทั้ง inline และ block ไว้ด้วยกันค่ะ ซึ่งมีจุดประสงค์เพื่อจัด element แบบ block ให้สามารถอยู่บรรทัดเดียวกันได้ และสามารถกำหนดให้จัดตำแหน่งของ element ให้สามารถอยู่ชิดซ้าย ชิดขวา หรืออยู่กึ่งกลางได้อีกด้วย มาดูตัวอย่างกันค่ะ

Test.html

<body>

<div>The heart is like a <div> Rolling </div> Stone. </div>

</body>

ก่อนจะมาดูผลลัพธ์ อยากให้ทุกท่านได้ดูโค้ดแล้วคิดตามก่อนนะคะ ปกติแล้วหากเราใช้ tag <div></div> นี่จะหมายความว่าเป็น display แบบ block ใช่ไหมคะ ซึ่งถ้าหากดูตามนิยามแล้ว ผลลัพธ์มันควรจะออกมาเป็นแบบนี้

แต่ถ้าหากในกรณีที่เรากำหนดให้ display เป็น inline-block ล่ะ ผลลัพธ์จะยังออกมาเป็นแบบเดิมไหม ลองคิดคำตอบไว้ในใจก่อน แล้วมาดูเฉลยด้านล่างกันนะคะ

Test.html

<head>

<style>

div {

display: inline-block;

}

</style>

</head>

<body>

<div>The heart is like a <div> Rolling </div> Stone. </div>

</body>

Result

 

 

เฉลยก็คือ ผลลัพธ์ที่ได้จะไม่เหมือนเดิมนะคะ จากภาพเราจะเห็นว่าแม้เราจะใช้ tag <div></div> ล้อมรอบ Rolling ไว้ก็ตาม แต่เราก็ยังสามารถวางประโยคทั้งประโยคไว้บนบรรทัดได้อยู่ดี ซึ่งนี่ล่ะค่ะคือข้อดีของ inline-block

แบบที่ 4 display: none;

โดยส่วนมาก display แบบนี้เรามักจะใช้เมื่อต้องการซ่อน element ไม่ให้ผู้ใช้เห็น แต่การซ่อนนี้จะใช้ไม่ได้ผลกับ bot ของพวก search engine ที่เข้าไปเก็บข้อมูลบนหน้าเว็บของเรานะคะ และ โดยเฉพาะถ้าสมมติเกิดมีผู้ใช้รู้จักการปิดการใช้ CSS ขึ้นมา ข้อความที่เราซ่อนไว้ก็จะปรากฏขึ้นมาทันทีค่ะ เพราะฉะนั้นแนะนำว่าถ้าไม่ใช้ element นั้น ๆ แล้วให้จัดการลบออกไปเลยจะดีกว่านะคะ

 

สำหรับวันนี้เราได้เรียนรู้ Elements คร่าวๆของ Css กันไปแล้ว คราวหน้า เราจะมาลงลึกกันอีกสักหน่อย สำหรับ CSS นะคะ
แล้วพบกันใหม่ตอนหน้า สวัสดีค่ะ  ^^