css properties


Width and Height

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

  • px – หน่วยนี้จะเป็นหน่วยที่นิยมใช้กันเป็นอย่างมาก คิดว่าทุกคนคงคุ้นเคยเป็นอย่างดีนะคะ เราจะใช้หน่วยนี้เป็นหน่วยมาตรฐานสำหรับจอภาพ เป็นการกำหนดขนาดแบบตายตัว จะไม่สามารถปรับขนาดได้ แต่ข้อดีของมันก็คือการแสดงผลของมันจะคงที่ไม่ว่าเราจะเปิดด้วยอุปกรณ์ชนิดใดก็ยังคงมีขนาดเท่าเดิมค่ะ
  • em – หน่วยนี้ก็ถือว่าใช้บ่อยอยู่เหมือนกันนะคะ ตัวนี้เป็นการกำหนดขนาดแบบไม่ตายตัว ทำให้เราสามารถปรับลดขนาดได้ การกำหนดขนาดแบบนี้จะคิดจากค่าเดิมของ parent element ที่อยู่ใกล้กับมันที่สุด หรือไม่ก็ใช้ค่าเริ่มต้นที่แต่ละ browser กำหนด ซึ่งส่วนมากขนาดเริ่มต้นจะมีขนาดเท่ากับ 16px จะได้ว่า 1em = 16px หรือคิดเป็น 1 เท่าของค่าเริ่มต้น และแม้ว่ามันจะสามารถปรับขนาดได้ก็ตาม แต่ในแต่ละ browser ก็ไม่สามารถที่จะแสดงผลออกมาเหมือนกันได้ บางทีอาจจะเล็ก อีก browser อาจจะใหญ่ ซึ่งจะทำให้ยากต่อการอ่านได้ค่ะ
  • rem – เป็นหน่วยที่คล้ายกับ em มากค่ะ ต่างกันแค่ว่าขนาดของมันจะขึ้นอยู่กับ root element เท่านั้นไม่ขึ้นกับ parent element เหมือน em และ ข้อดีอีกอย่างก็คือเราสามารถแก้ค่าของ root element ได้ด้วยค่ะ
  • % – เป็นหน่วยที่ใช้กำหนดขนาดทั่วไป
  • auto – เป็นค่าตั้งต้น browser จะเป็นตัวกำหนดค่าให้กับ element เอง

Margin and Padding

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

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

สมมติว่าเราอยากจะขยับกล่อง Hello World ทางด้านซ้ายให้ขยับไปชิดกับกล่องด้านขวามากกว่าเดิม สามารถทำได้โดยใช้ margin ค่ะ ซึ่งในกรณีนี้เราจะใช้ margin-left เพื่อเพิ่มระยะห่างระหว่างกล่องกับขอบด้านซ้ายให้มากกว่าเดิม ดังนี้

พอใช้ margin-left แล้วเราก็จะได้ว่ากล่องทางด้านซ้ายจะมาชิดกล่องด้านขวาตามต้องการค่ะ

ในกรณีที่เราต้องการที่จะทำให้ตัวหนังสือ หรือ รูปภาพ มีความห่างหรือมีความใกล้กับกรอบ (Border) เราจะต้องใช้ padding ค่ะ และเพื่อความเข้าใจยิ่งขึ้นเราจะมาดูตัวอย่างกันค่ะ

จากรูปจะเห็นกรอบสีเทา ๆ ใช่ไหมคะ กรอบนั้นคือขอบเขตของเนื้อหาค่ะ สมมติว่าถ้าเราต้องการที่จะขยับให้กรอบของเนื้อหาทุกด้านชิดกับกรอบสีเขียวมากยิ่งขึ้น ในกรณีนี้เราจะกำหนดด้วยการใช้ padding : 5px; (ตัวเลขนี้เป็นเพียงเลขสมมติเท่านั้น ไม่ได้คำนึงถึงระยะจริงแต่อย่างใด) จะได้ดังนี้

Border

ในส่วนนี้เราสามารถอิงกับพวก margin กับ padding ได้เลยนะคะ ซึ่งใน margin และ padding นั้นก็มีการกล่าวถึง border ไปบ้างแล้ว ซึ่งในหัวข้อนี้เราจะมาพูดถึงคุณสมบัติของ border กันค่ะ

  • border-width – คุณสมบัตินี้จะใช้กำหนดความกว้างของ border จะกำหนดเป็นตัวเลขแล้วตามด้วยหน่วยก็ได้ หรือ จะกำหนดด้วยความหนา thin medium และ thick ก็ได้ แต่ข้อยกเว้นของมันก็คือ หากเราไม่มีการกำหนด border-style แล้วมากำหนด border-width เลยมันก็จะไม่แสดงผลอะไรออกมา
  • border-style – เป็นการกำหนดลักษณะของ border ซึ่งจะมีหลายลักษณะด้วยกัน ยกตัวอย่างเช่น solid dashed เป็นต้น (ความจริงแล้วยังมีมากกว่านี้แต่ในที่นี้จะยกตัวอย่างเพียงเท่านี้ค่ะ)
  • border-color – เป็นการกำหนดสีของ border ซึ่งวิธีการกำหนดสีในที่นี้จะเขียนเป็นเลขฐานสิบหก ไม่ก็เขียนเป็นค่า rgb ค่ะ

และนี่คือการเขียนแบบย่อในกรณีที่เราจะกำหนดคุณสมบัตินี้กับ border ทุกด้านนะคะ

div {

border: 1px solid black;

/* border width, style and color */

}

แต่ถ้าสมมติเราต้องการตั้งค่า border เพียงแค่ด้านหรือสองด้าน แนะนำว่าให้เขียนกำหนดเป็นด้านไป เช่น

border-top, border-bottom, border-left, border-right

Float

เป็น property หนึ่งของ css ที่ทำให้ element สามารถลอยได้ในตำแหน่งที่เรากำหนด ซึ่งสามารถที่จะอธิบายอย่างง่าย ๆ ให้ทุกท่านได้เข้าใจได้ดังนี้

Test.html

<body>

<div> Hello World! </div>

<div> I’m a student </div>

</body>

จากโค้ดด้านบน ทุกท่านคงรู้ดีอยู่แล้วนะคะว่า ผลลัพธ์จะออกมาแบบไหน สิ่งที่หน้าจอจะแสดงให้เราดูเป็นดังนี้

แล้วถ้าสมมติเราต้องการที่จะ ทำให้ I’m a student อยู่บรรทัดเดียวกับคำว่า Hello World! โดยที่ไม่ใช้ display แบบ inline-block ล่ะ จะทำอย่างไรกันดีคะ ….. คำตอบก็คือเราจะใช้ float แทนค่ะ ซึ่งในที่นี้เราจะกำหนดค่า float: left; ให้กับ tag <div></div> ของ Hello World! ค่ะ และนี่คือผลลัพธ์ที่ได้

เท่านี้ก็พอจะเห็นภาพแล้วนะคะว่า float ใช้อย่างไร และได้ผลลัพธ์ออกมาแบบไหน และที่สำคัญคือการกำหนด float เราสามารถกำหนดได้ 3 รูปแบบด้วยกันคือ left right และ none ค่ะ ทั้งนี้การใช้ float ไม่ได้ใช้ได้เพียงแค่การจัดวางข้อความเพียงอย่างเดียว เราสามารถที่จะใช้มันในการจัดวางรูปภาพได้เช่นกันค่ะ

Clearing Floats

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

Test.html

 

Result

สมมติเราต้องการจะให้คำว่า and my name is ….. ลงมาอยู่อีกบรรทัดหนึ่ง เราจะใช้การ clear โดยการเพิ่มโค้ดคำว่า clear: left; (float ด้านไหน clear ด้านนั้น) ลงไปใน class three และผลลัพธ์เราจะได้ดังนี้ค่ะ

เอาล่ะค่ะ คิดว่าทุกคนคงพอจะเข้าใจมากขึ้นแล้วนะคะ ต่อไปนี้เราจะมาพูดถึงวิธีในการ clear float กันค่ะ ซึ่งจะมีอยู่ 3 วิธีด้วยกันคือ

  • clear: left , clear: right และ clear: both จะเป็นการ clear ด้านใดก็ตามที่เรา float ค่ะ
  • overflow: hidden คำสั่งนี้มีไว้ใช้แก้ปัญหา parent collapses ค่ะ ซึ่งถ้าใช้แล้วก็จะทำให้ parent element ไม่หายไปและจะได้ผลลัพธ์ตามที่เราต้องการแบบนี้

แทนที่จะเป็นปัญหาแบบนี้

 

 

  • clearfix ตัวนี้ก็จะแก้ปัญหาคล้าย ๆ กับ overflow ก็คือการทำให้ block element สามารถคลุม element ที่อยู่ด้านในได้ทั้งหมด ไม่คลุมแบบครึ่ง ๆ กลาง ๆ

color

ในที่นี้เราจะเล่นในบทบาทสีของตัวอักษรค่ะ ซึ่งการกำหนดว่าจะเป็นสีใดนั้นจะใช้กำหนดโดยใช้เลขฐานสิบหก หรือ ค่า rgb นั่นเองค่ะ

background

ในที่นี้จะกล่าวถึงพื้นหลังของ HTML element ซึ่งเราสามารถเขียนในรูปย่อได้ ดังตัวอย่างต่อไปนี้ค่ะ

body {

background: transparent image-url(‘image.png’) left top no-repeat;

/* คำสั่งเกี่ยวกับการตั้งค่าพื้นหลังทั้งหมดเป็นเพียงแค่ตัวเลือกเท่านั้น แต่ว่าการจะตั้งค่าพื้นหลังได้นั้นจะต้องมีอย่างน้อยหนึ่งคำสั่งนะคะ */

ซึ่งต่อไปนี้เราจะมาดูคำอธิบายของคำสั่งที่เขียนแบบย่อด้านบน โดยเรียงจากซ้ายไปขวาตามลำดับค่ะ

  • background-color: เป็นการกำหนดสีของพื้นหลัง ซึ่งวิธีการกำหนดสีเราจะใช้เลขฐานสิบหก หรือ จะกำหนดด้วยค่า rgb ก็ได้
  • background-image: จะใช้การใส่ URL ซึ่งจะแสดงที่มาของรูปว่าเราเอารูปพื้นหลังนี้มาจากไหน เว็บอะไร ซึ่งตัวอย่างด้านบนเป็นกรณีที่รูปภาพพื้นหลังของเราอยู่ใน folder เดียวกันกับไฟล์ css ที่เราเขียน เลยไม่ต้องใส่อะไรเพิ่มเติมนอกจากชื่อรูป

แต่ถ้าในกรณ๊ที่รูปภาพของเราอยู่คนละ path กับ ไฟล์ css ทีนี้มันก็จะเริ่มยุ่งยากขึ้นมานิดนึงค่ะ เพราะว่าเราจะต้องกำหนด path ของ folder รูปนั้นลงไปก่อนที่จะระบุชื่อภาพ ซึ่งจะมีอยู่ 2 แบบก็คือ

แบบที่ 1: การระบุ path เข้าไปเพียง folder เดียว อย่างเช่น image/image.png

แบบที่ 2: การระบุ path เข้าไปมากกว่า 1 folder อย่างเช่น ../images/image.png

  • background-position: มีเพื่อกำหนดตำแหน่งของรูปพื้นหลังค่ะ ซึ่งจะกำหนดในด้านแนวนอนก่อนแล้วจึงตามด้วยแนวตั้ง ซึ่งการตั้งค่าแนวนอนนั้นสามารถตั้งได้ทั้ง ซ้าย – กลาง – ขวา และ การตั้งค่าในแนวตั้งจะสามารถตั้งได้ บน – กลาง – ล่าง

Font

ในเรื่องของ font คือการกำหนดลักษณะของตัวอักษรค่ะ ซึ่งเราสามารถกำหนดฟอนต์หลาย ๆ ฟอนต์ได้ในเพียงการกำหนดเพียงครั้งเดียว ตัวอย่างดังนี้ค่ะ

body {

font: italic small-caps bold 20px/1.5 “Proxima Nova”, Helvetica, arial, sans-serif;

}

และสุดท้ายนี้จะเป็นการอธิบายการกำหนดคุณสมบัติของฟอนต์แต่ละตัวไล่จากซ้ายไปขวากันนะคะ เผื่อใครที่ยังไม่เข้าใจ

  • font-style: จะเป็นการกำหนดลักษณะของตัวอักษรซึ่งจะกำหนดให้เป็นตัวธรรมดา (normal) ก็ได้ หรือ ตัวเอียง (italic) ก็ได้ หรือ อาจจะไม่กำหนดก็ได้ แล้วแต่เราค่ะ
  • font-variant: เป็นการทำให้ตัวอักษรที่เป็นตัวอักษรพิมเล็กกลายเป็นตัวพิมพ์ใหญ่ที่มีขนาดเล็กได้ค่ะ ซึ่งค่าที่กำหนดได้ก็คือ normal และ small caps แต่โดยปกติแล้วจะเป็น normal นะคะ แต่ทั้งนี้ทั้งนั้น font-variant ก็ไม่เป็นที่นิยมเท่าไหร่นักค่ะ
  • font-weight: เป็นคำสั่งที่กำหนดความหนาของตัวอักษรค่ะ ซึ่งค่าที่กำหนดได้ก็จะมี normal bold bolder หรือ อีกแบบหนึ่งก็จะสามารถกำหนดเป็นตัวเลขได้ในช่วง 100 – 900 ค่ะ
  • font-size: เป็นการกำหนดขนาดของตัวอักษรค่ะ ส่วนหน่วยนั้นสามารถใช้หน่วย px , em อะไรแบบนี้ได้ค่ะ
  • line-height: เป็นการกำหนดระยะห่างระหว่างบรรทัดบนกับบรรทัดที่อยู่ด้านล่างค่ะ ถือเป็นคุณสมบัติที่สำคัญอย่างหนึ่งเพราะจะทำให้ผู้อ่านสามารถอ่านเนื้อหาของเราได้ง่าย และเป็นค่าที่ไม่มีหน่วยค่ะ เราจะใช้การกำหนดค่าเป็นจำนวน เช่น 5 3.6 เป็นต้น โดยเราจะเอาค่านี้ไปคูณกับขนาดตัวอักษรเพื่อให้ได้เป็นค่า line-height ค่ะ ตัวอย่างเช่น

ข้อความมีขนาด 20px แล้วกำหนด line-height: 1.2 แสดงว่า line-height มีค่าเท่ากับ 24 นั่นเองค่ะ หรือ อีกนัยหนึ่งเราก็สามารถที่จะกำหนดเป็นตัวเลขที่มีหน่วยได้เช่นกันนะคะ เช่น 14px , 1.5em เป็นต้น

  • font-family: เป็นการกำหนดรูปแบบฟอนต์ค่ะ ซึ่งเราสามารถกำหนดได้หลาย ๆ ฟอนต์ในคราวเดียวกัน แต่ว่าเวลาแสดงผลนั้นเราจะทำการใช้ฟอนต์แรกสุดที่กำหนดเสมอ ซึ่งถ้าหากสมมติเราไม่สามารถใช้ฟอนต์แบบแรกได้ เราจะข้ามไปยังฟอนต์ที่สองโดยอัตโนมัติค่ะ

ความจริงแล้วยังมี css properties อีกมากที่ไม่ได้นำมากล่าวในนี้ ไม่ใช่ว่าไม่มีความสำคัญนะคะ หลาย ๆ อย่างก็ถือว่ามีโอกาสได้ใช้อยู่ แต่ที่นำมานำเสนอในบทความนี้จะเป็น property ที่ใช้บ่อย ๆ เท่านั้นเองค่ะ อย่างไรก็ตามหลังจากได้อ่านบทความนี้ไปแล้วก็อย่าลืมกลับไปทบทวนกันด้วยนะคะ สวัสดีค่ะ