10 Lastnosti oblikovanja besedila v CSS

Cascading Style Sheets (CSS) opisujejo, kako HTML prikazuje elemente na zaslonu. CSS lahko nadzoruje postavitev več spletnih strani z nekaj vrsticami kode.

CSS ima lastnosti oblikovanja, ki vplivajo na razmik, videz in poravnavo besedila. Tukaj je nekaj lastnosti, ki jih lahko uporabite za oblikovanje besedila na straneh aplikacije.

1. Barva besedila

The barva Lastnost določa glavno barvo ospredja vašega besedila. Uporabite lahko vnaprej določeno ime barve, kot je rdeča, bela, oz zelena. Uporabite lahko tudi šestnajstiško vrednost ali druge enote, kot so RGB, HSL in RGBA.

Ogrodja CSS kot CSS hrbtnega vetra imajo vgrajeno barvno funkcijo, ki prikazuje različne odtenke. Tako boste lažje izbrali želeni odtenek. Spremenimo barvo naslednjih naslovov z uporabo nekaterih od teh lastnosti:

<telo>
<h1>Spremeni mojo barvoh1>
<h2>Spremeni mojo barvoh2>
<h3>Spremeni mojo barvoh3>
<h4>Spremeni mojo barvoh4>
telo>

CSS bo videti takole:

h1 {
barva: oranžna;
}
h2 {
barva: #ff6600;
}
h3 {
barva: rgb(255, 102, 0);
}
h4 {
barva: hsl(24, 100%, 50%);
}

In stilizirano besedilo bo prikazano takole:

2. Barva ozadja

Lahko uporabite Barva ozadja lastnina za ustvarjanje privlačna ozadja. Uporabite ga za nastavitev različnih ozadij za naslednje naslove:

<telo>
<h1>Spremeni mojo barvo ozadjah1>
<h2>Spremeni mojo barvo ozadjah2>
<h3>Spremeni mojo barvo ozadjah3>
<h4>Spremeni mojo barvo ozadjah4>
telo>

Z naslednjim CSS:

h1 {
Barva ozadja: oranžna;
}
h2 {
Barva ozadja: #009900;
}
h3 {
Barva ozadja: rgb(204, 0, 0);
}
h4 {
Barva ozadja: hsl(60, 100%, 50%);
}

Ko vaš brskalnik prikaže to stran, bo videti nekako takole:

3. Poravnava besedila

The poravnava besedila Lastnost nastavi vodoravno poravnavo besedila. Ta vrednost je lahko levo, prav, center, oz utemeljiti.

Vrednost poravnave raztegne vsako vrstico besedila, tako da vse zavzamejo enako širino na desnem in levem robu. Za raziskovanje teh štirih vrednosti uporabite naslednjo vzorčno kodo:

<telo>
<h1>Poravnaj me levoh1>
<h2> Poravnaj me desnoh2>
<h3>Poravnaj me na sredinoh3>
<strrazred="ex4"><močan>Poravnaj me upravičenomočan>: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.str>
<str><močan>Brez poravnave močan>: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.str>
telo>

Za uporabo različnih poravnav uporabite naslednji CSS:

h1 {
poravnava besedila: levo;
}
h2 {
poravnava besedila: prav;
}
h3 {
poravnava besedila: center;
}
.ex4{
poravnava besedila: utemeljiti;
}

V brskalniku bo to prikazano takole:

4. Smer besedila

The besedilo-smer Lastnost določa smer besedila. Določite smer z uporabo lastnosti rtl (od desne proti levi) oz ltr (od leve proti desni). Ta dva določata, v katero smer naj teče besedilo.

Na primer, uporabite rtl pri delu z jeziki, pisanimi od desne proti levi, kot sta hebrejščina ali arabščina. Uporabljaš ltr za jezike, napisane od leve proti desni, kot je angleščina.

Naj to ponazorimo s spodnjo kodo:

<telo>
<div>
<strrazred='ex1'>Ta odstavek gre od desne proti levi. Kazalec
 premika z desne proti levi, ko vnesete več informacij o
 strani.str>
<strid="ex2">Ta odstavek gre od leve proti desni. Kazalec se premakne
 od leve za pisanje, ko vnesete več informacij na strani!str>
div>
telo>

S tem priloženim CSS-jem:

.ex1 {
smer: rtl;
}
#ex2 {
smer: ltr;
}

Končni rezultat bo videti nekako takole:

5. Okras besedila

The besedilo-okras lastnost nastavi videz okrasnih črt na besedilu. To je okrajšava za text-decoration-line,barva-okraska-besedila,text-decoration-style, in besedilo-okras-debelina premoženje. Če ne želite imeti lastnosti za elemente, ki imajo povezave, uporabite tekst-dekoracija: brez;

Izogibajte se podčrtavanju običajnega besedila, saj ta slog običajno označuje povezavo. Naslednja slika prikazuje nekaj primerov v kodi:

<telo>
<h1>Prečrtani okras besedilah1>
<h2>Okras besedila skozi črtoh2>
<h3>Podčrtani okras besedilah3>
<strrazred="bivši">Prečrtano in podčrtano okrasje besedila.str>
<str><ahref="default.asp">To je povezavaa>str>
telo>

S tem CSS lahko uporabite različne dekorativne učinke:

h1 {
besedilo-okras: prečrtati;
}
h2 {
besedilo-okras: line-through;
}
h3 {
besedilo-okras: podčrtaj;
}
str.ex {
besedilo-okras: prečrtatipodčrtaj;
}
a {
besedilo-okras: nič;
}

In prikazali bodo nekaj takega:

6. Preoblikovanje besedila

The preoblikovanje besedila Lastnost določa vrsto velikih in malih črk, ki se pojavljajo. To je lahko z velikimi ali malimi črkami. Uporabite ga lahko tudi za veliko začetnico vsake besede:

Naslednji primer prikazuje, kako to storiti v kodi:

<telo>
<h1>Primeri lastnosti pretvorbe besedilah1>
<strrazred="velike črke">Ta stavek je napisan z velikimi črkami.str>
<strrazred="male črke">Ta stavek je napisan z malimi črkami.str>
<strrazred="napisati z veliko začetnico">Napiši to besedilo z veliko začetnico.str>
telo>

Datoteka CSS:

str.velike črke {
preoblikovanje besedila: velike črke;
}
str.male črke {
preoblikovanje besedila: male črke;
}
str.napisati z veliko začetnico {
preoblikovanje besedila: kapitalizirati;
}

Z naslednjim rezultatom:

7. Razmik med črkami

The razmik med črkami Lastnost določa presledek med črkami v besedilu. Naslednji primer ponazarja, kako določiti različne sloge razmikov.

<telo>
<h1>Primeri črkovnega razmikah1>
<h2>To je naslov 1h2>
<h3>To je naslov 2h3>
telo>

Uporabite slikovne pike ali druge merske enote v datoteki CSS:

h2 {
razmik med črkami: 7px;
}
h3 {
razmik med črkami: -2px;
}

Nastalo besedilo bo raztegnjeno ali stisnjeno:

8. Razmik med besedami

The razmik med besedami Lastnost določa presledek med besedami v besedilu. Brskalniki imajo standardno dolžino presledka med besedami, vendar lahko nastavite svojo. Naslednji primer ponazarja, kako povečati ali zmanjšati presledek med besedami:

<telo>
<h1>Primeri lastnosti razmika med besedamih1>
<str>Normalni razmik med besedami.str>
<strrazred="ex1">Velik razmik med besedami.str>
<strrazred="ex2">Majhen razmik med besedami.str>
telo>

Uporaba tega CSS:

str.ex1 {
razmik med besedami: 1rem;
}
str.ex2 {
razmik med besedami: -0.3rem;
}

Jasno lahko vidite učinek razmika med besedami:

9. Višina vrstice

The višina vrstice Lastnost določa razmik med vrsticami v odstavku. Standardna in privzeta višina vrstice v večini brskalnikov je približno 110 % do 120 %. Naslednja koda prikazuje, kako jo spremeniti:

<telo>
<h1>Uporaba line-heighth1>
<str>
 Standardna višina vrstice.
 Standardna višina vrstice.
str>
<strrazred="majhen">
 Majhna majhna višina črte.
 Majhna višina črte
str>
<strrazred="velik">
 Večja višina črte.
 Večja višina črte.
str>
telo>

Uporaba naslednjega CSS:

str.majhen {
višina vrstice: 0.7;
}
str.velik {
višina vrstice: 1.8;
}

Rezultate lahko vidite med vsako vrstico v vsakem odstavku:

10. Senca besedila

The tekst-senca lastnost uporabi sence za besedilo. Določiti morate vodoravno senco in navpično senco. Besedilo-senca lahko vključuje barvo in polmer zameglitve. Naj to ponazorimo z naslednjo kodo:

<telo>
 <h1>PrimeriodBesedilo-sencaučinek.h1>
 <h1razred="ex1">Besedilo-sencazbarvah1>
 <h1razred="ex2">Besedilo-sencazzamegljenostučinek.h1>
telo>

S tem CSS:

h1 {
 senca besedila: 2px 2px;
}
.ex1 {
 senca besedila: 2px 2px oranžna;
}
.ex2 {
 senca besedila: 2px 2px 10px rdeča;
}

Ustvaril bo nekaj nenavadnih in zanimivih učinkov:

Zakaj se naučiti lastnosti stilov besedila CSS?

CSS je hrbtenica sodobnega spletnega oblikovanja. Osnovna funkcija lastnosti CSS je enaka, ne glede na to, ali je v obliki vanilije ali v okvirih. Obvladovanje lastnosti oblikovanja besedila vam omogoča ustvarjanje privlačnih in berljivih uporabniških vmesnikov.

Najnovejša različica CSS, CSS3, uvaja nove koncepte od animacij do postavitev z več stolpci. Ti koncepti olajšajo ustvarjanje profesionalnih aplikacij in dokumentov.