Pregled atributa HTML stila
HTML kôd treba atribut stila da bi se web stranice prikazivale u web preglednicima kao što su Chrome, FireFox, IE kako bi se prikazale onako kako su predviđene. HTML oznake mogu sadržavati različite informacije, a atribut stila kontrolira izgled informacija sadržanih u HTML blokovima pomoću inline stylinga.
U ovom ćemo članku saznati više o atributu HTML stila koji nije ništa više od skupa pravila koja određuju kako će se stranica prikazivati u web pregledniku.
Popis atributa HTML stila
Evo popisa svih svojstava stila koji se mogu koristiti za utjecaj i kontrolu dizajna HTML elemenata uz praktični primjer:
1. Boja pozadine
Pomoću ovog svojstva CSS možemo postaviti boju pozadine za bilo koji HTML element,
itd
Primjer
My background is blue
Izlaz:
2. Boja
Bojom fonta teksta u HTML elementu može se kontrolirati postavljanjem atributa boje na ime odgovarajuće boje ili HEX koda ili RGB koda.
Primjer
My font color is blue
Izlaz:
3. Boja obruba
Možemo postaviti boju obruba bilo kojeg HTML elementa ako mu želimo dodati obrub.
Primjer
Moja je granica crvena
Izlaz:
Kao što vidite u gornjem kodu, svojstvo obruba prihvaća 3 svojstva sljedećim redoslijedom: "Boja obruba u obliku granice obruba".
4. Pozadina slike
Sliku također možemo postaviti kao pozadinu koristeći svojstvo pozadinske slike na sljedeći način:
Primjer:
Izlaz:
5. Ponovite pozadinu
Kao što vidite u gornjem primjeru, kada je slika postavljena kao pozadina pomoću svojstva pozadinske slike; ona prema zadanim postavkama ponavlja sliku i horizontalno i vertikalno. Međutim, neke će slike možda trebati ponoviti vertikalno ili vodoravno ili možda neće trebati ponoviti. Ovo ponašanje se može kontrolirati postavljanjem željene vrijednosti u odnosu na svojstvo pozadinskog ponavljanja i može se koristiti samo kada se pozadinska slika koristi drugdje, neće dodati nikakvu vrijednost stila ako se koristi kao samostalno svojstvo.
Vrijednost „repeat-x“ se koristi da bi se slika mogla ponoviti samo vodoravno.
Vrijednost „ponovi-y“ se koristi da se slika može ponoviti samo okomito.
Vrijednost "neponovi" koristi se za zaustavljanje bilo kakvog ponavljanja pozadinske slike.
Promijenimo gornji primjer kako bismo poboljšali pozadinsku sliku.
Primjer
Izlaz:
Možemo usporediti gornje primjere i shvatiti da pomoću slike u pozadini možemo dodati sliku kao pozadinu, a sa pozadinom-ponoviti, možemo kontrolirati ponavljanje pozadinske slike.
6. pozadina-pozicija
Pomoću ovog svojstva možemo definirati položaj pozadinske slike.
Primjer
Izlaz:
7. Marže
CSS nam pruža svojstva za postavljanje margina na sve četiri strane HTML elementa ili bismo mogli dodati margine na određenoj strani elementa.
Uz margin-top može se dodati margina na vrh elementa, margin-right će dodati marginu s desne strane elementa, margin-left dodati će maržu na lijevoj strani elementa, a margin-bottom će dodati margin do dna elementa. Umjesto da koristimo ova 4 svojstva, također možemo upotrijebiti svojstvo marže i postaviti svoje vrijednosti prema našem zahtjevu.
Primjer
p (
margin-top: 25px;
margin-bottom: 75px;
margin-right: 50px;
margin-left: 100px;
)
or
p
(
margin: 25px 50px 75px 100px;
)
8. Padding
Svojstvo obloge definira razmak između sadržaja elementa i njegovih granica. Možemo koristiti svojstvo "padding" ili pojedinačna svojstva obloga kao što su padding-top, padding-bottom, padding-lijevo, padding-right za postavljanje obloga za gornji, donji, lijevi ili desni dio sadržaja elementa.
p (
padding-top: 25px;
padding -bottom: 75px;
padding -right: 50px;
padding -left: 100px;
)
or
p
(
padding: 25px 50px 75px 100px;
)
9. Visina i širina
Visina i širina su najosnovnija svojstva CSS-a koja se koriste za definiranje visine i širine bilo kojeg HTML elementa. Mogu biti postavljene na vrijednost piksela poput 200px ili u postotku poput 10%, 20% itd.
10. Usklađivanje teksta
Ovo se svojstvo koristi za postavljanje vodoravnog smjera u koji želimo poravnati tekst elementa. Vrijednost se može postaviti na sredinu, desno ili lijevo.
p (
text-align: center;
)
or
p (
text-align: left;
)
or
p (
text-align: right;
)
11. Dekoracija teksta
Svojstvo ukrašavanja teksta može se koristiti za postavljanje ukrasa poput podvlačenja, prelaženja ili prekrivanja teksta u HTML-u.
Primjer:
To se podvlači
Izlaz:
12. Razmak slova
Kao što ime sugerira, ovo svojstvo se koristi za definiranje razmaka između slova / znakova u riječi. Može mu se dodijeliti pozitivna ili negativna vrijednost piksela za povećanje ili smanjenje razmaka između slova.
Primjer:
Moje se riječi preklapaju
Izlaz:
13. Visina crte
Visina crte definira udaljenost između okomitih linija. Kao i razmak slova, i visina retka može se postaviti na pozitivnu ili negativnu vrijednost piksela. Pregledajmo donji primjer da bismo bolje razumjeli:
Primjer:
Ovaj odlomak ima malu visinu crta.
Ovaj odlomak ima malu visinu crta.
Izlaz:
14. Smjer teksta
Ponekad ako sadržaj web stranice nije na engleskom, nego nekom drugom jeziku poput arapskog koji slijedi konvenciju s desne na lijevu stranu, trebali bismo promijeniti smjer teksta. U takvim slučajevima možemo obrnuti smjer teksta.
Primjer:
Ja sam desno lijevo
Izlaz:
15. Sjena teksta
Ovo svojstvo dodaje sjenu tekstu.
Primjer:
Imam sivu sjenu
Izlaz:
16. Obitelj fontova
Možemo definirati klasu fonta za tekst u elementu. Možemo definirati više familija fontova odvojenih zarezom kao rezervni sustav za rukovanje scenarijima u kojima se preferirana klasa fonta ne može učitati.
- Stil fonta: Svojstvom stila fonta možemo dodati kurziv ili kosi efekt u tekst.
Primjer:
Ovo je kosi stil.
Izlaz:
- Težina slova: ovo svojstvo određuje težinu fonta.
Primjer:
Ovo je podebljani odlomak
Izlaz:
Atributi stiliranja prikazani iznad naših građevnih blokova s dizajnom UI i UX. Nastavljaju se s uvođenjem novih verzija CSS-a.
Preporučeni članci
Ovo je vodič za atribute HTML stila. Ovdje smo raspravljali o popisu svih svojstava stila pomoću kojih se može utjecati i kontrolirati dizajn HTML elemenata uz pomoć praktičnih primjera. Možete također pogledati sljedeće članke da biste saznali više -
- Stilovi HTML fontova
- Stilovi popisa HTML-a
- Osnovne HTML oznake
- Prednosti HTML-a
- HTML okviri
- Preokrenuti u JavaScript
- HTML Blokovi
- Postavite boju pozadine u HTML-u s primjerom
