Tekst er vigtig, selv for de smarteste, mest visuelt krævende webdesigns. Giv din tekst den opmærksomhed, den fortjener med disse CSS-egenskaber.
Cascading Style Sheets (CSS) beskriver, hvordan HTML viser elementer på skærmen. CSS kan styre layoutet af flere websider med nogle få linjer kode.
CSS har formateringsegenskaber, der påvirker afstanden, udseendet og justeringen af tekst. Her er nogle egenskaber, som du kan bruge til at style tekst på dine app-sider.
1. Tekst farve
Det farve egenskab angiver hovedforgrundsfarven på din tekst. Du kan bruge et foruddefineret farvenavn som f.eks rød, hvid, eller grøn. Du kan også bruge en hex-værdi eller andre enheder som RGB, HSL og RGBA.
CSS rammer som Medvind CSS har en indbygget farvefunktion, der viser en række forskellige nuancer. Dette gør det nemmere for dig at vælge en nuance, du foretrækker. Lad os ændre farven på følgende overskrifter ved at bruge nogle af disse egenskaber:
<legeme>
<h1>Skift min farveh1><h2>Skift min farveh2>
<h3>Skift min farveh3>
<h4>Skift min farveh4>
legeme>
CSS vil se sådan ud:
h1 {
farve: orange;
}h2 {
farve: #ff6600;
}h3 {
farve: rgb(255, 102, 0);
}
h4 {
farve: hsl(24, 100%, 50%);
}
Og den stylede tekst vil se sådan ud:
2. Baggrundsfarve
Du kan bruge baggrundsfarve ejendom at skabe tiltalende baggrunde. Brug den til at indstille forskellige baggrunde for følgende overskrifter:
<legeme>
<h1>Skift min baggrundsfarveh1><h2>Skift min baggrundsfarveh2>
<h3>Skift min baggrundsfarveh3>
<h4>Skift min baggrundsfarveh4>
legeme>
Med følgende CSS:
h1 {
baggrundsfarve: orange;
}h2 {
baggrundsfarve: #009900;
}h3 {
baggrundsfarve: rgb(204, 0, 0);
}
h4 {
baggrundsfarve: hsl(60, 100%, 50%);
}
Når din browser gengiver denne side, vil den se sådan ud:
3. Tekstjustering
Det tekstjustering egenskab indstiller den vandrette justering af tekst. Denne værdi kan være venstre, højre, centrum, eller retfærdiggøre.
Justeringsværdien strækker hver tekstlinje, så de alle fylder den samme bredde i højre og venstre margen. Brug følgende eksempelkode til at udforske disse fire værdier:
<legeme>
<h1>Juster mig til venstreh1><h2> Juster mig til højreh2>
<h3>Juster mig i midtenh3>
<sklasse="ex4"><stærk>Juster mig berettigetstærk>: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><stærk>Ingen justering stærk>: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>
legeme>
Brug følgende CSS til at anvende forskellige justeringer:
h1 {
tekstjustering: venstre;
}h2 {
tekstjustering: højre;
}h3 {
tekstjustering: centrum;
}
.ex4{
tekstjustering: retfærdiggøre;
}
I browseren vil dette se sådan ud:
4. Tekstretning
Det tekst-retning egenskab definerer tekstens retning. Definer retningen ved hjælp af egenskaber rtl (højre mod venstre) eller ltr (venstre til højre). Disse to angiver, hvilken retning du vil have teksten til at flyde.
Brug f.eks rtl når du arbejder med sprog skrevet fra højre mod venstre som hebraisk eller arabisk. Du bruger ltr for sprog skrevet fra venstre mod højre som engelsk.
Lad os illustrere dette med koden nedenfor:
<legeme>
<div>
<sklasse='ex1'>Dette afsnit går fra højre mod venstre. Markøren
flyttes fra højre mod venstre, når du skriver flere oplysninger på
side.s>
<sid="ex2">Dette afsnit går fra venstre mod højre. Markøren bevæger sig
fra venstre til at skrive, når du skriver mere information på siden!s>
div>
legeme>
Med denne medfølgende CSS:
.eks1 {
retning: rtl;
}
#eks2 {
retning: ltr;
}
Slutresultatet vil se nogenlunde således ud:
5. Tekst dekoration
Det tekst-dekoration egenskab angiver udseendet af dekorative linjer på tekst. Det er en forkortelse for tekst-dekoration-linje,tekst-dekoration-farve,tekst-dekoration-stil, og tekst-dekoration-tykkelse ejendom. Hvis du ikke ønsker at have egenskaben på elementer, der har links, så brug tekst-dekoration: ingen;
Du bør undgå at understrege normal tekst, da den stil normalt angiver et link. Følgende illustration viser nogle eksempler i kode:
<legeme>
<h1>Overline tekstdekorationh1><h2>Gennemstregende tekstdekorationh2>
<h3>Understreg tekstdekorationh3>
<sklasse="eks">Overstregning og understregning af tekstdekoration.s>
<s><-enhref="default.asp">Dette er et link-en>s>
legeme>
Du kan anvende forskellige dekorationseffekter med denne CSS:
h1 {
tekst-dekoration: overline;
}h2 {
tekst-dekoration: line-through;
}h3 {
tekst-dekoration: understrege;
}s.eks {
tekst-dekoration: overlineunderstrege;
}
-en {
tekst-dekoration: ingen;
}
Og de vil vise noget som dette:
6. Tekst transformation
Det tekst-transformation egenskaben angiver typen af store og små bogstaver bogstaverne vises. Dette kan være med store eller små bogstaver. Du kan også bruge det til at skrive det første bogstav i hvert ord med stort:
Følgende eksempel viser, hvordan man gør det i kode:
<legeme>
<h1>Eksempler på tekst-transform egenskabh1><sklasse="store bogstaver">Denne sætning er med store bogstaver.s>
<sklasse="små bogstaver">Denne sætning er med små bogstaver.s>
<sklasse="kapitalisere">Sæt denne tekst med stort.s>
legeme>
CSS-filen:
s.store bogstaver {
tekst-transformation: store bogstaver;
}s.små bogstaver {
tekst-transformation: små bogstaver;
}
s.kapitalisere {
tekst-transformation: kapitalisere;
}
Med følgende resultat:
7. Bogstavafstand
Det bogstavmellemrum egenskab angiver mellemrummet mellem bogstaverne i tekst. Følgende eksempel illustrerer, hvordan man angiver forskellige mellemrumsstile.
<legeme>
<h1>Eksempler på bogstavmellemrumh1><h2>Dette er overskrift 1h2>
<h3>Dette er overskrift 2h3>
legeme>
Brug pixels eller andre måleenheder i din CSS-fil:
h2 {
bogstavmellemrum: 7px;
}
h3 {
bogstavmellemrum: -2px;
}
Og den resulterende tekst vil blive strakt eller klemt:
8. Ordafstand
Det ord-mellemrum egenskab angiver mellemrummet mellem ordene i en tekst. Browsere har en standardlængde for mellemrum mellem ord, men du kan indstille din egen. Følgende eksempel illustrerer, hvordan man øger eller mindsker mellemrummet mellem ord:
<legeme>
<h1>Eksempler på egenskaben ord-mellemrumh1><s>Normal ordafstand.s>
<sklasse="ex1">Stort mellemrum mellem ord.s>
<sklasse="ex2">Lille ordmellemrum.s>
legeme>
Brug af denne CSS:
s.eks1 {
ord-mellemrum: 1rem;
}
s.ex2 {
ord-mellemrum: -0.3rem;
}
Du kan tydeligt se effekten af ordafstand:
9. Linjehøjde
Det linjehøjde egenskab angiver afstanden mellem linjer i et afsnit. Standard- og standardlinjehøjden i de fleste browsere er omkring 110 % til 120 %. Følgende kode illustrerer, hvordan den ændres:
<legeme>
<h1>Bruger line-højdeh1><s>
Standard line-højde.Standard line-højde.
s>
<sklasse="lille">
Lille lille line-højde.Lille line-højde
s>
<sklasse="stor">
Større line-højde.Større line-højde.
s>
legeme>
Brug af følgende CSS:
s.lille {
linjehøjde: 0.7;
}
s.stor {
linjehøjde: 1.8;
}
Du kan se resultaterne mellem hver linje i hvert afsnit:
10. Tekstskygge
Det tekst-skygge egenskab anvender skygger på tekst. Du skal angive den vandrette skygge og den lodrette skygge. Tekst-skygge kan omfatte farve og sløringsradius. Lad os illustrere det med følgende kode:
<legeme>
<h1>EksemplerafTekst-skyggeeffekt.h1><h1klasse="ex1">Tekst-skyggemedfarveh1>
<h1klasse="ex2">Tekst-skyggemedsløringeffekt.h1>
legeme>
Med denne CSS:
h1 {
tekst-skygge: 2px 2px;
}.ex1 {
tekst-skygge: 2px 2px orange;
}
.ex2 {
tekst-skygge: 2px 2px 10px rød;
}
Vil producere nogle usædvanlige og interessante effekter:
Hvorfor lære CSS-tekststilingsegenskaber?
CSS er rygraden i moderne webdesign. Uanset om det er i sin vaniljeform eller i rammer, er den grundlæggende funktion af CSS-egenskaber den samme. At mestre tekstformateringsegenskaber giver dig mulighed for at skabe attraktive og læsbare brugergrænseflader.
Den seneste version af CSS, CSS3, introducerer nye koncepter fra animationer til layout med flere kolonner. Disse koncepter gør det nemmere at skabe professionelle applikationer og dokumenter.
