Tekst er viktig, selv for de mest stilige, mest visuelt krevende webdesignene. Gi teksten den oppmerksomheten den fortjener med disse CSS-egenskapene.
Cascading Style Sheets (CSS) beskriver hvordan HTML viser elementer på skjermen. CSS kan kontrollere utformingen av flere nettsider med noen få linjer med kode.
CSS har formateringsegenskaper som påvirker avstanden, utseendet og justeringen av tekst. Her er noen egenskaper du kan bruke til å style tekst på appsidene dine.
1. Tekstfarge
De farge egenskap angir hovedforgrunnsfargen til teksten. Du kan bruke et forhåndsdefinert fargenavn som rød, hvit, eller grønn. Du kan også bruke en hex-verdi eller andre enheter som RGB, HSL og RGBA.
CSS-rammeverk som Medvind CSS har en innebygd fargefunksjon som viser en rekke nyanser. Dette gjør det lettere for deg å velge en nyanse du foretrekker. La oss endre fargen på følgende overskrifter ved å bruke noen av disse egenskapene:
<kropp>
<h1>Endre min fargeh1><h2>Endre min fargeh2>
<h3>Endre min fargeh3>
<h4>Endre min fargeh4>
kropp>
CSS vil se slik ut:
h1 {
farge: oransje;
}h2 {
farge: #ff6600;
}h3 {
farge: rgb(255, 102, 0);
}
h4 {
farge: hsl(24, 100%, 50%);
}
Og den stilede teksten vil se slik ut:
2. Bakgrunnsfarge
Du kan bruke bakgrunnsfarge eiendom å lage tiltalende bakgrunn. Bruk den til å angi forskjellige bakgrunner for følgende overskrifter:
<kropp>
<h1>Endre bakgrunnsfargen minh1><h2>Endre bakgrunnsfargen minh2>
<h3>Endre bakgrunnsfargen minh3>
<h4>Endre bakgrunnsfargen minh4>
kropp>
Med følgende CSS:
h1 {
bakgrunnsfarge: oransje;
}h2 {
bakgrunnsfarge: #009900;
}h3 {
bakgrunnsfarge: rgb(204, 0, 0);
}
h4 {
bakgrunnsfarge: hsl(60, 100%, 50%);
}
Når nettleseren din gjengir denne siden, vil den se omtrent slik ut:
3. Tekstjustering
De tekstjustering egenskap angir horisontal justering av tekst. Denne verdien kan være venstre, Ikke sant, senter, eller rettferdiggjøre.
Justeringsverdien strekker hver linje med tekst, slik at de alle tar opp samme bredde på høyre og venstre marg. Bruk følgende eksempelkode for å utforske disse fire verdiene:
<kropp>
<h1>Juster meg til venstreh1><h2> Juster meg retth2>
<h3>Align Me centerh3>
<sklasse="ex4"><sterk>Juster meg rettferdiggjortsterk>:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.s>
<s><sterk>Ingen justering sterk>:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.s>
kropp>
Bruk følgende CSS for å bruke forskjellige justeringer:
h1 {
tekstjustering: venstre;
}h2 {
tekstjustering: Ikke sant;
}h3 {
tekstjustering: senter;
}
.ex4{
tekstjustering: rettferdiggjøre;
}
I nettleseren vil dette se slik ut:
4. Tekstretning
De tekst-retning egenskap definerer retningen til tekst. Definer retningen ved hjelp av egenskaper rtl (høyre til venstre) eller ltr (venstre til høyre). Disse to spesifiserer hvilken retning du vil at teksten skal flyte.
Bruk for eksempel rtl når du arbeider med språk skrevet fra høyre til venstre som hebraisk eller arabisk. Du bruker ltr for språk skrevet fra venstre til høyre som engelsk.
La oss illustrere dette med koden nedenfor:
<kropp>
<div>
<sklasse="ex1">Dette avsnittet går fra høyre til venstre. Markøren
flyttes fra høyre til venstre når du skriver inn mer informasjon på
side.s>
<sid="ex2">Dette avsnittet går fra venstre til høyre. Markøren beveger seg
fra venstre til å skrive når du skriver mer informasjon på siden!s>
div>
kropp>
Med denne medfølgende CSS:
.eks1 {
retning: rtl;
}
#eks2 {
retning: ltr;
}
Sluttresultatet vil se omtrent slik ut:
5. Tekst dekorasjon
De tekst-dekorasjon egenskap setter utseendet til dekorative linjer på tekst. Det er en forkortelse for tekst-dekorasjonslinje,tekst-dekorasjon-farge,tekst-dekor-stil, og tekst-dekor-tykkelse eiendom. Hvis du ikke ønsker å ha egenskapen på elementer som har lenker, bruk tekst-dekor: ingen;
Du bør unngå å understreke vanlig tekst siden den stilen vanligvis indikerer en lenke. Følgende illustrasjon viser noen eksempler i kode:
<kropp>
<h1>Overline tekstdekorasjonh1><h2>Gjennomgående tekstdekorh2>
<h3>Understrek tekstdekorasjonh3>
<sklasse="eks">Over- og understrek tekstdekorasjon.s>
<s><enhref="default.asp">Dette er en lenkeen>s>
kropp>
Du kan bruke forskjellige dekorasjonseffekter med denne CSS:
h1 {
tekst-dekorasjon: overlinje;
}h2 {
tekst-dekorasjon: gjennomgående;
}h3 {
tekst-dekorasjon: understreke;
}s.eks {
tekst-dekorasjon: overlinjeunderstreke;
}
en {
tekst-dekorasjon: ingen;
}
Og de vil vise noe slikt:
6. Tekstforvandling
De tekstforvandling egenskap angir hvilken type store og små bokstaver bokstavene vises. Dette kan være med store eller små bokstaver. Du kan også bruke den til å bruke stor bokstav i hvert ord:
Følgende eksempel viser hvordan du gjør det i kode:
<kropp>
<h1>Eksempler på teksttransformeringsegenskaph1><sklasse="stor bokstav">Denne setningen er med store bokstaver.s>
<sklasse="små bokstaver">Denne setningen er med små bokstaver.s>
<sklasse="kapitalisere">Bruk stor bokstav i denne teksten.s>
kropp>
CSS-filen:
s.stor bokstav {
tekstforvandling: stor bokstav;
}s.små bokstaver {
tekstforvandling: små bokstaver;
}
s.kapitalisere {
tekstforvandling: bruk store bokstaver;
}
Med følgende resultat:
7. Avstand mellom bokstavene
De avstand mellom bokstavene egenskap angir mellomrommet mellom bokstavene i tekst. Følgende eksempel illustrerer hvordan du angir forskjellige avstandsstiler.
<kropp>
<h1>Eksempler på bokstavavstandh1><h2>Dette er overskrift 1h2>
<h3>Dette er overskrift 2h3>
kropp>
Bruk piksler, eller andre måleenheter, i CSS-filen din:
h2 {
avstand mellom bokstavene: 7px;
}
h3 {
avstand mellom bokstavene: -2px;
}
Og den resulterende teksten vil bli strukket eller klemt:
8. Ordavstand
De ordavstand egenskap angir mellomrommet mellom ordene i en tekst. Nettlesere har en standardlengde for mellomrom mellom ord, men du kan angi dine egne. Følgende eksempel illustrerer hvordan du kan øke eller redusere avstanden mellom ord:
<kropp>
<h1>Eksempler på egenskapen for ordavstandh1><s>Normal ordavstand.s>
<sklasse="ex1">Stor ordavstand.s>
<sklasse="ex2">Liten ordavstand.s>
kropp>
Ved å bruke denne CSS:
s.eks1 {
ordavstand: 1rem;
}
s.ex2 {
ordavstand: -0.3rem;
}
Du kan tydelig se effekten av ordavstand:
9. Linjehøyde
De linjehøyde egenskap angir avstanden mellom linjene i et avsnitt. Standard og standard linjehøyde i de fleste nettlesere er omtrent 110 % til 120 %. Følgende kode viser hvordan du endrer den:
<kropp>
<h1>Bruker linje-høydeh1><s>
Standard linjehøyde.Standard linjehøyde.
s>
<sklasse="liten">
Liten liten line-høyde.Liten linjehøyde
s>
<sklasse="stor">
Større line-høyde.Større line-høyde.
s>
kropp>
Bruker følgende CSS:
s.liten {
linjehøyde: 0.7;
}
s.stor {
linjehøyde: 1.8;
}
Du kan se resultatene mellom hver linje i hvert avsnitt:
10. Tekstskygge
De tekst-skygge egenskapen bruker skygger på tekst. Du må spesifisere den horisontale skyggen og den vertikale skyggen. Tekst-skygge kan inkludere farge og uskarphet. La oss illustrere det med følgende kode:
<kropp>
<h1>EksempleravTekst-skyggeeffekt.h1><h1klasse="eks1">Tekst-skyggemedfargeh1>
<h1klasse="eks2">Tekst-skyggemeduklarheteffekt.h1>
kropp>
Med denne CSS:
h1 {
tekst-skygge: 2px 2px;
}.ex1 {
tekst-skygge: 2px 2px oransje;
}
.ex2 {
tekst-skygge: 2px 2px 10px rød;
}
Vil produsere noen uvanlige og interessante effekter:
Hvorfor lære CSS-tekststilingsegenskaper?
CSS er ryggraden i moderne webdesign. Enten i sin vaniljeform eller i rammeverk, er den grunnleggende funksjonen til CSS-egenskaper den samme. Å mestre tekstformateringsegenskaper lar deg lage attraktive og lesbare brukergrensesnitt.
Den siste versjonen av CSS, CSS3, introduserer nye konsepter fra animasjoner til oppsett med flere kolonner. Disse konseptene gjør det enklere å lage profesjonelle applikasjoner og dokumenter.
