CSS ไวยากรณ์
CSS กฎชุดประกอบด้วยตัวเลือกและป้องกันการประกาศ:
จุดที่จะเลือกองค์ประกอบ HTML ที่คุณต้องการสไตล์
บล็อกประกาศมีมากกว่าหนึ่งประกาศคั่นด้วยเครื่องหมายอัฒภาค
แต่ละคนมีการประกาศชื่อคุณสมบัติ CSS และค่าคั่นด้วยลำไส้ใหญ่
ประกาศ CSS มักจะจบลงด้วยอัฒภาคและบล็อกประกาศถูกล้อมรอบด้วยวงเล็บปีกกา
ในตัวอย่างต่อไปทั้งหมด <p> องค์ประกอบที่จะเป็นศูนย์กลางชิดด้วยสีตัวอักษรสีแดง:
CSS Selectors
ตัวเลือก CSS จะใช้ในการ "find" (หรือเลือก) องค์ประกอบ HTML ตามชื่อองค์ประกอบ, ID, ชั้นแอตทริบิวต์ของพวกเขาและอื่น ๆ อีกมากมาย
ตัวเลือกองค์ประกอบ
ตัวเลือกองค์ประกอบเลือกองค์ประกอบตามชื่อธาตุ
คุณสามารถเลือกทั้งหมด <p> องค์ประกอบบนหน้าเช่นนี้ (ในกรณีนี้ทั้งหมด <p> องค์ประกอบที่จะเป็นศูนย์กลางชิดกับสีของตัวอักษรสีแดง):
ID ที่เลือก
ตัวเลือก ID ที่ใช้คุณลักษณะ ID ขององค์ประกอบ HTML เพื่อเลือกองค์ประกอบเฉพาะ
รหัสขององค์ประกอบต้องไม่ซ้ำกันภายในหน้าเพื่อเลือก ID ที่ใช้ในการเลือกองค์ประกอบที่ไม่ซ้ำกันหนึ่ง!
ในการเลือกองค์ประกอบที่มีรหัสเฉพาะเขียนกัญชา (#) ตัวอักษรตามด้วยรหัสขององค์ประกอบ
กฎรูปแบบด้านล่างนี้จะนำไปใช้กับองค์ประกอบ HTML กับ id="para1" :
 | หมายเหตุ: ชื่อ ID ไม่สามารถเริ่มต้นด้วยตัวเลข! |
|---|
ตัวเลือกระดับ
ตัวเลือกชั้นเลือกองค์ประกอบที่มีคุณลักษณะเฉพาะชั้น
ในการเลือกองค์ประกอบที่มีเฉพาะชั้นเขียน period (.) ตัวอักษรตามด้วยชื่อของชั้น
ในตัวอย่างด้านล่าง, องค์ประกอบ HTML ทั้งหมดที่มี class="center" จะเป็นสีแดงและศูนย์ชิด:
นอกจากนี้คุณยังสามารถระบุได้ว่าองค์ประกอบ HTML เพียงเฉพาะควรจะได้รับผลกระทบโดยชั้นเรียน
ในตัวอย่างด้านล่างเท่านั้น <p> องค์ประกอบที่มี class="center" จะเป็นศูนย์กลางชิด:
องค์ประกอบ HTML ยังสามารถดูมากกว่าหนึ่งชั้นเรียน
ในตัวอย่างด้านล่างนี้ <p> องค์ประกอบที่จะได้รับการเรียกขานตาม class="center" และ class="large" :
| หมายเหตุ: ชื่อชั้นไม่สามารถเริ่มต้นด้วยตัวเลข! |
|---|
การจัดกลุ่ม Selectors
ถ้าคุณมีองค์ประกอบที่มีความหมายลักษณะเดียวกันเช่นนี้
h1
{
text-align: center;
color: red;
}
h2
{
text-align: center;
color: red;
}
p
{
text-align: center;
color: red;
}มันจะดีกว่าที่จะกลุ่มเล็กเตอร์เพื่อลดรหัส
เพื่อเตอร์กลุ่มแยกแต่ละตัวเลือกด้วยเครื่องหมายจุลภาค
ในตัวอย่างด้านล่างที่เราได้จัดกลุ่มเตอร์จากโค้ดข้างต้น:
CSS ความคิดเห็น
ความคิดเห็นที่จะใช้ในการอธิบายรหัสและอาจช่วยเมื่อคุณแก้ไขรหัสแหล่งที่มาในภายหลัง
ความคิดเห็นจะถูกละเลยโดยเบราว์เซอร์
ความคิดเห็น CSS เริ่มต้นด้วย /* and ends with */ / ความคิดเห็นยังสามารถครอบคลุมหลายบรรทัด:
ตัวอย่าง
p
{
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
ลองตัวเอง» ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!
การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย»