Szöveg létrehozása css-ben
A nap minden kedves ideje. A kapcsolatot Alexey Gulynin. Az utolsó cikkben egy kicsit megtudtál a szöveg kialakításáról a CSS-ben. Ebben a cikkben megmagyarázom, hogyan kell igazítani a szöveget a CSS-ben. hogyan adhat meg piros karakterláncot. és olyan tulajdonságokat is, mint a vonalmagasság, a szóköz, a levél-távolság, a szöveg-transzformáció. A szöveges igazítás a CSS-ben a szöveges igazítás tulajdonságával történik. Egyszerre azt mondom, hogy ez a tulajdonság mindenhol megtalálható. Ennek a tulajdonságnak 4 értéke van:
balra a bal oldali igazítás, a böngésző által használt alapértelmezett érték,
központ - központosítás,
jobb - jobb oldali igazítás,
igazolja - igazolja a szélességet. Ez azt jelenti, hogy a böngésző a szövegeket a bal és a jobb oldali szélre igazítja, a szavak közötti távolság növelésével.
Hozzunk létre egy html-oldalt inline-stílusokkal az egyes elemekhez:
Másolja át ezt a kódot, és nézze meg, hogyan működik. Jegyezze fel a text-align tulajdonság munkáját az értékhez igazolva.
Piros vonalat vagy behúzást hoz létre a szövegdetektor tulajdonság használatával. A tulajdonság értéke különböző értékekkel állítható be. Adjuk hozzá ezt a tulajdonságot a legnagyobb bekezdésünkhöz (amely igazodik a szélességhez):
Az oldal frissítése után látni fogod, hogy a bekezdés behúzott.
Most nézzük meg, hogyan állítsuk be a sortávolságot. Ez a vonalmagasság tulajdonsággal történik. Adjuk hozzá a 40px sortávolságot a bekezdéshez, és nézzük meg, mi történik:
Az oldal frissítése után látni fogja, hogy a sorok megnövekedtek. Alapértelmezés szerint ez a tulajdonság normál értékre van állítva. Ezt az intervallumot multiplikátor formájában állíthatjuk be. Ha 15 px betűmérettel rendelkezünk, és a szorzó három, akkor egy 45 px sortávolsággal rendelkezünk. A CSS-ben ez így fog kinézni:
A gyakorlatban a tulajdonság szorzóit általában fix érték helyett használják.
Módosíthatja a szavak közötti távolságot is. Ez a szó-térköz tulajdonság (szó a "szó" szóval) történik. Mutassuk meg ennek a tulajdonságnak a működését:
Az oldal frissítése után látni fogja, hogy a szavak közötti távolság 10px.
A betűk közötti távolságot is megváltoztathatja. Ez a levél-távolság tulajdonság használatával történik (angol betűből levél). Egyszerű példa:
Az oldal frissítése után látni fogja, hogy a betűk közötti távolság 10px.
Néha meg kell változtatni a betűk esetét. Ezt a szöveg-transzformációs tulajdonság használatával végezzük. Ez a tulajdonság a következő jelentéssel bír:
nagybetűvel - a szöveg összes betűje nagybetűvel jelenik meg. Ez általában a fejlécekre vonatkozik.
kisbetűs - a szöveg minden betűjét kisbetűvé teszi.
kapitalizálja - teszi a főváros minden első betűjét.
Azt mondhatod, hogy közvetlenül a HTML-be írhatsz a szövegre (valahol nagy, valahol kicsi). Ez azonban sérti az ideológiát, hogy a html jelölés, a CSS a tervezés.
Házi feladat: 3 fejléc 2 szint létrehozása. Mindegyikhez, az inline-stílusok segítségével, állítson be egy másik értéket a szöveg-átalakítás tulajdonságának.
Ebben a cikkben megtanultuk ilyen tulajdonságokkal szöveg formázása, mint a text-align, text-indent, line-height, szó-távolság, levél-térköz, text-transform.
További cikkek.
- Pszeudo-kiválasztók a CSS-ben
- CSS választók
- Textázás CSS (1 rész)
- Hogyan állít be egy betűt a CSS-ben?
- CSS összekapcsolása
