Enjoyday.net
แนะนำการสร้างเว็บไซต์ สอนทำเว็บตั้งแต่พื้นฐาน สอน HTML,CSS, XHTML แนะนำการใช้งาน Wordpress & Joomla!
Home
About
สอนทำเว็บไซต์
Wordpress
Joomla!
ร้านหนังสือ/CD
Site Map
<html> <head> <title>ex_css_chapter07_2</title> <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="../../webtutorial/images/star_icons.gif"/> <img src="../../webtutorial/images/star_icons.gif"/> <img src="../../webtutorial/images/star_icons.gif"/> <br><br> แบบนี้ไม่ดี ต้องมาระบุ class borderimage ให้แต่ละรูป<br/> <img src="../../webtutorial/images/star_icons.gif" class="borderimage"/> <img src="../../webtutorial/images/star_icons.gif" class="borderimage"/> <img src="../../webtutorial/images/star_icons.gif" class="borderimage"/> <br> <br> แบบนี้ดี img ที่อยู่ในส่วน div class imgspecial_box จะเป็นขอบแดง หนา5 ให้ทั้งหมด ไม่ต้องมากำหนดทีละรูป <div id="imgspecial_box"> <img src="../../webtutorial/images/star_icons.gif"/> <img src="../../webtutorial/images/star_icons.gif"/> <img src="../../webtutorial/images/star_icons.gif"/> </div> </body> </html>
แก้ไข code ตามต้องการ แล้วกดปุ่ม
