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 * /