Overzicht van HTML-stijlkenmerk
HTML-code heeft het stijlkenmerk nodig om webpagina's te kunnen weergeven in webbrowsers zoals Chrome, FireFox, IE om te kunnen worden weergegeven zoals ze zijn bedoeld. HTML-tags kunnen een verscheidenheid aan informatie bevatten en het stijlkenmerk bepaalt de weergave van informatie in HTML-blokken met behulp van inline styling.
In dit artikel zullen we meer leren over het HTML-stijlkenmerk, dat niets meer is dan een set regels die bepalen hoe een pagina wordt weergegeven in de webbrowser.
Lijst met HTML-stijlkenmerk
Hier is een lijst met alle stijleigenschappen die kunnen worden gebruikt om het ontwerp van HTML-elementen te beïnvloeden en te besturen, vergezeld van een praktisch voorbeeld:
1. Achtergrondkleur
Met deze CSS-eigenschap kunnen we de achtergrondkleur instellen voor elk HTML-element zoals,
enz.
Voorbeeld
My background is blue
Output:
2. Kleur
De lettertypekleur van de tekst in een HTML-element kan worden beheerd door het kleurkenmerk in te stellen op de juiste kleurnaam of HEX-code of RGB-code.
Voorbeeld
My font color is blue
Output:
3. Randkleur
We kunnen de randkleur van elk HTML-element instellen als we er een rand aan willen toevoegen.
Voorbeeld
Mijn rand is rood
Output:
Zoals u in de bovenstaande code ziet, accepteert de eigenschap border 3 eigenschappen in de volgende volgorde: "Border-border border-style border-color".
4. Achtergrondafbeelding
We kunnen ook een afbeelding als achtergrond instellen door de eigenschap background-image als volgt te gebruiken:
Voorbeeld:
Output:
5. Achtergrond herhalen
Zoals u in het bovenstaande voorbeeld ziet wanneer een afbeelding als achtergrond wordt ingesteld met de eigenschap background-image; standaard wordt de afbeelding zowel horizontaal als verticaal herhaald. Sommige afbeeldingen moeten echter verticaal of horizontaal worden herhaald of ze hoeven niet te worden herhaald. Dit gedrag kan worden geregeld door de gewenste waarde in te stellen ten opzichte van de eigenschap background-repeat en het kan alleen worden gebruikt wanneer achtergrondafbeelding wordt gebruikt, anders voegt het geen opmaakwaarde toe wanneer het wordt gebruikt als een zelfstandige eigenschap.
De waarde "repeat-x" wordt gebruikt om de afbeelding alleen horizontaal te herhalen.
De waarde "repeat-y" wordt gebruikt om de afbeelding alleen verticaal te laten herhalen.
De waarde "niet herhalen" wordt gebruikt om elke vorm van herhaling van de achtergrondafbeelding te stoppen.
Laten we het bovenstaande voorbeeld aanpassen om de achtergrondafbeelding te verbeteren.
Voorbeeld
Output:
We kunnen de bovenstaande voorbeelden vergelijken en begrijpen dat we met achtergrondafbeelding een afbeelding als achtergrond kunnen toevoegen en met achtergrondherhaling de herhaling van de achtergrondafbeelding kunnen regelen.
6. Achtergrondpositie
Met deze eigenschap kunnen we de positie van de achtergrondafbeelding definiëren.
Voorbeeld
Output:
7. Marges
CSS biedt ons eigenschappen om marges in te stellen aan alle vier zijden van een HTML-element of we kunnen marges toevoegen aan een bepaalde zijde van het element.
Met margin-top kunt u een marge toevoegen aan de bovenkant van het element, margin-right voegt een marge toe aan de rechterkant van het element, margin-left voegt een marge toe aan de linkerkant van het element en margin-bottom voegt een marge toe onderaan het element. In plaats van deze 4 eigenschappen te gebruiken, kunnen we ook de eigenschap margin gebruiken en de waarden instellen volgens onze eis.
Voorbeeld
p (
margin-top: 25px;
margin-bottom: 75px;
margin-right: 50px;
margin-left: 100px;
)
or
p
(
margin: 25px 50px 75px 100px;
)
8. Opvulling
De opvullingseigenschap definieert de ruimte tussen de inhoud van een element en zijn randen. We kunnen de eigenschap "opvulling" of individuele opvullingseigenschappen gebruiken, zoals opvulling bovenaan, opvulling onderaan, opvulling links, opvulling rechts om de opvulling in te stellen voor de bovenkant, onderkant, linkerkant of rechterkant van de inhoud van een element.
p (
padding-top: 25px;
padding -bottom: 75px;
padding -right: 50px;
padding -left: 100px;
)
or
p
(
padding: 25px 50px 75px 100px;
)
9. Hoogte en breedte
Hoogte en breedte zijn de meest elementaire CSS-eigenschappen die worden gebruikt om de hoogte en breedte van elk HTML-element te definiëren. Ze kunnen worden ingesteld op een pixelwaarde zoals 200 px of een percentage zoals 10%, 20%, enz.
10. Tekst uitlijnen
Deze eigenschap wordt gebruikt om de horizontale richting in te stellen waarin we de tekst van een element willen uitlijnen. De waarde kan worden ingesteld op midden, rechts of links.
p (
text-align: center;
)
or
p (
text-align: left;
)
or
p (
text-align: right;
)
11. Tekstdecoratie
Tekstdecoratie-eigenschap kan worden gebruikt om decoraties in te stellen zoals onderstrepen, doorstrepen of overline plaatsen van tekst in HTML.
Voorbeeld:
Dit is onderstreept
Output:
12. Letter-spatie
Zoals de naam al doet vermoeden, wordt deze eigenschap gebruikt om de afstand tussen letters / tekens in een woord te definiëren. Er kan een positieve of negatieve pixelwaarde worden toegewezen om de afstand tussen letters te vergroten of te verkleinen.
Voorbeeld:
Mijn woorden overlappen elkaar
Output:
13. Lijnhoogte
Lijnhoogte definieert de afstand tussen verticale lijnen. Net als letterafstand kan ook de lijnhoogte worden ingesteld op een positieve of negatieve pixelwaarde. Laten we het onderstaande voorbeeld bekijken om beter te begrijpen:
Voorbeeld:
Deze paragraaf heeft een kleine lijnhoogte.
Deze paragraaf heeft een kleine lijnhoogte.
Output:
14. Tekstrichting
Soms als de inhoud van de webpagina niet in het Engels is, maar een andere taal zoals Arabisch, die een rechts naar links conventie volgt, moeten we de richting van de tekst wijzigen. In dergelijke gevallen kunnen we de tekstrichting omkeren.
Voorbeeld:
Ik ben van rechts naar links
Output:
15. Tekstschaduw
Deze eigenschap voegt een schaduw toe aan de tekst.
Voorbeeld:
Ik heb een grijze schaduw
Output:
16. Lettertypefamilie
We kunnen de lettertypeklasse voor tekst in een element definiëren. We kunnen meerdere lettertypefamilies gescheiden door een komma definiëren als een fallback-systeem om scenario's af te handelen waarbij een gewenste lettertypeklasse niet kan worden geladen.
- Lettertype: met de eigenschap lettertype kunnen we cursieve of schuine effecten aan de tekst toevoegen.
Voorbeeld:
Dit is een schuine stijl.
Output:
- Lettergewicht: deze eigenschap definieert het gewicht van een lettertype.
Voorbeeld:
Dit is een vetgedrukte paragraaf
Uitgang:
De stijlkenmerken werden boven onze bouwstenen tentoongesteld met UI- en UX-ontwerpen. Ze blijven evolueren naarmate nieuwe versies van CSS worden geïntroduceerd.
Aanbevolen artikelen
Dit is een gids voor HTML Style Attribute. Hier bespreken we de lijst van alle stijleigenschappen die kunnen worden gebruikt om het ontwerp van HTML-elementen te beïnvloeden en te besturen met behulp van praktische voorbeelden. U kunt ook de volgende artikelen bekijken voor meer informatie -
- HTML-lettertypen Stijlen
- HTML-lijststijlen
- Basic HTML-tags
- Voordelen van HTML
- HTML-frames
- Omgekeerd in JavaScript
- HTML-blokken
- Stel een achtergrondkleur in HTML in met Voorbeeld