Översikt av HTML Style Attribut
HTML-kod behöver stilattributet för att webbsidor ska återges i webbläsare som Chrome, FireFox, IE för att de ska visas som de är avsedda att se ut. HTML-taggar kan innehålla en mängd information och stilattributet styr utseendet på information som finns i HTML-block med inline-styling.
I den här artikeln kommer vi att lära oss mer om HTML-stilattributet som inte är annat än en uppsättning regler som definierar hur en sida ska återges i webbläsaren.
Lista över HTML-stilattribut
Här är en lista över alla stilegenskaper som kan användas för att påverka och kontrollera design av HTML-element tillsammans med ett praktiskt exempel:
1. Bakgrundsfärg
Med denna CSS-egenskap kan vi ställa in bakgrundsfärgen för alla HTML-element som,
etc.
Exempel
My background is blue
Produktion:
2. Färg
Teckensnittsfärgen på texten i ett HTML-element kan kontrolleras genom att ställa in dess färgattribut till rätt färgnamn eller HEX-kod eller RGB-kod.
Exempel
My font color is blue
Produktion:
3. Kantfärg
Vi kan ställa in gränsfärgen för alla HTML-element om vi vill lägga till en ram till det.
Exempel
Min gräns är röd
Produktion:
Som du ser i koden ovan accepterar gränseegenskaper tre egenskaper i följande ordning: "Gränsvärm gränsstil gränsfärg".
4. Bakgrundsbild
Vi kan också ställa in en bild som bakgrund genom att använda egenskapen bakgrundsbild på följande sätt:
Exempel:
Produktion:
5. Bakgrund-upprepa
Som du ser i exemplet ovan när en bild ställs in som bakgrund med egenskapen bakgrundsbild; Den upprepar som standard bilden såväl horisontellt som vertikalt. Vissa bilder kan emellertid behöva upprepas antingen vertikalt eller horisontellt eller så behöver de inte behöva upprepas. Detta beteende kan kontrolleras genom att ställa in önskat värde mot egenskapen bakgrundsupprepning och det kan endast användas när bakgrundsbild används, annars lägger det inte till något stylingsvärde när det används som en fristående egenskap.
Värdet "upprepa-x" används för att tillåta att bilden endast upprepas horisontellt.
Värdet "repetera-y" används för att tillåta att bilden endast upprepas vertikalt.
Värdet "ingen upprepning" används för att stoppa någon form av upprepning av bakgrundsbilden.
Låt oss modifiera exemplet ovan för att förbättra bakgrundsbilden.
Exempel
Produktion:
Vi kan jämföra exemplen ovan och förstå att med bakgrundsbild kan vi lägga till en bild som bakgrund och med bakgrundsupprepning kan vi styra upprepningen av bakgrundsbilden.
6. Bakgrundsposition
Med den här egenskapen kan vi definiera bakgrundsbildens position.
Exempel
Produktion:
7. Marginaler
CSS ger oss egenskaper för att ställa marginaler på alla fyra sidor av ett HTML-element, eller vi kan lägga till marginaler på en viss sida av elementet.
Med margin-top kan lägga till en marginal till toppen av elementet, margin-höger kommer att lägga till en marginal till höger om elementet, margin-left kommer att lägga till en marginal till vänster om elementet och margin-bottom lägger till en marginal till botten av elementet. Istället för att använda dessa fyra egenskaper, kan vi också använda marginalegenskapen och ställa in dess värden enligt vårt krav.
Exempel
p (
margin-top: 25px;
margin-bottom: 75px;
margin-right: 50px;
margin-left: 100px;
)
or
p
(
margin: 25px 50px 75px 100px;
)
8. Polstring
Polstringsegenskapen definierar utrymmet mellan innehållet i ett element och dess gränser. Vi kan använda "polstring" -egenskapen eller enskilda polstringegenskaper som padding-top, padding-botten, padding-left, padding-höger för att ställa in padding för topp, botten, vänster eller höger för innehållet i ett element.
p (
padding-top: 25px;
padding -bottom: 75px;
padding -right: 50px;
padding -left: 100px;
)
or
p
(
padding: 25px 50px 75px 100px;
)
9. Höjd och bredd
Höjd och bredd är de mest grundläggande CSS-egenskaperna som används för att definiera höjden och bredden för alla HTML-element. De kan antingen ställas in på ett pixelvärde som 200px eller en procentandel som 10%, 20% etc.
10. Textjustering
Den här egenskapen används för att ställa in den horisontella riktningen i vilken vi vill anpassa texten till ett element. Värdet kan ställas in på mitt, höger eller vänster.
p (
text-align: center;
)
or
p (
text-align: left;
)
or
p (
text-align: right;
)
11. Textdekoration
Egenskapen för textdekoration kan användas för att ställa in dekorationer som understrukning, genomgång eller överlinje över text i HTML.
Exempel:
Detta är understruket
Produktion:
12. Brevavstånd
Som namnet antyder används den här egenskapen för att definiera avståndet mellan bokstäver / tecken i ett ord. Det kan tilldelas ett positivt eller negativt pixelvärde för att öka eller minska avståndet mellan bokstäver.
Exempel:
Mina ord är överlappade
Produktion:
13. Linjehöjd
Linjehöjd definierar avståndet mellan vertikala linjer. I likhet med bokstavsavstånd kan linjens höjd också ställas in på ett positivt eller negativt pixelvärde. Låt oss granska exemplet nedan för att förstå bättre:
Exempel:
Detta stycke har en liten linjehöjd.
Detta stycke har en liten linjehöjd.
Produktion:
14. Textriktning
Ibland om innehållet på webbsidan inte är på engelska utan ett annat språk som arabiska som följer en höger till vänsterkonvention, måste vi ändra riktningen på texten. I sådana fall kan vi vända textriktningen.
Exempel:
Jag har höger till vänster
Produktion:
15. Text Shadow
Den här egenskapen lägger till en skugga till texten.
Exempel:
Jag har en grå skugga
Produktion:
16. Font Family
Vi kan definiera teckensnittsklassen för text i ett element. Vi kan definiera flera teckensnittsfamiljer som är separerade av komma som ett fallback-system för att hantera scenarier där en föredragen typsnittsklass inte kan laddas.
- Teckensnittstil: Med teckensnittsegenskaper kan vi lägga till kursiv eller snedställd effekt i texten.
Exempel:
Detta är sned stil.
Produktion:
- Teckensnittsvikt: Den här egenskapen definierar teckens vikt.
Exempel:
Detta är ett djärvt stycke
Utgång:
Stylingattributen som visas ovanför våra byggstenar med UI- och UX-design. De fortsätter att utvecklas när nya versioner av CSS introduceras.
Rekommenderade artiklar
Detta är en guide till HTML Style Attribute. Här diskuterar vi listan över alla stilegenskaper som kan användas för att påverka och kontrollera designen av HTML-element med hjälp av praktiska exempel. Du kan också titta på följande artiklar för att lära dig mer -
- HTML-typsnitt
- HTML-liststilar
- Grundläggande HTML-taggar
- Fördelar med HTML
- HTML-ramar
- Omvänd i JavaScript
- HTML-block
- Ställ in en bakgrundsfärg i HTML med exempel