ไวยากรณ์ CSS

หัวข้อแรกที่คุณต้องเชี่ยวชาญก่อนเขียนโค้ดโดยใช้ CSS คือ syntax คำว่า syntax อาจฟังดูน่ากลัว แต่มันหมายถึงกฎที่เราใช้ใน CSS เพื่อเขียนโค้ด กฎเหล่านี้เป็นมาตรฐาน ซึ่งทำให้ง่ายต่อการอ่านโค้ดของผู้อื่น

สองส่วนที่สำคัญที่สุดของไวยากรณ์ CSS คือตัวเลือกและบล็อกการประกาศ Selectors ใช้เพื่อชี้ไปที่องค์ประกอบที่คุณต้องการนำสไตล์ไปใช้กับหน้าเว็บ และบล็อกการประกาศจะสรุปสไตล์ที่คุณต้องการนำไปใช้กับองค์ประกอบที่คุณเลือก

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

กฎรูปแบบ CSS

ใน CSS สไตล์ชีตจะจัดเก็บชุดกฎเกณฑ์ที่กำหนดว่าเว็บไซต์ควรปรากฏบนหน้าจอของผู้ใช้อย่างไร ตัวอย่างเช่น สไตล์ชีตอาจกำหนดสีของข้อความบนหน้าเว็บหรือขนาดแบบอักษรที่ใช้โดยส่วนหัวเฉพาะ

กฎเหล่านี้เป็นไปตามโครงสร้างมาตรฐาน ซึ่งประกอบด้วยสองส่วน:ตัวเลือกและการประกาศ โดยรวม นี่คือลักษณะที่กฎของสไตล์ปรากฏใน CSS:

h1 {
	color: blue;
}

ลักษณะเฉพาะนี้กำหนดสีของ <h1> . ทั้งหมด องค์ประกอบบนหน้าเว็บเป็นสีน้ำเงิน ตอนนี้ เรามาแบ่งสไตล์นี้ออกเป็นสองส่วน เพื่อให้เราสามารถวิเคราะห์ว่ามันทำงานอย่างไร

ประกาศ CSS

ส่วนแรกของสไตล์ CSS คือการประกาศ Declaration เป็นอีกคำหนึ่งสำหรับสไตล์เฉพาะที่คุณต้องการนำไปใช้กับองค์ประกอบบนหน้าเว็บ

กฎสไตล์ CSS ต้องมีการประกาศอย่างน้อยหนึ่งรายการ และสามารถรวมการประกาศได้มากเท่าที่คุณต้องการ ดังนั้น หากคุณต้องการตั้งค่าความกว้างและความสูงของกล่องบนหน้าเว็บเป็น 100px และตั้งค่าสีพื้นหลังเป็นสีน้ำเงิน คุณสามารถทำได้ในการประกาศครั้งเดียว

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

การประกาศประกอบด้วยสองส่วนซึ่งมีดังนี้:

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

นี่คือไวยากรณ์สำหรับการประกาศ CSS:

property: value;

สังเกตว่าคุณสมบัติ CSS ของเราปรากฏขึ้นก่อน จากนั้นคั่นด้วยเครื่องหมายทวิภาค (:) หลังจากที่โคลอนมาถึงค่าที่เราต้องการกำหนดให้กับคุณสมบัติที่เราได้กำหนดไว้

การประกาศ CSS แต่ละรายการควรลงท้ายด้วยเครื่องหมายอัฒภาค (;)

นี่คือตัวอย่างการประกาศ CSS สองรายการ:

color: blue;
font-size: 16px;

การประกาศครั้งแรกกำหนดสีแบบอักษรขององค์ประกอบ HTML เป็น "สีน้ำเงิน" การประกาศครั้งที่สองกำหนดขนาดแบบอักษรขององค์ประกอบเดียวเป็น "16px" ตัวเลือกทั้งสองนี้เริ่มต้นด้วยชื่อคุณสมบัติ และตามด้วยเครื่องหมายจุลภาคและค่าที่เราต้องการกำหนดให้กับคุณสมบัติ

การประกาศจะถูกเก็บไว้ในวงเล็บปีกกา

ตัวเลือก CSS

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

นี่คือไวยากรณ์สำหรับตัวเลือก CSS:

selector {
	// List of declarations
}

ตัวเลือกจะสั่งเบราว์เซอร์ว่าองค์ประกอบใดควรใช้ชุดสไตล์ ตัวอย่างเช่น หากเราต้องการตั้งค่าความกว้างของ <div> . ทั้งหมด เป็น “500px” เราทำได้โดยใช้กฎนี้:

div {
	width: 500px;
}

div เป็นตัวเลือกของเราในกรณีนี้และมาที่จุดเริ่มต้นของกฎ CSS ของเรา จากนั้น เรากำหนดการประกาศของเราในวงเล็บปีกกา โดยใช้ไวยากรณ์ที่เรากล่าวถึงก่อนหน้านี้ กฎนี้กำหนดความกว้างของทั้งหมด <div> องค์ประกอบบนหน้าเว็บถึง "500px"

หากคุณสนใจที่จะเรียนรู้เพิ่มเติมเกี่ยวกับตัวเลือก CSS โปรดอ่านคู่มือเริ่มต้นของเราเกี่ยวกับตัวเลือก CSS

การประกาศและตัวเลือกรวมกันเป็นกฎสไตล์ CSS

ความคิดเห็น CSS

จนถึงตอนนี้ เราได้พูดถึงวิธีเขียนกฎของสไตล์ใน CSS แล้ว อย่างไรก็ตาม ไม่ใช่ข้อความทั้งหมดที่เขียนในสไตล์ชีตจะเป็นกฎของสไตล์

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

การเขียนความคิดเห็นมีประโยชน์หลายประการ

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

ความคิดเห็น CSS เริ่มต้นด้วย /* ไวยากรณ์และลงท้ายด้วย */ ไวยากรณ์

ความคิดเห็นแบบบรรทัดเดียวและหลายบรรทัด

ความคิดเห็นที่ปรากฏใน CSS มีอยู่สองประเภท:บรรทัดเดียวและหลายบรรทัด

ความคิดเห็นแบบบรรทัดเดียวคือความคิดเห็นที่ขยายเพียงบรรทัดเดียวบนสไตล์ชีต ต่อไปนี้คือตัวอย่างความคิดเห็นแบบบรรทัดเดียวใน CSS ที่ปรากฏเหนือกฎรูปแบบ:

/* This style sets the font size of all <p> tags to 16px */
p {
	font-size: 16px;
}

ในโค้ดนี้ ความคิดเห็นของเราจะปรากฏระหว่างเครื่องหมาย /* และ */ ด้านล่างความคิดเห็นของเราเป็นกฎของสไตล์ ซึ่งใช้ไวยากรณ์ที่เราพูดถึงก่อนหน้านี้

ความคิดเห็นแบบหลายบรรทัดคือความคิดเห็นที่ครอบคลุมมากกว่าหนึ่งบรรทัดบนสไตล์ชีต นี่คือตัวอย่างความคิดเห็นแบบหลายบรรทัดของ CSS:

/* This style sets the font size of all <p> tags to 16px
and also sets the color of the text to gray */
p {
	font-size: 16px;
	color: gray;
}

ความคิดเห็นนี้ครอบคลุมสองบรรทัดและอธิบายสไตล์ CSS

บทสรุป

เช่นเดียวกับภาษาการเขียนโปรแกรม CSS มีไวยากรณ์พื้นฐานบางอย่างเพื่อกำหนดวิธีที่คุณสามารถเขียนโค้ดโดยใช้ภาษานั้น

ใน CSS มีสององค์ประกอบที่สร้างกฎของสไตล์:การประกาศและตัวเลือก การประกาศคือสไตล์ที่คุณต้องการนำไปใช้กับองค์ประกอบ และใช้ตัวเลือกเพื่อเลือกองค์ประกอบที่จะใช้การประกาศของคุณ

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

บทช่วยสอนนี้กล่าวถึงพื้นฐานของไวยากรณ์ CSS และวิธีแสดงความคิดเห็นในสไตล์ชีต CSS ตอนนี้คุณพร้อมที่จะเริ่มเขียนกฎและความคิดเห็นเกี่ยวกับสไตล์ CSS อย่างนักพัฒนาเว็บมืออาชีพแล้ว!