สวัสดีครับ หลังจากวันก่อนเราได้พูดถึงเรื่องของ HTML และ CSS คืออะไร ไปแล้ว ในวันนี้เราจะมาพูดถึงรายละเอียดการใช้ Properties และ Values ของ CSS กันบ้างนะครับ ว่ามีอะไรบ้าง ซึ่งผมอาจจะยกตัวอย่างมาไม่ครบทุกการใช้งานนะครับ แต่จะยกตัวอย่างเฉพาะตัวที่ใช้กันบ่อยๆ ครับ เพราะมันมีจำนวนเยอะมาก ตัวใดตกหล่นหรือสงสัยก็ให้ไปตามไปอ่านที่ W3Schools นี้นะครับ
วิธีการใส่ Properties และ Values
ก่อนที่เราจะพูดถึง Properties และ Value ใน CSS ผมขออธิบายเรื่องของการเขียนซักนิดนะครับ เพราะเคยมีน้องคนนึงมาถาม แล้วเขาเขียนผิดวิธี เลยคิดว่า เขียนอธิบายซักหน่อยจะดีกว่า เวลาเขียน Properties และ Values นั้น เราสามารถที่จะเขียนเรียง Properties ลงมาเป็นแต่ละบรรทัดได้เลย ไม่จำเป็นที่จะต้องไปขึ้นแท็กหรืออีลิเมนต์ใหม่ทุกครั้ง และมีเครื่องหมาย Semi Colon (;) เป็นตัวปิดแต่ละบรรทัดครับ ตัวอย่างเช่น
body {
background-color: #fff;
color: #000;
font-family: 'Roboto', arial, sans-serif;
font-size: 16px;
}เราไม่จำเป็นที่จะต้องเขียน body ซ้ำกัน แล้วมาแยกว่าเป็น background-color 1 ชุด และ color อีก 1 ชุดนะครับ สำหรับการอธิบายด้านล่างต่อไป ผมอาจจะเขียนแยกกันเพราะจะได้เข้าใจเป็นส่วนๆ กัน เราสามารถนำมารวมกันได้
Properties ที่น่าสนใจของ CSS
Background Color
เราจะใช้ background-color ในการทำสีพื้นหลังครับ ตัวอย่างด้านล่างเป็นการกำหนดให้ส่วน body เป็นสีขาว ดังตัวอย่าง
body { background-color: #fff; } Color
สำหรับการกำหนดสีตัวอักษรหรือฟอนต์นั้นจะทำในลักษณะคล้ายกัน แต่จะมีคำว่า color เพียงอย่างเดียว ด้านล่างเป็นการกำหนดให้ฟอนต์ทั้งนั้นมีสีดำนะครับ
body { color: #000; }Font Family
ในส่วนถัด Font Family เป็นการกำหนดรูปแบบของตัวอักษรว่าให้มีรูปแบบใดครับ ปัจจุบันรูปแบบของตัวอักษรมีให้เลือกมากมาย เราสามารถเลือกใช้งานจาก Google Fonts ได้ โดยมีฟอนต์สวยๆ ทั้งภาษาไทยและภาษาอังกฤษ เช่น Kanit, Sarabun, Roboto เป็นต้น ตัวอย่างการใช้งานด้านล่างมีวิธีการเขียนคือ เราจะต้องทำการระบุรูปแบบตัวอักษรหลัก Roboto ให้อยู่ในเครื่องหมายฟันหนู ในกรณีที่ไม่มีฟอนต์ Roboto ในเครื่องผู้อ่าน ให้ทำการดึงรูปแบบตัวอักษรถัดมามาใช้งานแทนในที่นี้คือ arial เป็นต้น
body { font-family: 'Roboto', arial, sans-serif; }Font Size
เราสามารถทำการกำหนดขนาดของตัวอักษรได้ ด้วยคำสั่ง font-size นะครับ โดยขนาดของตัวอักษรนั้นสามารถมีหน่วยเป็น px, em, rem, % หรือประโยค เช่น small แบบนี้ก็ได้ ตัวอย่างด้านล่างคือ การกำหนดขนาดของประโยค (Paragraph) ให้มีขนาด 16px ครับ
p { font-size: 16px; } 
Border
ในกรณีที่เราต้องการกำหนดเส้นขอบหรือกรอบของวัตถุ เราสามารถที่จะใช้ border ในการจัดการได้ โดยเราจะต้องกำหนดขนาดของเส้นขอบ ประเภทของเส้นขอบ เช่น เส้นทึบ (Solid), เส้นจุด (Dotted), เส้นปะ (Dashed), สองเส้นคู่กัน (Double) เป็นต้น และสีของเส้นขอบตามลำดับ ยกตัวอย่างเช่น
.b-1 { border: 1px solid #000; }Margin
ส่วนถัดมาเป็นการกำหนดค่าระยะห่างระหว่างเส้นขอบกับวัตถุภายนอก หรือที่เรียกว่า Margin เราสามารถเขียนแยกกันแต่ละทิศทางโดยต้องกำหนดทิศทางที่ต้องการลงไป หรือกำหนดระยะห่างทุกทิศทางได้ในครั้งเดียว เรียงลำดับจาก ด้านบน ด้านขวา ด้านล่าง และด้านซ้าย ตามลำดับก็ได้ ยกตัวอย่างเช่น
การกำหนดให้ระยะห่างระหว่างเส้นขอบกับวัตถุที่อยู่ด้านบนห่างกัน 15px
.mt-1 { mrgin-top: 15px }การกำหนดให้ระยะห่างระหว่างเส้นขอบกับวัตถุทุกทิศทางห่างกัน 15px
.m-1 { margin: 15px 15px 15px 15px; }การกำหนดระยะห่างโดยการใช้ Margin นั้น ค่าที่ใส่ไปใน margin สามารถเป็นค่าติดลบได้
Padding
Padding เป็นการกำหนดระยะห่างระหว่างเส้นขอบกับวัตถุที่อยู่ภายใน เราสามารถเขียนแยกกัน หรือรวมกันได้แบบเดียวกับ Margin ยกเว้นค่าที่ใส่ไม่สามารถเป็นค่าติดลบได้ ยกตัวอย่างเช่น
.pr-2 { padding-right: 30px; }
.p-2 { padding: 30px 30px 30px 30px; }Text Align
Text Align เป็นการกำหนดให้ตัวอักษรหรือประโยคให้อยู่ในตำแหน่งที่ต้องการ เช่น ชิดซ้าย (left) ชิดขวา (right) หรืออยู่ตรงกลาง (center) วิธีการเขียนมีดังนี้
p { text-align: center }Display
Properties ตัวถัดมาก็คือ Display การกำหนด Display นั้นเป็นการกำหนดให้วัตถุเป้าหมายที่เราต้องการแสดงผลเป็นแถวหรือกล่องหรือรูปแบบที่ต้องการ ดังนี้
- Inline เป็นการกำหนดให้วัตถุอยู่ในแถวเดียวกัน ส่วนใหญ่ใช้กับตัวอักษรที่ต้องการเรียงกันไป
- Block เป็นการกำหนดให้วัตถุมีพื้นที่โดยมีความกว้างเท่ากับพื้นที่ที่ถูกกำหนดไว้ เช่น 100% ส่วนใหญ่ใช้กับการกำหนดพื้นที่ เช่น ตัวอักษรอยู่ในกรอบสีเหลี่ยม เราก็กำหนดให้กรอบสี่เหลี่ยมเป็น Block เป็นต้น
- Inline-block เป็นการกำหนดให้วัตถุอยู่ในแถวเดียวกัน แต่สามารถกำหนดความกว้างของวัตถุนั้นได้ โดยความกว้างมีขนาดเท่ากับวัตถุภายใน เช่น การกำหนดตัวอักษรที่อยู่ในกรอบสี่เหลี่ยมหลายตัวเรียงเป็นแถวเดียวกัน
- Table เป็นการกำหนดวัตถุในอยู่ในรูปแบบตาราง มักใช้คู่กับ Table Cell สามารถนำมาจัดตำแหน่งของเนื้อหาภายในให้อยู่ในตำแหน่งที่ต้องการได้ เช่น ให้อยู่ตรงกลางในแนวดิ่ง
- Flex เป็นการกำหนดวัตถุแบบใหม่ ที่มีไว้เพื่อแก้ปัญหาการจัดเรียงของวัตถุแบบก่อนหน้านี้ ให้สามารถทำการเรียงลำดับและจัดการในส่วนของตำแหน่งการแสดงผลได้ง่ายขึ้น
ตัวอย่างการเขียน
.d-block { display: block; }Position
การกำหนด Position หรือตำแหน่ง เป็นการกำหนดให้วัตถุนั้นอยู่ในตำแหน่งที่ต้องการ โดยมีรายละเอียดดังต่อไปนี้
- Relative เป็นการกำหนดให้วัตถุที่ต้องการมีความสัมพันธ์ต่อเนื่องกับวัตถุทั่วไป เป็นค่าที่จะใช้กันบ่อยของ Position ครับ
ตัวอย่างการใช้
.p-relative { position: relative; }- Absolute เป็นการกำหนดให้วัตถุที่ต้องการนั้น ลอยตัวอยู่ในจุดใดจุดหนึ่งของพื้นที่ที่ต้องการ เวลาใช้งานจะต้องอยู่ในขอบเขตของ Relative ที่ครอบไว้ เมื่อเรากำหนดแล้ว เราจะต้องบอกด้วยว่า อยู่จุดใด ห่างจากส่วนหัวเท่าไร ห่างจากข้างซ้ายเท่าไร ยกตัวอย่างเช่น ข้อความที่อยู่บนรูป
ไฟล์ html
<div class=”d-block w-300”>
<div class=”p-absolute“>เนื้อหาภายในกล่องขนาดความกว้าง 300px มีระยะห่างจากขอบด้านบน 15px และด้านซ้าย 15px</div>
</div>ไฟล์ css
.d-block {
Display: block;
}
.w-300 {
Position: relative;
Width: 300px;
Height: 300px;
}
.p-absolute {
Position: absolute;
Top: 15px;
Lef: 15px;
}ผลที่ได้ คือ จะทำให้ประโยคใน Class mชื่อ p-absolute นั้น อยู่ภายในกล่องจัตุรัส 300px โดยห่างจากขอบด้านบน 15px และด้านซ้าย 15px ครับ
- Fixed การกำหนดค่าแบบ Fixed นั้น การกำหนดค่าแบบนี้จะสัมพันธ์กับเบราเซอร์ หากเราเคยเห็นเมนูที่เรียกว่า เมนูลอย (Float Menu) ที่อยู่ติดขอบด้านบนตลอดเวลา เมื่อทำการเลื่อนหน้าลงมาเมนูนั้นก็จะตามลงมาด้วยซึ่งก็คือ การกำหนด Position แบบ Fixed นี้เองครับ
- Static การกำหนดค่าแบบ Static เป็นค่าพื้นฐาน มีการจัดเรียงเป็นลำดับตามลำดับในเอกสาร
จากตัวอย่างด้านบนนี้ จะเป็นการการกำหนด Properties และ Value ของ CSS เบื้องต้นนะครับ อย่างไรก็ตาม Properties และ Value ของ CSS นั้นยังมีอีกมากมายที่เราสามารถนำมาใช้ได้ ไว้วันข้างหน้าผมจะมาเขียนเพิ่มเติมให้อีกครับ สำหรับวันนี้เอาเพียงเท่านี้นะครับ สวัสดีครับ
