Bevezetés a CSS szöveg formázásához
Az előző napokban a szöveg ábrázolására a CSS régi verziójának használatakor kényszerült. Címkével megváltoztathatja a tartalom árnyékolását és betűtípust, ám a mérést az előre jellemzett szövegdimenziók használata akadályozta meg. A különféle hatások, például az intenzitás és az áttörés, HTML alapú címkék segítségével csak alapvető struktúrákban voltak elképzelhetők. Jelenleg a felhasználó különféle CSS-formázási tulajdonságokat használhat a weboldalak szövegének az ő módjai szerinti rendezésére.
Ebben a fejezetben számos CSS szövegformázási tulajdonságot fog látni. A CSS szöveges formázási tulajdonságai felhasználhatók a szöveg megtervezésére, a szöveg stílusára, néhány formázási stílus leírására stb. A tulajdonságok a karakterek, szóközök, szavak, bekezdések és még sok más vizuális ábrázolását biztosítják.
A CSS szöveg formázási tulajdonságai:
A szöveg formázási módjainak részletei a CSS-ben: -
1) Szöveg színe
Ez a tulajdonság felhasználható a szöveg színének megváltoztatására. Ez meghatározható a szín tulajdonság használatával.
Példa : A szöveg színének illusztrációja
CSS Text Color Property
Helló Világ….
Üdvözöljük az EDUCBA-nál …
A következő kimenetet jeleníti meg:
2) A szöveg igazítása
Ez a tulajdonság a szöveg vízszintes megváltoztatásához használható. Ez meghatározható bal, jobb, középső, igazolható tulajdonságok használatával.
Példa : A szöveg igazításának illusztrációja
Text Alignment Property
Helló Világ…
Üdvözöljük az EDUCBA-ban …
Oktatási tanácsadó …
A következő kimenetet jeleníti meg:
3) Szöveg dekoráció
Ez a tulajdonság a szöveg díszítésére használható. Ez meghatározható aláhúzás, felülhúzás, átmenő tulajdonságok használatával.
Példa : Szövegdíszítés illusztrációja
Text DecorationProperty
Helló Világ…
Üdvözöljük az EDUCBA-ban …
Oktatási tanácsadó …
A következő kimenetet jeleníti meg:
4) Szöveg-átalakítás
Ez a tulajdonság a szöveg esetének megváltoztatására használható. Ez meghatározható nagybetűs, nagybetűs, kisbetűs tulajdonságok használatával.
Példa : A szöveg átalakításának illusztrációja
Text Transformation Property
Helló Világ…
Üdvözöljük az oktatásban …
Oktatási tanácsadó …
A következő kimenetet jeleníti meg:
5) Szöveg behúzás
Ez a tulajdonság a szöveg első sorának behúzására használható. Ez meghatározható px, cm, pt tulajdonságok használatával.
Példa : A szöveg behúzása
Text Indentation Property
Helló Világ…
Üdvözöljük az Educba …
Oktatási tanácsadó …
A következő kimenetet jeleníti meg:
6) Szóköz
Ez a tulajdonság felhasználható szóközök közötti szóköz megadására. Ez meghatározható a szóköz tulajdonság használatával.
Példa : A szóköz illusztrációja
Word Spacing Property
Helló Világ…
Üdvözöljük az Educba …
Oktatási tanácsadó …
A következő kimenetet jeleníti meg:
7) Betűköz
Ez a tulajdonság használható karakter közötti szóköz megadására. Ez meghatározható a betűköz tulajdonság használatával.
Példa : ábra a levél távolságáról
Letter Spacing Property
Helló Világ…
Üdvözöljük az Educba …
Oktatási tanácsadó …
A következő kimenetet jeleníti meg:
8) Vonalmagasság
Ez a tulajdonság felhasználható a sorok közötti hely megadására. Ez meghatározható vonalmagasság tulajdonság használatával.
Példa : ábra a vonalmagasságról
Line Height Property
h3
(
line-height:2.5;
)
h4
(
line-height:150%;
)
Az EDUCBA (Corporate Bridge Consultancy Pvt Ltd) a
a készség alapú oktatás vezető globális szolgáltatója
Az eduCBA-nál büszke kérdés, hogy munkát orientáljunk
gyakorlati lehetőségeket kínál bárki számára, bárhol és bármikor.
A következő kimenetet jeleníti meg:
9) Text-irányban
Ez a tulajdonság a szöveg irányának megváltoztatására használható. Ez meghatározható az rtl tulajdonság használatával. Jobbról balra irányt állít be.
Példa : A szöveg irányának illusztrációja
Text Direction Property
Helló világ … Üdvözöljük az Educba …
A következő kimenetet jeleníti meg:
10) Text-árnyék
Ez a tulajdonság árnyékot adhat a szöveg számára. Ez meghatározható a text-shadow tulajdonság használatával. Olyan összetevőket használ, mint a bal helyzet, a felső helyzet, az elmosódás mérete, a szín neve.
Példa : Szöveg-árnyék illusztrációja
Text Shadow Property
h3
(
text-shadow:3px 3px 2px lightblue;
)
h4
(
text-shadow:3px 3px 2px plum;
)
Helló világ … Üdvözöljük az EDUCBA-n …
Az EDUCBA (Corporate Bridge Consultancy Pvt Ltd) készség alapú oktatás
A következő kimenetet jeleníti meg:
11) Ems
Ez méretezhető egység. Ez az em tulajdonság felhasználható a szöveg méretének meghatározására a környező szöveg szerint. Az alapértelmezett szövegméret 1em, azaz 12pt. A 2em értéke 24pt és így tovább.
Példa : Az ems tulajdonság illusztrációja
Ems Property
h3
(
font-size: 0.8em;
)
h4
(
font-size: 1.2em;
)
Helló világ … Üdvözöljük az EDUCBA-n …
Az EDUCBA (Corporate Bridge Consultancy Pvt Ltd) készség alapú oktatás
A következő kimenetet jeleníti meg:
12) Betűtípus-család
Ez a tulajdonság a kiválasztott szöveg különféle betűkészlet-családneveinek megadására szolgál. Például: Helvetica, Calibri, Arial, Sans-serif, Times, Courier New stb.
Példa : A betűtípus-család tulajdonságának illusztrációja
Font Family Property
Helló Világ…
Üdvözöljük az Educba …
Oktatási tanácsadó …
A következő kimenetet jeleníti meg:
Következtetés
Eddig a CSS-ben a szöveges formázás módjairól tanulmányoztunk. Láthatja, hogy a szöveg különféle típusú formázási tulajdonságokkal van bemutatva. Ezek a tulajdonságok a CSS nagyon fontos szempontjai a szöveg megjelenítéséhez a weboldalon, hogy a felhasználók vagy az olvasók vonzódhassanak azáltal, hogy megtekintették a szöveget a webhelyen. Használja ezeket a szövegtulajdonságokat nagyon egyszerűen és hatékonyan a weboldalakon.
Ajánlott cikkek
Ez egy útmutató a CSS szövegformázásához. Itt részletesen megvitatjuk a CSS szövegformázási tulajdonságainak bevezetését és listáját, a példakód példákkal és a megfelelő kimenettel. A további javasolt cikkeken keresztül további információkat is megtudhat -
- Mi a CSS?
- SASS vs CSS
- CSS parancsok
- CSS3 interjúkérdések