Tarayıcıda kullanıcı stiline ilişkin CSS'yi anlama


13

Web tarayıcımda belirli bir sitenin görünümünde belirli bir değişiklik yapmak istiyorum. Bu site CSS kullanıyor, bu yüzden yapmam gereken bir kullanıcı CSS geçersiz kılma yazmak olduğunu düşünüyorum (bu yanlışsa lütfen beni düzeltin).

Tarayıcılarım Firefox (bunun için bir şey yazmam gerektiğini düşünüyorum chrome/userContent.css) ve Chrome ( User\ StyleSheets/Custom.css).

Yapmak istediğim belirli değişiklik, tüm /unix// sayfalarındaki arka plan desenini (koyu noktalar) kaldırmaktır . Ama daha genel olarak, lütfen bana nasıl balık tutulacağını öğretin: Hangi parametreyi değiştireceğimi nasıl öğrenebilirim ve bu değişikliği bir kullanıcı css'sine nasıl yazarım?

Yanıtlar:


15

Ana tarayıcım olduğu için yalnızca Firefox'a aşinalıkla konuşabiliyorum. 'Bana balık tutmayı öğret' isteğinizi yerine getirmek için burada genel olan şeyleri tutmaya çalışacağım. Bu amaçla, 2 örnek, sizinkini ve içinde daha fazla gerçek dünya dersleri içeren başka bir örnek ekleyeceğim. İlk olarak, kullanıcı CSS oluşturmayı kolaylaştırmak için bazı araçlar alacağız.

  1. En son Firefox sürümüne güncelleyin. Son sürümlerden bazılarında web sitesi denetleyici araçlarının genişlemeleri vardı, bu yüzden bunları isteyeceksiniz.
  2. İsteğe bağlı: Size çok daha güçlü site denetçisi araçları sağlayan Firebug uzantısını yükleyin . (kişisel olarak, kullanıcı CSS'si yapmak için Firebug kullanmıyorum, ancak tamlık uğruna bir söz ekliyorum)
  3. Şık eklentiyi yükleyin . Bu, kullanıcı CSS'sinin oluşturulmasını büyük ölçüde basitleştiren, kullanıcı CSS merkezli bir uzantıdır.

Şimdi, aslında bir şeyler yazmak için. Devam etmeden önce HTML ve CSS hakkında temel bilgilere sahip olmalısınız. W3Schools, HTML ve CSS'nin temel yapısını ve sözdizimini tanımak için iyi eğitimlere sahiptir . Bu cevap uğruna, bir yenidoğanın örnek almasını sağlayacak kadar yardımcı olmasını sağlayacak yeterli bilgiyi ekleyeceğim.

  1. Sayfaya gidin. (sizin durumunuzda, /unix// )
  2. Değiştirmek istediğiniz öğeye sağ tıklayın. (arka plan tüm sayfayı etkilediği için bu durum için sayfanın hemen hemen her yerinde)
  3. Açılır menüden 'Öğeyi Denetle'yi seçin. Bu Firefox'un entegre denetim araçlarını kullanıyor, burada Firebug'a hitap etmeyeceğim, ancak benzer bölmelere ve özelliklere sahip.
  4. Bu, Firefox penceresinin alt ve yan tarafındaki panelleri açar. Altta HTML görüyorsunuz. Sağda, seçili sayfa öğesi için CSS kurallarını görüyorsunuz (sağ tıkladığınız şey bu olacak). Altta, gezinmek için farklı öğelere tıklayın. Sayfa bir elemanlar ağacı şeklinde düzenlenmiştir ve ağaçtaki her bir düğümü daraltabilir veya genişletebilirsiniz. Öğeleri tıklattığınızda, seçilen öğe sayfanın kendisinde vurgulanır.
  5. Genel olarak, bu noktada, manipüle etmek istediğiniz öğeyi üst öğeleriyle (ağaçta o öğeyi içeren öğeler) birlikte incelemek istersiniz. Gerçekte manipüle etmeniz gereken öğeyi tanımlayın. Örneğin, bu sayfadaki yanıtlarla uğraşıyorsanız, bir yanıt metnini içeren <p> öğesiyle başlayacaksınız, ancak metnin etrafındaki gibi her şeyi, / aşağı oy okları, poster bilgileri, paylaşım / düzenleme / bayrak bağlantıları vb . "Cevap"Bu, bir cevabın tüm pencere giydirme elemanlarını içeren elementtir. Tıklayın, web sayfasının bir kısmının vurgulandığını göreceksiniz. (Bu örnekte, sayfanın arka planı üstte, <body> etiketi içinde olacaktır . HTML'nin en üstüne gidin ve <body> etiketini tıklayın.)
  6. Ardından, değiştirmek istediğiniz bu öğenin CSS özelliklerini tanımlamanız gerekir. Sağdaki CSS'ye bakın ve değiştirmek istediğiniz özellikleri bulun. Şahsen, CSS için oldukça yeniyim, bu yüzden bu noktada, mülk ve nasıl davrandığı hakkında daha fazla bilgi edinmek için genellikle Google 'css' + bir mülk adı yapacağım. Bir SE cevabına baktığımız örneğime devam edelim, diyelim ki cevabın etrafındaki kenar boşluklarını değiştirmek istiyoruz. All.css dosyasında 0px olarak ayarlanmış bir kenar boşluğu özelliği bulunur, ancak açıkça bu öğelerin etrafında bir kenar boşluğu vardır. Bazı googling, doldurma özelliklerini aramamı öğretiyor, çünkü bunlar bir öğenin çevresindeki kenar boşluklarını da etkileyebilir. Tabii ki, bir cevap üzerine ayarlanan dolgu ile ilgili iki özellik vardır, dolgu alt ve dolgu üst. (özel sorun için, CSS özelliklerinde 'arka plan' için bakmak, böylece bir arka plan görüntüsü arıyoruz. Bir göreceksiniz 'arka plan' özelliğini üst kısmına yakın. O sayfanın gövde elemanları için de geçerlidir. Google'lamaya " css background property " yi öğrenmek için, çeşitli değiştiricilerle birlikte bir resme renk veya URL içerebileceğini gösterir. Background-image özelliğinin nasıl çalıştığını görmek için biraz ilerledikten sonra , yararlı bilgiler, 'none' varsayılan değeri . Arka plan resmini varsayılan değerine döndürmek istiyoruz, bu yüzden bu bilgiye ihtiyacımız olacak.)
  7. Şimdi Şık kullanıyoruz. Şık olmayan alternatif, cevabınıza gönderdiğiniz dosyaları düzenlemek olacaktır. Şık, birçok sitenin kullanıcı CSS'sini kolayca yönetmemizi sağlar. Şık, Firefox pencerenize küçük bir simge ekler, üzerine tıklayın ve sonra "Yeni bir stil yazın" -> "İçin" (bu site) .com "a gidin Stile bir Ad ve isteğe bağlı olarak bazı etiketler verin. Bu stili Superuser.com veya Stackexchange.com vb. için geçerli olan stil olarak ayırt etmek için. Bu pencere bize yalnızca bu etki alanı için CSS'yi değiştirmemize izin veren bir şablon sunar. bunu yapabilir veya tüm siteler için geçerli CSS yazmak istiyorsanız boş bir stil elde edebilirsiniz, Şık menüden uygun girişi seçmeniz yeterlidir.

    @namespace url(http://www.w3.org/1999/xhtml);
    
    @-moz-document domain("superuser.com") {
    
    }
    

    @ -Moz-belge bloğuna konan her şey sadece parantez içindeki alan adına uygulanır . Yukarıdaki kalın yazı tiplerine bakın. Yanıtların dolgusunu değiştirmek için metin kutusunu şu şekilde güncellersiniz:

    @namespace url(http://www.w3.org/1999/xhtml);
    
    @-moz-document domain("superuser.com") {
        .answer {
            padding-bottom:0px;
            padding-top:0px;
        }
    }
    

    CSS, öncelikle seçerek bilmiyorlar insanlar için bu aşağı kırmak için sınıf (biz kimliğe göre seçerek olsaydı başında ergo bir "" gider., Bir '#' koyardım orada.) Cevap (yani 'cevap'). Ardından, değiştireceğimiz seçili öğenin özelliklerini listelemek için süslü parantez içeren bir blok açıyoruz. Önce dolgu tabanını değiştirip 0 piksele ayarlıyoruz . Sonra dolgu için de aynısını yapıyoruz . Her özellik ve değer noktalı virgülle sonlandırılır. Sonra bloğu kıvırcık bir ayraçla kapatıyoruz. (unix örneğinizde bunu yaparsınız:

    @namespace url(http://www.w3.org/1999/xhtml);
    
    @-moz-document domain("unix.stackexchange.com") {
        body {
            background:none;
        }
    }
    

    Burada unix.stackexchange.com alan adı üzerinde çalışıyorsunuz. "Gövde" öğesini seçiyoruz (HTML öğesini seçerken aynı zamanda bir CSS seçicisidir, burada #s veya .s gerekmez). Arka planı hiçbiri olarak ayarlamıyoruz.)

  8. Dikkatinizi Şık stil düzenleme penceresinin altındaki düğmelere çekiyorum. "Önizleme" yazdığınız değişiklikleri yürürlüğe koyar, böylece bunları çalışırken görebilirsiniz. "Kaydet" değişiklikleri kaydeder. "İptal" oldukça açıktır. Yaptığınız hemen hemen tüm kullanıcı CSS değişiklikleri için, değişikliğin istediğiniz şekilde çalışıp çalışmadığını görmek için Önizleme'yi tıklamak istersiniz. Her iki örnekte de işe yaramadığını göreceksiniz. Bunun ele almamın önemli bir nedeni var.
  9. CSS'nin, kullanıcı CSS'si ile yazar CSS'si ve tarayıcı CSS'si ile nasıl başa çıkılacağını belirlemek için belirli bir öncelik hiyerarşisi vardır. Normalde, sayfanın yazarı tarafından yazılan ve o sayfadaki öğelerin çoğu için kurallar içeren bir sayfa için CSS'miz vardır. Bir kural yazar tarafından tanımlanmadı, ancak kullanıcı CSS'nizdeyse, tarayıcınız bunu kullanacaktır. Her ikisinde de bu öğe için CSS tanımlanmamışsa, tarayıcı o öğe üzerinde kendi varsayılan CSS kurallarını kullanır. Burada bir ağırlık hiyerarşisi var, yazar> kullanıcı> tarayıcı. Her üçünde de bir şey tanımlanırsa, daha yüksek ağırlıklı CSS kazanır ve CSS'nin etkili olmasını sağlar. Yüksek ağırlıklı CSS'yi geçersiz kılmak için daha düşük ağırlıklı CSS almanın bir yolu vardır ve bu onları önemli olarak belirleyerek. Bunu "! İmportant" ekleyerek yaparsınız.

    @namespace url(http://www.w3.org/1999/xhtml);
    
    @-moz-document domain("unix.stackexchange.com") {
        body {
            background:none !important;
        }
    }
    

    Şimdi Önizleme'yi tekrar tıkladığınızda kullanıcı CSS'nizin çalıştığını göreceksiniz. Kaydet ve keyfini çıkar'ı tıklayın.

Chrome kullanıyorsanız, yerleşik denetçisi zaten çok iyi. Bir de bulunmaktadır Şık uzantısı . CSS değişikliklerini biraz farklı giriyorsunuz: “Yüklü stilleri yönet” i seçin, ardından “Yeni stil yaz” ı tıklayın, gönderiyi kod kutusunun altına uygulamak için siteleri veya URL kalıplarını girin ve “ kod ”kutusuna, ör.

body {
  background:none !important;
}

2

İlgili CSS özelliğini tanımlamak için kundakçı yükleyin ve ardından geçersiz kılmak için bir greasemonkey komut dosyası yazın.


2
Bir css özelliğine şans vermek için greasemonkey kullanmak bir vidayı sürmek için bir çekiç kullanmak gibidir. Çalışıyor ama zarif değil ve yol boyunca bir şey kırma olasılığınız daha yüksek.
Caleb

2

Siteye koyarsanız ne yaparsanız yapın

foo.bar { background-pattern:none; }

sonra Ekle

!important 

önce }. Kullanıcı olmayan css kullanımı hakkında, kullanımınız için hala açıklayan küçük bir ayrıntı .

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.