CSS'nin ilk satır ve ilk harf Öğelerini içeren Paragraf Dropcap

Vahşi doğada nadiren kullanıldığını düşündüğüm birkaç CSS seçicisi veya özelliği var, ancak aslında CSS1 günlerinden beri var olmuş durumdalar; bazıları da dahil :İlk satır ve :ilk harf pesudo elemanlar.

Nasıl kullanılır?

Bu sözde unsurlar temelde kardeşlerine benzer şekilde çalışır: - önce ve: sonra - ve sanırım oldukça basitler. :ilk harf Seçilen bir öğenin ilk harfini veya karakterini hedefleyecektir. sözde eleman Genellikle bir damlalık gibi tipografik bir efekt oluşturmak için kullanılır. İşte nasıl yapılır.

 p: ilk harf font-size: 50px;  

Bu kod aşağıdaki sunumla sonuçlanır..

Bununla birlikte, birkaç şeyin not edilmesi gerekir, ancak, bu etki yalnızca ilk karakter başka bir elemandan, örneğin bir görüntüden önce gelmediğinde uygulanacaktır. Ek olarak, arka arkaya aynı hedeflenmiş öğelerden bazılarına sahip olduğumuzda, hepsi de etkilenecektir..

Ayrıca, açısından :İlk satır, bu sözde eleman hedeflenen elemanın ilk satırını hedefleyecektir, aşağıdaki örnek paragrafın ilk satırını nasıl kalınlaştırdığımızı gösterir.

 p: birinci satır font-weight: bold;  

Önceki kodu gibi :ilk harf, bu, sayfadaki tüm paragraf öğelerinde ilk satırların tümünü de etkileyecektir..

Yani, gerçek durumlarda, genellikle damlalık eklemek veya ilk satırı değiştirmek istediğimizde sadece ilk paragrafta daha spesifik olmamız gerekiyor - ya ekstra bir sınıf niteliği ekleyerek ya da bu sözde elemanları birlikte uygulayarak :ilk çocuk veya : Birinci tip seçici.

 p: birinci çocuk: birinci harf font-size: 50px;  p: birinci çocuk: birinci satır font-weight: bold;  

İşte gidiyoruz, etkilenen paragraf şimdi sadece birincisi.

İşyerinde Sahte Öğeler

Pekala, şimdi sözde unsurları kullanarak paragrafa daha iyi bir görünüm tasarlamaya çalışalım. Ama başlamadan önce, başlığımız için özel bir yazı tipine ihtiyacımız var ve işte seçimim: Hominis by Paul Lloyd. Ardından, stil sayfasında yeni bir font ailesi tanımlarız;.

 @ font-face font-ailesi: 'HominisNormal'; src: url ('yazı tipleri / HOMINIS-webfont.eot'); src: url ('yazı tipleri / HOMINIS-webfont.eot? #iefix') formatı ('gömülü-opentype') formatı, url ('yazı tipleri / HOMINIS-webfont.woff') formatı ('woff'), url ('yazı tipleri / HOMINIS-webfont.ttf ') formatı (' truetype '), url (' yazı tipleri / HOMINIS-webfont.svg # HominisNormal ') formatı (' svg '); yazı tipi ağırlığı: normal; yazı tipi stili: normal;  

Ardından, paragraflar için varsayılan font ailesini ayarladık.

 p renk: # 555; font-family: 'Georgia', Times, serif; hat yüksekliği: 24px;  

Bu örnekte, kullanacağız :ilk çocuk ilk paragrafı hedefleyen ve daha belirgin görünmesi için dekoratif stiller uygulayan seçici:

 p: birinci çocuk dolgu: 30 piksel; sınır-sol: 5 piksel katı # 7f7664; arka plan rengi: # f5f4f2; çizgi yüksekliği: 32px; kutu gölge: 5 piksel 5 piksel 0 piksel 0 piksel rgba (127, 118, 100, 0,2); pozisyon: göreceli;  

Sonra kullanarak bir damla kapak ekledik :ilk harf, yazı tipi boyutunu büyütmek ve ona yeni bir yazı tipi ailesi atamak;

 p: birinci çocuk: birinci harf font-size: 72px; şamandıra: sol; dolgu maddesi: 10px; yükseklik: 64px; font-family: 'HominisNormal'; arka plan rengi: # 7F7664; sağ kenar: 10px; Beyaz renk; sınır yarıçapı: 5 piksel; çizgi yüksekliği: 70px;  

Ayrıca ilk satırı vurgulayacağız. :İlk satır, öyle.

 p: birinci çocuk: birinci satır font-weight: bold; yazı tipi boyutu: 24 piksel; renk: # 7f7664;  

Son olarak, ilk paragrafa kullanarak bir ataç ile dekoratif bir özellik eklemek istiyoruz. :sonra sözde eleman.

 p: first-child: after background: url ("… /images/paper-clip.png") tekrarlamayan kaydırma 0 0 saydam; içerik: ""; ekran: satır içi blok; yükseklik: 100px; pozisyon: mutlak; sağ: -5px; üst: -35px; genişlik: 100px;  

İhtiyacımız olan tüm kod bu, şimdi paragrafımız çok daha iyi görünmeli;

Canlı demosu aşağıdaki bağlantılardan da görebilirsiniz:

• Demoyu Gör
• Kaynak İndir

Son düşünce

Bu yazı daha önce de belirttiğimiz gibi, bu sözde unsurlar, özellikle :ilk harf ve :İlk satır CSS'den beri dahil edilmiştir, dolayısıyla daha önce Internet Explorer 8'de de desteklenirler..

Ancak, bildiğim kadarıyla, onlar büyük ölçüde vahşi doğada uygulanmıyor. Bu nedenle, bu eğitimin bir şekilde web sitenizde bu CSS özelliklerini denemenize ilham vereceğini umuyoruz..