สอบถามเรื่องการ override CSS ครับ ??

[renderer]

พอดีจะเขียน 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 หรือทริคก็ช่วยกันได้นะครับ

[hisupakorn]

!important ลองเติมไปด้านหลังเป็น อย่างอันนี้มี color ซ้ำกันก็

โค้ด เลือก ขยาย

.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!important;
font-weight: bold;
line-height: 30px;
}

ไม่แนะนำให้เขียน style h1 โดดๆครับมันจะ overwrite แล้วจะเป็นเยี่ยงนี้ ควรจะใส่ใช้ style class ใน element ครับ

[MapTwoZa]

ผมลองคิดเล่นๆนะ

อันดับแรก ยังไง ext css ก็ถูกโหลดเข้ามา style ยังไงก็ถูกแสดงผลครับถ้ามันเข้า pattern แบบนี้ .module h1

ดังนั้น ถ้าไม่อยาก overide ก็ต้องทำให้มันไม่เข้า pattern ของ ext css ครับ

วิธีที่ 1 โดยการใช้ js remove .module ออกจาก element
จาก <div class="module"><h1>xxxxxxx</h1>
เป็น <div class=""><h1>xxxxxxx</h1>
วิธีนี้จะกระทบ sub element ตัวอื่นของ .module ด้วย ถ้าไม่กระทบก็ใช้วิธีนี้ได้ครับ

วิธีที่ 2 ไปเพิ่มเงื่อนไขใน ext css ครับ
//ตัวอย่างเป็น css3 นะครับ
เช่นแก้เป็น
.module h1:not(.no-external-css) {
...
}
<div class="module"><h1 class="no-external-css">xxxxxxx</h1>


วิธีที่ 3 เหมือน 2 แต่ใช้ js ช่วย process ครับ ซึ่งจะยาวกว่าแต่ไม่ require css3
ขั้นตอนก็
1. แก้ ext css selector เป็น .module h1.allow-external{...}
2. ตอนนี้จะใช้ jquery select element ที่เข้าเงื่อนไข $('.module h1[class!="not-allow-external"]')
นั่นคือ ถ้าไม่มี class "not-allow-external" ก็ให้เพิ่ม class allow-external ลงไป
3. เพิ่มclass not-allow-external ลงใน h1 ที่ไม่ต้องการ external css
ดังนี้ <h1 class="not-allow-external">xxxxx</h1>

ส่วนพวก <h1 class="text-center">xxx</h1>
หรือ <h1>xxx</h1>
ก็จะถูก javascript เพิ่ม class "allow-external" ลงไปแล้วก็จะเข้า pattern ของ external css ก็จะแสดงผลปรกติ


คิดออกก็ประมาณนี้

[renderer]

ขอบคุณท่านทั้งสองมากๆครับ เดี๋ยวผมจะเอาไปปรับใช้ดู ขอบคุณครับ

[dtscript]

สร้างไฟล์ site มาอีกอันเลยครับ แล้ว overide

[altonut]

ผมลองคิดเล่นๆนะ

อันดับแรก ยังไง ext css ก็ถูกโหลดเข้ามา style ยังไงก็ถูกแสดงผลครับถ้ามันเข้า pattern แบบนี้ .module h1

ดังนั้น ถ้าไม่อยาก overide ก็ต้องทำให้มันไม่เข้า pattern ของ ext css ครับ

วิธีที่ 1 โดยการใช้ js remove .module ออกจาก element
จาก <div class="module"><h1>xxxxxxx</h1>
เป็น <div class=""><h1>xxxxxxx</h1>
วิธีนี้จะกระทบ sub element ตัวอื่นของ .module ด้วย ถ้าไม่กระทบก็ใช้วิธีนี้ได้ครับ

วิธีที่ 2 ไปเพิ่มเงื่อนไขใน ext css ครับ
//ตัวอย่างเป็น css3 นะครับ
เช่นแก้เป็น
.module h1:not(.no-external-css) {
...
}
<div class="module"><h1 class="no-external-css">xxxxxxx</h1>


วิธีที่ 3 เหมือน 2 แต่ใช้ js ช่วย process ครับ ซึ่งจะยาวกว่าแต่ไม่ require css3
ขั้นตอนก็
1. แก้ ext css selector เป็น .module h1.allow-external{...}
2. ตอนนี้จะใช้ jquery select element ที่เข้าเงื่อนไข $('.module h1[class!="not-allow-external"]')
นั่นคือ ถ้าไม่มี class "not-allow-external" ก็ให้เพิ่ม class allow-external ลงไป
3. เพิ่มclass not-allow-external ลงใน h1 ที่ไม่ต้องการ external css
ดังนี้ <h1 class="not-allow-external">xxxxx</h1>

ส่วนพวก <h1 class="text-center">xxx</h1>
หรือ <h1>xxx</h1>
ก็จะถูก javascript เพิ่ม class "allow-external" ลงไปแล้วก็จะเข้า pattern ของ external css ก็จะแสดงผลปรกติ


คิดออกก็ประมาณนี้

ผมไม่เคยรู้แบบนี้เลยนะเนี่ย แจ่มครับ 

[kowit2]

ลองใช้ !important; ต่อท้าย css ตัวนั้นครับ

เช่น

font-size: 16px !important;