Sözde Elemanı önce ve sonra anlama

Basamaklı Stil Sayfası (CSS), öncelikle HTML işaretlemesine stiller uygulamak için tasarlanmıştır, ancak bazı durumlarda belgeye fazladan biçimlendirme eklenmesi gereksiz veya mümkün olmazsa, aslında CSS'de kesintiye uğramadan fazladan biçimlendirme eklememize izin veren bir özellik vardır. gerçek belge, yani sözde elemanları.

Bu terimi duydunuz, özellikle de bazı derslerimizi takip ederken.

Aslında olarak sınıflandırılan birkaç CSS aile üyesi var. sözde elemanları benzeri :İlk satır, :ilk harf, :: seçim, :önce ve :sonra. Ancak, bu makale için kapsamımızı yalnızca :önce ve :sonra, “sözde elemanları” burada her ikisine de özellikle değinilecektir. Bu konuya temelden bakacağız.

Sözdizimi ve Tarayıcı Desteği

sözde elemanları aslında o zamandan beri BB1, fakat :önce ve :sonra biz burada görüşüyoruz ki serbest bırakıldı CSS2.1. Başlangıçta sözde elemanları CSS3’te sözdizimi için tek-kolon, sonra web geliştikçe sözde elemanları çift kolon kullanmaya revize edildi - olma ::önce & ::sonra - onu ayırt etmek sözde sınıflar (yani. : hover, :aktif, ve bunun gibi).

Ancak, tek sütunlu mu yoksa çift sütunlu formatı mı kullanıyorsanız, tarayıcılar yine de tanıyacaktır. Internet Explorer 8 yalnızca tek sütun formatını desteklediğinden, daha geniş bir tarayıcı uyumluluğu istiyorsanız, tek sütun kullanmak daha güvenlidir..

Bu ne işe yarıyor?

Kısacası, sözde elemanları ekstra bir eleman ekleyecektir önce veya sonra içeriğin öğesi, bu yüzden ikisini de eklediğimizde, aşağıdaki işaretleme ile teknik olarak eşittirler.

:önce Bu ana içerik. :sonra

Ancak bu unsurlar aslında belge üzerinde oluşturulmuyor. Hala yüzeyde görülebilirler ancak onları belge kaynağında bulamazsınız, bu nedenle pratik olarak sahte elementler.

Sözde elemanların kullanılması

kullanma sözde elemanları nispeten kolaydır; aşağıdaki sözdizimi seçici: önce bir öğe ekleyecek önce Bu sözdizimi sırasında içeriğin seçicisi seçici: sonra sonra ekleyeceğiz ve içlerine bir içerik eklemek için içerik özellik.

Örneğin, aşağıdaki kod parçacığı, işaretten önce ve sonra bir tırnak işareti ekler. blockquote.

 blockquote: before content: open-quote;  blockquote: after content: close-quote;

Sahte unsurların şekillendirilmesi

Sahte unsur olmasına rağmen, sözde elemanları aslında bir “gerçek” elemanı; rengin değiştirilmesi, arka planın eklenmesi, yazı tipi boyutunu ayarlamak, içindeki metni hizalamak gibi stil bildirimleri ekleyebiliriz..

 blockquote: before content: open-quote; yazı tipi boyutu: 24pt; metin hizalama: orta; hat yüksekliği: 42px; renk: #fff; arkaplan: #ddd; şamandıra: sol; pozisyon: göreceli; üst: 30 piksel;  blockquote: after content: close-quote; yazı tipi boyutu: 24pt; metin hizalama: orta; hat yüksekliği: 42px; renk: #fff; arkaplan: #ddd; Sağa çık; pozisyon: göreceli; alt: 40px;

Boyut belirtme

Üretilen öğeler varsayılan olarak satır içi bir öğedir, bu nedenle yüksekliği ve genişliği belirtmek üzereyken, önce onu kullanarak bir blok öğesi olarak tanımlamamız gerekir. Ekran bloğu deklarasyon.

 blockquote: before content: open-quote; yazı tipi boyutu: 24pt; metin hizalama: orta; hat yüksekliği: 42px; renk: #fff; arkaplan: #ddd; şamandıra: sol; pozisyon: göreceli; üst: 30 piksel; sınır yarıçapı: 25 piksel; / ** onu bir blok elemanı olarak tanımla ** / display: block; yükseklik: 25px; genişlik: 25 piksel;  blockquote: after content: close-quote; yazı tipi boyutu: 24pt; metin hizalama: orta; hat yüksekliği: 42px; renk: #fff; arkaplan: #ddd; Sağa çık; pozisyon: göreceli; alt: 40px; sınır yarıçapı: 25 piksel; / ** onu bir blok elemanı olarak tanımla ** / display: block; yükseklik: 25px; genişlik: 25 piksel;

Arka plan resmini ekle

İçeriği yalnızca düz metin yerine bir resimle de değiştirebiliriz. rağmen içerik özellik sağlar url () bir resim eklemek için dize, ancak çoğu durumda ben kullanmayı tercih ederim arka fon eklenen görüntü üzerinde daha fazla kontrol için özellik.

 blockquote: before content: ""; yazı tipi boyutu: 24pt; metin hizalama: orta; hat yüksekliği: 42px; renk: #fff; şamandıra: sol; pozisyon: göreceli; üst: 30 piksel; sınır yarıçapı: 25 piksel; background: url (images / quotationmark.png) -3px -3px #ddd; Ekran bloğu; yükseklik: 25px; genişlik: 25 piksel;  blockquote: after content: ""; yazı tipi boyutu: 24pt; metin hizalama: orta; hat yüksekliği: 42px; renk: #fff; Sağa çık; pozisyon: göreceli; alt: 40px; sınır yarıçapı: 25 piksel; background: url (images / quotationmark.png) -1 -px -32px #ddd; Ekran bloğu; yükseklik: 25px; genişlik: 25 piksel;

Ancak, yukarıdaki snippet’ten görebileceğiniz gibi, yine de içerik özelliği ve bu kez boş bir dize ile. içerik özellik bir gereksinim ve her zaman uygulanmalıdır; Aksi takdirde sözde eleman çalışmayacak her ne.

Sözde sınıfları ile birleştirerek

Her ne kadar farklı bir tür olsalar da sözde, kullanabiliriz sözde sınıflar ile birlikte sözde elemanları örneğin bir CSS kuralında, örneğin tırnak işareti arka plan üzerinde durduğumuzda biraz daha karanlık blockquote.

 blockquote: hover: after, blockquote: hover: before arka plan rengi: # 555;

Geçiş Efekti Ekleme

Ve hatta uygulayabiliriz geçiş zarif bir renk geçişi efekti oluşturmak için üzerlerinde özellik.

 geçiş: tüm 350ms; -o-geçiş: tüm 350ms; -moz-geçiş: hepsi 350ms; -webkit-geçişi: tümü 350ms;

Maalesef, geçiş efekti yalnızca Firefox’un en son sürümünde işe yarıyor gibi görünüyor. Umarım, geçiş özelliğinin uygulanmasına izin vermek için daha fazla tarayıcı yakalar. sözde elemanları gelecekte.

gösteri
Kaynak İndir

Daha İlham

Size ilham vermek için, web tasarımınız için fikir verebilecek üç harika örnek seçtik.

Büyüleyici Gölgeler

Bu derste Paul Underwood, daha gerçekçi ve büyüleyici bir gölge efekti kullanarak :önce ve :sonra sözde elemanları. Her ikisi de kesinlikle konumlandırılmış ve en arkaya yerleştirilmiş negatif Z-endeksi değer.

Yığılmış görüntü efekti

Kullanmak sözde elemanları dağınık yığılmış görüntü efekti oluşturmak için yalnızca işaretleme üzerinde tek bir görüntü varken mümkündür. sözde elemanları Negatif kullanarak gerçek görüntünün arkasındaki yığılmış görüntülerin yanılsamasını oluşturmak için kullanılır. Z-endeksi.

Sonuç

Pseudo elemanlar basitçe “güzel” ve nihayetinde kullanılabilir, temelde biz iki bonus elementi gerçek HTML yapısına müdahale etmeden eklediğimiz her öğe için ve ardından bunları hayal edebileceğimiz hemen hemen her şeye çevirerek.

Aslında bazı iyileştirmeler var sözde elemanları şu anda üzerinde çalışılmakta olan iç içe geçmiş sahte elemanlar div :: before :: before content: "; ve çoklu sözde elemanlar div :: önce (3) content: "; Açıkçası gelecekte web tasarım pratiğinde çok daha fazla olasılık açacak. Geçerli tarayıcılarda uygulanırken, şimdilik sabırla bekleyelim.