5.1 L'attributo style di un tag
E alcune altre cose utili sull'HTML. Quando il Web ha iniziato a guadagnare popolarità, c'è stata una crescente domanda di pagine Web progettate in modo bello o molto bello. Questo problema è stato risolto utilizzando il style
.
La forma generale di questo attributo ha il seguente formato:
<tag style="name=value;name2=value2;nameN=valueN">
Il valore dell'attributo, separato style
da un punto e virgola, elenca tutti gli "stili" che devono essere applicati al tag.
Supponiamo che tu voglia visualizzare un'immagine come un quadrato 100х100
e renderla anche semitrasparente. Per fare ciò, devi aggiungere stili speciali ad esso:
- larghezza=100px;
- altezza=100px;
- opacità=0,5;
Quindi il codice HTML con questa immagine sarà simile a questo:
<img src="logo.png" style="width=100px;height=100px;opacity=0.5">
Ci sono centinaia, se non migliaia, di stili. E gli sviluppatori di browser ne escono costantemente di nuovi. È positivo che tu stia studiando per diventare uno sviluppatore Java, non un web designer :)
5.2 Stili CSS popolari
È improbabile che tu scriva molto codice HTML o modifichi i suoi stili nella tua vita, ma può succedere di tutto. Ad esempio, stai scrivendo un paio di piccole pagine HTML per testare il API
. Pertanto, conoscere gli stili di base HTML
può essere utile.
Di seguito sono riportati i 10 più comuni per gli sviluppatori di back-end:
# | Nome | Esempio | Descrizione |
---|---|---|---|
1 | larghezza | larghezza: 100px | larghezza dell'elemento in pixel |
2 | altezza | altezza: 50% | l'altezza dell'elemento in percentuale (della larghezza del genitore) |
3 | Schermo | visualizzazione: nessuna | elemento di visualizzazione (non visualizzare l'elemento) |
4 | visibilità | visibilità: nascosta | visibilità dell'elemento (l'elemento è nascosto, ma lo spazio è riservato per esso) |
5 | colore | colore rosso; | colore del testo |
6 | colore di sfondo | colore di sfondo: fumo | colore di sfondo |
7 | confine | bordo: 1px nero pieno; | bordo (larghezza 1px, colore nero, linea continua) |
8 | font | carattere: verdana 10pt | font: verdana, dimensione 10pt |
9 | allineamento del testo | text-align: centro; | allineamento del testo in orizzontale |
10 | margine | margine: 2px | padding all'esterno dell'elemento |
Non è necessario ricordare questi tag, tutto è su Internet. Inoltre, ogni "stile" ha il proprio insieme di valori validi e il proprio formato per descrivere il valore. Guarda almeno border
o font
.
GO TO FULL VERSION