.png){kind=small}
CSS regole e selettori
CSS, o Cascading Style Sheets, è un linguaggio usato in combinazione con l'HTML che personalizza l'aspetto degli elementi HTML. I CSS possono definire gli stili e modificare il layout e il design di una pagina.
Dichiarazioni CSS
In CSS, una dichiarazione è la coppia di valori chiave di una proprietà CSS e il suo valore. Le dichiarazioni CSS sono usate per impostare le proprietà di stile e costruire regole da applicare a singoli elementi o a gruppi di elementi.
Il nome della proprietà e il valore sono separati da un punto e virgola e l'intera dichiarazione deve essere terminata da un punto e virgola.
text-align: center;
color: purple;
width: 100px;
Selettori
I selettori nei CSS sono usati per abbinare tutti gli elementi di un dato tipo o nome di tag.
A differenza della sintassi HTML, non includiamo le parentesi angolari quando usiamo i selettori per i nomi dei tag.
Quando si usano i selettori gli elementi sono abbinati indipendentemente dal loro livello di nidificazione nell'HTML.
/* selezioniamo tutti i <p> tags */
p {
}
Si possono abbinare più selettori alla stessa regola CSS, utilizzando una lista separata da virgole. In questo esempio, il testo sia per h1 che per h2 è impostato su rosso.
h1, h2 {
color: red;
}
Il combinatore del selettore discendente CSS viene utilizzato per abbinare elementi che discendono da un altro selettore abbinato.
Essi sono indicati da un singolo spazio tra ogni selettore e il selettore discendente.
Tutti gli elementi corrispondenti sono selezionati indipendentemente dal livello di nidificazione nell'HTML.
div p {
}
section ol li {
}
CSS nell'HTML
Il codice CSS può essere scritto in un una pagina HTML racchiudendo il codice tra il tag <style>. Il codice dentro l'apertura e chiusura del tag <style> sarà interpretato come sintassi CSS.
<head>
<style>
h1 {
color: blue;
}
</style>
</head>
Il codice CSS può essere scritto in file dedicati per tenerlo separato dal codice HTML. L'estensione per i file CSS è .css. Questi possono essere collegati ad un file HTML usando un tag <link> nella sezione <head>.
<head>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
L'elemento <link> è usato per collegare documenti HTML a risorse esterne come i file CSS. Nello specifico:
- l'attributo href per specificare l'URL della risorsa esterna.
- rel per specificare la relazione del documento collegato con il documento corrente.
- attributo type per definire il tipo di contenuto da collegare.
Gli stili CSS possono essere aggiunti direttamente agli elementi HTML usando l'attributo style nel tag di apertura dell'elemento. Ogni dichiarazione di stile termina con un punto e virgola.
Gli stili aggiunti in questo modo sono noti come stili in linea.
<h2 style="text-align: center;">Testo centrato</h2>
<p style="color: blue; font-size: 18px;">Blu, 18px di dimensione</p>
È pratica comune separare il codice di contenuto nei file HTML dal codice di stile nei file CSS. Questo può aiutare a rendere il codice più facile da mantenere, mantenendo la sintassi di ogni file separata e qualsiasi modifica al contenuto o allo stile può essere fatta nei rispettivi file.
Selettori di classe e ID
Le classi CSS possono essere riutilizzate e applicate a molti elementi. I selettori di classe sono contrassegnati da un punto seguito dal nome della classe. I selettori CSS ID devono essere unici e utilizzati per lo stile di un solo elemento. I selettori ID sono indicati con un segno di hash # seguito dal nome dell'id.
/* Seleziona tutti gli elementi con class="colonna" */
.colonna {
}
/* Seleziona l'elemento con id="primo-elem" */
#primo-elem {
}
Nella pagina HTML la classe ed anche l'ID è un attributo del tag da modificare.
<p class="nome-classe">Ciao</p>
<p id="nome-id">mondo!</p>
I selettori CSS possono essere incatenati in modo che i set di regole si applichino solo agli elementi che corrispondono a tutti i criteri.
/* Selezionare gli elementi h3 con la classe testa-sez */
h3.testa-sez {
color: blue;
}
/* Selezionare gli elementi con la classe testa-sez e btn */
.testa-sez.btn {
cursor: pointer;
}
La specificità è un sistema di classificazione che viene utilizzato quando ci sono più valori di proprietà in conflitto tra loro che puntano allo stesso elemento.
Nel determinare quale regola applicare, vince il selettore con la specificità più alta. Il tipo di selettore più specifico è il selettore ID, seguito dai selettori di classe, seguiti dai selettori di tipo.
In questo esempio, solo il colore: blu sarà implementato in quanto ha un selettore ID, mentre il colore: rosso ha un selettore di tipo.
h1#header {
color: blue;
} /* implementato */
h1 {
color: red;
} /* non implementato */
Usando la proprietà color, il colore del testo in primo piano di un elemento può essere impostato. Il valore può essere un nome di colore valido supportato dai CSS come green o blue. Inoltre, è possibile utilizzare un codice colore a 3 o 6 cifre come #22f o #2a2aff per impostare il colore.
Font-family
La proprietà font-family viene utilizzata per specificare il carattere in un set di regole.
I font devono essere disponibili per il browser per poter essere visualizzati correttamente. Se il valore di un font non è disponibile i browser visualizzeranno il loro font predefinito. Quando si usa un nome di font multiparola è meglio racchiuderlo tra virgolette.
h2 {
font-family: Verdana;
}
#page-title {
font-family: "Courier New";
}
Font-size
La proprietà CSS font-size viene utilizzata per impostare le dimensioni del testo. I valori delle dimensioni dei caratteri possono differenziarsi come unità o tipi diversi, come i pixel.
font-size: 30px;
Font-weight
La proprietà font-weight può essere utilizzata per impostare il peso (spessore) del testo. Il valore fornito può essere una parola chiave come bold o normal.
font-weight: bold;
Text-align
La proprietà CSS text-align può essere utilizzata per impostare l'allineamento del testo dei contenuti in linea.
Questa proprietà può essere impostata con i valori: sinistra, destra o centro.
text-align: right;
Background-color
La proprietà CSS background-color controlla il colore di sfondo degli elementi.
background-color: blue;
Opacity
La proprietà CSS opacity è utilizzata per controllare la trasparenza di un elemento. Il valore di questa proprietà varia da 0 (trasparente) a 1 (opaco).
opacity: 0.5;
Background-image
La proprietà CSS background-image imposta l'immagine di sfondo di un elemento. Un URL dell'immagine è indicato nella sintassi url("moon.jpg") come valore della proprietà.
background-image: url("prova.jpg");
<<<
>>>
