5.1 Het stijlattribuut van een tag
En nog een paar nuttige dingen over HTML. Toen het web aan populariteit begon te winnen, was er een groeiende vraag naar webpagina's die mooi of heel mooi ontworpen moesten zijn. Dit probleem is opgelost door gebruik te maken van de style
.
De algemene vorm van dit attribuut heeft de volgende indeling:
<tag style="name=value;name2=value2;nameN=valueN">
De attribuutwaarde, gescheiden style
door een puntkomma, somt alle "stijlen" op die op de tag moeten worden toegepast.
Stel dat u een afbeelding als een vierkant wilt weergeven 100*100
en deze ook half transparant wilt maken. Om dit te doen, moet je er speciale stijlen aan toevoegen:
- breedte=100px;
- hoogte=100px;
- ondoorzichtigheid=0,5;
Dan ziet de HTML-code met deze afbeelding er zo uit:
<img src="logo.png" style="width=100px;height=100px;opacity=0.5">
Er zijn honderden, zo niet duizenden stijlen. En browserontwikkelaars komen voortdurend met nieuwe. Het is goed dat je studeert voor Java-ontwikkelaar, geen webontwerper :)
5.2 Populaire CSS-stijlen
Het is onwaarschijnlijk dat u in uw leven veel HTML-code zult schrijven of de stijlen ervan zult bewerken, maar er kan van alles gebeuren. U schrijft bijvoorbeeld een paar kleine HTML-pagina's om de API
. HTML
Daarom kan het nuttig zijn om de basisstijlen te kennen .
Hieronder staan de 10 meest voorkomende voor backend-ontwikkelaars:
# | Naam | Voorbeeld | Beschrijving |
---|---|---|---|
1 | breedte | breedte: 100px | elementbreedte in pixels |
2 | hoogte | hoogte: 50% | hoogte van het element als percentage (van de breedte van de ouder) |
3 | weergave | Geen weergeven | element weergeven (element niet weergeven) |
4 | zichtbaarheid | zichtbaarheid: verborgen | zichtbaarheid van elementen (element is verborgen, maar er is ruimte voor gereserveerd) |
5 | kleur | kleur rood; | tekst kleur |
6 | Achtergrond kleur | achtergrondkleur: rook | Achtergrond kleur |
7 | grens | rand: 1px effen zwart; | rand (breedte 1px, kleur zwart, ononderbroken lijn) |
8 | lettertype | lettertype: verdana 10pt | lettertype: verdana, maat 10pt |
9 | tekst uitlijnen | tekst uitlijnen: centreren; | tekstuitlijning horizontaal |
10 | marge | marge:2px | opvulling buiten het element |
U hoeft deze tags niet te onthouden, alles staat op internet. Bovendien heeft elke "stijl" zijn eigen set geldige waarden en zijn eigen formaat om de waarde te beschrijven. Kijk in ieder geval naar border
of font
.