Oversikt over HTML Style Attributt
HTML-kode trenger stilattributtet for at websider skal gjengis i nettlesere som Chrome, FireFox, IE for at de skal vises slik de er ment å se ut. HTML-tagger kan inneholde en rekke informasjoner, og stilattributtet styrer utseendet til informasjon som er inneholdt i HTML-blokker ved hjelp av inline styling.
I denne artikkelen lærer vi mer om HTML-stilattributtet, som ikke er noe annet enn et sett med regler som definerer hvordan en side skal gjengis i nettleseren.
Liste over HTML stilattributt
Her er en liste over alle stilegenskapene som kan brukes til å påvirke og kontrollere design av HTML-elementer ledsaget av et praktisk eksempel:
1. Bakgrunnsfarge
Med denne CSS-egenskapen kan vi stille inn bakgrunnsfargen for alle HTML-elementer som,
etc.
Eksempel
My background is blue
Produksjon:
2. Farge
Skriftfargen på teksten i et HTML-element kan kontrolleres ved å sette fargeattributten til riktig fargenavn eller HEX-kode eller RGB-kode.
Eksempel
My font color is blue
Produksjon:
3. Kantfarge
Vi kan angi grensefargen til alle HTML-elementer hvis vi ønsker å legge en kant til det.
Eksempel
Grensen min er rød
Produksjon:
Som du ser i koden over, godtar grenseegenskaper 3 egenskaper i følgende rekkefølge: “Border-bredde border-style border-color”.
4. Bakgrunnsbilde
Vi kan også sette et bilde som bakgrunn ved å bruke bakgrunnsbildeegenskapen som følger:
Eksempel:
Produksjon:
5. Bakgrunn-gjenta
Som du ser i eksemplet over når et bilde er satt som bakgrunn ved å bruke egenskapen bakgrunnsbilde; det gjentar som standard bildet både horisontalt og vertikalt. Imidlertid kan det hende at noen bilder må repeteres verken vertikalt eller horisontalt, eller det er ikke sikkert at de trenger å gjentas. Denne oppførselen kan kontrolleres ved å angi ønsket verdi mot egenskapen til bakgrunn-gjenta, og den kan bare brukes når bakgrunnsbilde brukes ellers vil den ikke legge til noen stylingverdi når den brukes som en frittstående egenskap.
Verdien "gjenta-x" brukes for å tillate at bildet bare gjentas horisontalt.
Verdien "gjenta-y" brukes for å tillate at bildet bare gjentas loddrett.
Verdien “ingen gjentagelse” brukes til å stoppe enhver form for repetisjon av bakgrunnsbildet.
La oss endre eksemplet ovenfor for å forbedre bakgrunnsbildet.
Eksempel
Produksjon:
Vi kan sammenligne eksemplene ovenfor og forstå at med bakgrunnsbilde kan vi legge til et bilde som bakgrunn, og med bakgrunn-gjenta, kan vi kontrollere gjentakelsen av bakgrunnsbildet.
6. Bakgrunnsposisjon
Med denne egenskapen kan vi definere posisjonen til bakgrunnsbildet.
Eksempel
Produksjon:
7. Marginer
CSS gir oss egenskaper for å angi marginer på alle fire sider av et HTML-element, eller vi kan legge til marginer til en bestemt side av elementet.
Med margin-top kan du legge til en margin til toppen av elementet, margin-right vil legge til en margin til høyre for elementet, margin-left vil legge til en margin til venstre for elementet og margin-bottom vil legge til en margin til bunnen av elementet. I stedet for å bruke disse 4 egenskapene, kan vi også bruke marginegenskapen og angi verdiene i henhold til kravet vårt.
Eksempel
p (
margin-top: 25px;
margin-bottom: 75px;
margin-right: 50px;
margin-left: 100px;
)
or
p
(
margin: 25px 50px 75px 100px;
)
8. Polstring
Polstringsegenskapen definerer mellomrommet mellom innholdet i et element og dets grenser. Vi kan bruke “polstring” -egenskapen eller individuelle polstringegenskaper som polstring-topp, polstring-bunn, polstring-venstre, polstring-høyre for å stille inn polstringen for topp, bunn, venstre eller høyre for innholdet i et element.
p (
padding-top: 25px;
padding -bottom: 75px;
padding -right: 50px;
padding -left: 100px;
)
or
p
(
padding: 25px 50px 75px 100px;
)
9. Høyde og bredde
Høyde og bredde er de mest grunnleggende CSS-egenskapene som brukes til å definere høyden og bredden på ethvert HTML-element. De kan enten settes til en pikselverdi som 200px eller en prosentandel som 10%, 20% osv.
10. Tekst-justering
Denne egenskapen brukes til å angi den horisontale retningen som vi ønsker å justere teksten til et element på. Verdien kan settes til sentrum, høyre eller venstre.
p (
text-align: center;
)
or
p (
text-align: left;
)
or
p (
text-align: right;
)
11. Tekstdekorasjon
Tekstdekorasjonsegenskaper kan brukes til å angi dekorasjoner som understreking, linje gjennom eller overlinje over tekst i HTML.
Eksempel:
Dette er understreket
Produksjon:
12. Bokstavavstand
Som navnet antyder, brukes denne egenskapen til å definere avstanden mellom bokstaver / tegn i et ord. Det kan tilordnes en positiv eller negativ pikselverdi for å øke eller redusere avstanden mellom bokstaver.
Eksempel:
Ordene mine er overlappet
Produksjon:
13. Linjehøyde
Linjehøyde definerer avstanden mellom vertikale linjer. Som bokstavavstand, kan linjehøyden også settes til en positiv eller negativ pikselverdi. La oss gå gjennom eksemplet nedenfor for å forstå bedre:
Eksempel:
Dette avsnittet har en liten linjehøyde.
Dette avsnittet har en liten linjehøyde.
Produksjon:
14. Tekstretning
Noen ganger hvis innholdet på websiden ikke er på engelsk, men et annet språk som arabisk som følger en høyre til venstre-konvensjonen, må vi endre retningen på teksten. I slike tilfeller kan vi snu tekstretning.
Eksempel:
Jeg har høyre mot venstre
Produksjon:
15. Tekstskygge
Denne egenskapen tilfører en skygge til teksten.
Eksempel:
Jeg har en grå skygge
Produksjon:
16. Fontfamilie
Vi kan definere skriftklassen for tekst i et element. Vi kan definere flere fontfamilier atskilt med komma som et tilbakeslagssystem for å håndtere scenarier der en foretrukket skriftklasse ikke kan lastes.
- Font stil: Med font stil egenskap kan vi legge kursiv eller skrå effekt til teksten.
Eksempel:
Dette er skrått stil.
Produksjon:
- Skriftvekt: Denne egenskapen definerer vekten til en skrift.
Eksempel:
Dette er et dristig avsnitt
Utgang:
Stylingattributtene som vises over byggesteinene våre med UI- og UX-design. De fortsetter å utvikle seg når nye versjoner av CSS blir introdusert.
Anbefalte artikler
Dette er en guide til HTML Style Attribute. Her diskuterer vi listen over alle stilegenskapene som kan brukes til å påvirke og kontrollere utformingen av HTML-elementer ved hjelp av praktiske eksempler. Du kan også se på følgende artikler for å lære mer -
- HTML-skrifttyper
- HTML-listestiler
- Grunnleggende HTML-tagger
- Fordeler med HTML
- HTML-rammer
- Omvendt i JavaScript
- HTML-blokker
- Angi en bakgrunnsfarge i HTML med eksempel