เขียน rule แบบต่อเนื่อง หลายๆ rule ในบรรทัดเดียว

โดยปรกติแล้วการควบคุมแต่ละส่วนที่ปรากฏใน browser นั้น เราจะต้องใช้ rule จำนวนหลายๆส่วนเพื่อนำมารวมกัน เพื่อประกอบกันขึ้นมาเป็นรูปแบบสักแบบหนึ่ง และแน่นอน ตามที่เราทราบมาในบทแรกๆของการเขียน xhtml แล้ว ว่าสามารถมีการอ้างอิง parent ไปยัง child ได้ ซึ่ง CSS ก็สามารถเขียนแบบนั้นได้ด้วยเช่นกัน

body {background:url(mindwebhost_logo.png) bottom right no-repeat}
p{font-family: “MS Sans Serif”, Tahoma, sans-serif; font-weight: bold; color:#3366cc; }
img {float:left; margin-right:10px}
สิ่งเพิ่มเติมที่ 7.5 ตัวอย่างของ css ในหน้าเว็บ แต่ไม่ต้องตกใจว่าอะไรเยอะแยะไปหมด เพราะว่าให้สนใจแค่ rule ของ p element เท่านั้น และยังไม่มี em element ในตอนนี้

<p>ตรงนี้เราจะเขียนเป็นข้อความในย่อหน้าตามปรกติ
แต่ว่า ส่วนนี้จะเป็น<em>ตัวเอียง</em></p>
สิ่งเพิ่มเติมที่ 7.6 จะเห็นได้ว่าเรามี em element ที่อยู่ใน p element ซึ่งเราจะเรียก em ว่าเป็น child ของ p

นอกจากนี้แล้ว CSS นั้นยังมีการเขียน rule ทับกับได้อีกด้วย เช่นเราอาจจะกำหนดให้ element ของ parent นั้น มีตัวหนังสือสีแดง แต่เราก็สามารถสร้าง child ใหม่ เพื่อให้ child ที่ถูกเรียกใช้นั้นเป็นสีอื่นได้เช่นกัน โดยที่ไม่กระทบกับ parent

สิ่งเพิ่มเติมที่ 7.7
โค้ดจาก 7.6 + style 7.5 ทำให้เราได้หน้าเว็บที่มีรูป background ที่ด้านขวามือด้านล่าง และมีตัวเอียงในประโยคหลักด้วย นอกจากนั้นจะเห็นได้ว่าตัวหนังสือเป็นสีน้ำเงินตัวหนา ทั้งๆที่โค้ดส่วน xhtml ไม่ได้ระบุเอาไว้เลย

และโดยปรกติแล้ว ถ้าเราไม่ได้เขียน style ให้กับ child เอาไว้ก่อน เมื่อมีการเรียกใช้ element ของนั้นขึ้นมา ก็จะไปเรียก style ของ parent มาใช้โดยอัตโนมัติ อย่างกรณีนี้ เรียกใช้ em โดยที่เรายังไม่ได้กำหนด style ให้กับ em element ดังนั้น em element จึงเอา style ของ p มาใช้แทน เพราะว่าเป็น parent ของ em

p {color:red}

p.group {color:blue}

p#one {color:green}

p#one {color:magenta}
สิ่งเพิ่มเติมที่ 7.8 เราได้เขียน rule ของ p element เพิ่มขึ้นมาอีก โดยอันแรกก็คือ p element อันเดิมที่เขียนเอาไว้นั่นเอง ส่วนอันที่สองจะมีผลเฉพาะ p element ที่มี class คือ group และ อันที่ 3 กับ 4 จะมีผลแค่อันเดียวเท่านั้น คือ p element ที่มี id เป็น one

สำหรับ id attribute นั้นเราสามารถกำหนดได้หลายชื่อ แต่ว่า ในแต่ละหน้านั้น เราจะเอา id มาใช้ได้เพียงจุดเดียว สำหรับแต่ละชื่อเท่านั้น (1จุด/1ชื่อ/1หน้า) ในขณะที่ class attribute เราสามารถสร้างได้หลายชื่อ และใน 1หน้าเว็บ เราก็เอามาใช้ได้ซ้ำๆกันหลายๆครั้ง

<p>เราก็จะถือว่านี้คือย่อหน้าปรกติ</p>
<p class=”group”>ย่อหน้ายนี้เราเรียกใช้ class ที่ชื่อ group</p>
<p class=”group” id=”one”>ย่อหน้านี้จะปรากฏเพียงแค่
rule สุดท้ายเท่านั้น เพราะว่ามีการเขียนrule ที่เหมือนกันจึงต้องอิงอันสุดท้าย</p>
สิ่งเพิ่มเติมที่ 7.9 โค้ดที่จะทำให้เห็นการเรียกใช้ style และ id ที่แตกต่างกันไป ทำให้ได้ผลออกมาที่แตกต่างกัน

สิ่งเพิ่มเติมที่ 7.10 เมื่อมีการเขียน rule ที่เหมือนกัน จะเห็นได้ว่า rule ที่มีผลคือ rule อันสุดท้ายนั่นเอง

ถ้าคุณไม่ต้องการให้อะไรมาเขียนทับ rule ใดๆได้ เพราะว่าอาจจะเป็น rule ที่สำคัญาก เราอาจจะเอา important เข้ามาช่วยได้ โดยการใส่ !important เข้าไปตอนที่จบ rule ก็ได้เช่นกัน

สรูปได้ว่าในการเขียน rule ของ css นั้นสามารถเขียนได้หลากหลายรูปแบบ และกำหนดให้มีรูปแบบใน child ได้อีกมากมาย และทำให้ได้รู้ถึงเรื่องของความสำคัญของ rule เมื่อเขียนซ้ำกัน การกำหนดค่าให้ rule ต่างๆ หรือกำหนดให้ rule ใดสำคัญที่สุด โดยสุดท้ายแล้วก็จะมีเพียง rule เดียวเท่านั้นที่จะได้แสดงผล

No comments yet.
You must be logged in to post a comment.