ตัวอย่างความคิดเห็น CSS - วิธีแสดงความคิดเห็น CSS

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

ทั้งความคิดเห็นเดียวและหลายบรรทัดใน CSS เริ่มต้นด้วย/*และลงท้ายด้วย*/และคุณสามารถเพิ่มความคิดเห็นลงในสไตล์ชีตได้มากเท่าที่คุณต้องการ ตัวอย่างเช่น:

/* This is a single line comment*/ .group:after { content: ""; display: table; clear: both; } /* This is a multi-line comment */

นอกจากนี้คุณยังสามารถทำให้ความคิดเห็นของคุณอ่านง่ายขึ้นด้วยการทำให้มีสไตล์:

/* *** * SECTION FOR H2 STYLE *** * A paragraph with information * that would be useful for someone * who didn't write the code. * The asterisks around the paragraph * help make it more readable. *** */

การจัดระเบียบ CSS ด้วยความคิดเห็น

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

/* * CSS TABLE OF CONTENTS * * 1.0 - Reset * 2.0 - Fonts * 3.0 - Globals * 4.0 - Color Palette * 5.0 - Header * 6.0 - Body * 6.1 - Sliders * 6.2 - Imagery * 7.0 - Footer */ /*** 1.0 - Reset ***/ /*** 2.0 - Fonts ***/ /*** 3.0 - Globals ***/ /*** 4.0 - Color Palette ***/ /*** 5.0 - Header ***/ /*** 6.0 - Body ***/ h2 { font-size: 1.2em; font-family: "Ubuntu", serif; text-transform: uppercase; } /*** 5.1 - Sliders ***/ /*** 5.2 - Imagery ***/ /*** 7.0 - Footer ***/

ข้อมูลเพิ่มเติมเกี่ยวกับ CSS: CSS Syntax and Selectors

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

มีสองวิธีหลักในการเขียน CSS

CSS แบบอินไลน์

ข้อมูลจำเพาะเกี่ยวกับความจำเพาะของ CSS: CSS Tricks

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

หากต้องการใช้ CSS แบบอินไลน์ให้เพิ่มแอตทริบิวต์ "style" ให้กับองค์ประกอบ HTML ที่คุณต้องการแก้ไข คำพูดภายในรวมรายการคู่คีย์ / ค่าที่คั่นด้วยอัฒภาค (แต่ละคู่จะคั่นด้วยเครื่องหมายทวิภาค) เพื่อระบุสไตล์ที่จะตั้งค่า

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

 One Two Three 

CSS ภายใน

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

CSS ภายในมีสไตล์ที่ระบุไว้ในแท็กและฝังอยู่ในแท็ก

นี่คือตัวอย่างที่มีเอฟเฟกต์คล้ายกับตัวอย่าง "แบบอินไลน์" ด้านบนยกเว้น CSS จะถูกแยกไปยังพื้นที่ของตัวเอง คำว่า“ หนึ่ง” และ“ สอง” จะตรงกับdivตัวเลือกและเป็นข้อความสีแดงบนพื้นหลังสีเหลือง คำว่า“ สาม” และ“ สี่” จะตรงกับdivตัวเลือกด้วยเช่นกัน แต่ยังตรงกับ.nested_divตัวเลือกที่ใช้กับองค์ประกอบ HTML ใด ๆ ที่อ้างอิงถึงคลาสนั้น ตัวเลือกที่เฉพาะเจาะจงมากขึ้นนี้จะแทนที่ตัวเลือกแรกและสุดท้ายจะปรากฏเป็นข้อความสีฟ้าบนพื้นหลังสีเขียว

 div { color: red; background: yellow; } .nested_div { color: cyan; background: green; } One Two Three Four 

ตัวเลือกที่แสดงด้านบนนั้นง่ายมาก แต่ก็ค่อนข้างซับซ้อน ตัวอย่างเช่นเป็นไปได้ที่จะใช้สไตล์กับองค์ประกอบที่ซ้อนกันเท่านั้น นั่นคือองค์ประกอบที่เป็นลูกขององค์ประกอบอื่น

นี่คือตัวอย่างที่เราระบุสไตล์ที่ควรใช้กับdivองค์ประกอบที่เป็นลูกโดยตรงของdivองค์ประกอบอื่น ๆ ผลลัพธ์คือ“ สอง” และ“ สาม” จะปรากฏเป็นข้อความสีแดงบนพื้นหลังสีเหลือง แต่“ หนึ่ง” และ“ สี่” จะยังคงไม่ได้รับผลกระทบ (และส่วนใหญ่จะเป็นข้อความสีดำบนพื้นหลังสีขาว)

 div > div { color: red; background: yellow; } One Two Three Four 

CSS ภายนอก

สไตล์ทั้งหมดมีเอกสารของตัวเองซึ่งเชื่อมโยงในแท็ก นามสกุลของไฟล์ที่เชื่อมโยงคือ.css