สวัสดีครับ กลับมากับบทที่ 2 ของ พื้นฐาน CSS กันอีกแล้วนะครับ โดยเราจะมาต่อกันที่ การประกาศ Selector
จากบทความที่แล้ว เราได้รู้จักกับ CSS และการประกาศการใช้งานไปนิดนึงแล้วนะครับ ทีนี้เรามารู้จักกับการประกาศการเรียกใช้ CSS หรือ การประกาศ Selector ให้มากขึ้นอีกนิดนะครับ โดยการประกาศหลัก ๆ ทั่วไปมีกันอยู่ 3 แบบหลัก ๆ ครับ แต่สำหรับผมแล้ว หลัก ๆ มีอยู่ 5 แบบครับ แต่บทความนี้เราจะพูดถึงแค่ 4 ตัวก่อนครับ เยอะเนอะผมเนี้ย มาเริ่มกันเลยดีกว่า
1.) Element
2.) Class
3.) ID
4.) Attribute
5.) รูปแบบพิเศษและส่วนขยาย ( ผมจำภาษาอังกฤษไม่ได้อ่ะครับ T.T )
ซึ่งหลัก ๆ ทั่วไปแบบเบ ๆ เลยเค้ามักจะใช้กันแค่ 3 ตัวแรกครับ ซึ่งตัวที่ 4 จะมีความยุ่งยากขึ้นมาเล็กน้อย ส่วนตัวที่ 5 นั้นจะมีอะไรมากมายให้เลือกใช้ครับ
ก่อนเราจะไปถึงขึ้นประกาศผมขอขยาย องค์ประกอบภายใน Element นิดนึง ( จริง ๆ ก็ไม่นิด ) นะครับ
<div title= “I’m element eiei”> Hello </div>
นี่คือ Element 1 ตัว ครับซึ่ง Element 1 ตัวจะต้องมีองค์ประกอบหลัก ๆ ดั่งต่อไปนี้ครับ
- Tag start ( ส่วนที่เป็นสีฟ้า ) ซึ่ง ส่วนนี้ เป็นส่วนที่จำเป็น ต้องมี ไม่มีจะไม่มีทางสร้าง Element ได้เลยเด็ดขาด
- Tag end ( ส่วนที่เป็นสีแดง ) ซึ่งส่วนนี้เองก็เป็นส่วนที่จำเป็นต้องมีเช่นกัน แต่ถึงอย่างงั้นก็ต้องดูให้ดี ๆ ด้วยครับ เพราะจะมีบาง Element อย่างพวก br , hr ,input , img อะไรพวกนี้ ที่ไม่ ต้องมี Tag end ครับ ส่วนนี้คงต้องใช้ประสบการณ์ในการเขียน HTML มาช่วยโปะ ๆ ให้เรารู้แล้วแหละครับ
แต่ไม่ต้องห่วงมากนะครับเพราะ Element ส่วนใหญ่มักจะมี Tag end ครับ เกือบทั้งหมดเลยก็ว่าได้ ซึ่ง Tag end จะอยู่ หลังสุดของ Element
- Attribute ( ส่วนที่เป็นสีส้ม ) ส่วนนี้จะถูกเขียน อยู่ภายใน Tag start ของ Element นั้น ๆ ครับ โดยมันจะต้องอยู่หลังชื่อของ Element และอยู่ก่อนเครื่องหมาย มากกว่า > ครับ ซึ่งในส่วนของ Attribute เนี้ยจะมีหรือไม่มีก็ได้ครับ ขึ้นอยู่ว่าเราต้องการกำหนด “คุณสมบัติพื้นฐาน” อะไรให้กับ Element ตัวนี้บ้างครับ
- Content ( ส่วนที่เป็นสีเขียว ) ส่วนนี้จะเป็นเนื้อหาที่ อยู่ภายใน Element ซึ่งจะ มีหรือไม่มีก็ได้ ขึ้นอยู่ว่าเราต้องการจะให้มันมีอะไร หรือจะยัด Element ตัวอื่นลงไปใน Content ก็ได้ครับสุดแท้แต่ผู้เขียนเลยครับ
แต่ถึงอย่างงั้นก็ไม่ใช่ทุก Element นะครับที่จะใส่ Content ลงไปได้ ซึ่งตำแหน่งของ Content เอง จะต้อง อยู่หลัง Tag start และ อยู่ก่อน Tag end ซึ่งก็ง่าย ๆ เลยครับ Element ตัวไหนที่ไม่มี Tag end ก็จะใส่ content ลงไปไม่ได้ครับเท่านั้นเอง ง่ายเนอะ
เห้อ...ไม่นิดจริง ๆ กลับเข้าเรื่องกันต่อดีกว่าครับ เรากลับมาที่การประกาศ Selector กันต่อครับ ดึงสติกลับมา ๆ
แต่ก่อนไปขอแวะอีกนิดนะครับ ( อีกแล้วหรอ ) ผมขอสร้าง ตัวอย่างหลัก ก่อนนะครับ โดยผมจะสร้างไฟล์ exp.html เพื่อเก็บโค๊ดต่อไปนี้
<div title= “I am element eiei”> Hello </div>
<div title= “not me”> Bye </div>
ไว้ในไฟล์ โดยจากตรงนี้จะมี Element 2 ตัว นะครับ และสร้างไฟล์ style.css ไว้เก็บ style CSS ทั้งหมดที่ผมจะเขียนต่อไปครับ พร้อมทั้งทำการลิงค์ไฟล์ภายใน exp.html ให้เรียบร้อยตามนี้ครับ
<link href= “style.css” rel= “stylesheet” >
มาถึงตรงนี้ถ้าใครงงหรือไม่เข้าใจแปลว่าคุณไม่ได้อ่านบทความก่อนหน้านี้ แนะนำให้ไปอ่านก่อนครับ ไม่งั้นเดี๋ยวผมตีมือแปะ ๆ เลยนะครับ
เรามาเริ่มกันที่ตัวแรกกันเลยดีกว่าครับ
1.) การประกาศโดยอิงจาก ชื่อของ Element สำหรับตัวแรกนี้ ถ้าใครอ่านบทความที่แล้วมาแล้ว จะต้องคุ้นแน่นอนครับ ซึ่งการประกาศรูปแบบนี้ก็คือใส่ชื่อของ Element เข้าไปตรง ๆ ที่หน้าปีกกาเลยครับ ตามอย่างต่อไปนี้ครับ
div {
……..
}
โดยผมจะกำหนด CSS ในไฟล์ style.css ดังต่อไปนี้ครับ
div {
color : red ;
}
ซึ่งจากโค๊ดนี้ถ้าเรานำ exp.html ไปแสดงผลบน บราวเซอร์ ผลลัพธ์ที่ได้จะเป็นคำว่า Hello และ Bye เป็นสีแดงครับ เพราะ Element ทั้ง 2 ตัวคือ div ทั้งคู่จึงทำให้ทั้ง 2 ตัวเปลี่ยนไปตาม CSS ที่กำหนดครับ
2.) การประกาศโดยอิงจาก Class name ตัวนี้ผมขอเขียนตัวอย่างก่อนละกันครับ แล้วค่อยอธิบายอีกทีครับ ก่อนอื่นเลยไปที่ไฟล์ style.css แล้วประกาศ CSS ต่อไปนี้ครับ
.cls-a {
text-align : center ;
}
จากตัวอย่างนี้ผมประกาศ Class name ไว้ว่า cls-a ซึ่งการประกาศ Class นั้นก็เหมือนกับการประกาศของ Element ในข้อแรกเลยครับ เพียงเปลี่ยนจาก ชื่อ Element เป็น ชื่อ Class ซึ่งเราเป็นคนตั้งเองเลยครับ
จะตั้งอย่างไรก็ได้ครับ ตัวเลข ตัวเล็ก หรือ ตัวใหญ่ และต้องเป็นอังษร ภาษาอังกฤษ เท่านั้นด้วยนะครับ( ภาษาอื่นผมไม่รู้ผมไม่เสี่ยง ) และห้ามเว้นวรรคเด็ดขาด
รวมถึงการใช้สัญญาลักษณ์พิเศษที่สามารถใช้ได้มีแค่ - ยัติภาค ( dash ) หรือเรียกแบบบ้าน ๆ เลยว่า ขีดกลาง
และ _ สัญประกาศ ( underscore ) หรือเรียกบ้าน ๆ กว่าว่า ขีดล่าง เท่านั้นครับ
และหลักการประกาศ Class name ต้องมี . มหัพภาค ( full stop หรือ period หรือ dot ชื่อพี่ก็เยอะเกิน ) หรือ เครื่องหมายจุด นั่นล่ะครับ ไว้ด้านหน้าชื่อที่เราประกาศด้วยครับ เพื่อบอกว่าชื่อนี้เป็น Class name ครับ แล้วถ้าเราไม่ใส่ จุดไว้ข้างหน้า CSS ก็จะอ่านตัวนี้เป็นชื่ของ Element แทนครับ
และในส่วนของการเรียกใช้ก็ตามนี้เลยครับ
<div class= “cls-a” title= “I am element eiei”> Hello </div>
<div title= “not me”> Bye </div>
โดยผมจะแก้โค๊ดในไฟล์ exp.html เล็กน้อยนะครับ โดยการเพิ่ม Attribute class เข้าไปใน Element div ตัวแรกครับ แล้วก็นำชื่อ class ที่เราประกาศมาใส่ใน “” เครื่องหมายอัญประกาศ ของ Class ครับ ถ้าเราต้องการให้ Element ตัวไหนเรียกใช้ Class เพียงแค่ทำตามนี้แหละครับ
ซึ่งผลลัพธ์ที่ได้ก็จะเป็นคำว่า Hello อยู่ตรงกลางจอด้านบน และ คำว่า Bye อยู่ชิดซ้ายมือ และทั้งคู่เป็นสีแดง ครับ ได้ผลลัพธ์ตามนี้เหลือเปล่าครับถ้าไม่ได้ก็จะมีสองเหตุผลเท่านั้นครับ คือคุณพิมพ์ผิด กับไม่ทำเลยอ่ะครับ อิอิ
สำหรับบทนี้ขอพักไว้เท่านี้ก่อนนะครับ พิมพ์นานปวดนิ้วแล้วครับ ฮ่า ๆ ในบทความต่อไปเราจะมาต่อกันที่ ID และ Attribute นะครับ ซึ่งจริง ๆ แค่ 2 ตัวในบทความนี้ก็สามารถนำไปใช้เขียน CSS ได้สะบายแล้วครับ เพราะสองตัวนี้คือเป็นตัวหลัก เป็นที่นิยมมากที่สุดแล้วครับ ที่จะสามารถหาอ่านและเห็นคนอื่นเขียนได้ทั่วไปครับ
