Punkts Dropcap ar CSS pirmās rindas un pirmā burta elementiem

Ir daži CSS selektori vai īpašības, kas, manuprāt, tiek izmantotas reti savvaļā, bet patiesībā tās ir bijušas kopš CSS1 dienām; daži no tiem ietver arī :pirmā līnija un : pirmā burta pesudoelementi.

Kā izmantot?

Šie pseidoelementi būtībā darbojas līdzīgi saviem brāļiem un māsām: - pirms un: pēc - un es domāju, ka tie arī ir diezgan vienkārši. The : pirmā burta atlasīs atlasītā elementa pirmo burtu vai rakstzīmi pseidoelements parasti tiek izmantots, lai radītu tipogrāfisku efektu, piemēram, pilienu vāciņu. Lūk, kā tas tiek darīts.

 p: pirmais burts font-size: 50px;  

Šis kods parādās nākamajā prezentācijā.

Jāatzīmē dažas lietas, tomēr šī ietekme tiks piemērota tikai tad, ja pirms pirmās rakstzīmes nav kāds cits elements, piemēram, attēls. Turklāt, ja mums ir daži no tiem pašiem mērķa elementiem pēc kārtas, tie visi tiks ietekmēti.

Turklāt, runājot par :pirmā līnija, to pseidoelements būs vērsta uz mērķa elementa pirmo rindu, šajā piemērā redzams, kā mēs uzliekam treknrakstu punkta pirmajā rindā.

 p: pirmās rindas font-weight: bold;  

Tāpat kā iepriekšējo kodu : pirmā burta, tas ietekmēs arī visas pirmās rindkopas rindkopas elementos, kas atrodas lapā.

Tātad, reālos gadījumos, kad mēs parasti vēlamies pievienot pilienu vāciņu vai mainīt pirmo rindu tikai pirmajā rindkopā mums ir jābūt precīzākiem - vai nu pievienojot papildu klases atribūtu, vai pielietojot šos pseidoelementus kopā ar : pirmais bērns vai : pirmais veids selektors, piemēram,.

 p: pirmais bērns: pirmais burts font-size: 50px;  p: pirmais bērns: pirmās rindas font-weight: bold;  

Tur mēs ejam, skartais punkts tagad ir tikai pirmais.

Pseidoelementi darbā

Labi, tagad mēģināsim izstrādāt labāku rindkopas izskatu, izmantojot pseidoelementus. Bet pirms mēs sākam, mums ir vajadzīgs īpašs fonts mūsu kritienam, un šeit ir mana izvēle: Paul Lloyd, Hominis. Pēc tam stilu lapā mēs definējam jaunu fontu saimi.

 @ font-face font-family: 'HominisNormal'; src: url ('fonti / HOMINIS-webfont.eot'); src: url (“fonts / HOMINIS-webfont.eot? #iefix”) formāts (“iegultās opentype”), url (“fonts / HOMINIS-webfont.woff”) formāts (“woff”), url (“fonti / HOMINIS-webfont.ttf ') formāts (“truetype”), url (“fonts / HOMINIS-webfont.svg # HominisNormal”) formāts (svg); fontu svars: normāls; fonta stils: normāls;  

Pēc tam mēs iestatām noklusējuma fontu saiti punktiem.

 p krāsa: # 555; font-family: “Georgia”, Times, serif; līnijas augstums: 24px;  

Šajā piemērā mēs izmantosim : pirmais bērns atlasītājs, lai mērķētu pirmo punktu, un piemērot dekoratīvos stilus, lai tas izskatītos vairāk

 p: pirmais bērns polsterējums: 30px; kreisajā pusē: 5px cietais # 7f7664; fona krāsa: # f5f4f2; līnijas augstums: 32px; kastes ēna: 5px 5px 0px 0px rgba (127, 118, 100, 0,2); pozīcija: relatīvais;  

Pēc tam, izmantojot : pirmā burta, paplašināt fonta lielumu, kā arī piešķirt tai jaunu fontu grupu;

 p: pirmais bērns: pirmais burts font-size: 72px; peldēt: pa kreisi; polsterējums: 10px; augstums: 64px; font-family: “HominisNormal”; fona krāsa: # 7F7664; labās malas: 10px; krāsa: balta; robežu rādiuss: 5px; līnijas augstums: 70px;  

Mēs arī uzsvērsim pirmo rindu ar :pirmā līnija, tāpat kā.

 p: pirmais bērns: pirmās rindas font-weight: bold; fonta lielums: 24px; krāsa: # 7f7664;  

Visbeidzot, mēs vēlamies, lai pirmajam punktam pievienotu dekoratīvu atribūtu ar saspraudi, izmantojot : pēc pseidoelements.

 p: pirmais bērns: pēc fons: url ("… /images/paper-clip.png") bez atkārtota ritināšanas 0 0 pārredzama; saturs: ""; displejs: inline-bloks; augstums: 100px; pozīcija: absolūta; pa labi: -5px; top: -35px; platums: 100px;  

Tas ir viss nepieciešamais kods, tagad mūsu rindkopai vajadzētu izskatīties daudz labāk;

Jūs varat arī redzēt tiešo demonstrāciju no tālāk norādītajām saitēm:

• Skatīt demonstrāciju
• Lejupielādēt avotu

Galīgā doma

Kā mēs jau iepriekš minējām šo amatu, šie pseidoelementi, īpaši : pirmā burta un :pirmā līnija ir iekļauta kopš CSS1, tāpēc tās tiek atbalstītas arī Internet Explorer 8 agrāk.

Tomēr, cik es zinu, tie nav tik lielā mērā ieviesti savvaļā. Tātad, mēs ceram, ka šī apmācība kaut kādā veidā varētu iedvesmot jūs izmēģināt šīs CSS funkcijas savā tīmekļa vietnē.