Chè’cose CSS?
Alexander Zavala
CSS é l’acronimo di Cascading Style Sheets (fogli di stile in cascata)
Un foglio di stile specifica come un browser deve posizionare,
formattare e visualizzare i vari elementi che compongono una pagina web.
Un foglio di stile è una collezione di regole stilistiche che definiscono il look & feel dei elementi.
Uno stile può essere interno ad un file .html oppure può essere un file di testo con estensione .CSS .
In questo modo CSS permette di separare lo stile dal contenuto e di definire le regole generali per formattare un elemento. sostanzialmente si occupa della grafica del sito web
Come si collega il CSS3 al HTML
per collegare il CSS all’HTML esistono varie tipologie di impostazioni.
Il CSS in linea. Il CSS interno e il CSS esterno
Il CSS in linea è inserito all’interno della pagina web e per la precisione proprio all’interno del tag
tramite l’attributo style. esempio:
< h1 style=”color: red;”> Ciao < /h1 >
il css interno è inserito all’interno della pagina web tramite il tag style e questo si trova nel body
il CSS esterno si salva in formato CSS il file e si deve creare nella pagina di html di riferimento.
per il colegamento bisogna usare la seguente stringa di codice::after
< link rel=”stylesheet” href=”style.css” type=”text/css”>
nel attributo href va scritto il path di CSS
Creazione di una regola
Per creare una regola in CSS serve una semantica ben precisa che cambia per tipologia.
| ID | CLASS | TAG |
|---|---|---|
| id o identificatore serve per creare una regola univoca |
Class o classe serve per creare una regola che può essere ripetuta |
Tag serve a creare una regola per quel determinato tag |
| #nome_regola{ Proprietà:valore; } |
.nome_regola{ Proprietà:valore; } |
Tag{ Proprietà:valore; } |
| La regola id contiene: Il cencelletto che rappresenta l’id Il nome della regola L’apertura della parentesi graffa che rappresenta l’inizio della regola La proprietà che è caratterizzata da una parola in inglese separata dal suo valore e conclusa con un punto e virgola La chiusura della parentesi graffa che va a definire la chiusura della regola |
La regola class contiene: Il punto che rappresenta la classe Il nome della regola L’apertura della parentesi graffa che rappresenta l’inizio della regola La proprietà che è caratterizzata da una parola in inglese separata dal suo valore e conclusa con un punto e virgola La chiusura della parentesi graffa che va a definire la chiusura della regola |
La regola class contiene: Il punto che rappresenta la classe Il nome della regola L’apertura della parentesi graffa che rappresenta l’inizio della regola La proprietà che è caratterizzata da una parola in inglese separata dal suo valore e conclusa con un punto e virgola La chiusura della parentesi graffa che va a definire la chiusura della regola |
per andare a definire una porzione di pagina html che deve seguire una regola css si usa il tag
< div > esso va pensato come una scatola al cui interno viene rispettata la regola descritta
le proprietà CSS
Stili di testo
| Proprietà | Valori | Spiegazione |
|---|---|---|
| Color | < colore > | Mette il colore al testo |
| direction | 1 ltr 2 rtl |
Imposta la direzione del test: 1. ltr(da sinistra verso destra) 2. rtl (da destra verso sinistra) |
| Letter-Spacing | 1 normal 2 < lungezza > |
Diminuire o aumentare lo spaziobianco tra i caratteri. 1. normale(definisce uno spazio regolato tra i caratteri) 2. < lunghezza >(definisce uno spaazio fisso tra i caratteri) |
| text-align | 1 Left 2 right 3 center 4 justify |
Alineare il testo 1 left(allinea il testo a sinistra); 2 right (allinea il testo a destra); 3 center (alinea il testo centrale); 4 justify (allinea il testo sia sul lato destro sia sul lato sinistro). |
|---|---|---|
| text-decoration | 1 none 2 underline 3 overline 4 line-through 5 blink |
Elementi decorativi al testo. 1. none (definisce il testo normale) 2. underline (definisce il testo sottolineato) 3. overline (definisce il testo con una barra sopra) 4. linethrough (definisce il testo barrato) 5. blink (definisce il testo lampeggiante). |
| text-indet | 1. % 2. < lunghezza > |
Regolarel’indentazione del testol 1. < lunghezza > (definisce un’identazione fissa): 2. % (definisce un’identazione in percentuale). |
| Text-transform | 1. none 2. capitalize 3. uppercase 4. lowercase |
Varie il formato del testo 1. none(nessuna variazione). 2. capitalize(la prima lettera di ogni singola parola è scritta in maiuscolo) 4. lowercase(ogni lettera di ogni parola è scritta in maiuscolo); |
0
| white-space | 1. normal 2. pre 3 nowrap |
Trattamento degli spazi bianchi presenti in un elemente 1. none (valore di deafult. gli spazi bianchi sono ridotti a uno) 2. pre(gli spazi bianchi e l’inizio di nuove righe sono mantenuti così come sono nel codice); 3. nowrap(gli sapzi bianchi sono ridotti a uno e l’andata a capo è disabilitata). |
Stile dei caratteri
| Proprietà | Valori | Spiegazione |
| font-family | 1.< famiglia- caratteri > 2. < famiglia-generica > |
Accetta più tipi di caratteri, separati da una virgola, per consentire scelte alternative qualora il carattere scelto non fosse disponibile per il programma utente. |
| font-size | 1. x-small, x-small , small, medium, large, x-large, xxlarge 2. smaller 3. larger 4. < lunghezza > 5. % |
La proprietà fontsize consente di impostare la dimensione del carattere. 1. x-small, x-small , small, medium, large, x-large, xx-large (impostano la dimensione del carattere a partire dalla più piccola alla più grande); 2. smaller (imposta la dimensione del carattere inferiore a quella dell’elemento padre); 3. Large (imposta la dimensione del carattere superiore a quella dell’elemento padre); 4. < larghezza > (imposta una dimensione fissa del carattere); 5. % (imposta la dimensione del carattere in percentuale rispetto a quella dell’elemento padre) |
| font-size | 1. normal 2. italic 3. oblique |
Consente di impostare lo stile del carattere. 1. normal (valore predefinito); 2. italic (corsivo); 3. oblique (obliquo); |
| font-variant | 1. normal 2. small-caps |
Consente di impostare il formato del carattere. 1. normal (valore predefinito); 2. small-caps (maiuscolo) |
| font-weight | 1. Normal 2. Bold 3. Bolder 4. lighter 5. 100, 200, 300, 400, 500, 600, 700, 800, 900, |
impostare la formatazione del carattere. 1. normal(valore predefinito); 2. bold(Grassetto) 3. bolder(più Grassetto); 4. lighter(sottile) 5. 100, 200, 300, 400, 500, 600, 700, 800, 900 (dal più sottile al più grassetto). |
Stie dei bordi
| Proprietà | Valori | Spiegazione |
| border-collapse | 1 Colappse 2 Separate |
Eliminare lo spazio tra i bordi delle diverse celle e tra le celle e il bordo della tabella separate 1. collapse (le celle sono adiacenti e i bordi collassano). 2. separate (le celle sono separate) |
| border-color | color | Utilizzata per impostare il coloredi ogni singolo lato |
| border-spacing | < lunghezze > | impostare spazio tra i bordi delle diverse celle e tra le celle e il bordo della tabella. tale spazio può essere impostato tramite misure di lungezza. |
| Border-style | 1. None 2. hidden 3. dotted 4. dashed 5. solid 6. double 7. groove 8. ridge 9. inset 10. outset |
Stile di ogni singolo lato 1. none (non definisce nessun bordo); 2. hidden (usato con le tabelle, ha lo stesso effetto di none). 3. dotted (definisce una linea punteggiata); 4. dashed (definisce una linea tratteggiata); 5. solid (definisce una linea continua singola); 6. double (definisce una doppia linea continua); 7. groove (definisce il bordo scavato); 8. ridge (definisce il bordo sbalzato). 9. inset (definisce il bordo incastonato). 10. outset (definisce l’effetto oppostoa inset). |
Stile CSS del padding
| Proprietà | Valori | Spiegazione |
| padding-bottom | 1 < lunghezza > | spazio che deve essere lasciato tra i contenuti di un elemento e il suo bordo o il suo margine inferiore 1.< lungezza >(px,em,etc…); 2. % (valori precntuali). |
| padding-left | 1. < lunghezza > 2. % |
Spazio che deve essere lasciato tra i contenuti di un elemento e il suo bordo o il suo margine sinistro 1. < lunghezza >(px,em,etc…); 2. % (valori percentuali). |
| padding-right | 1. < lunghezza > 2. % |
Spazio che deve essere lasciato tra i contenuti di un elemento e il suo bordo o il suo margine destro 1. < lunghezza > (px,em, etc.); 2. % (valori percentuali) |
| padding-top | 1. < lunghezza > 2. % |
Spazio che deve essere lasciato tra i contenuti di un elemento e il suo bordo o il suo margine superiore 1. (px,em, etc.); 2. % (valori percentuali). |
Stile delle tabelle
| Proprietà | Valori | Spiegazione |
| border-collapse | 1. collapse 2. separate |
Eliminare lo spazio tra bordi delle diverse celle e tra le celle e il bordo della tabella 1. separate(le celle sono separate); 2. collapse(le celle sono adiacenti e i bordi collassano). |
| border-spacing | 1. lunghezza | impostare lo spazio tra i bordi delle diverse celle e il bordo della tabella |
| caption-side | 1. top 2. bottom 3. left 4. right |
Lato sul cui far comparire il titolo della tabella |
| empty-cells | 1. show 2. hide |
Trattamento delle celle di tabella senza contenuto 1. show (mostra i bordi della cella); 2. hide (i bordi non vengono mostrati e apparirà solo uno spazio vuoto). |
| table-layout | 1. auto 2. fixed |
Imposta il metodo di layout di una tabella 1. auto (il layout della tabella viene definito automaticamente dal browser); 2. fixed (le regole di presentazione sono quelle impostate dall’autore nel CSS). |
stile degli sfondi
| background-attachment | 1. scoll 2. fixed |
Un’immagine posta come sfondo debba o meno scorrere assieme al testo. 1. scroll impone all’immagine di scorrere assieme al testo, mentre il valore 2. fissa la posizione dell’immagine indipendentemente dal testo. |
| background-color | 1. color-rgb 2. color-hex 3. color-name 4. transparent |
Serve ad applicare il colore di sfondo 1. color-rgb (255,0,0); 2. color-hex (#cc00cc); 3. color-name(red,green, blue, etc.); 4. transparent (il colore dello sfondo è trasparente). |
| background-image | 1 url 2 none |
Un imaggine di sfondo 1 url(indica il percorso relativo all’imagine); 2 none(imposta il valore predefinito, ovvero nessuna imaggine) |
| background-repeat | 1. repeat 2. repeat-x 3. repeat-y 4. no-repeat | l’immagine di sfondo viene ripetuta · repeat (valore predefinito): l’immagine viene ripetuta orizzontalmente e verticalmente; · repeat-x (l’immagine viene ripetuta solo orizzontalmente); · repeat-y (l’immagine viene ripetuta solo verticalmente); · no-repeat: (l’immagine non viene ripetuta e si avrà una sola occorrenza della stessa). |
Stile di posizionamento degli elementi
| Proprietà | Valori | Spiegazione |
| Bottom | 1 auto 2 % 3 < lunghezza > |
Specifica, per i box posizionati in modo assoluto, la distanza che intercorre tra la parte inferiore dell’elemento e la finestra del browser 1. auto (valore predefinito); 2. % (imposta la distanza in percentuale); 3. < lunghezza > (imposta la distanza in px, cm,etc.) |
| clip | 1 shape 2 auto |
Imposta la forma di un elemento: 1 shape(imposta la forma dell’elemento). 2 auto(valore predefinito); |
| left | 1 auto 2 % 3 < lunghezza > |
Specifica, per i box posizionati in modo assoluto, la distanza che intercorre tra la parte sinistra dell’elemento e la finestra del browser 1. auto (valore predefinito); 2. % (imposta la distanza in percentuale); 3. < lunghezza > (imposta la distanza in px, cm,etc.). |
| overflow | 1 visible 2 hidden 3 scroll 4 auto |
All’interno di un box supera in larghezza la dimensione impostata per il box stesso, il comportamento del programma utente è regolato dalla proprietà. 1. visible (valore predefinito); 2. hidden (indica che il contenuto eccedente deve essere tagliato). 3. scroll (indica che il blocco contenitore deve essere fornito di barre di scorrimento); 4. auto (indica che il blocco contenitore deve essere fornito di barre di scorrimento se e solo se richieste); |
| position | 1 static 2 relative 3 absolute 4 fixed |
Consente di alterare la posizione di un blocco nei diversi elementi sono inseriti 1. static (prevede il normale comportamento dei box all’interno del flusso); 2. relative (prevede lo spostamento di un elemento relativamente alla posizione che assume normalmente nel flusso); 3. absolute (un blocco posizionato in modo assoluto può essere collocato in un qualsiasi punto della pagina, indipendentemente dalla presenza degli altri elementi all’interno del flusso); 4. fixed (lo stesso del posizionamento assoluto con la differenza che i blocchi rimangono ancorati alla posizione iniziale e il riferimento è sempre la finestra del browser) |
| right | 1 auto 2 % 3 < lunghezza > |
Specifica, per i box posizionati in modo assoluto, la distanza che intercorre tra la parte destra dell’elemento e la finestra del browser 1. auto (valore predefinito); 2. % (imposta la distanza in percentuale); 3. < lunghezza > (impostala distanza in px, cm,etc.). |
| top | 1 auto 2 % 3 < lunghezza > |
Specifica, per i box posizionati in modo assoluto, la distanza che intercorre tra la parte superiore dell’elemento e la finestra del browser 1. auto (valore predefinito); 2. % (imposta la distanza in percentuale); 3. (imposta la distanza in px, cm,etc.) |
| vertical-align | 1. baseline 2. sub 3. super 4. top 5. text-top 6. middle 7. bottom 8. text-bottom 9. < lunghezza > 10. % |
Consente di alterare la reciproca posizione tra testo e immagine. 1. baseline (l’elemento è posizionato sulla linea base dell’elemento padre); 2. sub (pedice); 3. super (apice); 4. top (allinea alla parte estrema superiore della linea); 5. · text-top (allinea alla parte estrema superiore del carattere dell’elemento padre); 6. middle (l’elemento è posizionato alla parte centrale dell’elemento padre); 7. bottom (allinea alla parte estrema inferiore della linea) 8. text-bottom (allinea alla parte estrema inferiore del carattere dell’elemento padre); |
stilep per le liste
| Proprietà | Valori | Spiegazione |
| list-style-image | 1. none 2. url |
Sostituisce al punto elenco un’immagine 1. none (non sarà visualizzata nessuna immagine); 2. url (indica il percorso dell’immagine di associare all’elenco). |
| list-style-position | 1. inside 2. outside |
La posizione del punto elenco. 1. inside (indenta il punto elenco e il testo); 2. outside (mantiene il punto elenco alla sinistra del testo). |
| list-style-type | 1. none 2. disc 3. circle 4. quare 5. decimal 6. decimalleading-zero 7. lower-roman 8. upper-roman 9. lower-alpha 10. upper-alpha |
mposta il tipo di punto elenco. 1. none (nessun punto); 2. disc (cerchietto pieno); 3. circle (cerchietto); 4. square (quadrato); 5. decimal (numero); 6. decimal-leadingzero (numero che inizia con la doppi cifra – 01, 02); 7. lowerroman (numero romano piccolo – i, ii, iii, etc.); 8. upperroman (numero romano grande – I, II, III, etc.); 9. loweralpha (minuscolo – a, b, c,etc.); 10. · upperalpha (maiuscolo – (A, B, C, etc.); |
CSS3 Hover
Hover é un comando che permette di creare una classe che viene attivata solo nel momento in cui il cursore del mouse passa sopra a una determinata area, come tasti, link, caselle, e immagini.
Questo ci permette di alternare una rego la rispetto all’altra.
Css3 Animazioni
CSS ci permette di creare animazioni direttamente nel browser, senza l’uso di JavaScript o altri linguaggi di scripting.
Le animazioni CSS definite all’interno di un blocco “@keyframes”
il “keyframes” definisce in vari step dell’animazione specificando i valori degli siti. by il Team di Agenzia Grafica Milano
