Avsnitt Dropcap med CSSs første linje og første bokstavselementer
Det er noen CSS-selgere eller egenskaper som jeg tror sjelden brukes i naturen, men de har faktisk eksistert siden CSS1-dagene; noen av dem er inkludert :første linje og :første bokstav pesudo elementer.
Hvordan å bruke?
Disse pseudoelementene fungerer i utgangspunktet likt deres søsken - før og etter - og jeg tror de er også ganske enkle. De :første bokstav vil målrette det første bokstaven eller tegnet til et valgt element, dette pseudo-element brukes ofte til å lage en typografisk effekt som en dråpehue. Slik er det gjort.
p: første bokstav font-size: 50px;
Denne koden resulterer i følgende presentasjon.
Noen få ting bør bemerkes, men denne effekten gjelder kun når det første tegnet ikke foregår av et annet element, for eksempel et bilde. I tillegg, når vi har noen av de samme målrettede elementene på rad, vil alle av dem også bli påvirket.
Videre, i form av :første linje, dette pseudo-element vil målrette mot den første linjen med målrettet element, viser dette eksempelet nedenfor hvordan vi drister den første linjen i avsnittet.
p: første linje font-weight: bold;
Som forrige kode for :første bokstav, Dette vil også påvirke alle de første linjene i avsnittet elementer som finnes på siden.
Så, i ekte tilfeller, når vi generelt vil legge til dråpehett eller endre første linje bare i første ledd må vi være mer spesifikke - enten ved å legge til en ekstra klasseattributt eller bruke disse pseudoelementene sammen med :første barn eller : Første-av-typen selector, som så.
p: første barn: første bokstav font-size: 50px; p: første barn: første linje font-weight: bold;
Der vi går, det berørte avsnittet er nå bare den første.
Pseudo-Elements at Work
Ok, la oss nå prøve å utforme et bedre utseende av et avsnitt ved å bruke pseudo-elementer. Men før vi begynner trenger vi en spesiell skrifttype for vår dråpehett og her er mitt valg: Hominis av Paul Lloyd. Deretter definerer vi en ny skriftfamilie i stilarket som følger.
@ font-face font-family: 'HominisNormal'; src: url ('skrifter / HOMINIS-webfont.eot'); src: url ('fonter / HOMINIS-webfont.eot? #iefix') format ('embedded-opentype'), url ('fonter / HOMINIS-webfont.woff') format ('woff'), url HOMINIS-webfont.ttf ') format (' truetype '), url (' fonter / HOMINIS-webfont.svg # HominisNormal ') format (' svg '); font-weight: normal; font-style: normal; Deretter angir vi standard skriftfamilie for avsnittene.
p farge: # 555; font-familie: 'Georgia', Times, serif; linjehøyde: 24px;
I dette eksemplet vil vi bruke :første barn velger å målrette seg mot første ledd og bruke dekorative stiler for å se mer fremtredende ut:
p: første barn polstring: 30px; border-left: 5px solid # 7f7664; bakgrunnsfarge: # f5f4f2; linjehøyde: 32px; boksskygge: 5px 5px 0px 0px rgba (127, 118, 100, 0.2); posisjon: relativ;
Deretter legger vi til en dråpehett med :første bokstav, forstørr skriftstørrelsen, samt tilordne en ny skriftfamilien til den;
p: første barn: første bokstav font-size: 72px; flyte: venstre; polstring: 10px; høyde: 64px; font-familie: 'HominisNormal'; bakgrunnsfarge: # 7F7664; margin-høyre: 10px; farge: hvit; border-radius: 5px; linjehøyde: 70px;
Vi vil også legge vekt på den første linjen med :første linje, som så.
p: første barn: første linje font-weight: bold; skriftstørrelse: 24px; farge: # 7f7664;
Til slutt vil vi legge til et dekorativt attributt til første avsnitt med en papirklipp ved hjelp av :etter pseudo-element.
p: første barn: etter bakgrunn: url ("... /images/paper-clip.png") no-repeat rull 0 0 gjennomsiktig; innhold: " "; display: inline-block; høyde: 100px; posisjon: absolutt; høyre: -5px; topp: -35px; bredde: 100px; Det er all koden vi trenger, nå skal vårt avsnitt se mye bedre ut;
Du kan også se live demoen fra linkene under:
- Se demo
- Last ned kilde
Endelig tanke
Som vi tidligere nevnte i dette innlegget, disse pseudo-elementene, spesielt :første bokstav og :første linje har blitt inkludert siden CSS1, derfor støttes de også selv i Internet Explorer 8 tidligere.
Likevel, så vidt jeg vet, er de ikke så stort sett implementert i naturen. Så håper vi at denne opplæringen på en eller annen måte kan inspirere deg til å prøve disse CSS-funksjonene på nettstedet ditt.
