ความสำคัญของตำแหน่ง style sheet

มีหลากหลายวิธีในการกำหนด style เพื่อให้จุดที่เราต้องการเปลี่ยนนั้นได้รับค่าที่เรากำหนดให้ แต่จะเกิดอะไรขึ้นล่ะ ถ้าเรากำหนดให้มี style มากกว่า 1 rule ผ่านช่องทางที่ต่างกัน แต่กำหนดเข้าไปที่เป้าหมายเดียวกัน โดยคำตอบก็อยู่ในเรื่องเก่าที่เราเคยได้กล่าวเอาไว้แล้ว ในเรื่องการสืบทอดจาก child >> parent นั่นเอง

<link rel=”stylesheet” type=”text/css” href=”styles.css” />
<style>img {border-style: dashed}</style>
</head>
สิ่งเพิ่มเติมที่ 8.17 สั่ง style ซ้ำ rule ที่มีอยู่ใน style sheet ที่ link เข้ามาใช้ โดยให้ style นั้นอยู่บรรทัดต่อจาก link

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

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

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