Punctul Dropcap cu Elementele CSS de primă linie și prima literă
Există câțiva selectori sau proprietăți CSS care cred că sunt rareori folosite în sălbăticie, dar de fapt au existat încă din zilele CSS1; unii dintre ei includ :prima linie și :prima literă Elemente pesudo.
Cum să utilizați?
Aceste pseudo-elemente practic funcționează asemănător cu frații lor -: înainte și după: și cred că sunt, de asemenea, destul de simplă. :prima literă va viza prima literă sau caracterul unui element selectat, aceasta pseudo-element de este folosit în mod obișnuit pentru a crea un efect tipografic ca o cădere de picătură. Iată cum sa făcut.
p: prima literă font-size: 50px;
Acest cod are ca rezultat următoarea prezentare.
Trebuie notat câteva lucruri, însă acest efect se va aplica numai atunci când primul caracter nu este precedat de un alt element, de exemplu, o imagine. În plus, atunci când avem unele din aceleași elemente direcționate într-un rând, toate acestea vor fi, de asemenea, afectate.
În plus, în ceea ce privește :prima linie, acest pseudo-element de va viza prima linie a elementului vizat, acest exemplu de mai jos arată cum am îndreptat bold primul rând al paragrafului.
p: prima linie font-weight: bold;
Ca și codul anterior al lui :prima literă, acest lucru va afecta, de asemenea, toate primele linii din elementele de paragraf din pagină.
Deci, în cazuri reale, atunci când în general vrem să adăugăm capacul de picătură sau să modificăm prima linie numai la primul paragraf trebuie să fim mai specifici - fie prin adăugarea unui atribut de clasă suplimentară, fie prin aplicarea acestor pseudo-elemente :primul copil sau : Primul-de-tip selector, așa cum este.
p: primul copil: prima literă font-size: 50px; p: primul copil: prima linie font-weight: bold;
Acolo mergem, paragraful afectat este acum doar primul.
Pseudo-elemente la locul de muncă
Bine, să încercăm acum să proiectăm un aspect mai bun al unui paragraf prin utilizarea pseudo-elementelor. Dar inainte de a incepe avem nevoie de un font special pentru capul nostru de picurare si aici este alegerea mea: Hominis de Paul Lloyd. Apoi definim o nouă familie de fonturi în foaia de stil, după cum urmează.
@ font-face font-family: "HominisNormal"; src: url ("fonturi / HOMINIS-webfont.eot"); src: url ('fonts / HOMINIS-webfont.eot? #iefix') format (embedded-opentype), url ('fonts / HOMINIS-webfont.woff' Formatul HOMINIS-webfont.ttf '(' truetype '), url (' fonts / HOMINIS-webfont.svg # HominisNormal ') format (' svg '); font-weight: normal; font-style: normal; Apoi, setăm familia de fonturi implicită pentru paragrafe.
p culoare: # 555; font-family: "Georgia", Times, serif; linia-înălțime: 24px;
În acest exemplu, vom folosi :primul copil selectorul pentru a viza primul paragraf și a aplica stiluri decorative pentru a arăta mai proeminent:
p: primul copil padding: 30px; frontieră stângă: 5px solid # 7f7664; fundal-culoare: # f5f4f2; line-height: 32px; box-shadow: 5px 5px 0px 0px rgba (127, 118, 100, 0.2); poziția: relativă;
Apoi, adăugăm un cap de picătură folosind :prima literă, măriți dimensiunea fontului și alocați o nouă familie de fonturi;
p: primul copil: prima literă font-size: 72px; plutește la stânga; padding: 10px; înălțime: 64px; font-family: 'HominisNormal'; fundal-culoare: # 7F7664; marginea-dreapta: 10px; culoare albă; raza de graniță: 5px; linia-înălțime: 70px;
Vom sublinia, de asemenea, prima linie cu :prima linie, ca astfel.
p: primul copil: prima linie font-weight: bold; font-size: 24px; culoare: # 7f7664;
În cele din urmă, vrem să adăugăm un atribut decorativ la primul paragraf cu ajutorul unui agrafă de birou :după pseudo-element de.
p: primul copil: după background: url ("... /images/paper-clip.png") defilați repetat 0 0 transparent; conținut: ""; afișare: inline-block; înălțime: 100px; poziția: absolută; dreapta: -5px; top: -35px; lățime: 100px; Acesta este tot codul de care avem nevoie, acum punctul nostru ar trebui să arate mult mai bine;
De asemenea, puteți vedea demo-ul live de pe link-urile de mai jos:
- Vizualizați demonstrația
- Descărcați sursa
Gândirea finală
Așa cum am menționat mai devreme în acest post, aceste pseudo-elemente, în special :prima literă și :prima linie a fost inclus de la CSS1, prin urmare, acestea sunt, de asemenea, acceptate chiar și în Internet Explorer 8 mai devreme.
Totuși, din câte știu, nu sunt puse în practică în mare măsură în sălbăticie. Deci, sperăm că acest tutorial ar putea inspira într-un fel să încercați aceste caracteristici CSS pe site-ul dvs. Web.
