Punkt Dropcap koos CSS esimese rea ja esimese tähega elementidega

On olemas mõned CSS-i selektorid või omadused, mida ma arvan, et neid kasutatakse looduses harva, kuid nad on tegelikult olemas olnud alates CSS1 päevast; mõned neist on ka :esimene rida ja : esimene täht pesudoelemendid.

Kuidas kasutada?

Need pseudoelemendid töötavad põhiliselt sarnaselt oma õdede-vendadega -: enne ja: pärast - ja ma arvan, et nad on ka üsna lihtsad. The : esimene täht sihib valitud elemendi esimese tähe või märgi pseudoelement kasutatakse tavaliselt tüpograafilise efekti loomiseks nagu tilgakork. Siin on, kuidas see on tehtud.

 p: esimene täht font-size: 50px;  

See kood annab järgmise esitluse.

Tuleb märkida mõned asjad, kuid seda efekti rakendatakse ainult siis, kui esimest märki ei eelista teine ​​element, näiteks pilt. Lisaks, kui meil on samad sihitud elemendid järjest, mõjutab see kõiki neid.

Edasi, seoses :esimene rida, seda pseudoelement sihib sihitud elemendi esimese rea, see näide näitab, kuidas me lõigu esimesele reale julged.

 p: esimese rea font-weight: bold;  

Sarnaselt eelmise koodiga : esimene täht, see mõjutab ka kõiki esimeses lõigus elementide elemente, mida lehel on.

Niisiis, reaalsetel juhtudel, kui me tavaliselt tahame lisada tilgakorki või muuta esimest rida ainult esimese lõigu puhul peame olema täpsemad - lisades lisaklassi atribuudi või rakendades neid pseudoelemente koos : esimene laps või : esmane selector, nagu nii.

 p: esimene laps: esimene täht font-size: 50px;  p: esimene laps: esimese rea font-weight: bold;  

Seal me läheme, mõjutatud lõige on nüüd ainult esimene.

Pseudo-elemendid tööl

Olgu, proovime nüüd pseudoelemente kasutades kavandada lõigu paremat välimust. Aga enne, kui alustame, on meil vaja meie tilkkatte jaoks spetsiaalset fondi ja siin on minu valik: Paul Lloyd. Seejärel määratleme stiilile uue fontide perekonna järgmiselt.

 @ font-face font-family: 'HominisNormal'; src: url ('fonts / HOMINIS-webfont.eot'); src: url ('fonts / HOMINIS-webfont.eot? #iefix') vorming ("varjatud opentype"), url ('fonts / HOMINIS-webfont.woff') vorming ('woff'), url ('fonts / HOMINIS-webfont.ttf ') vorming (' truetype '), url (' fonts / HOMINIS-webfont.svg # HominisNormal ') formaat (' svg '); fondi kaal: normaalne; font-style: normaalne;  

Seejärel määrame lõikudele vaikimisi fondi perekonna.

 p värv: # 555; font-family: „Georgia”, Times, serif; rea kõrgus: 24px;  

Selles näites kasutame me : esimene laps valiku abil esimese lõigu sihtimiseks ja dekoratiivsete stiilide rakendamiseks, et see oleks silmapaistvam:

 p: esimene laps polster: 30px; vasakpoolne: 5px tahke # 7f7664; taustavärv: # f5f4f2; rea kõrgus: 32x; kast-vari: 5px 5px 0px 0px rgba (127, 118, 100, 0,2); positsioon: suhteline;  

Seejärel lisame tilkkahva : esimene täht, suurendage fondi suurust ja määrake sellele uus fontide perekond;

 p: esimene laps: esimene täht font-size: 72px; float: vasakule; polsterdus: 10px; kõrgus: 64px; font-family: „HominisNormal”; taustavärv: # 7F7664; marginaali paremale: 10px; värv: valge; raadius: 5 px; rea kõrgus: 70 px;  

Me rõhutame ka esimest rida :esimene rida, niimoodi.

 p: esimene laps: esimene rida font-weight: bold; fondi suurus: 24px; värv: # 7f7664;  

Lõpuks tahame lisada esimesele lõikele dekoratiivse atribuudiga kirjaklambri : pärast pseudoelement.

 p: esimene laps: pärast taust: url ("… /images/paper-clip.png") ei esine kordusnurka 0 0 läbipaistvat; sisu: " "; kuva: inline-block; kõrgus: 100 px; positsioon: absoluutne; paremale: -5px; top: -35px; laius: 100 px;  

See on kõik kood, mida me vajame, nüüd peaks meie lõige tunduma palju parem;

Samuti saate näha otseülekannet allolevatest linkidest:

• Kuva demo
• Allalaadimise allikas

Lõplik mõte

Nagu me juba selles ametikohas mainisime, on need pseudoelemendid, täpsemalt : esimene täht ja :esimene rida on lisatud alates CSS1-st, seega toetatakse neid ka varem Internet Exploreris 8.

Samas, niipalju kui mina tean, ei rakendata neid nii suurel määral looduses. Loodame, et see õpetus võib mingil moel inspireerida teid proovima neid CSS-funktsioone oma veebilehel.