Vai al contenuto

CSS

Da Wikiversità, l'apprendimento libero.
lezione
lezione
CSS
Tipo di risorsa Tipo: lezione
Materia di appartenenza Materie:

CSS , abbreviazione di Cascading Style Sheet , è un linguaggio utilizzato nel web design per applicare gli stili alle pagine Web. CSS ha una sintassi un po 'simile a JavaScript . I CSS possono essere utilizzati per modificare e creare facilmente stili per pagine Web e possono essere incorporati direttamente nella pagina Web o possono essere utilizzati dalla pagina Web esternamente. Il CSS è molto efficiente per i siti, in particolare i siti con molte pagine in quanto può essere utilizzato per modificare lo stile di più pagine Web, modificando facilmente solo un documento, in meno di un minuto che richiederebbe a volte più di 5 minuti modificando ogni pagina Web uno per uno.

Sintassi

[modifica]

La sintassi di base di uno stile CSS è la seguente:

selettore {  proprietà : valore   } / *Commento * / 

L'elemento selector definisce quali elementi HTML verranno selezionati con lo stile.

property indica la proprietà che viene modificata dallo stile.

value è il modo in cui gli elementi vengono modificati.

La sintassi CSS può essere inserita all'interno di un foglio di stile (.css) , in <head> o direttamente in linea all' interno di un file html.

Sintassi foglio di stile
[modifica]
 h1 {  color: rgb (10,60,110);   } / * Intestazione di dimensione 1 bluastra* / 
 p {  color: # 3300FF;   } / * Paragrafi blu * / 
 * {  color: blue ;   } / * Tutti gli elementi sono blu * / 
 h1 {  color: red;   } / * Tutte le intestazioni di dimensione 1 sono rosse * / 
 h1 h2 {  color: yellow;   } / * Tutte le intestazioni di dimensione 2 all'interno di un paragrafo di dimensione 1 sono gialle * / 
#Id {  color : red;   } / *Gli elementi con ID="Id" saranno di colore rosso * / 
.classe {  color : blue;   } / *Tutti gli elementi di classe "classe" saranno blu * / 

Sintassi in <head>

[modifica]
 <head> <style> h1 {  color: rgb (10,60,110);   }  </style> / * Tutti gli esempi precedenti sono applicabili, basta aggiungere il tag <style> * / 


Sintassi in linea

[modifica]
 <p color="blue">Testo</p> <span font-size="6px">Testo</p> / * Le funzioni sono le stesse, ma non è applicabile un selettore ed è necessario aggiungere " prima del valore * /