Contextual selectors
การประกาศ selector ซ้อนกัน โดยเคาะ spacebar ทำให้สามารถสืบทอดคุณสมบัติเดิม และเพิ่มคุณสมบัติที่แตกต่างได้ ดูตัวอย่างเพื่อให้เข้าใจมากขึ้นExample
<html>
<head>
<style type="text/css">
h1 { color: blue; background-color:#FFFFCC }
h1 em { color: red }
h1 u { color:green}
</style>
</head>
<body> <h1>วิธีรักษาสุขภาพ</h1>
<h1>วิธีลดน้ำหนัก</h1>
<h1><em>วิธีรักษาสุขภาพ</em></h1>
<h1><u>วิธีรักษาสุขภาพ</u></h1>
</body>
</html>
<head>
<style type="text/css">
h1 { color: blue; background-color:#FFFFCC }
h1 em { color: red }
h1 u { color:green}
</style>
</head>
<body> <h1>วิธีรักษาสุขภาพ</h1>
<h1>วิธีลดน้ำหนัก</h1>
<h1><em>วิธีรักษาสุขภาพ</em></h1>
<h1><u>วิธีรักษาสุขภาพ</u></h1>
</body>
</html>
Output
ข้อความใน <h1> จะเป็นสีน้ำเงิน แต่ถ้ามีการกำหนดว่าเป็นตัวเอียงแล้ว ข้อความใน <h1> จะเป็นสีแดง หรือระบุว่าขีดเส้นใต้แล้วจะได้เป็นสีเขียว โดยที่รูปแบบพื้นหลังของ <h1> ยังคงอยู่
วิธีรักษาสุขภาพ
วิธีลดน้ำหนัก
วิธีรักษาสุขภาพ
วิธีรักษาสุขภาพ
อีกตัวอย่างหนึ่ง เพื่อแสดงให้เห็นประโยชน์ของการใช้ Contextual selectors
Example
<html>
<head>
<style type="text/css">
/*ให้ img ทั่วไป ขอบสีเทา หนา2*/
img {
border:solid;
border-width:2px;
border-color:#999999;
}
/*ให้ class borderimage มีขอบสีแดง หนา5 แต่ไม่ได้กำหนด HTML tag เฉพาะ*/
.borderimage {
border:solid;
border-width:5px;
border-color:red;
}
/*ให้ เฉพาะ tag <img> class imgspecial_box มีขอบสีแดง หนา5*/
#imgspecial_box img {
border:solid;
border-width:5px;
border-color:red;
}
</style>
</head>
<body>
<img src="../images/star_icons.gif" />
<img src="../images/star_icons.gif" />
<img src="../images/star_icons.gif" />
<br><br>
แบบนี้ไม่ดี ต้องมาระบุ class borderimage ให้แต่ละรูป<br />
<img src="../images/star_icons.gif" class="borderimage" />
<img src="../images/star_icons.gif" class="borderimage" />
<img src="../images/star_icons.gif" class="borderimage" />
<br>
<br>
แบบนี้ดี img ที่อยู่ในส่วน div class imgspecial_box จะเป็นขอบแดง หนา5 ให้ทั้งหมด ไม่ต้องมากำหนดทีละรูป
<div id="imgspecial_box">
<img src="../images/star_icons.gif" />
<img src="../images/star_icons.gif" />
<img src="../images/star_icons.gif" />
</div>
</body>
</html>
<head>
<style type="text/css">
/*ให้ img ทั่วไป ขอบสีเทา หนา2*/
img {
border:solid;
border-width:2px;
border-color:#999999;
}
/*ให้ class borderimage มีขอบสีแดง หนา5 แต่ไม่ได้กำหนด HTML tag เฉพาะ*/
.borderimage {
border:solid;
border-width:5px;
border-color:red;
}
/*ให้ เฉพาะ tag <img> class imgspecial_box มีขอบสีแดง หนา5*/
#imgspecial_box img {
border:solid;
border-width:5px;
border-color:red;
}
</style>
</head>
<body>
<img src="../images/star_icons.gif" />
<img src="../images/star_icons.gif" />
<img src="../images/star_icons.gif" />
<br><br>
แบบนี้ไม่ดี ต้องมาระบุ class borderimage ให้แต่ละรูป<br />
<img src="../images/star_icons.gif" class="borderimage" />
<img src="../images/star_icons.gif" class="borderimage" />
<img src="../images/star_icons.gif" class="borderimage" />
<br>
<br>
แบบนี้ดี img ที่อยู่ในส่วน div class imgspecial_box จะเป็นขอบแดง หนา5 ให้ทั้งหมด ไม่ต้องมากำหนดทีละรูป
<div id="imgspecial_box">
<img src="../images/star_icons.gif" />
<img src="../images/star_icons.gif" />
<img src="../images/star_icons.gif" />
</div>
</body>
</html>
มาดูอีกตัวอย่างที่ไม่ดี คล้ายกับตัวอย่างข้างบน เป็นตัวอย่างที่ใช้ CSS มากเกินไป
Example
<html>
<head>
<title>ex_css_chapter07_3</title>
<style type="text/css">
a.boldlink { color:blue; font-weight:bold; }
</style>
</head>
<body>
<a href="http://www.enjoyday.net/webtutorial/html/index.html" class="boldlink">HTML</a><br />
<a href="http://www.enjoyday.net/webtutorial/css/index.html" class="boldlink">CSS</a><br />
<a href="http://www.enjoyday.net/webtutorial/xhtml/index.html" class="boldlink">XHTML</a><br />
<a href="http://www.enjoyday.net/webtutorial/javascript/index.html" class="boldlink">JavaScript</a>
</body>
</html>
<head>
<title>ex_css_chapter07_3</title>
<style type="text/css">
a.boldlink { color:blue; font-weight:bold; }
</style>
</head>
<body>
<a href="http://www.enjoyday.net/webtutorial/html/index.html" class="boldlink">HTML</a><br />
<a href="http://www.enjoyday.net/webtutorial/css/index.html" class="boldlink">CSS</a><br />
<a href="http://www.enjoyday.net/webtutorial/xhtml/index.html" class="boldlink">XHTML</a><br />
<a href="http://www.enjoyday.net/webtutorial/javascript/index.html" class="boldlink">JavaScript</a>
</body>
</html>
แก้ไขใหม่เขียนแบบ Contextual selectors จะดีกว่าค่ะ
<html>
<head>
<title>ex_css_chapter07_3</title>
<style type="text/css">
#boldlink_box a { color:blue; font-weight:bold; }
</style>
</head>
<body>
<div id="boldlink_box">
<a href="http://www.enjoyday.net/webtutorial/html/index.html">HTML</a><br />
<a href="http://www.enjoyday.net/webtutorial/css/index.html">CSS</a><br />
<a href="http://www.enjoyday.net/webtutorial/xhtml/index.html">XHTML</a><br />
<a href="http://www.enjoyday.net/webtutorial/javascript/index.html">JavaScript</a> </div>
</body>
</html>
Output<head>
<title>ex_css_chapter07_3</title>
<style type="text/css">
#boldlink_box a { color:blue; font-weight:bold; }
</style>
</head>
<body>
<div id="boldlink_box">
<a href="http://www.enjoyday.net/webtutorial/html/index.html">HTML</a><br />
<a href="http://www.enjoyday.net/webtutorial/css/index.html">CSS</a><br />
<a href="http://www.enjoyday.net/webtutorial/xhtml/index.html">XHTML</a><br />
<a href="http://www.enjoyday.net/webtutorial/javascript/index.html">JavaScript</a> </div>
</body>
</html>
ไม่มีความคิดเห็น:
แสดงความคิดเห็น