5.1 Et tags stilattribut
Og et par flere nyttige ting om HTML. Efterhånden som nettet begyndte at vinde popularitet, var der en stigende efterspørgsel efter, at websider skulle være smukt eller meget smukt designet. Dette problem blev løst ved at bruge style .
Den generelle form for denne attribut har følgende format:
<tag style="name=value;name2=value2;nameN=valueN">Attributværdien, adskilt styleaf et semikolon, viser alle de "stile", der skal anvendes på tagget.
Lad os sige, at du vil vise et billede som en firkant 100*100og også gøre det halvt gennemsigtigt. For at gøre dette skal du tilføje specielle stilarter til det:
- bredde=100px;
- højde=100px;
- opacitet = 0,5;
Så ser HTML-koden med dette billede sådan ud:
<img src="logo.png" style="width=100px;height=100px;opacity=0.5">Der er hundredvis, hvis ikke tusindvis, af stilarter. Og browserudviklere kommer hele tiden med nye. Det er godt, at du læser til Java-udvikler, ikke webdesigner :)
5.2 Populære CSS-stilarter
Det er usandsynligt, at du vil skrive en masse HTML-kode eller redigere dens stilarter i dit liv, men alt kan ske. For eksempel skriver du et par små HTML-sider for at teste API. Derfor HTMLkan det være nyttigt at kende de grundlæggende stilarter.
Nedenfor er de 10 mest almindelige for backend-udviklere:
| # | Navn | Eksempel | Beskrivelse |
|---|---|---|---|
| 1 | bredde | bredde: 100px | elementets bredde i pixels |
| 2 | højde | højde: 50% | elementets højde i procent (af forældrenes bredde) |
| 3 | Skærm | display: ingen | displayelement (vis ikke element) |
| 4 | sigtbarhed | synlighed: skjult | elementets synlighed (elementet er skjult, men der er reserveret plads til det) |
| 5 | farve | farve: rød; | tekst farve |
| 6 | baggrundsfarve | baggrundsfarve: røg | baggrundsfarve |
| 7 | grænse | kant: 1px ensfarvet sort; | kant (bredde 1px, farve sort, ubrudt linje) |
| 8 | skrifttype | skrifttype: verdana 10pt | skrifttype: verdana, størrelse 10pt |
| 9 | tekstjustering | tekst-align: center; | tekstjustering vandret |
| 10 | margen | margin: 2px | polstring uden for elementet |
Du behøver ikke at huske disse tags, alt er på internettet. Desuden har hver "stil" sit eget sæt af gyldige værdier og sit eget format til at beskrive værdien. Se i det mindste på bordereller font.