Hvordan du stiler tekst med CSS 3 - dummies

Når du oppretter CSS 3 på et iPhone- eller iPad-nettsted, kan du ikke bare nyte fordelene ved egendefinert bruk skrifter og slipp skygger, men også få utfordringen ved å limere tekst på skjermbilder med forskjellige dimensjoner. Ikke vær bekymret mer: finn ut hvordan du best kan styre størrelsen på tekst og oppdag glederne til stylingteksten ved å bruke CSS 3.

Justere tekststørrelse

For å gjøre det lettere å lese tekst på iPhone, er standardverdien Innstillingen for regelen for justering av tekststørrelse er automatisk: Teksten blir automatisk skalert til skjermen.

På iPad er standard ingen fordi den større skjermen ikke krever at tekst skal endres automatisk. På mange nettsteder gjør denne tilpasningen siden enklere å lese, men hvis du har nøye designet sidene dine og målrettet stilene dine spesifikt til iPhone eller iPad, kan det være lurt å forhindre automatisk resizing.

Her er tre eksempler på hvordan du kan bruke dette alternativet:

-webkit-tekststørrelsesjustering: auto; -webkit-tekststørrelsesjustering: ingen; -webkit-tekststørrelsesjustering: 80%;

Her er kodeseksemplet med tillegg av webkit-tekststørrelsesjusteringsregelen satt til ingen; inkludert denne koden i stilen for alle disse kodene på en gang gjør ingen av teksten i kodene automatisk endring:

/ * Denne stilen hjelper eldre nettlesere til å forstå HTML5 og tilbakestiller vanlige merker til 0 * / artikkel, til side, bunntekst, header, meny, nav, seksjon, detaljer, kropp, h1, h2, h3, p, ul, li, {border: 0; margin: 0; polstring: 0; skjerm: blokk; / * stopper WebKit resizing tekst * / -webkit-tekststørrelsesjustering: none;}

Legge til tekstskygger

Ved hjelp av CSS 3 kan du legge til dråpeskygger til tekst og til et hvilket som helst blokknivåelement, for eksempel en tagg.

En nyttig måte å øke kontrasten mellom tekst og bakgrunn på er å legge til en tekstskygge. Tekstskygger gjør ikke bare sidedesignene mer interessante, men gjør også tekst mye mer lesbar, spesielt hvis designet har en komplisert bakgrunn eller forgrunnen og bakgrunnsfargene ikke har mye kontrast.

Her er syntaksen for tekstskygger for WebKit-nettlesere:

tekstskygge: horisontal vertikal uskarphet med radiusfarge;

Slik fyller du inn disse plassholderne påvirker tekstskyggen:

• horisontal og vertikal - De to første verdiene, som angir horisontale og vertikale forskyvninger, kreves. De angir avstanden som dropshadowen strekker seg under og til høyre for teksten.

• uklar radius - Den tredje innstillingen, som angir mengden av uskarphet i skyggen, er valgfritt. Hvis du ikke inkluderer en sløret radius, er standard 0, noe som gjør at den angitte fargen vises som en solid farge.

• farge - Angi en farge ved hjelp av den heksadesimale fargekoden (de tradisjonelle fargekodene med 6 tegn) eller RGBa-fargekoden, som lar deg spesifisere blant rød, grønn og blå, samt ugjennomtrengelighet. (Mer om RGBa på et øyeblikk.)

Følgende linje av kode legger til en tekstskygge på

-taggen. Tallene angir at tekstskyggen strekker seg to piksler til høyre og under teksten med 3-piks-uskarphet. Dette eksemplet bruker en grå farge angitt med den heksadesimale fargekoden # 999.

h1 {tekstskygge: 2px 2px 3px # 999;}

Hvis du angir fargen som en RGBa-farge, kan du definere en delvis gjennomsiktig farge. RGBa-farger er definert av en rekke tall som angir hvor mye rød, blå eller grønn du vil ha. Antallet av tall er 0 til 255.

Det fjerde tallet definerer mengden av opasitet eller gjennomsiktighet. (Utvalget er 1 for full åpenhet til 0 for full gjennomsiktighet.) For eksempel. 6 i det følgende eksemplet indikerer et opasitetsnivå på 60 prosent; 40 prosent av den underliggende fargen skinner gjennom.

Stilen som er definert for den foregående

-taggen, gjelder for tekst som er formatert med merket 1-koden. Stilen nedenfor er en klassestil (angitt med prikken før navnet). Klassestiler er mer allsidige og kan brukes på tekst på en side.

. skygge {tekstskygge:. 2em. 2em. 3em rgba (153, 153, 153, 6);}

I CSS kan størrelser spesifiseres i mange forskjellige målinger, inkludert piksler, prosenter og em-alternativet som er brukt i det foregående eksempel.