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 -

  1. Slogi pisav HTML
  2. Slogi seznama HTML
  3. Osnovne oznake HTML
  4. Prednosti HTML-ja
  5. Okvirji HTML
  6. Obrni v JavaScript
  7. Bloki HTML
  8. Nastavite barvo ozadja v HTML s Primerom