Pregled Atributi stila HTML
HTML koda potrebuje atribut stila, da se spletne strani prikažejo v spletnih brskalnikih, kot so Chrome, FireFox, IE, da se lahko prikažejo tako, kot so predvidene. Oznake HTML lahko vsebujejo različne informacije, atribut sloga pa nadzira videz informacij, ki jih vsebujejo bloki HTML, z uporabo vdelanega oblikovanja.
V tem članku bomo podrobneje spoznali atribut slog HTML, ki ni nič drugega kot nabor pravil, ki določajo, kako bo stran upodabljana v spletnem brskalniku.
Seznam atributov sloga HTML
Tu je seznam vseh lastnosti sloga, s katerimi lahko vplivate in nadzorujete oblikovanje elementov HTML, ki ga spremlja praktičen primer:
1. Barva ozadja
S to lastnostjo CSS lahko nastavimo barvo ozadja za kateri koli element HTML, kot je npr.
itd.
Primer
My background is blue
Izhod:
2. Barva
Barvo pisave besedila v elementu HTML lahko nadzirate tako, da atribut barve nastavite na pravo barvno ime ali HEX kodo ali RGB kodo.
Primer
My font color is blue
Izhod:
3. Barva obrobe
Barvo obrobe katerega koli elementa HTML lahko nastavimo, če mu želimo dodati obrobo.
Primer
Moja meja je rdeča
Izhod:
Kot vidite v zgornji kodi, lastnost border sprejema 3 lastnosti v naslednjem vrstnem redu: "Barva roba v robu širine roba".
4. Ozadje-slika
Sliko lahko nastavimo tudi kot ozadje tako, da uporabimo lastnost slike slike na naslednji način:
Primer:
Izhod:
5. Ponovite ozadje
Kot vidite v zgornjem primeru, ko je slika nastavljena kot ozadje s pomočjo lastnosti ozadja slike; privzeto sliko ponovi tako vodoravno kot navpično. Nekatere slike pa boste morda morali ponoviti navpično ali vodoravno ali pa jih morda ne bodo morali ponoviti. To vedenje lahko nadzirate tako, da nastavite želeno vrednost glede na lastnost ponovitve v ozadju, uporabimo pa ga lahko le, če se slika ozadja uporablja drugače, ne bo dodala nobene vrednosti stylinga, če jo uporabimo kot samostojno lastnost.
Vrednost „repeat-x“ se uporablja za omogočanje ponovitve slike samo vodoravno.
Vrednost „ponovi-y“ se uporablja za omogočanje ponovitve slike samo navpično.
Vrednost "brez ponovitve" se uporablja za zaustavitev kakršnega koli ponavljanja slike ozadja.
Spremenimo zgornji primer za izboljšanje slike v ozadju.
Primer
Izhod:
Primerjamo lahko zgornje primere in razumemo, da lahko s sliko v ozadju dodamo sliko kot ozadje, s ponovitvijo ozadja pa lahko nadzorujemo ponavljanje slike ozadja.
6. Ozadje-položaj
S to lastnostjo lahko določimo položaj slike ozadja.
Primer
Izhod:
7. Marže
CSS nam ponuja lastnosti za nastavitev robov na vseh štirih straneh elementa HTML ali pa lahko dodamo robove na določeno stran elementa.
Z margin-top lahko dodate rob na vrh elementa, margin-right bo dodalo rob na desni strani elementa, margin-left bo dodalo rob levo od elementa in margin-bottom bo dodalo rob na dno elementa. Namesto da uporabimo te 4 lastnosti, lahko uporabimo tudi lastnost marže in nastavimo njene vrednosti glede na naše zahteve.
Primer
p (
margin-top: 25px;
margin-bottom: 75px;
margin-right: 50px;
margin-left: 100px;
)
or
p
(
margin: 25px 50px 75px 100px;
)
8. Oblazinjenje
Lastnost oblazinjenja določa prostor med vsebino elementa in njegove meje. Lahko uporabimo lastnost "oblazinjenja" ali posamezne lastnosti oblazinjenja, kot so oblazinjeni vrh, oblazinjenje dno, oblazinjenje levo, oblazinjenje desno, da nastavimo oblazinjenje zgornje, spodnje, leve ali desne vsebine elementa.
p (
padding-top: 25px;
padding -bottom: 75px;
padding -right: 50px;
padding -left: 100px;
)
or
p
(
padding: 25px 50px 75px 100px;
)
9. Višina in širina
Višina in širina sta najbolj osnovni lastnosti CSS, ki se uporabljata za določanje višine in širine katerega koli HTML elementa. Lahko jih nastavite na vrednost piks, kot je 200px, ali v odstotkih, kot je 10%, 20% itd.
10. Besedilo poravnaj
Ta lastnost se uporablja za nastavitev vodoravne smeri, v katero želimo poravnati besedilo elementa. Vrednost lahko nastavite na sredino, desno ali levo.
p (
text-align: center;
)
or
p (
text-align: left;
)
or
p (
text-align: right;
)
11. Dekoracija besedila
Lastnost dekoracije besedila se lahko uporablja za nastavitev okraskov, kot so podčrtana, prečrtana ali prečrtana besedila v HTML-ju.
Primer:
To je poudarjeno
Izhod:
12. Razmik med črkami
Kot pove ime, se ta lastnost uporablja za določitev razmika med črkami / znaki v besedi. Za povečanje ali zmanjšanje razmika med črkami lahko dodelite pozitivno ali negativno vrednost piksla.
Primer:
Moje besede se prekrivajo
Izhod:
13. Linijska višina
Višina črte določa razdaljo med navpičnimi črtami. Tako kot razmik med črkami lahko tudi višino črte nastavite na pozitivno ali negativno vrednost piksla. Poglejmo spodnji primer, da bomo bolje razumeli:
Primer:
Ta odstavek ima majhno višino črte.
Ta odstavek ima majhno višino črte.
Izhod:
14. Smer besedila
Včasih, če vsebina spletne strani ni v angleščini, ampak v nekem drugem jeziku, kot je arabščina, ki sledi desni na levi konvenciji, bi morali spremeniti smer besedila. V takih primerih lahko obrnemo smer besedila.
Primer:
Jaz sem desno levo
Izhod:
15. Senca besedila
Ta lastnost doda senci besedilu.
Primer:
Imam sivo senco
Izhod:
16. Družina pisav
V elementu lahko določimo razred pisave za besedilo. Lahko definiramo več družin pisav, ločenih z vejico, kot nadomestni sistem za ravnanje s scenariji, kjer ni mogoče naložiti želenega razreda pisav.
- Slog pisave: S pomočjo lastnosti pisave lahko besedilu dodamo ležeči ali poševni učinek.
Primer:
To je poševni slog.
Izhod:
- Teža pisave: Ta lastnost določa težo pisave.
Primer:
To je drzen odstavek
Izhod:
Atributi stajlinga, predstavljeni nad našimi gradniki z UI in UX oblikovanjem. Z uvedbo novih različic CSS se še naprej razvijajo.
Priporočeni članki
To je vodnik za atribute stila HTML. Tukaj razpravljamo o seznamu vseh lastnosti sloga, s katerimi lahko vplivamo in nadziramo oblikovanje elementov HTML s pomočjo praktičnih primerov. Za več informacij si lahko ogledate tudi naslednje članke -
- Slogi pisav HTML
- Slogi seznama HTML
- Osnovne oznake HTML
- Prednosti HTML-ja
- Okvirji HTML
- Obrni v JavaScript
- Bloki HTML
- Nastavite barvo ozadja v HTML s Primerom