CSS - ไวยากรณ์

CSS ประกอบด้วยกฎสไตล์ที่เบราว์เซอร์ตีความแล้วนำไปใช้กับองค์ประกอบที่เกี่ยวข้องในเอกสารของคุณ กฎสไตล์ประกอบด้วยสามส่วน -

Selector- ตัวเลือกคือแท็ก HTML ที่จะใช้สไตล์ อาจเป็นแท็กใดก็ได้เช่น <h1> หรือ <table> เป็นต้น
Property- คุณสมบัติคือแอตทริบิวต์ประเภทหนึ่งของแท็ก HTML พูดง่ายๆคือแอตทริบิวต์ HTML ทั้งหมดจะถูกแปลงเป็นคุณสมบัติ CSS พวกเขาอาจจะสี , ชายแดนฯลฯ
Value- ค่าถูกกำหนดให้กับคุณสมบัติ ตัวอย่างเช่นคุณสมบัติสีสามารถมีค่าเป็นสีแดงหรือ# F1F1F1เป็นต้น

คุณสามารถใส่ CSS Style Rule Syntax ได้ดังนี้ -

selector { property: value }

Example - คุณสามารถกำหนดเส้นขอบตารางได้ดังนี้ -

table{ border :1px solid #C00; }

ตารางที่นี่คือตัวเลือกและเส้นขอบเป็นคุณสมบัติและค่าที่กำหนด1px solid # C00คือค่าของคุณสมบัตินั้น

คุณสามารถกำหนดตัวเลือกได้หลายวิธีตามความสะดวกสบายของคุณ ขอฉันใส่ตัวเลือกเหล่านี้ทีละตัว

ตัวเลือกประเภท

นี่คือตัวเลือกเดียวกับที่เราเห็นด้านบน อีกตัวอย่างหนึ่งที่จะให้สีกับหัวเรื่องระดับ 1 ทั้งหมด -

h1 {
   color: #36CFFF; 
}

Universal Selectors

แทนที่จะเลือกองค์ประกอบของประเภทที่เฉพาะเจาะจงตัวเลือกสากลค่อนข้างตรงกับชื่อขององค์ประกอบประเภทใด ๆ -

* { 
   color: #000000; 
}

กฎนี้แสดงเนื้อหาของทุกองค์ประกอบในเอกสารของเราเป็นสีดำ

ตัวเลือกลูกหลาน

สมมติว่าคุณต้องการใช้กฎสไตล์กับองค์ประกอบใดองค์ประกอบหนึ่งก็ต่อเมื่ออยู่ภายในองค์ประกอบหนึ่ง ๆ ดังที่ให้ไว้ในตัวอย่างต่อไปนี้ style rule จะใช้กับ <em> องค์ประกอบก็ต่อเมื่อมันอยู่ภายในแท็ก <ul>

ul em {
   color: #000000; 
}

ตัวเลือกคลาส

คุณสามารถกำหนดกฎสไตล์ตามแอตทริบิวต์คลาสขององค์ประกอบ องค์ประกอบทั้งหมดที่มีคลาสนั้นจะถูกจัดรูปแบบตามกฎที่กำหนดไว้

.black {
   color: #000000; 
}

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

h1.black {
   color: #000000; 
}

กฎนี้ทำให้เนื้อหาในสีดำเพียง <h1> องค์ประกอบที่มีแอตทริบิวต์ชุดชั้นกับสีดำ

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

<p class = "center bold">
   This para will be styled by the classes center and bold.
</p>

ID Selectors

คุณสามารถกำหนดกฎสไตล์ตามแอตทริบิวต์idขององค์ประกอบ องค์ประกอบทั้งหมดที่มีรหัสนั้นจะได้รับการจัดรูปแบบตามกฎที่กำหนด

#black {
   color: #000000; 
}

กฎนี้จะแสดงเนื้อหาเป็นสีดำสำหรับทุกองค์ประกอบที่มีแอตทริบิวต์idกำหนดเป็นสีดำในเอกสารของเรา คุณสามารถทำให้เป็นพิเศษมากขึ้น ตัวอย่างเช่น -

h1#black {
   color: #000000; 
}

กฎนี้ทำให้เนื้อหาในสีดำเพียง <h1> องค์ประกอบที่มีรหัสชุดแอตทริบิวต์สีดำ

พลังที่แท้จริงของid selectors คือเมื่อใช้เป็นรากฐานสำหรับตัวเลือกที่สืบทอดมาตัวอย่างเช่น -

#black h2 {
   color: #000000; 
}

ในตัวอย่างนี้ทุกระดับที่ 2 หัวจะปรากฏในสีดำเมื่อส่วนหัวของผู้ที่จะนอนกับในแท็กที่มีรหัสชุดแอตทริบิวต์สีดำ

ตัวเลือกเด็ก

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

body > p {
   color: #000000; 
}

กฎนี้จะแสดงย่อหน้าทั้งหมดเป็นสีดำหากเป็นลูกโดยตรงขององค์ประกอบ <body> ย่อหน้าอื่น ๆ ที่ใส่ไว้ในองค์ประกอบอื่น ๆ เช่น <div> หรือ <td> จะไม่มีผลใด ๆ จากกฎนี้

ตัวเลือกคุณสมบัติ

คุณยังสามารถใช้สไตล์กับองค์ประกอบ HTML ที่มีคุณลักษณะเฉพาะได้ กฎสไตล์ด้านล่างจะจับคู่องค์ประกอบอินพุตทั้งหมดที่มีแอตทริบิวต์ type พร้อมค่าของข้อความ -

input[type = "text"] {
   color: #000000; 
}

ข้อดีของวิธีนี้คือองค์ประกอบ <input type = "submit" /> จะไม่ได้รับผลกระทบและสีจะใช้กับช่องข้อความที่ต้องการเท่านั้น

มีกฎต่อไปนี้ที่ใช้กับตัวเลือกแอตทริบิวต์

p[lang]- เลือกองค์ประกอบย่อหน้าทั้งหมดที่มีแอตทริบิวต์lang
p[lang="fr"]- เลือกองค์ประกอบย่อหน้าทั้งหมดที่มีแอตทริบิวต์langมีค่าเท่ากับ "fr"
p[lang~="fr"]- เลือกองค์ประกอบย่อหน้าทั้งหมดที่มีแอตทริบิวต์langประกอบด้วยคำว่า "fr"
p[lang|="en"]- เลือกองค์ประกอบย่อหน้าทั้งหมดที่มีแอตทริบิวต์langมีค่าตรงกับ "en" หรือขึ้นต้นด้วย "en-"

กฎหลายสไตล์

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

h1 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

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

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

การจัดกลุ่มตัวเลือก

คุณสามารถใช้สไตล์กับตัวเลือกต่างๆได้หากต้องการ เพียงคั่นตัวเลือกด้วยเครื่องหมายจุลภาคดังที่ให้ไว้ในตัวอย่างต่อไปนี้ -

h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

กฎรูปแบบการกำหนดนี้จะใช้ได้กับองค์ประกอบ h1, h2 และ h3 เช่นกัน ลำดับของรายการไม่เกี่ยวข้อง องค์ประกอบทั้งหมดในตัวเลือกจะมีการประกาศที่เกี่ยวข้องกับองค์ประกอบเหล่านี้

คุณสามารถรวมตัวเลือกรหัสต่างๆเข้าด้วยกันดังที่แสดงด้านล่าง -

#content, #footer, #supplement {
   position: absolute;
   left: 510px;
   width: 200px;
}