Questa video lezione fa parte sempre del Corso Web 2021, e gli argomenti delle lezione sono:
I fogli di stile CSS 3
Che cos’è un fogli di stile CSS ? “CSS” è acronimo di Cascade Style Sheet ovvero “foglio di stile a cascade” ed è un linguaggio strutturato con selettori che permettono di modificare il comportamento in termini di layout e formattazione e in generale del design delle pagine web alterando la struttura dei tag html.
Quando una pagina web è creata, è costituita da un insieme di tag alcuni dei quali indicando il formato della pagina, dei paragrafi, dei riquadri, delle tabelle, delle immagini, dei caratteri e tanto altro. Tutto questo attraverso l’uso dei tag html specifici per queste funzionalità.
Nella scrittura di siti web e pagine web complesse tali informazioni conviene inserirle in un foglio di stile esterno e delegare al linguaggio html solo la parte di contenuto.
In questo modo è possibile separare design da contenuto e modificare separatamente i due aspetti con grandi vantaggi nello sviluppo web.
Integrazione con HTML 5
Stile in linea
Il selettore CSS è un comando o un gruppo di comandi che opera su tag html in varie modalità. La prima modalità è attraverso l’uso di uno stile all’interno del mio tag ad esempio:
<p style="background-color: grey; text-align: center; color: green;">
Questo è un paragrafo di prova per vedere che lo sfondo del paragrafo è grigio, il colore del carattere è verde e il testo è allineato al centro del paragrafo.</p>
L’effetto dell’applicazione dello stile in in linea è questo mostrato sotto:
Questo è un paragrafo di prova per vedere che lo sfondo del paragrafo è grigio, il colore del carattere è verde e il testo è allineato al centro del paragrafo.
- Stili incorporati: sono stili CSS definiti nello stesso documento html e quindi validi solo per quel documento.
Modalità di definizione degli stili CSS comuni
Un’altra possibilità è di inserire lo stile CSS nella pagina html mediante l’uso del tag <style> … </style> e tale stile sara poi applicato in vari modi possibili. IL primo è ridefinendo il comportamento di uno specifico tag che poi sarò applicato a tutti i tag con quel nome.
Il secondo attraverso l’uso di una classe da applicare a livello di tag specifici che abbiamo l’attributo “class” impostato. Il terzo modo utilizzando l’attributo del tag “id” che indica il nome nel documento html.
In un documento html ogni tag oltre che essere di una carta tipologia potrebbe avere un nome personalizzato denominato “id” che è molto utile quando occorre agire sul tag con linguaggio di programmazione tipo Javascript, PHP, C#, e altri.
Nel codice che adesso analizziamo sono definite tre stili CSS con le tre differenti modalità.
<style>
p {background-color: red;
color: blue;
text-align: left;}
.paragrafo
{background-color: black;
color: red;
text-align: center;}
#paragrafo1
{background-color: yellow;
color: green;
width: 50%;
text-align: red;}
</style>
<p>Paragrafo 1 con ridefinizione del tag</p>
<p class="paragrafo">Paragrafo 2 con la classe</p>
<p id="paragrafo1">Paragrafo 3 con l'uso dell'attributo id</p>Stili incoportato
Nell’anteprima mostrata qui sotto sono mostrati tre paragrafi con differenti modalità CSS.
Come è utile notare quando è definita una classe o un “id” css questi prevalgono sulla definizione dello stile di paragrafo adottato con al ridefinizione dello stile CSS del tag “<p>”.
Paragrafo 1 con ridefinizione del tag
Paragrafo 2 con la classe
Paragrafo 3 con l’uso dell’attributo id
Foglio di stile esterno
Come ultima opzione gli stili CSS possono essere definiti in un file CSS esterno che viene richiamato all’interno della pagina web con il tag <link> che non prevede chiusura nella sezione che precede il <body>.
La sintassi generica è:
<link rel=”stylesheet” type=”text/css” href=”url del file css”>
L’url deve essere il percorso relativo del file se è all’interno di una cartella del nostro sito web ad esempio se rispetto alla cartella dove è salvata la pagina web è locato in una sotto cartella o nella cartella stessa o un percorso assoluto se è locata un indirizzo web esterno dalla nostra cartella di lavoro.
I Selettori CSS
Un selettore è un comando che decide il comportamento che un tag html, una classe css deve avere quando è applicata ad un elemento html della pagina web.
L’espressione generica di un selettore è:
tag html {selettore 1; selettore 2; ….,selettore n;}
.nome classe {selettore 1; selettore 2; ….,selettore n;}
#id {selettore 1; selettore 2; ….,selettore n;}
in genere i selettori sono enumerati uno per ogni riga come visto negli esempi precedenti. I selettori CSS sono di vario tipo; esistono selettori per il formato del testo, per i colori, per i bordi degli elementi, per l’allineamento del testo, per le immagini, per la disposizione dei blocchi nella pagina web, per gli elenchi puntati e numerati e per citare i più importanti.
Selettori per il formato dei caratteri
I primi selettori che sono utilizzati sono quelli per l’impostazione dei caratteri, della loro altezza e del loro spessore nonché del loro allineamento.
I selettori in questione sono riportati in questa tabella con un esempio e la descrizione della loro funzionalità e su quali elementi html possono agire.
| Selettore | Descrizione | Elementi html | Esempio |
| font-family: elenco font; | Seleziona la famiglia di font per l’elemento html | paragrafo, tabelle, elenchi, blocchi, titoli | font-family: Arialm Helvetica, sams serif; |
| font-size: dimensione; | definisce la dimensione altezza del carattere. Le unità di misura possibili sono: pixel misura assoluta em misura relativa alla dimensione standard 100% adottata dal browser. Percentuale in rapporto alla dimensione standard del browser. in pt ovvero punti ovvero la dimensione nel formato di stampa. Per denominazione rispetto alle dimensioni adottate in modo predefinito dal browser large, small, xsmall. | paragrafo, tabelle, elenchi, blocchi, titoli | font-seize: 14px; font-size: 20pt; font-size: large; font-size: 1em; font-size: 125%; |
| font-weight: dimensione; | Definisce lo spessore del carattere | paragrafo, tabelle, elenchi, blocchi, titoli | font-weight; 200; font-weiht: 400; indica quante vole la dimensione del carattere standard deve essere aumento lo spessore in rapporto a 100. Un valore 200 vuol dire due vole rispetto allo spessore standard. |
| color: nome o codice colore; | Definisce il colore del carattere o per nome o con codice RGB | paragrafo, tabelle, elenchi, blocchi, titoli | color: red; color: #FFAACC; |
Sostieni il nostro lavoro con una donazione spontanea: