CSS - Cascading Style Sheets

Siamo arrivati al CSS ( acronimo di Cascading Style Sheets, in italiano fogli di stile a cascata) ovvero il cuore di ogni pagina web. La domanda che salta subito fuori č "ma cosa sono 'sti fogli di stile o style" ?


Un tempo poco utilizzato in favore della formattazione tramite tags, adesso indispensabile.

→ Perchč?

1) praticitā : inizialmente in termini di lunghezza le pagine web erano veri e propri papiri, mentre con un solo foglio di stile , presente nella TESTA (HEAD) si comanda "un intero sito" , senza andare ad allungare e rendere ingestibile il "CORPO" ( BODY)
2) tempistica ( una sola variazione nel css basta per essere visualizzata in tutto il sito).
3) universalitā : il css e' visualizzabile da piu' browsers e compatibile con smartphone, tablet e relativi monitor.

Un foglio di stile puo' essere inserito manualmente tra i tags :



in questo modo :



oppure tramite un link ad un foglio esterno alla pagina ( sistema pratico per eventuali modifiche ) :

---

→ SELETTORI

Nel CSS le regole vengono dette SELETTORI, a loro volta costituiti da PROPRIETA' racchiuse tra parentesi { } ed i loro VALORI ( PROPRIETA' e VALORE assieme vengono detti DICHIARAZIONE)



→ i selettori vengono categorizzati in :

SELETTORI DI TIPO

applicano le proprietā a tutti gli elementi del SELETTORE determinato.



SELETTORI DI CLASSE

applicano le proprieta' ad ogni documento,immagine,contenuto che richiami il nome del selettore, indicato da un .

→ ed un esempio della stringa di richiamo


SELETTORI DI IDENTIFICAZIONE

simile alla classe ma identifica in modo univoco un elemento, viene richiamato con una stringa differente ed č indicato con #

→ ed un esempio della stringa di richiamo


PSEUDOCLASSI

indicano elementi in base alle loro proprietā.
→ I piu' comuni :

→ che definisce la formattazione dei collegamenti ipertestuali presenti nella nostra pagina

→ che definisce la formattazione dei suddetti attivi

→ che definisce la formattazione dei suddetti al passaggio del mouse

---

PROPRIETA'

Le proprietā dei selettori sono numerose, ma quelle utilizzate piu' comunemente nella personalizzazione di una pagina web sono :


→ definisce il colore di sfondo di un elemento

→ definisce i bordi di un elemento

→ definisce caratteri e testo

→ definisce i margini esterni degli elementi

→ definisce i margini interni degli elementi

→ definisce il colore del testo

→ definisce la formattazione del testo

Infine un esempio di SELETTORE con le sue DICHIARAZIONI.



→ e si ottiene QUESTO LINK