2011-03-28 28 views
12

Başkalarının kendi web sitelerine işlevsellik eklemelerine izin vermek için bir HTML pasajı oluşturuyorum (oylama gereçlerinden biridir). Böyle HTML pasajı oluşturduk:tüm css stilleri nasıl temizlenir

<div> 
    [implementation of my voting widget] 
</div> 

Sadece doğru bu aletin biçimlendirme almak için çok fazla zaman geçirdi. Bir stil sayfası almayan örnek bir web sayfasında harika çalışır.

Widget'ı bir Drupal sitesindeki bir sayfaya eklediğimde, içe aktarılan CSS, dikkatli biçimlendirmemle zarar görüyor. HTML snippet'imin tüm CSS stil sayfalarını yoksaymasını isterim. Mümkün mü?

Mümkün olandan bağımsız olarak daha iyi bir çözüm var mı?

+0

Widget'ınızı halihazırda CSS olmadan nasıl biçimlendiriyorsunuz? –

+0

@Alastair Pitts: O. Sadece widget'ının sayfadan aldığı CSS stillerini istemiyor. –

+0

@Alastair: satır içi CSS ile –

cevap

8

yerine herhangi ithal stil tarafından geçersiz olmamak CSS stilleri güvenmek, Widget'ınızın benzersiz bir kimlik vermek ve stilleri hiç bir stilleri uygulamak için emin bu kimliği bir türevi olduğundan emin olmak gerekir Eğer overriden için (margin, padding, vs) istemiyoruz:

<div id="votify"> 
    [implementation of my voting widget] 
</div> 

#votify {} 
#votify ul {} 
#votify div span {} 
/* etc */ 
+0

yep, jQuery UI bunu (her ne kadar belirli bir sınıf adlandırma yapısı kullanıyor olsalar da) –

+0

o ikinci taraf kullanıcısının kendi widget'ına düşebilmesini istiyor. stil sayfaları, stil sayfalarıyla uğraşmak zorunda kalmadan. Bu yüzden belirli bir "div" içindeki her şey için yerel olmayan stili bir şekilde temizlemek istiyor. –

4

Bir sıfırlama stil kullanarak deneyebilirsiniz:,, sayfanın CSS üzerine yazmak istemiyorum Tabii

http://meyerweb.com/eric/tools/css/reset/

ama Widget'ınızın kullandığı stilleri sıfırlamak için nasıl bir fikir edinmek ve kişisel CSS'nizi kullanın. Yani bir şey ...

#voting-widget * { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 

Umarım bu yardımcı olur.

+0

Widget'ım varolan düzeni engelleyemiyor, dolayısıyla bir stil sayfasını içe aktarabileceğimi sanmıyorum. Bu satır içi yapmak çok çirkin olurdu. –

+0

Bir stil sayfası içe aktarmanızı önermiyorum ... Bu makalede sunulan fikirleri, sıfırlama stilleri konusunda kullanmanızı öneriyorum, böylece widget'ınızı netleştirebilirsiniz. – Hristo

+0

@Jeff inline satır içi yapmak için ... –

1

Widget CSS'nizi varsayılan değerlere sıfırlayın ve daha sonra, biçimlendirme kodunuzu ekleyin. Bu, herhangi bir sayfa stilini temizleyecektir, böylece temiz bir sayfadan çalışabilirsiniz.

div#widget, div#widget * { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    /* ... whatever other reset code ... */ 

    /* ... then add your own code ... */ 
    color: red; 
} 
1

Ben stili açıkça özelliğinde tüm kenar çizgileri, yazı vb ayarlamak zorunda düşünüyorum bir stil sayfasını kullanarak olmadan bunu böylece var olan CSS sayfalarının önceliğini alır.

İlgili konular