Esercizi 101

Ci sono vari modi per inserire dello stile CSS in un documento HTML, ma è necessario prima capire la fondamentale distinzione tra fogli interni ed esterni. Esterno lo è quando il foglio di stile viene definito in un file separato. Si tratta di semplici documenti di modificabili con un qualsiasi editor di testo ai quali si assegna l'estensione .css; mentre è Interno quando il codice di stile è compreso in quello html tramite il tag <style> o all'interno dello stesso elemento.

Questi sono esempi di sintassi per creare una regola in un foglio di stile:
- All'interno di un elemento →
<elemento style="regole_di_stile">
- All'interno del tag <style>
- In un documento CSS esterno

a { color: red; } √
b { color=green; font-weight=bold; } X, ":" e non "=".
<d> { color="green"; font-weight="bold"; } X, elemento senza virgolette, regole con ":" al posto di "=" e senza virgolette.
e,f,g { color: green, font-weight: bold; } X, ";" tra una regola e l'altra e non ",".
e;f;g { color: green; font-weight: bold; } X, "," tra un elemento e l'altro e non ";".

font-family → Indica il font dell'elemento, può assumere qualsiasi font già presenti nel sistema o inserendo il percorso se vengono scaricati.
font-weight → Indica che spessore deve assumere il font (normal, bold, bolder, lighter, number, initial, inherit).
color → Indica il colore che devono assumere i caratteri (nome del colore, valore esadecimale, rgb, initial, inherit).
font-style → Indica che stile deve assumere il font (normal, italic, oblique, initial, inherit).
margin → Indica il margine esterno dell'elemento (length, %, auto, initial, inherit).
padding → Come margin ma il margine è esterno.
left → Quando un elemento è in posizione assoluta, questa regola imposta il bordo sinistro in base all'antenato posizionato più vicino (auto, length, %, initial, inherit).
top → Come left ma il bordo è quello superiore.
z-index → Specifica l'ordine di sovrapposizione di un elemento (auto, number, initial, inherit).
text-decoration → Indica la decorazione da aggiungere al testo (none, underline, overline, line-through, initial, inherit).

id → viene identificato con "#".
class → viene identificato con ".".
Le classi servono per definire una tipologia di elementi, cioè per attribuire uno scopo e/o una presentazione ad un sottoinsieme di elementi con caratteristiche e funzionalità comuni di una pagina HTML. Gli id servono per definire un elemento unico in una pagina, con un unico e preciso scopo, nella maggior parte dei casi tale scopo è determinare una sezione in una pagina HTML. In sostanza, quando sappiamo che un elemento sarà unico useremo un id. Negli altri casi, se non disponiamo di alternative (come ad esempio il selettore discendente) possiamo usare una classe.