Sahte eleman CSS: Ayrıntılı Yeni Başlayan Kılavuz (2022)
Sahte eleman, CSS’nin ilginç bir parçasıdır. Tasarımınızda birçok küçük değişiklik yapmanıza izin verir. Ancak, özellikle yeni başlayanlar ilk başta onlarla karıştırılabilir. Bu nedenle, bu blog yazısında ayrıntılı olarak tartışmak istiyoruz. Aşağıda, size sahte CSS öğesi için yeni başlayan bir rehber vereceğiz. Ne olduğunu, nasıl çalıştığını ve ne kullanabileceğinizi açıklayacağız. Bu yazı, en yaygın sahte öğenin nasıl kullanılacağına dair bir örnekle sona erecektir. Sonunda, CSS Reperoar’ınızın bir parçası haline getirebilmenizi ve güçlenmiş hissetmenizi istiyoruz.
Pseudo CSS öğesi nedir? Sahte bir öğenin ne olduğunu açıklamak için bir örnekle başlamak en iyisidir. İşte stil sayfasına ve üzerinde bir paragrafın bir öğesi olan çok basit bir HTML sayfası.
css psödo elemanı testi
/html> Ancak, tarayıcıdaki sayfalara baktığımızda, sonuçlar şöyledir:
P :: Önceden {Content: “→”; } Yukarıda oldukça standart görünen CSS seçmenleri. Ancak öne çıkan şey, arkanın arkasının ikinci işaretidir. Bu bizim sahte element. Bu durumda, çok basit bir şey yaptı, hedef seçmenin iç HTML’sinin önündeki unsurları ekledi ve belirtilen içeriği değerine yerleştirdi. Bu durumda, hedeflenen oklar ve öğeler sayfadaki her paragraf öğesidir. Bununla birlikte, ilginç olan şey, okun HTML’nin kendisinde görünmemesidir. Tersine, sadece sahte öğeler görürsünüz ve içeriklerini kontrol edebilirsiniz. Bir tarayıcı geliştiricisinde böyle görünüyor: adını almak için sahte bir unsur olmadan bir öğe gibi davranma eğilimi. Ayrıca aşağıdaki örnekte göreceğimiz gibi davranışları üzerinde bir etkisi vardır. Şimdilik, sahte öğeleri kullanmak için yalnızca temel işaretlemeye alışması gerekiyor: Selector :: Pseudo-Elelement {Property: Value; } Aşağıda daha spesifik olarak tartışacağız. Yukarıda belirtilen elementin yanı sıra sahte öğeler mevcut. Adından da anlaşılacağı gibi, :: daha önce aynı şeyi yaptı ama bunun yerine hedefinin sonunda çocuğun bir unsurunu yaptı. Her ikisinin de yanı sıra şu unsurlar da vardır:
:: Zemin – Video gibi tam bir ekrana dönüştürülen herhangi bir öğenin arka planını düzenlemenizi sağlayan bir kullanıcının görünümünden bir kutu oluşturma.
:: Cue-bunu webvtt ipuçlarını ayarlamak için kullanabilirsiniz, bu da videodaki altyazılar ve metin gibi şeyler anlamına gelir.
:: Blok seviyesinin öğesindeki ilk satırın ilk harfini ilk harfli hedefleme (örneğin P, H2, DIV). Bu aynı zamanda :: Önceden. :: Birinci Hat-Aynı :: Birinci Leyre ile aynı anlamına gelebilir, ancak blok öğesinin tüm ilk satırlarını hedefler.
:: Dosya-sektörü-BUTTON- öğesinden bir düğme oluşturun = “dosya”.
:: Marker – Madeni para listesinde olduğu gibi listeleme öğelerini düzenlemenize olanak tanır.
:: Part () – Belirli HTML öğelerini adıyla “Part =” ile işaretlenmiş bir gölge ağacında hedeflemenize olanak tanır. Gölge Ağacı Elemanı JavaScript aracılığıyla eklenir. Burada daha fazla bilgi.
:: yer tutucu – bunu ve öğelerinde yer tutucunun metnini düzenlemek için kullanın.
:: Seçim – Kuvveti kullanıcı tarafından vurgulanan metinde uygulamak için kullanabileceğiniz sözde CSS öğesi (örneğin imleci diğer tarafa tıklayıp sürükleyerek).
:: Slotted () – Düzenleme için ile işaretlenen hedef öğeleri.
Deneysel sahte öğeler ek olarak, tarayıcı tarafından tam olarak desteklenmemiş bazı sahte öğeler vardır (veya bazı durumlarda hiç değil):
:: Altyazıları ve metni düzenlemek için Cue-Region-ALS, ancak her şeyi tek tek değil, tek bir birim olarak hedeflemek.
:: Gramer-Error, tarayıcı tarafından belirli bir şekilde dilbilgisi olarak tanımlanan metni işaretleme. Şu anda herhangi bir tarayıcı tarafından desteklenmemektedir.
:: Heceleme-Hror-benzer :: Dilbilgisi-Error ama yazım hataları için. Şu anda herhangi bir tarayıcı tarafından da desteklenmemektedir.
:: Target-Text-Link sıçraması yoluyla tarayıcı tarafından yuvarlanan metni düzenlemenizi sağlar. Tarayıcı desteği şu anda hala biraz sorunlu. Sıklıkla ortaya çıkan yeni unsurlar da var, bu yüzden yeni CSS özelliklerini takip edin.
Sahte eleman vs sözde sınıfı bu konuyu gördüğünüzde bulabileceğiniz bir şey sahte bir sınıftır. Bazıları aynı şeyi yapmasına rağmen, CSS’nin sahte öğeleriyle aynı değildir. En ünlü sahte sınıf mümkün: Hover. Bu, kullanıcının fare imlecini üste yönlendirip yönlendirmediğine bağlı olarak öğenin stilini değiştirmenizi sağlar. A: Hover {renk: #28303d; Metin-dekorasyon tarzı: noktalı; } Ve aynı zamanda sınıflar ve sahte öğeler arasındaki temel farktır. Sınıf, belirli durumlarda mevcut unsurları hedefler ve size özel bir HTML sınıfı eklediğiniz gibi aynı olasılığı verir. Öte yandan sahte eleman, işaretlemek için tamamen yeni bir HTML öğesi eklediler gibi davrandılar.
Fark bazen oldukça bulanıktır, özellikle :: birinci hat ve :: birinci harf gibi bir şeyle ve ayrıca birlikte kullanabileceğiniz için. P: Hover :: Önce {Content: “→”; } Ancak, birkaç kez kullandıktan sonra ustalaşmak kolaydır. Genel olarak, sahte sınıfların önünde bir puanla tanınabilirken, sahte elementin çift çift noktası vardır. Bununla birlikte, en eski sözde öğesinin (:: daha önce,: sonra ,: birinci harf,: birinci basamak), önceki CSS özelliklerinde bir işaretleme olduğu için tek bir iki noktayla da çalıştığını lütfen unutmayın.
Teorilerini tartıştıktan sonra sahte CSS öğesinin nasıl kullanılacağına dair örnekler, en yaygın sahte öğelerin nasıl kullanılacağına dair birçok örneği tartışmak istiyoruz. Ancak ilk olarak, bazı önemli genel kurallar. Birincisi, seçmen başına yalnızca bir sahte öğe kullanabilirsiniz. Bazılarını aynı seçmenlere uygulamak istiyorsanız, ayrı bir beyan kullanmalısınız: P :: Önce {Content: “→”; } p :: birinci hat {color: kırmızı; yazı tipi boyutu:%130; } İkincisi, sözde öğeyi bildirmek için tek bir iki nokta yerine (:) 🙂 çift iki kullanın (: :). Bu, onları sahte sınıflardan ayırt etmeye yardımcı olur. Belirtildiği gibi, çoğu tarayıcı orijinal sahte öğe için iki sözdizimini destekler, ancak doğru modern CSS yazmak için, çift çift ikisinin kurallarına uymanız gerekir. Psödo Elements :: Önceden ve :: Yalnızca türev elemanlar alan öğelerle çalıştıktan sonra, yani öğenin diğer HTML bileşenlerini içerebileceği anlamına gelir. Örneğin, , ve hayır ve dolayısıyla sahte öğeleri kabul etmeyin (giriş olmayı umuyor [type = “onay kutusu”]). Yaygın uygulamalar, div, başlık, paragraflar veya listeler gibi blok öğeleridir. Sonraki, :: Önceden ve :: Yalnızca içerik özelliğini belirlerseniz görünür. Boş olabilir (içerik: “”;) ama bunu herhangi bir şekilde tanımlamanız gerekir. İçerik bir dize (metin anlamına gelir) veya o yerde görüntülemek istediğiniz görüntüye bağlantı alır.
Genellikle stil için kullanırsınız. İşte tipik bir örnek :: Yirmi yirmi bir temadan önce: .wp-block-pulquote bloke :: Önceden {color: currentColor; İçerik: “” “; Ekran bloğu; Pozisyon: göreceli; Sol: 0; yazı tipi boyutu: 3Rem; yazı tipi-ağırlık: 500; Çizgi yüksekliği: 1; } Bu bölüm, blockquote.css-Tricks bloğuna girdiğinizde tırnak işaretlerini görüntülemekten sorumludur. Block, alıntıları hem öne hem de alıntı sahte öğeyi kullandıktan sonra bir örneğe sahiptir. Ayrıca, ek kek noktaları için açık alıntı özellikleri kullanmayı öğretirler.
Şamandırayı temizlemek için kullanmak için :: sonra popüler uygulama. Bunun ne anlama geldiğini bilmiyorsanız, bu, şamandıra özelliğini uygulayan öğelerin kapta kalmasını sağlamanın bir yoludur.
Bunu başarmak için yukarıdaki örnek için aşağıdaki işaretleme CSS’yi kullanabilirsiniz:. Kapsayıcı :: sonra {Clear: Her ikisi de; İçerik: “”; Ekran bloğu; } Bu iki sahte öğe için tarayıcı desteği CSS çok iyidir:
:: İlk mektup :: ilk harf. Burada, ilk şey sadece blok kapta işlev görmesi, ekran için hiçbir şey ayarlanmamasıdır: satır içi; . Ayrıca dikkatli olmanız gerekir, çünkü noktalama işaretlerini, ilk harf olarak Digraf gibi sembolleri veya daha önce :: daha önce yer alan her şeyi hedefleyecektir. :: Birinci harf için mevcut olan özellik, yazı tipleri, renk, arka plan, marj, dolgu, sınır, metin-dekorasyon, dikey-hizalama (ancak sadece şamandıra hiçbirine ayarlanmışsa), metin-transform, çizgi yüksekliği, Şamandıra, şamandıra ve net. Buradaki klasik örnek, damla kapakları için kullanmaktır: P :: Birinci Leter {Color: Gray; Yazı tipi ailesi: Tahoma; yazı tipi boyutu:%160; } Bu, birkaç metin örneğinde uygulandığında yukarıdaki işaretlemenin görünümüdür: Son olarak, :: ilk harf için tarayıcı desteği çok iyidir:
:: İlk satır, bunun yukarıdakilere çok benzediğini, ancak bir öğedeki ilk metin satırı için bahsettiğimiz ilk satır. Ayrıca, bunun yalnızca bir ekran bloğu, satır içi blok, liste öğesi, tablo-caption veya tablo hücresi değerleri olan öğelerle çalıştığını da hatırlamanız gerekir. Hakim olan özellikler, kelime aralığı eklenmesi ve harf aralığı ile :: birinci harfe benzer. Aşağıdakiler yukarıdaki ile aynı örnektir, ancak kullanma :: Birinci Hat: P :: Birinci Hat {Color: Gray; Yazı tipi ailesi: Tahoma; yazı tipi boyutu:%160; } Ve göründüğü şey bu:
:: Birinci basamak, mevcut tüm tarayıcılar tarafından da kabul edilmektedir
Mevcut belirteçlerin düzenlenmesi beklediğiniz gibi çalışır.Rengi değiştirebilir, boyutunu yazı tipi boyutuyla vb. Değiştirebilirsiniz.
Bunun için tarayıcı uyumluluğu, bu listedeki diğer öğeler kadar geniş olmasa da çok iyidir. :: Selefi gibi rezervuar yeri, bu tek hedefin sahte bir unsurudur. Bunu yalnızca yer tutucunun metnini ve öğelerinde düzenlemek için kullanabilirsiniz. Bu sınırlama nedeniyle sadece birkaç özellik gereklidir. Temel olarak metin ve arka plan özelliği düzenlemesi ile ilgilidir. Aşağıda görünümün bir örneğidir. Önce html:Bundan sonra yapabilirsiniz Şunun Markup CSS kullanın: Div Input :: Placeholder {Arka Plan-Color: #578EE6; Renk: #000; Yazı tipi ailesi: ‘fırça betiği mt’, el yazısı; yazı tipi tarzı: italik; Metin-align: merkez; } Bunu yaptığınızda, bu sayfadaki ekrandır (biliyorum, bu çok güzel değil): Ve üzerinde olan tek şey bu. Geriye kalan tek kişi tarayıcı uyumluluğunu görmektir :: çok iyi olan yer tutucu. :: Pseudo CSS öğesinin son örneğimiz şunları içerir :: Seçim. Bu, kullanıcı tarafından işaretlendiğinde metni düzenlemekle ilgili olduğundan, bu tür işler için tipik bir CSS özelliği alır. Renk, renk arka plan rengi, metin-dekorasyon metin gölgesi, metin gölgesi vb. Örneğin, basit HTML paragraflarını bu şekilde ayarlayabiliriz: P :: Seçim {color: #bae64c; Arka Plan rengi: #E63C25; } Sonları şöyle görünüyor: Ayrıca, örneğin seçildiğinde metnin farklı bölümlerini ayrı ayrı organize etmek için diğer seçmenlerle de birleştirebilirsiniz: P. } Özel bir sınıf belirlerseniz. İkinci paragrafın ikinci paragrafı ikinci paragrafa (Teşekkürler, Kaptan Obvious), bu sonucu alırsınız. Özet: Pseudo CSS Element Pseudo CSS öğesi harika bir özelliktir. Yukarıda görebileceğiniz gibi, birçoğu web tasarımınıza küçük bir dokunuş eklemek için çok yararlıdır. Bu onu olağanüstüden olağanüstü hale getirebilir. Ayrıca, bazılarının şamandırayı temizlemesi için ::: Sahte öğeler, CSS’de öğrenmeniz gereken ilk şey değildir, çünkü ekstra yerleştirmekle ilgili her şey web sitenizde gelişmektedir. Ancak, özellikle zaman zaman ortaya çıkanlardan daha fazlası olduğu için onlardan farkında olmalısınız. Ayrıca, beklediğimiz gibi, kullanımının çoğu oldukça kolaydır, böylece hızlı bir şekilde alabilirsiniz. Semu CSS sınıfı için en sevdiğiniz kullanımlar nelerdir? Lütfen görüşlerinizi yorumlarda paylaşın!
