Oversigt over HTML Style Attribut
HTML-kode har brug for stilattributten for websider, der skal gengives i webbrowsere som Chrome, FireFox, IE for at de skal vises, som de er beregnet til at se ud. HTML-tags kan indeholde en række informationer, og stilattributten styrer udseendet af information indeholdt i HTML-blokke ved hjælp af inline-styling.
I denne artikel lærer vi mere om HTML-stilattributten, som ikke er andet end et sæt regler, der definerer, hvordan en side skal gengives i webbrowser.
Liste over HTML-stilattribut
Her er en liste over alle stilegenskaber, der kan bruges til at påvirke og kontrollere design af HTML-elementer ledsaget af et praktisk eksempel:
1. Baggrundsfarve
Med denne CSS-egenskab kan vi indstille baggrundsfarve for ethvert HTML-element som f.eks.
etc.
Eksempel
My background is blue
Produktion:
2. Farve
Tekstets farve på teksten i et HTML-element kan kontrolleres ved at indstille dens farveattribut til det rigtige farvenavn eller HEX-kode eller RGB-kode.
Eksempel
My font color is blue
Produktion:
3. Kantfarve
Vi kan indstille kantfarve på ethvert HTML-element, hvis vi gerne vil tilføje en kant til det.
Eksempel
Min kant er rød
Produktion:
Som du ser i koden ovenfor, accepterer grænseegenskaber 3 egenskaber i følgende rækkefølge: "Border-bredde grænse-stil grænse-farve".
4. Baggrundsbillede
Vi kan også indstille et billede som baggrund ved at bruge egenskaben baggrundsbillede som følger:
Eksempel:
Produktion:
5. Baggrund-gentagelse
Som du ser i ovenstående eksempel, når et billede er indstillet til baggrund ved hjælp af egenskaben baggrundsbillede; det gentager som standard billedet både vandret og lodret. Nogle billeder kan dog muligvis gentages enten lodret eller vandret, eller det er muligvis ikke nødvendigt at gentage dem. Denne opførsel kan kontrolleres ved at indstille den ønskede værdi mod egenskaben for baggrund-gentagelse, og den kan kun bruges, når der er baggrundsbillede, ellers tilføjer den ikke nogen stylingværdi, når den bruges som en selvstændig egenskab.
Værdien "gentag-x" bruges til at tillade, at billedet kun gentages vandret.
Værdien "gentag-y" bruges til at tillade, at billedet kun gentages lodret.
Værdien "ingen gentagelse" bruges til at stoppe enhver form for gentagelse af baggrundsbilledet.
Lad os ændre ovenstående eksempel for at forbedre baggrundsbilledet.
Eksempel
Produktion:
Vi kan sammenligne eksemplerne ovenfor og forstå, at vi med baggrund-billede kan tilføje et billede som baggrund og med baggrund-gentagelse, kan vi kontrollere gentagelsen af baggrundsbilledet.
6. Baggrundsposition
Med denne egenskab kan vi definere baggrundsbilledets placering.
Eksempel
Produktion:
7. Marginer
CSS giver os egenskaber til at indstille margener på alle fire sider af et HTML-element, eller vi kan tilføje marginer til en bestemt side af elementet.
Med margin-top kan tilføje en margin til toppen af elementet, margin-højre tilføjer en margin til højre for elementet, margin-left tilføjer en margin til venstre for elementet og margin-bottom tilføjer en margin til bunden af elementet. I stedet for at bruge disse 4 egenskaber, kan vi også bruge margin-egenskaben og indstille dens værdier i henhold til vores krav.
Eksempel
p (
margin-top: 25px;
margin-bottom: 75px;
margin-right: 50px;
margin-left: 100px;
)
or
p
(
margin: 25px 50px 75px 100px;
)
8. Polstring
Polstringsegenskabet definerer afstanden mellem indholdet af et element og dets grænser. Vi kan bruge egenskaben "polstring" eller individuelle polstringegenskaber som polstring-top, polstring-bund, polstring-venstre, polstring-højre til at indstille polstring til top, bund, venstre eller højre for indholdet af et element.
p (
padding-top: 25px;
padding -bottom: 75px;
padding -right: 50px;
padding -left: 100px;
)
or
p
(
padding: 25px 50px 75px 100px;
)
9. Højde og bredde
Højde og bredde er de mest basale CSS-egenskaber, der bruges til at definere højden og bredden af ethvert HTML-element. De kan enten indstilles til en pixelværdi som 200px eller en procentdel som 10%, 20% osv.
10. Tekstjustering
Denne egenskab bruges til at indstille den vandrette retning, i hvilken vi gerne vil tilpasse teksten til et element. Værdien kan indstilles til center, højre eller venstre.
p (
text-align: center;
)
or
p (
text-align: left;
)
or
p (
text-align: right;
)
11. Tekstdekoration
Tekstdekorationsegenskab kan bruges til at indstille dekorationer som understregning, linie igennem eller overline over tekst i HTML.
Eksempel:
Dette er understreget
Produktion:
12. Brevafstand
Som navnet antyder, bruges denne egenskab til at definere afstanden mellem bogstaver / tegn i et ord. Det kan tildeles en positiv eller negativ pixelværdi for at øge eller formindske afstanden mellem bogstaver.
Eksempel:
Mine ord er overlappet
Produktion:
13. Liniehøjde
Liniehøjde definerer afstanden mellem lodrette linjer. Ligesom bogstavafstand kan linjehøjde også indstilles til en positiv eller negativ pixelværdi. Lad os gennemse eksemplet nedenfor for at forstå bedre:
Eksempel:
Dette afsnit har en lille linjehøjde.
Dette afsnit har en lille linjehøjde.
Produktion:
14. Tekstretning
Nogle gange, hvis indholdet af websiden ikke er på engelsk, men et andet sprog som arabisk, der følger en højre til venstre konvention, er vi nødt til at ændre retningen på teksten. I sådanne tilfælde kan vi vende tekstretning.
Eksempel:
Jeg har ret til venstre
Produktion:
15. Tekstskygge
Denne egenskab tilføjer en skygge til teksten.
Eksempel:
Jeg har en grå skygge
Produktion:
16. Skrifttype
Vi kan definere skrifttypeklassen for tekst i et element. Vi kan definere flere skrifttypefamilier adskilt af et komma som et tilbagesendelsessystem til at håndtere scenarier, hvor en foretrukken skrifttype ikke kan indlæses.
- Skrifttype: Med egenskab for skrifttype kan vi tilføje kursiv eller skrå effekt til teksten.
Eksempel:
Dette er skråt stil.
Produktion:
- Skriftvægt: Denne egenskab definerer en skrifts vægt.
Eksempel:
Dette er et fedt afsnit
Output:
Stylingattributterne vises over vores byggesten med UI og UX design. De udvikler sig fortsat, efterhånden som nye versioner af CSS introduceres.
Anbefalede artikler
Dette er en guide til HTML Style Attribute. Her diskuterer vi listen over alle stilegenskaber, der kan bruges til at påvirke og kontrollere design af HTML-elementer ved hjælp af praktiske eksempler. Du kan også se på de følgende artikler for at lære mere -
- HTML-skrifttyper
- HTML-listestilarter
- Grundlæggende HTML-tags
- Fordele ved HTML
- HTML-rammer
- Omvendt i JavaScript
- HTML-blokke
- Indstil en baggrundsfarve i HTML med eksempel