พอดีจะเขียน CSS ให้คลุมในหน้า page ที่มี external CSS อยู่แล้วครับ
ปัญหาก็คือ เวลาเราเขียน tag <h1> ลงไป <h1> selector ของ external css ก็ถูกเรียกทำงานจาก
.module h1 {
height: 28px;
padding-top: 2px;
overflow: hidden;
padding-left: 25px;
background: url(images/header_bg.gif) no-repeat 0 -297px;
font-size: 14px;
color: #666666;
font-weight: bold;
line-height: 30px;
}
ซึ่ง DOM จะเป็นลักษณะนี้ครับ
<div class="module"> <!--ไม่สามารถเปลี่ยน class ได้-->
<h1>xxxxxxx</h1>
และถ้าผมจะเขียนให้ <h1> override ทุกๆ property แทนตัว .module h1 โดยที่ไม่แก้ไขไฟล์ external css พอมีวิธีที่ง่ายๆบ้างไหมครับ
เพราะผมลองทำแบบ inline กับ internal มันก็ต้องมานั่งไล่ override ทุกๆ property ที่ถูกประกาศไว้จาก External CSS อ่ะครับ
พูดง่ายๆคือ ไม่อยากให้ <h1> แสดงผลเหมือนใน external css ที่ถูกเรียกใช้เลย เฉพาะหน้านั้นๆครับ
ปัญหาคือ คือไม่อยากจะนั่ง override มันทุกอันอ่ะครับ งง ไหมเอ่ย
ตัวอย่างที่เขียนนะครับ
internal css ที่เราเขียน<style type="text/css">
h1{
font-family:"PSL Kitithada", Tahoma;
color: orangered;
}
</style>
external css.module h1 {
height: 28px;
padding-top: 2px;
overflow: hidden;
padding-left: 25px;
background: url(images/header_bg.gif) no-repeat 0 -297px;
font-size: 14px;
color: #666666;
font-weight: bold;
line-height: 30px;
}
อยากให้ในส่วนของ property พวก อื่นๆที่มีใน external css มันไม่ทำงานไปเลยอ่ะครับ ให้ทำแต่ส่วนของ internal ที่เราเขียน
ผมใช้ FCKEDITOR ทำนะครับ เพราะมันเป็นตัว cms เลยไม่อยากแก้ไข css external เกรงว่าจะกระทบต่อการแสดงผลในหน้าอื่นๆ
ขอบคุณครับที่อ่านมาซะยาว >_< พอมี idea หรือทริคก็ช่วยกันได้นะครับ