HTML-stilattribut - Lista med olika HTML-stilattribut

Innehållsförteckning:

Anonim

Ö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 -

  1. HTML-typsnitt
  2. HTML-liststilar
  3. Grundläggande HTML-taggar
  4. Fördelar med HTML
  5. HTML-ramar
  6. Omvänd i JavaScript
  7. HTML-block
  8. Ställ in en bakgrundsfärg i HTML med exempel