2010-07-21 10 views
17

Her birine uygulanacak farklı css stil sayfaları gerektiren farklı bölümlere sahip bir web sayfam var. Bilmek istediğim, web sayfasının her bir farklı parçası için hangi css stil sayfasının kullanılacağını belirleme. hepsini bir arada bırakırsam, bileşenler düzgün görüntülenmez.Aynı web sayfasının farklı bölümleri için farklı css stil sayfası uygulama

+1

o birden sahip olmasıdır ... Gaby aka G. Petrioli tarafından yukarıda açıklandığı gibi

Örnek atanan kimliği/sınıfına göre dizayn edilmesi gerekir ** css dosyaları bir web sayfasına çağrılıyor, ancak bu sayfa (bariz) çatışmalar nedeniyle doğru görüntülenmiyor. Ben css dosyaları çatışmalara neden aynı isimleri ile div/bölümleri var sanırım. Ne soruyor ve Ned'in cevabı mükemmel bir cevap gibi görünüyor. –

+5

Bu sorunun ne sorduğu açık, bu yüzden bana 'gerçek bir soru' olduğu açık görünüyor. –

+4

Bu soru açık ve bana göre mantıklı. Moderatörler burada soruları kapatırken hor görüyorum. –

cevap

17

Sayfanın farklı bölümlerine farklı stil sayfaları uygulayamazsınız.

iyi sınıf adları ile div 'ler içinde sayfanın farklı bölümlerini sarılmasıdır: senin part1 CSS Sonra

<div class='part1'> 
    .... 
</div> 

<div class='part2'> 
    .... 
</div> 

".part1" her CSS kuralını öneki ve bir kaç seçenek var senin part2 CSS, öneki ".part2" ile her CSS kuralı. Sınıfları kullanarak, sayfanın hangi bölümlerinin hangi CSS kurallarından etkilendiğini esnek bir şekilde sınırlamak için, farklı "part1" veya "part2" div'lerini kullanabilirsiniz.

+7

6 yıl sonra ... :(hala kapsam yok css Neden tarayıcılar bu özelliği desteklemiyor? – Spirit

0

Web sayfanızdaki her bölüm için farklı sınıflar kullanın ve her sınıf için CSS kodunu özelleştirin.

6

Bunun bir nedeni Basamaklı Style Sheets (CSS) ..

her bölümü hedef CSS specificity kuralları kullanabilirsiniz ..

yani ..

#section1 a{color:red} 
#section2 a{color:blue} 

denir Bu, section1 kimliğine sahip bir öğenin içindeki tüm bağlantıları kırmızı olacak ve section2 kimliğine sahip bir öğenin içindeki tüm bağlantılar mavi renktedir.

<div id="section1"> 
<a href="#">i will be red</a> 
</div> 
<div id="section2"> 
<a href="#">i will be blue</a> 
</div> 
+1

Bu, bootstrap.css veya başka bir harici css yüklerken yardımcı olmuyor – oriadam

+0

Burada da hata olduğunu hissettiğim soru kapama nedeniyle buraya göndermek zorunda. Benim durumumda, bir sayfanın farklı bölümlerindeki CSS kütüphaneleri arasında çakışmalar var (django'dan bir bootstrap tabanlı admin ui içine gömülü bir açısal kullanıcı). Denemek üzere olduğum yaklaşım, bir iframe içine gömmek. – Chris

+0

Bootstrap'in daha yeni sürümleri .less or.Kapsam belirleme sağlamak için özel sarmalayıcınız tarafından kolayca sarılabilen scss formatı. gibi: # section1 { } – Shawn

1

Harici bir stil sayfası, tüm html sayfasına uygulanır. Farklı kısımlarına Öncelikle , HTML sayfası farklı stil uygulamak için (benzersiz bir kimlik veya sınıf tahsis edilecek her html div ile) html etiketi kullanılarak farklı bölümler İkinci , ayrılabilir olan her div uygulanacak dış stil kullanıcı ne anlama

İlgili konular