Text är viktigt, även för de snyggaste, mest visuellt krävande webbdesignerna. Ge din text den uppmärksamhet den förtjänar med dessa CSS-egenskaper.
Cascading Style Sheets (CSS) beskriver hur HTML visar element på skärmen. CSS kan styra layouten på flera webbsidor med några rader kod.
CSS har formateringsegenskaper som påverkar avstånd, utseende och justering av text. Här är några egenskaper som du kan använda för att utforma text på dina appsidor.
1. Text färg
De Färg egenskapen anger huvudförgrundsfärgen för din text. Du kan använda ett fördefinierat färgnamn som röd, vit, eller grön. Du kan också använda ett hexadecimalt värde eller andra enheter som RGB, HSL och RGBA.
CSS-ramverk som Medvind CSS har en inbyggd färgfunktion som visar en mängd olika nyanser. Detta gör det lättare för dig att välja en nyans du föredrar. Låt oss ändra färgen på följande rubriker med några av dessa egenskaper:
<kropp>
<h1>Ändra min färgh1><h2>Ändra min färgh2>
<h3>Ändra min färgh3>
<h4>Ändra min färgh4>
kropp>
CSS kommer att se ut så här:
h1 {
Färg: orange;
}h2 {
Färg: #ff6600;
}h3 {
Färg: rgb(255, 102, 0);
}
h4 {
Färg: hsl(24, 100%, 50%);
}
Och den formaterade texten kommer att se ut så här:
2. Bakgrundsfärg
Du kan använda bakgrundsfärg egendom att skapa tilltalande bakgrunder. Använd den för att ställa in olika bakgrunder för följande rubriker:
<kropp>
<h1>Ändra min bakgrundsfärgh1><h2>Ändra min bakgrundsfärgh2>
<h3>Ändra min bakgrundsfärgh3>
<h4>Ändra min bakgrundsfärgh4>
kropp>
Med följande CSS:
h1 {
bakgrundsfärg: orange;
}h2 {
bakgrundsfärg: #009900;
}h3 {
bakgrundsfärg: rgb(204, 0, 0);
}
h4 {
bakgrundsfärg: hsl(60, 100%, 50%);
}
När din webbläsare renderar den här sidan kommer den att se ut ungefär så här:
3. Textjustering
De textjustera egenskapen ställer in den horisontella justeringen av text. Detta värde kan vara vänster, höger, Centrum, eller rättfärdiga.
Justeringsvärdet sträcker ut varje rad med text, så att de alla tar upp samma bredd på höger och vänster marginal. Använd följande exempelkod för att utforska dessa fyra värden:
<kropp>
<h1>Justera mig till vänsterh1><h2> Justera mig rätth2>
<h3>Rikta mig i mittenh3>
<sidklass="ex4"><stark>Justera mig berättigadstark>: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.sid>
<sid><stark>Ingen justering stark>: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.sid>
kropp>
Använd följande CSS för att tillämpa olika justeringar:
h1 {
textjustera: vänster;
}h2 {
textjustera: höger;
}h3 {
textjustera: Centrum;
}
.ex4{
textjustera: rättfärdiga;
}
I webbläsaren kommer detta att se ut så här:
4. Textriktning
De text-riktning egenskapen definierar textens riktning. Definiera riktningen med hjälp av egenskaper rtl (höger till vänster) eller ltr (vänster till höger). Dessa två anger i vilken riktning du vill att texten ska flyta.
Använd till exempel rtl när du arbetar med språk skrivna från höger till vänster som hebreiska eller arabiska. Du använder ltr för språk skrivna från vänster till höger som engelska.
Låt oss illustrera detta med koden nedan:
<kropp>
<div>
<sidklass="ex1">Detta stycke går från höger till vänster. Markören
flyttas från höger till vänster när du skriver mer information på
sida.sid>
<sidid="ex2">Detta stycke går från vänster till höger. Markören rör sig
från vänster till att skriva när du skriver mer information på sidan!sid>
div>
kropp>
Med denna medföljande CSS:
.ex1 {
riktning: rtl;
}
#ex2 {
riktning: ltr;
}
Slutresultatet kommer att se ut ungefär så här:
5. Text dekoration
De text-dekoration egenskapen anger utseendet på dekorativa linjer på text. Det är en förkortning för text-dekorationslinje,text-dekoration-färg,text-dekoration-stil, och text-dekoration-tjocklek fast egendom. Om du inte vill ha egenskapen på element som har länkar, använd text-dekoration: ingen;
Du bör undvika att understryka normal text eftersom den stilen vanligtvis indikerar en länk. Följande illustration visar några exempel i kod:
<kropp>
<h1>Överstreckad textdekorationh1><h2>Genomgående textdekorationh2>
<h3>Stryk under textdekorationh3>
<sidklass="ex">Överstryk och understryker textdekoration.sid>
<sid><ahref="default.asp">Det här är en länka>sid>
kropp>
Du kan använda olika dekorationseffekter med denna CSS:
h1 {
text-dekoration: överlinje;
}h2 {
text-dekoration: Linje genom;
}h3 {
text-dekoration: Understrykning;
}sid.ex {
text-dekoration: överlinjeUnderstrykning;
}
a {
text-dekoration: ingen;
}
Och de kommer att visa något så här:
6. Textomvandling
De textomvandling egenskapen anger vilken typ av skiftläge bokstäverna visas. Detta kan vara med stora eller små bokstäver. Du kan också använda den för att använda stor bokstav i varje ord:
Följande exempel visar hur man gör det i kod:
<kropp>
<h1>Exempel på text-transform-egenskaph1><sidklass="versal">Denna mening är i versaler.sid>
<sidklass="små bokstäver">Denna mening är i gemener.sid>
<sidklass="kapitalisera">Använd versaler i denna text.sid>
kropp>
CSS-filen:
sid.versal {
textomvandling: versal;
}sid.små bokstäver {
textomvandling: små bokstäver;
}
sid.kapitalisera {
textomvandling: kapitalisera;
}
Med följande resultat:
7. Teckenavstånd
De teckenavstånd egenskapen anger mellanrummet mellan bokstäverna i text. Följande exempel illustrerar hur man anger olika avståndsstilar.
<kropp>
<h1>Exempel på bokstavsmellanrumh1><h2>Det här är rubrik 1h2>
<h3>Det här är rubrik 2h3>
kropp>
Använd pixlar, eller andra måttenheter, i din CSS-fil:
h2 {
teckenavstånd: 7px;
}
h3 {
teckenavstånd: -2px;
}
Och den resulterande texten kommer att sträckas ut eller klämmas:
8. Ordavstånd
De ordmellanrum egenskapen anger mellanrummet mellan orden i en text. Webbläsare har en standardlängd för mellanrum mellan ord, men du kan ställa in din egen. Följande exempel illustrerar hur man ökar eller minskar avståndet mellan ord:
<kropp>
<h1>Exempel på egenskapen ordavståndh1><sid>Normalt ordavstånd.sid>
<sidklass="ex1">Stora ordavstånd.sid>
<sidklass="ex2">Litet ordavstånd.sid>
kropp>
Använder denna CSS:
sid.ex1 {
ordmellanrum: 1rem;
}
sid.ex2 {
ordmellanrum: -0.3rem;
}
Du kan tydligt se effekten av ordavstånd:
9. Radavstånd
De radavstånd egenskapen anger avståndet mellan raderna i ett stycke. Standard- och standardlinjehöjden i de flesta webbläsare är cirka 110 % till 120 %. Följande kod illustrerar hur du ändrar den:
<kropp>
<h1>Använder linjehöjdh1><sid>
Standard linjehöjd.Standard linjehöjd.
sid>
<sidklass="små">
Liten liten linjehöjd.Liten linjehöjd
sid>
<sidklass="stor">
Större linjehöjd.Större linjehöjd.
sid>
kropp>
Använder följande CSS:
sid.små {
radavstånd: 0.7;
}
sid.stor {
radavstånd: 1.8;
}
Du kan se resultaten mellan varje rad i varje stycke:
10. Text skugga
De text-skugga egenskap tillämpar skuggor på text. Du måste ange den horisontella skuggan och den vertikala skuggan. Text-skugga kan innehålla färg och oskärpa radie. Låt oss illustrera det med följande kod:
<kropp>
<h1>ExempelavText-skuggaeffekt.h1><h1klass="ex1">Text-skuggamedFärgh1>
<h1klass="ex2">Text-skuggamedfläckeffekt.h1>
kropp>
Med denna CSS:
h1 {
text-shadow: 2px 2px;
}.ex1 {
text-shadow: 2px 2px orange;
}
.ex2 {
text-shadow: 2px 2px 10px röd;
}
Kommer att ge några ovanliga och intressanta effekter:
Varför lära sig CSS-textstilsegenskaper?
CSS är ryggraden i modern webbdesign. Oavsett om det är i sin vaniljform eller i ramverk, är den grundläggande funktionen för CSS-egenskaper densamma. Genom att behärska textformateringsegenskaper kan du skapa attraktiva och läsbara användargränssnitt.
Den senaste versionen av CSS, CSS3, introducerar nya koncept från animationer till layouter med flera kolumner. Dessa koncept gör det lättare att skapa professionella applikationer och dokument.
