I fogli di stile a cascata, affettuosamente indicati come CSS, sono un semplice linguaggio di design inteso a semplificare il processo di presentazione delle pagine web.
Di seguito sono riportati i vantaggi dell'utilizzo dei CSS:
CSS saves time- Puoi scrivere CSS una volta e quindi riutilizzare lo stesso foglio in più pagine HTML. È possibile definire uno stile per ogni elemento HTML e applicarlo a tutte le pagine Web desiderate.
Pages load faster- Se utilizzi CSS, non è necessario scrivere ogni volta gli attributi del tag HTML. Basta scrivere una regola CSS di un tag e applicarla a tutte le occorrenze di quel tag. Quindi meno codice significa tempi di download più rapidi.
Easy maintenance - Per apportare una modifica globale, cambia semplicemente lo stile e tutti gli elementi in tutte le pagine web verranno aggiornati automaticamente.
Superior styles to HTML - Il CSS ha una gamma di attributi molto più ampia rispetto all'HTML, quindi puoi dare un aspetto molto migliore alla tua pagina HTML rispetto agli attributi HTML.
Multiple Device Compatibility- I fogli di stile consentono di ottimizzare il contenuto per più di un tipo di dispositivo. Utilizzando lo stesso documento HTML, è possibile presentare diverse versioni di un sito Web per dispositivi palmari come PDA e telefoni cellulari o per la stampa.
Global web standards- Ora gli attributi HTML sono stati deprecati e si consiglia di utilizzare CSS. Quindi è una buona idea iniziare a utilizzare CSS in tutte le pagine HTML per renderle compatibili con i browser futuri.
Offline Browsing - CSS può memorizzare le applicazioni web localmente con l'aiuto di una catche offline, grazie alla quale possiamo visualizzare i siti web offline. La cache garantisce inoltre un caricamento più veloce e migliori prestazioni complessive del sito web.
Platform Independence - Lo script offre un'indipendenza dalla piattaforma coerente e può supportare anche i browser più recenti.
Una regola di stile è composta da tre parti:
Selector- Un selettore è un tag HTML a cui verrà applicato uno stile. Potrebbe essere qualsiasi tag come <h1> o <table> ecc.
Property- Una proprietà è un tipo di attributo del tag HTML. In parole povere, tutti gli attributi HTML vengono convertiti in proprietà CSS. Potrebbero essere colore, bordo ecc.
Value- I valori vengono assegnati alle proprietà. Ad esempio, la proprietà color può avere valore rosso o # F1F1F1 ecc.
Il selettore di tipo abbina semplicemente il nome di un tipo di elemento. Per dare un colore a tutte le intestazioni di livello 1 -
h1 {
color: #36CFFF;
}Piuttosto che selezionare elementi di un tipo specifico, il selettore universale abbina semplicemente il nome di qualsiasi tipo di elemento -
* {
color: #000000;
}Questa regola rende il contenuto di ogni elemento nel nostro documento in nero.
Supponiamo di voler applicare una regola di stile a un particolare elemento solo quando si trova all'interno di un particolare elemento. Come indicato nell'esempio seguente, la regola di stile verrà applicata all'elemento <em> solo quando si trova all'interno del tag <ul>.
ul em {
color: #000000;
}È possibile definire regole di stile in base all'attributo di classe degli elementi. Tutti gli elementi con quella classe verranno formattati secondo la regola definita.
.black {
color: #000000;
}Questa regola rende il contenuto in nero per ogni elemento con l'attributo di classe impostato su nero nel nostro documento.
Puoi renderlo un po 'più particolare. Ad esempio:
h1.black {
color: #000000;
}Questa regola rende il contenuto in nero solo per gli elementi <h1> con l'attributo di classe impostato su nero.
È possibile definire regole di stile in base all'attributo id degli elementi. Tutti gli elementi che hanno quell'ID verranno formattati secondo la regola definita.
#black {
color: #000000;
}Questa regola rende il contenuto in nero per ogni elemento con l'attributo id impostato su nero nel nostro documento.
Puoi renderlo un po 'più particolare. Ad esempio:
h1#black {
color: #000000;
}Questa regola rende il contenuto in nero solo per gli elementi <h1> con l'attributo id impostato su nero.
Considera il seguente esempio:
body > p {
color: #000000;
}Questa regola renderà tutti i paragrafi in nero se sono figli diretti dell'elemento <body>. Altri paragrafi inseriti in altri elementi come <div> o <td> non avrebbero alcun effetto su questa regola.
Puoi anche applicare stili agli elementi HTML con attributi particolari. La regola di stile di seguito corrisponderà a tutti gli elementi di input che hanno un attributo di tipo con un valore di testo -
input[type = "text"] {
color: #000000;
}Il vantaggio di questo metodo è che l'elemento <input type = "submit" /> non viene modificato e il colore viene applicato solo ai campi di testo desiderati.
p [lang]: seleziona tutti gli elementi del paragrafo con un attributo lang.
p [lang = "fr"] - Seleziona tutti gli elementi del paragrafo il cui attributo lang ha un valore esattamente "fr".
p [lang ~ = "fr"] - Seleziona tutti gli elementi del paragrafo il cui attributo lang contiene la parola "fr".
p [lang | = "en"] - Seleziona tutti gli elementi del paragrafo il cui attributo lang contiene valori che sono esattamente "en" o che iniziano con "en-".
Esistono quattro modi per associare gli stili al documento HTML. I metodi più comunemente usati sono CSS in linea e CSS esterni.
Embedded CSS - L'elemento <style>: puoi inserire le tue regole CSS in un documento HTML utilizzando l'elemento <style>.
Inline CSS - L'attributo di stile: puoi utilizzare l'attributo di stile di qualsiasi elemento HTML per definire le regole di stile.
External CSS - L'elemento <link>: l'elemento <link> può essere utilizzato per includere un file di foglio di stile esterno nel documento HTML.
Imported CSS - Regola @import: @import viene utilizzata per importare un foglio di stile esterno in modo simile all'elemento <link>.
Di seguito è riportata la regola per sovrascrivere qualsiasi regola del foglio di stile:
Qualsiasi foglio di stile in linea ha la massima priorità. Quindi, sovrascriverà qualsiasi regola definita nei tag <style> ... </style> o le regole definite in qualsiasi file di foglio di stile esterno.
Qualsiasi regola definita nei tag <style> ... </style> sovrascriverà le regole definite in qualsiasi file di foglio di stile esterno.
Qualsiasi regola definita nel file del foglio di stile esterno ha la priorità più bassa e le regole definite in questo file verranno applicate solo quando le due regole precedenti non sono applicabili.
%: Definisce una misura come percentuale relativa a un altro valore, in genere un elemento che lo racchiude.
p {font-size: 16pt; line-height: 125%;}cm - Definisce una misura in centimetri.
div {margin-bottom: 2cm;}em - Una misura relativa per l'altezza di un carattere negli spazi em. Poiché un'unità em è equivalente alla dimensione di un dato carattere, se assegni un carattere a 12pt, ciascuna unità "em" sarà 12pt; quindi, 2em sarebbe 24pt.
p {letter-spacing: 7em;}ex - Questo valore definisce una misura relativa all'altezza x di un carattere. L'altezza della x è determinata dall'altezza della lettera minuscola del carattere.
p {font-size: 24pt; line-height: 3ex;}in - Definisce una misura in pollici.
p {word-spacing: .15in;}mm - Definisce una misura in millimetri.
p {word-spacing: 15mm;}pc - Definisce una misura in picas. Una pica equivale a 12 punti; quindi, ci sono 6 pica per pollice.
p {font-size: 20pc;}pt - Definisce una misura in punti. Un punto è definito come 1/72 di pollice.
body {font-size: 18pt;}px: definisce una misura in pixel dello schermo.
p {padding: 25px;}vh - 1% dell'altezza del viewport.
h2 { font-size: 3.0vh; }vw - 1% della larghezza del viewport.
h1 { font-size: 5.9vw; }vmin 1vw o 1vh, a seconda di quale sia il più piccolo.
p { font-size: 2vmin;}È possibile specificare i valori del colore in vari formati. La tabella seguente elenca tutti i formati possibili -
| Formato | Sintassi | Esempio |
|---|---|---|
| Codice esadecimale | #RRGGBB | p {color: # FF0000;} |
| Codice esadecimale breve | #RGB | p {color: # 6A7;} |
| RGB% | rgb (rrr%, ggg%, bbb%) | p {colore: rgb (50%, 50%, 50%);} |
| RGB assoluto | rgb (rrr, ggg, bbb) | p {color: rgb (0,0,255);} |
| parola chiave | acqua, nero, ecc. | p {color: teal;} |
C'è l'elenco dei 216 colori che dovrebbero essere i colori più sicuri e indipendenti dal computer. Questi colori variano dal codice hexa 000000 a FFFFFF. Questi colori sono sicuri da usare perché assicurano che tutti i computer visualizzino correttamente i colori durante l'esecuzione di una tavolozza di 256 colori.
La proprietà background-color viene utilizzata per impostare il colore di sfondo di un elemento.
La proprietà background-image viene utilizzata per impostare l'immagine di sfondo di un elemento.
La proprietà background-repeat viene utilizzata per controllare la ripetizione di un'immagine sullo sfondo.
La proprietà background-position viene utilizzata per controllare la posizione di un'immagine sullo sfondo.
La proprietà background-attachment viene utilizzata per controllare lo scorrimento di un'immagine sullo sfondo.
La proprietà background viene utilizzata come scorciatoia per specificare una serie di altre proprietà dello sfondo.
La proprietà della famiglia di caratteri viene utilizzata per modificare l'aspetto di un carattere.
La proprietà dello stile del carattere viene utilizzata per rendere un carattere corsivo o obliquo.
La proprietà della variante del carattere viene utilizzata per creare un effetto maiuscoletto.
La proprietà font-weight viene utilizzata per aumentare o diminuire il livello di grassetto o chiaro di un carattere.
La proprietà font-size viene utilizzata per aumentare o diminuire la dimensione di un carattere.
La proprietà font viene utilizzata come scorciatoia per specificare una serie di altre proprietà dei font.
La proprietà color viene utilizzata per impostare il colore di un testo.
La proprietà direction viene utilizzata per impostare la direzione del testo.
La proprietà letter-spacing viene utilizzata per aggiungere o sottrarre spazio tra le lettere che compongono una parola.
La proprietà di spaziatura delle parole viene utilizzata per aggiungere o sottrarre spazio tra le parole di una frase.
La proprietà text-indent viene utilizzata per far rientrare il testo di un paragrafo.
La proprietà text-align viene utilizzata per allineare il testo di un documento.
La proprietà di decorazione del testo viene utilizzata per sottolineare, sovrastare e barrare il testo.
La proprietà di trasformazione del testo viene utilizzata per rendere il testo in maiuscolo o convertire il testo in lettere maiuscole o minuscole.
La proprietà dello spazio bianco viene utilizzata per controllare il flusso e la formattazione del testo.
La proprietà text-shadow viene utilizzata per impostare l'ombreggiatura del testo attorno a un testo.
La proprietà border viene utilizzata per impostare la larghezza di un bordo dell'immagine.
La proprietà height viene utilizzata per impostare l'altezza di un'immagine.
La proprietà width viene utilizzata per impostare la larghezza di un'immagine.
La proprietà -moz-opacity viene utilizzata per impostare l'opacità di un'immagine.
Il collegamento: indica collegamenti ipertestuali non visitati.
Il: visitato indica i collegamenti ipertestuali visitati.
Il: hover indica un elemento che attualmente ha il puntatore del mouse dell'utente che passa sopra di esso.
Il: attivo indica un elemento su cui l'utente sta attualmente facendo clic.
La compressione del bordo specifica se il browser deve controllare l'aspetto dei bordi adiacenti che si toccano o se ogni cella deve mantenere il proprio stile.
La spaziatura del bordo specifica la larghezza che dovrebbe apparire tra le celle della tabella.
Le didascalie sul lato della didascalia sono presentate nell'elemento <caption>. Per impostazione predefinita, questi vengono visualizzati sopra la tabella nel documento. Si utilizza la proprietà caption-side per controllare il posizionamento della didascalia della tabella.
Le celle vuote specifica se il bordo deve essere mostrato se una cella è vuota.
Il layout della tabella consente ai browser di velocizzare il layout di una tabella utilizzando le prime proprietà di larghezza che incontra per il resto di una colonna piuttosto che dover caricare l'intera tabella prima di renderla.
Il colore del bordo specifica il colore di un bordo.
Lo stile del bordo specifica se un bordo deve essere pieno, linea tratteggiata, doppia linea o uno degli altri valori possibili.
La larghezza del bordo specifica la larghezza di un bordo.
Il margine specifica una proprietà abbreviata per impostare le proprietà del margine in una dichiarazione.
Il margine inferiore specifica il margine inferiore di un elemento.
Il margin-top specifica il margine superiore di un elemento.
Il margine sinistro specifica il margine sinistro di un elemento.
Il margine destro specifica il margine destro di un elemento.
Il tipo di stile elenco consente di controllare la forma o l'aspetto del marcatore.
La posizione in stile elenco specifica se un punto lungo che va a capo su una seconda riga deve allinearsi con la prima riga o iniziare sotto l'inizio del marcatore.
L'immagine in stile elenco specifica un'immagine per il marcatore piuttosto che un punto o un numero.
Lo stile elenco funge da scorciatoia per le proprietà di stile.
Il marker-offset specifica la distanza tra un marker e il testo nell'elenco.
Il padding-bottom specifica il padding inferiore di un elemento.
Il padding-top specifica il padding superiore di un elemento.
Il padding-left specifica il padding sinistro di un elemento.
Il padding-right specifica il padding destro di un elemento.
L'imbottitura funge da scorciatoia per tutte le proprietà di imbottitura.
La proprietà del cursore dei CSS consente di specificare il tipo di cursore che deve essere visualizzato all'utente.
auto - La forma del cursore dipende dall'area di contesto su cui si trova. Ad esempio, una "I" sul testo, una "mano" su un collegamento e così via.
mirino: un mirino o un segno più.
default: una freccia.
pointer - Una mano che indica (in IE 4 questo valore è mano).
spostare o testo: la barra "I".
aspetta - Una clessidra.
aiuto: un punto interrogativo o un fumetto, ideale per l'uso sopra i pulsanti di aiuto.
Sì! imposta l'URL come origine di un file immagine del cursore.
La proprietà outline-width viene utilizzata per impostare la larghezza del contorno.
La proprietà stile struttura viene utilizzata per impostare lo stile della linea per la struttura.
La proprietà outline-color viene utilizzata per impostare il colore del contorno.
La proprietà outline viene utilizzata per impostare tutte le proprietà outlining in una singola istruzione.
La proprietà height viene utilizzata per impostare l'altezza di un box.
La proprietà width viene utilizzata per impostare la larghezza di una casella.