พอดีจะเขียน 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 หรือทริคก็ช่วยกันได้นะครับ
:wanwan020: :wanwan020: :wanwan020: :wanwan020:
!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 ครับ
ผมลองคิดเล่นๆนะ
อันดับแรก ยังไง 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 ก็จะแสดงผลปรกติ
คิดออกก็ประมาณนี้
ขอบคุณท่านทั้งสองมากๆครับ เดี๋ยวผมจะเอาไปปรับใช้ดู ขอบคุณครับ
:wanwan017: :wanwan017: :wanwan017:
สร้างไฟล์ site มาอีกอันเลยครับ แล้ว overide
อ้างถึงจาก: MapTwoZa ใน 24 เมษายน 2013, 02:34:25
ผมลองคิดเล่นๆนะ
อันดับแรก ยังไง 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 ก็จะแสดงผลปรกติ
คิดออกก็ประมาณนี้
ผมไม่เคยรู้แบบนี้เลยนะเนี่ย แจ่มครับ :wanwan003:
ลองใช้ !important; ต่อท้าย css ตัวนั้นครับ
เช่น
font-size: 16px !important;