Üç pratik kullanımı: Önceden ve: CSS Psödoselektörlerden Sonra
İşimde, daha önce ve sonra göründüklerinde: bir tür kaçış var, çok zor olması gereken sorunların üstesinden gelmenize izin vermek. Son WordPress istemci çalışmamda, Pseudoselector: Önce ve: CSS’den sonra takdir etmek için birkaç fırsatım var. İşimde göründüklerinde, bir tür kaçış, oldukça zor olabilecek sorunları hızlı ve kolay bir şekilde üstesinden getirmenize izin veriyorlar. JavaScript benzerdir, ancak daha çok çatıda bir helikopter gibi – daha fazla potansiyel güçle ortaya çıkan daha fazla hazırlık ve karmaşıklık. Genellikle, acil durum merdivenleri fazlasıyla yeterlidir.
Bugünün makalesinde, üç pratik kullanımını keşfedeceğim: önce ve: sonra, kendi işinizde ne zaman yararlı olabileceklerini düşünmenizi teşvik etmek. Kullanırken büyük açıklama: Önceden ve sonra: daha önce ve: Varoluştan sonra mevcut HTML öğelerini ek metin veya çizim içeriği ile tamamlamak için. : Önce ve sonra iki önemli psödoselektör CSS vardır. Son zamanlarda Pseudoselector hakkında derinlemesine yazdım, bu yüzden nasıl kullanılacağına dair bir kılavuza ihtiyacınız varsa, lütfen makaleyi kontrol edin. : Önce ve: Birçok kullanımı var, ancak tutarlı bir hedef için var: Mevcut HTML öğelerini ek metin veya çizim içeriği ile tamamlamak.
Kulağa lüks olabilir, bu yüzden bu basit bir benzetme: Bir hediye kutusu gönderdim ve her hediye kutusunun aynı kırmızı şeridi alması gerektiğine karar verdim. Kullanacağım: Önce veya: Kırmızı şeridin görünümünü dikte ettikten sonra. Bu evi getirmek için, üç pratik kullanımına bakalım: daha önce ve sonra, en standarttan en karmaşık olana kadar. 1. “Zorunlu Alanlar” stiline odaklanarak İçeriği diğer içerik sesleriyle süslüyorsa, çok yaygın bir örnek alalım: Web’in belirli öğelerini doldurmanız gerektiğini söyleyen “Zorunlu” yıldızın işareti, Form. “Zorunlu Alan,” Bu yıldız işaretini göstermenin kolay yollarından biri basit ama tekrarlanan yollar her seferinde doğrudan HTML işaretlemenize yerleştirmektir:
Büyütmek için tıklayın
. Kırmızı renk; } Bu html işaretlemesi ile: name telefon e-posta Bu sonucu verir: isim basit çağrı, değil mi? Buna ek olarak, .Required-Alanı: Sonrası kurallar tek bir yerde ortalanır, böylece görünüm renklerini, boyutlarını ve hatta “zorunlu” içeriği tüm sitelerinizdeki aynı anda değiştirebilirsiniz. Diğer tekrarlanan metin dekorasyonlarına uygulanan benzer mantığın hayal edebilebilirsiniz. Örneğin, daha önce – harika yazı tipi simgesi kütüphanesi ile birlikte – kesitimizde Li Bullets’den özel bir “kama” görünümü yapma şeklimizdir
Font Awesome ve: Kurallardan önce teşekkür ederiz.
2. Bu WordPress şablonu dosyasını değiştirmeden içerik girilmesi, yeni bir WordPress istemci projesinin somut bir örneğidir. Müşteri, her sayfadaki başlıkta bir gönderim bildirimi istiyor – ancak arama çubuğu ve alışveriş sepeti dışında herhangi bir ekleme yapma teması zorlaşıyor. PHP şablonunu yırtmaya başlamak yerine, aşağıdakileri yaptım:
Büyütmek için tıklayın
CSS’yi yayınlamak için: Div#Top-Bar: Sonra {Content: “Kıta ABD’de Ücretsiz Kargo!”; Ekran bloğu; Şamandıra: yok; İkisini de temizle; Metin-align: doğru; Marj-Sağ: 1Rem; yazı tipi tarzı: italik; Dolgu Top: .5Rem; } Bu, Kıta ABD’de ücretsiz bir gönderim mesajı yerleştirir! Aşağıdaki satırda #üst çubuk div, sağ. Bunun sonucu, sözde elemanını organize edebilmenizdir: önce ve: kapsamlı bir şekilde – sayfaları kırmasını, sağa veya sola doğru yüzmesini, kenar boşluğu ve dolgu almasını vb. Onlar sadece yukarıdaki yıldız işareti örneğimiz gibi “satır-y” öğesi değildir. 3. SemitransParan görüntülerinin arka planında bulanık metin CSS’de arka plan opaklığı diye bir şey yoktur. CSS, SemitransParan görüntüsünün üzerinde tamamen bulanık metne sahip unsurlara sahip olmayı çok zorlaştırır. CSS’de arka plan-opasity diye bir şey yoktur, bu yüzden tüm öğeler için opaklık ayarlamakta sıkışıp kalırsınız-ki bu sadece arka plan değil, aynı zamanda üstü de içerik anlamına gelir. Öncelikle SemitransParan’ın arka planında hasar gören varsayılan çabaları göreceğiz ve sonra işlevsel çözümler üzerinde: Yanlış yol CSS’yi aşağıdaki gibi kullanarak kullanabiliriz: .is -semitrans {arka plan -768×574.jpg); Arka Plan pozisyonu: Merkez; Arka plan boyutu: kapak; Opaklık: .5; Yükseklik: 10Rem; Dolgu: 1Rem; yazı tipi boyutu: 2Rem; Renk: #000; } Aşağıdaki html ile birleştiğinde:
Bu değil ne istiyoruz.
İstediğimiz bu değil.
Silinmiş metni görüyor musunuz? Aynı zamanda aşağıdaki resim gibi bir yarı saydamdır. İstediğimiz şey değil. Bunu doğru şekilde yapabileceğimiz doğru yol: daha önce. Bunu CSS:.-Semiitrans-BG ile birleştirerek yapıyoruz {Pozisyon: Relative; Yükseklik: 10Rem; Dolgu: 1Rem; yazı tipi boyutu: 2Rem; Renk: #000; Z-endeks: 1; }.-semiitrans-bg ile: {content: “” önce; Pozisyon: Mutlak; Genişlik:%100; Yükseklik:%100; Üst: 0; Sol: 0; Arka Plan-image: URL (https://wspout.com/wp-content/uploads/2016/04/converse-fieds-768×574.jpg); Arka Plan pozisyonu: Merkez; Arka plan boyutu: kapak; Opaklık: .5; Z -index: -1; } Bu html:
bu ne istediğimiz.
İşte istediğimiz bu.
O nasıl çalışır? Kullanma: Önceden “kaplamak” için kesinlikle ana öğenin (metin içeren) altında konumlandırılmış tam boyutlu semitransparent görüntüler. Bu görüntü katmanı, ana katmanı rahatsız etmeden istediğimiz opaklığa sahip olabilir. : Gitmeden önce … Okuduğunuz için teşekkür ederim! Umarım daha iyi anlarsınız: Önce ve sonra, genel olarak WordPress ve Web geliştirme projelerinde kullanımları ve zor sorunları basitleştirmenize nasıl yardımcı olabilecekleri. Sorularınız veya yorumlarınız varsa, aşağıda duymaktan mutluluk duyarım!
Kredi görüntüsü: Boston Halk Kütüphanesi
