Geçerli css'yi bir css dosyasında php olarak değiştirin.

Question

Ben bu kurallara sahip bir custom.css var:

div#widget {background:red !important;} 
div#widget2 {background:#f0f0f0;} 
div#widget2:hover {background: rgb(10,20,30);} 

Bu kurallar custom.css dosyada her yerde olabilir:

Örnek

:

div#widget {background:red !important;} 
.mainwrapper {background:blue;} 
div#widget2 {background:#f0f0f0;}  
p {font-size:12px;} 
div#widget2:hover {background: rgb(10,20,30);} 

Şimdi benim düşünce başka css dosyasını eklemektir böyle varolan custom.css kurallarını hiçe:

div#widget {background:yellow !important;} 
div#widget2 {background:#000000 !important;} 
div#widget2:hover {background: #ffffff !important;} 

Bunun yerine yeni bir özel css dosyası ekleme

! Önemli-kurallar Düşünüyorum ... yeni arka plan-renkleri ile cari custom.css kurallarını değiştirmek için bir yolu var mı? Php'de (güvenli bir şekilde) bu mümkün mü?

$fp = fopen("newcustom.css", 'w'); 
fwrite($fp, $important_css); 
fclose($fp); 

GÜNCELLEME Açıklama (Şimdi böyle bir yeni css yaratıyorum). Kullanıcıların widget oluşturabileceği bir sistemim var. Widget kodu, kullanıcının kolayca kendi web sitesine kopyalayıp yapıştırabileceği şekilde oluşturulur. Kullanıcı için özel css'ye bir referans oluşturulur. Yeni css dosyası eklemek gerekirse

Şimdi sonra kullanıcı kopyalayıp yeni css çalışması için yeni bir widgetcode yapıştırmak zorunda olurdu ... sistemini güncelleyerek ediyorum. Geçerli custom.css yerini alabilirsem o zaman "hemen" çalışır.

Answer 1

geçersiz kılma senin stil sıralaması dahil önemli. Yani sonradan custom.css sonra yeni css dosyası içerir:

<link rel="stylesheet" type="text/css" href="custom.css" /> 
<link rel="stylesheet" type="text/css" href="new_file.css" /> 

Yani, artık son kural ilki geçersiz:

div#widget {background:red;} 
div#widget {background:blue;} /* this will work */ 

her halükarda aynı için daha sonra tanımlanan css kuralları çalışacak . Eğer css kurallar için lütfen sıralamasını değiştirmek için istemiyorsanız

, belirli sayfa başına bazı sınıf adını tanımlamak ve sonra bu da çalışabilirsiniz: Ayrıca

div#widget.page3_widget {background:blue;} /* this will work */ 
div#widget {background:red;} 

, sen benim another answer bilmek görebilirsiniz css özgüllük çalışması. css specificity kurallarını bilmek, sizin css ile iyi oynayabilirsiniz.

Answer 2

Kolayca jQuery kullanarak html yeni css ekleyebilir. (#div_id').css('{ }');

Answer 3

Neden sadece belirli bir HTML öğesi için bir Sınıfı Adını katmayan gibi

? Ve bunu yaparak. Geçerli CSS KURALLARINI yazın/üzerine yazın:

div.newWidget {background:red !important;}