God dag, nerder på byggeplass. I dagens publikasjon vil vi ta for oss et tema knyttet til utforming av tekstinnhold. Det er derfor du vil lære hvordan du spør store bokstaver css - ved hjelp, bli kjent med flere alternativer for å lage en drop cap, og selvfølgelig kan du prøve alt i praksis. La oss nå komme ned til den morsomme delen!

La oss forvandle teksten

Med overlappende stilark kan du endre både det første tegnet i en blokk og hele teksten. Jeg skal vise deg hvordan du kan gjøre begge deler. Dessuten støttes alle verktøyene nevnt i denne artikkelen på tre språknivåer: css1, css2, css2.1 og css3.

Jeg starter med en interessant egenskap som endrer alt tekstinnholdet i utvalget. den tekstforvandling.

Det navngitte elementet kan konvertere tegn til store og små bokstaver, og også bruke store bokstaver for hvert første tegn i et ord. Jeg skrev mer om verdiene i tabellen.

Nå, for å konsolidere det teoretiske materialet, ta et eksempel.

Merk følgende!

I morgen er det rabatt på alle skjønnhetsprodukter!

Kampanjen er gyldig i alle filialer i din by.

Lage en drop cap

Hvis du ikke vet hva begrepet "drop cap" betyr, så er dette på tide å finne det ut, da det er direkte relatert til det aktuelle emnet.

Drop cap (eller noen ganger sier de initialen) er den første bokstaven i kapitlet, som skiller seg fra resten i sin store størrelse, farge og i noen tilfeller til og med fontdesign. I det virkelige liv kan et eksempel på et slikt brev finnes i gamle manuskripter og bøker.

Det er flere måter å lage en initial på. Ofte er et tegn uthevet med en markup language tag og etter det er visse egenskaper foreskrevet i stilene som endrer den. Dette er imidlertid ikke en dårlig måte denne publikasjonen snakker om css-mekanismene (som, etter min mening, i denne saken bruk er mye mer logisk og praktisk).

For å løse problemet kan du bruke et verktøy som f.eks.

Så, i dette tilfellet: første bokstav brukes. Som alle pseudo-elementer er det tilordnet velgeren, atskilt med kolon. Etter, i henhold til alle reglene for stilark, er egenskaper spesifisert. Du kan imidlertid bare bruke de egenskapene som er relatert til redigering av fonter, innrykk, farger, bakgrunn, felt og grenser.

Jeg foreslår å vurdere spesifikt eksempel... Ved å implementere det presenterte lite program, Jeg bestemte meg for å lage ikke bare en farget dråpehette, men fylle den med blomster. For å gjøre dette må du bruke flere smarte triks med installasjon gjennomsiktig farge font og fyll bokstaven med det valgte bildet.

Dette avsnittet inneholder en setning med veldig interessant innhold.

La oss fortsette med en interessant historie i neste avsnitt.

Resultatet ser veldig attraktivt og uvanlig ut, noe som er den perfekte løsningen for.

Som du kan se dette emnet veldig enkelt. Brakt av meg programkode du kan trygt bruke den for nettressursene dine, endre og tilpasse stilen din.

Hvis materialet ovenfor var nyttig for deg, abonner på oppdateringer på bloggen min og ikke glem å dele kunnskapen du har fått (og selvfølgelig en lenke til bloggen min) med vennene dine. Lykke til!

Ha det!

Vennlig hilsen, Roman Chueshov

Lese: 236 ganger

Styrer konverteringen av elementtekst til store eller små bokstaver. Når verdien er annen enn ingen, er tilfellet kildetekst vil bli endret.

kort info

Betegnelser

Verdiene

bruk stor bokstav Det første tegnet i hvert ord i setningen vil bli skrevet med stor bokstav. Resten av symbolene endrer ikke utseendet. små bokstaver Alle teksttegn blir små bokstaver (små bokstaver). store bokstaver Alle teksttegn er store bokstaver (store bokstaver). ingen Bytter ikke store og små bokstaver.

Sandkasse

Ole Brumm var alltid ikke uvillig til en liten forfriskning, spesielt klokken elleve om morgenen, for på dette tidspunktet var frokosten ferdig for lenge siden, og middagen hadde ikke engang tenkt å starte. Og selvfølgelig var han fryktelig glad for å se kanin ta fram kopper og tallerkener.

div (tekst-transform: bruk store bokstaver;)

Eksempel

Kulturminne Middelalderen

Amazonas lavland tar på seg en liten transport av katter og hunder, og Hayosh Bayah er kjent for sine røde viner.

Resultat dette eksemplet vist i fig. 1.

Ris. 1. Bruke tekst-transform-egenskapen

Objektmodell

En gjenstand.style.textTransform

Spesifikasjon

Hver spesifikasjon går gjennom flere stadier av godkjenning.

• Anbefaling - Denne spesifikasjonen er godkjent av W3C og anbefales som standard.
• Kandidatanbefaling ( Mulig anbefaling ) - gruppen ansvarlig for standarden er fornøyd med at den er i tråd med målene, men det kreves hjelp fra utviklermiljøet for å implementere standarden.
• Foreslått anbefaling ( Foreslått anbefaling) - På dette tidspunktet sendes dokumentet til W3C Advisory Council for endelig godkjenning.
• Arbeidsutkast - En mer moden versjon av utkastet etter diskusjon og revisjon for fellesskapsgjennomgang.
• Redaktørens utkast ( Redaksjonelt utkast) - et utkast av standarden etter redigering av prosjektredaktørene.
• Utkast ( Utkast til spesifikasjon) er det første utkastet til standarden.

CSS store bokstaver bidra til å bryte monotonien til en enhetlig design, hvis tekster ser like ut fra start til slutt.

Tidligere og nå drop caps

Kronikerne brukte store bokstaver i håndskrevne manuskripter, hvorav noen dateres tilbake til 500-tallet. Store bokstaver fortsatte å bli brukt fra 800- til 1400-tallet, da trykkpresser brakte trykkingen til et industrielt nivå. Både håndskrevne og trykte drop caps ble plassert i begynnelsen av teksten. De var ofte dekorert med et dekorativt mønster som ble plassert rundt bokstaven.

De hevede og senkede bokstavene er fortsatt i bruk i dag. De finnes i aviser, magasiner og bøker, samt i digital typografi. Hevede bokstaver kalles noen ganger utvidede. De plasseres i flukt med bunnen av teksten som følger dem. Utelatte bokstaver plasseres i flukt med topp tekst, noen ganger i et lag bak hoveddelen av tekstinnhold, eller resten av teksten går rundt dem.

De hevede bokstavene er mye lettere å definere, fordi de er i flukt med resten av teksten, og vanligvis trenger du ikke å endre flyten rundt de ytre margene for å gjøre dette. Utelatte bokstaver krever mer finjustering... Det vil være lettere for deg å ordne opp i dette hvis du først forstår hvordan opphøyde karakterer håndteres.

Bruke klasser

Designere som allerede er kjent med CSS vet å lage en egen CSS-klasse for den første store bokstaven.

CSS for avsnittselementet og klassen som lager bokstaven vil se slik ut:

p (font-size: 20px; font-family: Georgia, "Times New Roman", Times, serif;) .myinitialcaps (font-size: 48px; font-family: Didot;)

Og HTML-koden vil se slik ut:

Som gir oss:

Virker det for lett? Faktisk må du gjøre justeringer basert på de spesifikke opphøyde bokstavene, siden hver stor bokstav krever spesiell kerning. Etter å ha valgt en font for de hevede bokstavene og for brødteksten, må du lage separate klasser for hver hevet bokstav. Nedenfor CSS class.myinitialcapsi boksen til høyre har negativ betydning for å redusere avstanden mellom I og n.

Myinitialcapsi (font-size: 48px; font-family: Didot; margin-right: -1px;)

Jeg i dette tilfellet er det litt ekstra plass mellom"I" og "n."

Jegå inkludere en ny klasse med negativ margin trekker den nærmere.

Avhengig av skjermoppløsningen, i eksemplet ovenfor, kan I og n se ut som om de har slått seg sammen. Dette skyldes serifene i enden av bokstavene. Derfor, før du bestemmer deg for de endelige CSS-stilene, test nettstedet med forskjellige enheter for å se hvordan teksten ser ut på dem med store bokstaver CSS.

Sitater og andre spesielle tilfeller

Du kan forstørre ikke bare bokstavene i begynnelsen av teksten. Du kan implementere en annen klasse for å lage en overdimensjonert versjon av sitatene som vises ved siden av bokstaven. I vårt tilfelle er verken 48-piksler-klassen eller 20-pikslers tekstklasse egnet for anførselstegn. Snarere vil det være noe i mellom – 30 piksler. Vi flytter anførselstegnene ned 4 piksler for å justere dem optisk med I:

Myinitialcapsq (font-size: 30px; font-family: Didot; float: left; margin-top: 4px;)

“Jeg inkludert "en ny klasse med negativ margin trekker den nærmere.

Du må være veldig forsiktig med å spesifisere hver av CSS-kapslene sammen med anførselstegnene, slik at deres kerning og justering samsvarer med den omkringliggende markeringen. For eksempel må bokstaven T flyttes til venstre, litt utenfor kanten av avsnittet, slik at dens tverrgående linje visuelt passer inn i oppsettet. Du må gjøre det samme med runde bokstaver som C, G, O og Q. I dette eksemplet er skriftstørrelsene som brukes 20, 30 og 48. Men du må velge størrelsene basert på spesifikasjonene til skriftene du har valgt. Samt størrelsene og oppløsningene på skjermene som nettstedet vil bli vist på.

Pseudo-elementer og pseudo-klasser

Med et CSS-pseudo-element kan du enkelt lage en hevet bokstav ved å legge til :: første bokstav i avsnittselementet. Bruk: første bokstav ( med ett kolon) for utdaterte nettlesere:

p (font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height: 2em; padding-bottom: 1.2em;) p :: første bokstav (font-size: 3,6em; teksttransformering: store bokstaver; fontfamilie: "Monotype Bernard Condensed", serif; margin-right: 0,03em;) .initialb (margin-right: -0.1em;) .initialn (margin-right: -0.15 em ;)

HTML-kode som inneholder CSS-klasser, med tanke på kerning av bokstavene N og B, vil se slik ut ...

En forbokstav, hvor den første bokstaven er en stor bokstav.
Med et linjeskift har neste linje ingen startgrense.

n legg merke til HTML-en kilden hvordan den første bokstaven, ikke en stor bokstav i HTML-en, blir dimensjonert til den opprinnelige størrelsen på 3,6 em. Ryddig, ikke sant?

B ut med en hard retur, og et nytt avsnitt startet, blir det alltid opprettet en annen innledende cap. Du spør kanskje deg selv, Hvordan skal jeg redegjøre for dette? Skal jeg ha en innledende cap i begynnelsen av et nytt avsnitt? Vel, du kunne. Men, vil du at det skal se slik ut, og må det absolutt se slik ut?

Den første store bokstaven i avsnittet konverteres til en bokstav.
Den første bokstaven etter et linjeskift vil ikke være stor.

O Vær oppmerksom på at i kildekode HTML den første bokstaven er ikke stor, men den konverteres til et 3,6 em-tegn.

O Men selv etter tvungen pause linjer, og en bokstav opprettes alltid i begynnelsen av hvert nytt avsnitt. Du kan spørre deg selv: Hvordan kan jeg ta hensyn til dette? Må jeg legge til bokstaver for alle disse sakene? Vel, du kan. Men er det nødvendig?

Selv med fordelene som pseudo-elementer gir, måtte vi legge til mye kode for å definere separate klasser for å håndtere problemer med kerning og innrykk. Men denne metoden konverterer den første bokstaven i hvert nytt avsnitt til CSS en stor bokstav. For noen fungerer det kanskje ikke, fordi du ikke trenger å transformere den første bokstaven i hvert avsnitt.

Kombinere pseudo-klasser og pseudo-elementer for å lage en smart layout

Å legge til: førstebarns-pseudoklassen hjelper til med å løse problemet med unødvendig konvertering av første bokstaver:

p (font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height: 2em; padding-bottom: 0.5em;) p: first-child :: first-letter ( skriftstørrelse: 3.6em; teksttransformasjon: store bokstaver; fontfamilie: "Monotype Bernard Condensed", serif; margin-høyre: 0.03em;)

Ved å kombinere denne koden med HTML:

Den første bokstaven, som er definert som første barn, er den eneste bokstaven som konverteres til en hevet drop cap i denne metoden.

Siden bare bokstaven som er definert som første barn blir konvertert, merk at dette eksemplet skiller seg fra det forrige, uten første barn. I tillegg konverterer vi ikke de første bokstavene etter begynnelsen av et avsnitt og etter et tvungen linjeskift. Dette ser mer elegant ut sammenlignet med hvordan oppsettet så ut da vi konverterte alle de første bokstavene i avsnittene.

Fordelen med å bruke pseudoklasser er muligheten til å håndtere ulike spesialtilfeller. Hva med ulempene? Det finnes mange forskjellige pseudo-klasser, og de kan kombineres på så mange måter at det kan få hodet til å snurre. For eksempel kan pseudoklassene: første-barn og: første-av-type gi de samme resultatene. Du kan også bruke pseudoklassen ikke bare på avsnittet, men også på elementene