Close

Appunti di CSS

 

CSS è il linguaggio che utilizziamo per definire uno stile di una pagina web

Abbiamo visto che un testo per il web viene scritto in linguaggio HTML, ma così esso appare monotono, impersonale e senza nessun tipo di abbellimento visivo.
Per rendere il nostro documento più accattivante dobbiamo quindi ricorrere all’aiuto di un altro linguaggio il CSS, che ci permette di creare dei fogli di stile. Questi daranno alla pagina web indicazione su come “apparire”: design, layout, variazioni di visualizzazione per diversi dispositivi e dimensioni dello schermo.

CSS= Cascading Style Sheets

Quindi riepilogando:

HTLML=contenuto della pagina web

CSS=stile della pagina web

Aggiungere, colori, spaziature, dimensioni, font, impaginazioni in linguagggio Html diventerebbe un impresa titanica, allora si ricorre all’aiuto del CSS, che con un solo file riesce a cambiare stile ad un sito intero!

CSS[ torna al menu ]

SINTASSI DEL CSS

Un comando Css è formato da due parti:
Selettore, cioè l’elemento Html che si vuole modificare.
Dichiarazione cioè le caratteristiche e i valori dell’elemento che si vogliono cambiare, in un comando, racchiuso tra {} si possono includere anche più dichiarazioni separate da ;.

La dichiarazione è a sua volta composta da due parti
Proprietà: la caratteristica dell’elemento
Valore: il valore che si vuole cambiare
separate tra loro da due punti

SELETTORE {DICHIARAZIONE;}Sintassi del CSS

DICHIARAZIONE= PROPRIETÀ: VALORE

Un esempio di sintassi di un comando Css può essere

p {color: red; text-align: center;}

p= selettore

color= proprietà

red= valore
{colore: red; text-align: center;}= dichiarazione

SELETTORI

Selettore= elemento Html che si vuole formattare
I selettori possono essere di vari tipi:
Semplici identificano i selettori in base alla tipologia: nome, ID, classe
Combinati
Pseudo classe
Pseudo elementi
Attributi
Noi ci interesseremo adesso ai selettori semplici, che a loro volta possono essere di diversi tipi

Selettori per nome

Identificano un tipo di elementi Html, quali
p, h, div, img
Con un comando di questo tipo tutti gli elementi appartenenti a quella classe presenti nel documento verranno formattati seguiendo il comando.

p {
color: red: text-align: center;
}
h2 {
color: blue; text-align: left;
}

Selettori ID

Tutti gli elementi presenti nel documento identificati da un determinato nome verranno formattati ugualmente. Un Identificativo viene caratterizzato dal simbolo # posto davanti al nome.

#para1 {
color:green; text-align:right;
}

Selettori per classe

Seleziona tutti gli elementi che dovranno presentare un attibuto particolare. Un seletore di classe viene identificato da un punto prima del nome

.center {
color:grey; text-align:center;
}

Selettori per elementi di classe

Con questo selettore si possono poi identificare anche classi particolari di elementi ad esempio

p.center {
text-align:center;
}

Selettori universali

Formattano in egual maniera tutti gli elementi di una pagina e sono identificati dal simbolo*.
* {
text-align:center; colr:red
}

Ragruppamento di selettori

Tutti gli elementi di un documento che devono avere stesse proprietà e valori possono venir raggruppati in un unico comando separati da virgole per semplificare il codice

p, h1, h2 {
color:red; text-align:center
}

CSS[ torna al menu ]

INSERIMENTO DEL CSS

I comandi di Css ad un documento possono venir impartiti in modi diversi:

CSS ESTERNO

Si crea un foglio con estensione .css che viene inserito nell’head del documento HTML di un documento web e che da le direttive di formattazione dell’intero documento.

CSS Esterno Sintassi

Ogni pagina HTML deve includere un riferimento al file del foglio di stile esterno all’interno dell’elemento, all’interno della sezione head.

Un foglio di stile esterno può essere scritto in qualsiasi editor di testo e deve essere salvato con estensione .css.

CSS INTERNO

Css Interno

Comando che va  a modificare la formattazione di tutta una pagina web, si inserisce all’interno della sezione Style sempre nel Head del documeno HTML.

 

 

CSS IN LINEA

Per modificare soltanto un elemento si può invece utilizzare il Css in linea, che va introdotto anc’esso nell’head del documento e viene contraddistinto dal tag style relativo al solo elemento da modificare.

Css in linea esempio
Se alcune proprietà sono state definite per lo stesso selettore (elemento) in diversi fogli di stile, verrà utilizzato il valore dell’ultimo foglio di stile letto.
Quindi il Css in linea prevarrà sull’interno e sull’esterno.

 

 

 

Tutti gli stili in una pagina verranno “a cascata” in un nuovo foglio di stile “virtuale” in base alle seguenti regole, dove il numero uno ha la massima priorità:

  1. Stili in linea
  2. Fogli di stile interni
  3. Fogli di stile esterni
  4. Stile in linea
  5. Impostazione predefinita del browser

Quindi, uno stile in linea ha la massima priorità e sovrascriverà gli stili esterni e interni e le impostazioni predefinite del browser.

CSS[ torna al menu ]

ELEMENTI DEL CSS

BORDI

Le proprietà del bordo CSS consentono di specificare lo stile, la larghezza e il colore del bordo di un elemento e si identificano con il tag; border-style, in genere vengono indicati come stile di classe identificativo e inseriti nella parte style dell head.

p.dotted {border-style: dotted;} bordo puntinato
p.dashed {border-style: dashed;} bordo a trattini
p.solid {border-style: solid;} bordo solido
Nel bordo potrà poi essere indicata anche la grossezza (width), il colore (color)

p. one [
border-style:solid;
width: 2px
color:red;
border-radius:5px
}

Le proprietà del bordo potranno sempre venir variate sui vari lati, se non si indica nulla di diverso tutti i bordi avranno le stesse caratteristiche altrimenti bisognerà differenziarli in senso orario o con i suffissi top, right, bottom,left.

Si può accorciare quindi scrivendo:

p.one
{
5px solid red
}
in questo modo tutti i bordi saranno rossi, solidi e di spessore 2, con bordi arrotondati di 5.

MARGINI

Attorno al bordo si possono creare degli spazi che in Css chiameremo margin, anche qui verranno elencati in ordine orario o con gli stessi suffissi.

p.one {margin 0 0 0 25}

Si possono anche accorpare i valori sia di bordi che di margini a due a due, in questo caso avremo
p.one [margin 25 50px}
margine sopra e sotto più contenuto a 25 e margini laterali a 50.

È possibile impostare la proprietà margin su auto per centrare orizzontalmente l’elemento all’interno del suo contenitore.

L’elemento assumerà quindi la larghezza specificata e lo spazio rimanente verrà diviso equamente tra i margini sinistro e destro.

PADDING

Intorno all’elemento all’interno del bordo si può creare un imbottitura detta Padding.

Per gestire questa proprietà valgono le stesse regole viste prima.

MODEL BOX

In pratica l’insieme di margin border, padding e content creeranno il mio model Box che potrà venir variato in base alle esigenze del caso.

Model box Css

Al di fuori del model box poi potremo ancora inserire dello spazio detto Outline, con lo scopo di far risaltare un elemento.

 FORMATTAZIONE TESTO

Ovviamente il Css permette anche di formattare il testo in colore, font, grandezza, spaziatura, sfondo, allineamento, ecc…

p {

color:black:

text-align:left;

font-size: 20px;

background-color: red;

}

 

[/vc_column_text][/vc_column][/vc_row]

Related Posts

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *