Introduktion till CSS-textformatering
Under tidigare dagar var du tvungen att representera texten med den gamla versionen av CSS. Du hade tagg för att ändra skuggning och typsnitt för innehållet, men mätningen hindrades genom att använda de förkarakteriserade textdimensionerna. De olika effekterna som intensitet och genomslag var tänkbara i bara grundläggande strukturer med hjälp av HTML-etiketter. För närvarande kan användaren använda olika CSS-textformateringsegenskaper för att ordna texten på webbsidorna på sina sätt.
I det här kapitlet kommer du att se många CSS-formateringsegenskaper. CSS-textformateringsegenskaper används för att utforma texten, utforma texten, beskriva ett par formateringsstilar etc. Egenskaperna ger dig en visuell representation av tecken, mellanslag, ord, stycken och många fler.
Lista med CSS-textformateringsegenskaper:
Detaljer om textformateringssätt i CSS: -
1) Textfärg
Den här egenskapen kan användas för att ändra färgen på texten. Det kan definieras med färgegenskap.
Exempel : Illustration av textfärg
CSS Text Color Property
Hej världen….
Välkomna till EDUCBA …
Följande utgång visas:
2) Textjustering
Den här egenskapen kan användas för att ändra textens horisontella. Det kan definieras genom att använda vänster, höger, mitt, rättfärdiga egenskaper.
Exempel : Illustration av textinriktning
Text Alignment Property
Hej världen…
Välkommen till EDUCBA …
Utbildningskonsult …
Följande utgång visas:
3) Textdekoration
Den här egenskapen kan användas för att dekorera texten. Det kan definieras med hjälp av understruknings-, översikts-, linje-genomgående egenskaper.
Exempel : Illustration av textdekoration
Text DecorationProperty
Hej världen…
Välkommen till EDUCBA …
Utbildningskonsult …
Följande utgång visas:
4) Textomvandling
Den här egenskapen kan användas för att ändra textfall. Det kan definieras genom att använda stora bokstäver, stora och små bokstäver.
Exempel : Illustration av textomvandling
Text Transformation Property
Hej världen…
Välkommen till educba …
Utbildningskonsult …
Följande utgång visas:
5) Textindikation
Den här egenskapen kan användas för att sträcka in den första raden i texten. Det kan definieras genom att använda egenskaperna px, cm, pt.
Exempel : Illustration av textintryck
Text Indentation Property
Hej världen…
Välkommen till Educba …
Utbildningskonsult …
Följande utgång visas:
6) Ordavstånd
Den här egenskapen kan användas för att ge utrymme mellan ord. Det kan definieras med hjälp av egenskapen ordavstånd.
Exempel : Illustration av ordavstånd
Word Spacing Property
Hej världen…
Välkommen till Educba …
Utbildningskonsult …
Följande utgång visas:
7) Brevavstånd
Den här egenskapen kan användas för att ge utrymme mellan tecken. Det kan definieras med hjälp av egenskapen bokstavsavstånd.
Exempel : Illustration av brevavstånd
Letter Spacing Property
Hej världen…
Välkommen till Educba …
Utbildningskonsult …
Följande utgång visas:
8) Linjehöjd
Den här egenskapen kan användas för att ge utrymme mellan linjerna. Det kan definieras med hjälp av linjehöjdsegenskap.
Exempel : Illustration av linjehöjd
Line Height Property
h3
(
line-height:2.5;
)
h4
(
line-height:150%;
)
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) är en
ledande global leverantör av kompetensbaserad utbildning
På eduCBA är det en fråga om stolthet för oss att göra jobborienterade
ger kurser tillgängliga för alla, när som helst och var som helst.
Följande utgång visas:
9) Text-riktning
Den här egenskapen kan användas för att ändra riktningen på texten. Det kan definieras med hjälp av rtl-egenskapen. Den ställer in riktning från höger till vänster.
Exempel : Illustration av textriktning
Text Direction Property
Hej värld … Välkommen till Educba …
Följande utgång visas:
10) Text-shadow
Den här egenskapen kan användas för att ge skugga för texten. Det kan definieras genom att använda egenskapen text-skugga. Den använder komponenter som vänsterposition, toppositionen, suddighetens storlek, färgnamn.
Exempel : Illustration av textskugga
Text Shadow Property
h3
(
text-shadow:3px 3px 2px lightblue;
)
h4
(
text-shadow:3px 3px 2px plum;
)
Hej värld … Välkommen till EDUCBA …
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) är en kunskapsbaserad utbildning
Följande utgång visas:
11) Ems
Detta är en skalbar enhet för storlek. Den här egenskapen kan användas för att definiera storleken på texten enligt den omgivande texten. Textens standardstorlek är 1em, vilket är lika med 12pt. 2em är lika med 24pt och så vidare.
Exempel : Illustration av ems egendom
Ems Property
h3
(
font-size: 0.8em;
)
h4
(
font-size: 1.2em;
)
Hej värld … Välkommen till EDUCBA …
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) är en kunskapsbaserad utbildning
Följande utgång visas:
12) Font Family
Den här egenskapen används för att tillhandahålla olika typer av typsnittsfamiljenamn för den valda texten. Till exempel Helvetica, Calibri, Arial, Sans-serif, Times, Courier New, etc.
Exempel : Illustration av egenskapen font-family
Font Family Property
Hej världen…
Välkommen till Educba …
Utbildningskonsult …
Följande utgång visas:
Slutsats
Hittills har vi studerat om textformateringssätt i CSS. Du kan se att texten presenteras med olika typer av textformateringsegenskaper. Dessa egenskaper är mycket viktiga aspekter av CSS för att visa texten på webbsidan så att användare eller läsare kan locka sig genom att se din text på webbplatsen. Använd dessa textegenskaper mycket enkelt och effektivt på webbsidorna.
Rekommenderade artiklar
Detta har varit en guide till CSS-textformatering. Här har vi diskuterat en introduktion och en lista över CSS-textformateringsegenskaper i detalj med exempelkodexemplen och korrekt utgång. Du kan också gå igenom våra andra föreslagna artiklar för att lära dig mer -
- Vad är CSS?
- SASS vs CSS
- CSS-kommandon
- CSS3 intervjufrågor