I CSS.

Cos'è I CSS (Cascading Style Sheets) designa un linguaggio di stile per i documenti web. Istruiscono un browser o un altro programma utente su come il documento debba essere presentato all’utente L’acronimo CSS sta per Cascading Style Sheets (fogli di stile a cascata) e designa un linguaggio di stile per i documenti web. I CSS istruiscono un browser o un altro programma utente su come il documento debba essere presentato all’utente, per esempio definendone i font, i colori, le immagini di sfondo, il layout, il posizionamento delle colonne o di altri elementi sulla pagina, etc.

Elementi Blocco e Inline
Nell'HTML gli elementi si distinguono in 2 categorie Elementi BLOCCO possono contenere altri elementi blocco e altri elementi inline quando un elemento blocco è inserito, viene creata una nuova riga nel testo Elementi INLINE non possono contenere elementi blocco, ma solo altri elementi inline e testo Nell'HTML gli elementi si distinguono in 2 categorie: elementi BLOCCO ed elementi INLINE. Gli elementi blocco sono quelli che possono contenere altri elementi blocco e altri elementi inline; quando un elemento blocco è inserito, viene creata una nuova riga nel testo; un esempio possono essere i vari <p>, <h1> e altri elementi di testo; se infatti scrivo <h1>Titolo</h1> viene creata una nuova riga nella pagina html in cui verrà visualizzata la scritta Titolo. Gli elementi inline, invece, non possono contenere elementi blocco, ma solo altri elementi inline (oltre che, ovviamente, il loro stesso contenuto, essenzialmente testo). Come si può notare, quando sono inseriti nel documento non danno origine ad una nuova riga. Un esempio possono essere gli elementi <a>, <b>, <i> etc. che non creano nessun'altra riga quando inseriti ma attribuiscono delle caratteristiche al testo inserito in questi.

Elementi Blocco e Inline
Gli elementi in nero sono tutti box “blocco”; quelli in rosso sono “inline”

Altre categorie Elementi Lista e Connessi alle tabelle
Proprietà Display Elementi Rimpiazzati ed Elementi non Rimpiazzati Accanto a queste due fondamentali tipologie di elementi, il modello di formattazione dei CSS prevede altre due categorie: quella degli elementi lista e quella degli elementi connessi alle tabelle. Tramite i CSS possiamo modificare la modalità di visualizzazione attraverso la proprietà display. Grazie a quest’ultima, per fare solo un esempio, possiamo fare in modo che un titolo <h1> (elemento blocco) venga mostrato come un elemento in linea; oppure far sì che un elemento <a> (inline) sia reso come un elemento blocco. Bisogna inoltre fare una distinzione tra “Elementi Rimpiazzati” ed “Elementi non rimpiazzati”; i primi sono quelli in cui altezza e larghezza sono definite dall’elemento stesso e non da ciò che lo circonda. Negli altri invece, le dimensioni dipenderanno dagli altri elementi della pagina. Un esempio di Rimpiazzati sono <img>, <textarea> etc. Quasi tutti gli altri sono Non rimpiazzabili. Altra cosa importante è la struttura ad albero della pagina html. Infatti, se noi diamo un certo attributo al tag <body>, tutti i suoi elementi “figli”, ovvero gli altri tag racchiusi tra <body> e </body> saranno spesso soggetti alle stesse caratteristiche.

Parti del CSS: Regole il selettore il blocco delle dichiarazioni
definisce la parte del documento cui verrà applicata la regola il blocco delle dichiarazioni Al suo interno si possono trovare più dichiarazioni Composto da proprietà e valore L’illustrazione mostra la tipica struttura di una regola CSS. Essa è composta da due blocchi principali:il selettore e il blocco delle dichiarazioni. Il selettore serve a definire la parte del documento cui verrà applicata la regola. In questo caso, ad esempio, verranno formattati tutti gli elementi <h1>: lo sfondo sarà rosso, il colore del testo bianco. I selettori possono essere di diverso tipo e a queste tipologie dedicheremo una sezione specifica della guida. Per il momento sia chiara la funzione che essi svolgono. Il blocco delle dichiarazioni è delimitato rispetto al selettore e alle altre regole da due parentesi graffe, la prima di apertura e la seconda di chiusura. Al suo interno possono trovare posto più dichiarazioni. Una dichiarazione è composta da una coppia:proprietà;valore. La proprietà definisce un aspetto dell’elemento/selettore da modificare (margini, colore di sfondo, larghezza, etc) secondo il valore espresso. Proprietà e valore devono essere separati dai due punti. Le dichiarazioni vanno invece separate con un punto e virgola. Non è obbligatorio, ma è buona norma mettere il punto e virgola anche dopo l’ultima dichiarazione del blocco.

Parti del CSS: Commenti e @-rules
/* COMMENTO */ @rules Regole che possono essere scritte direttamente nell'HTML oppure all'interno del CSS stesso. <style type="text/css"> @import url(stile.css); </style> contraddistinte dalla chiocciola, sono regole che possono essere scritte o direttamente nell'HTML della nostra pagina oppure all'interno del CSS stesso. Di solito vengono messe comunque nel documento HTML @IMPORT Serve per definire a quale foglio css deve fare riferimento la nostra pagina html

Regole fondamentali del CSS
I valori relativi ai tag non vanno mai messi tra virgolette, tranne quando il valore è una stringa di testo o quando si fa riferimento a un font che si chiama con più parole Non si devono lasciare spazi tra il valore e la sua unità di misura Nel Css ci sono due regole fondamentali: 1) I valori relativi ai tag non vanno mai messi tra virgolette, tranne quando il valore è una stringa di testo (solo con i tag content o quotes) o quando si fa riferimento a un font che si chiama con più parole (ex. Posso scrivere Georgia senza virgolette, ma “Times New Roman” necessita delle virgolette). 2) Non si devono lasciare spazi tra il valore e la sua unità di misura (ex. È giusto scrivere 15px ed è sbagliato scrivere 15 px)

Numeri: possono essere definiti come numeri interi (1, 23, 45, etc
Numeri: possono essere definiti come numeri interi (1, 23, 45, etc.) o in virgola mobile (1.2, 3.45, 4.90, etc.); ricordarsi che non si usa il simbolo “,” ma il “.” per indicare i decimali. unità di misura percentuali codici per la definizione dei colori URL parole chiave (keywords) stringhe di testo /* Altezza di linea con un numero */ p {line-height: 1.2;} /* Larghezza con unità di misura */ div {width: 300px;} /* Larghezza in percentuale */ div {width: 60%;} /* Colore con codice esadecimale */ body {background-color: #2795b6;} /* URL per un'immagine di sfondo */ body {background-image: url(sfondo.jpg);} /* Ripetizione dello sfondo con una keyword */ body {background-repeat: no-repeat;} /* Stringa di testo */ content: "Viva i CSS";

Riferimenti ad un foglio CSS
Tag <style> <head> <link href="stile.css" rel="stylesheet" type="text/css"> </head> @import Altra possibilità: CSS di linea Attributo Descrizione rel Descrive il tipo di relazione tra il documento e il file collegato. È obbligatorio. Per i CSS due sono i valori possibili: stylesheet e alternate stylesheet. href Serve a definire l’URL assoluto o relativo del foglio di stile. È obbligatorio type identifica il tipo di dati da collegare. Per i CSS il valore da usare è text/css Riferimento a un foglio css: si può usare un tag HTML <style> che abbiamo già visto. Si possono inserire fogli incorporati scrivendo il testo css dopo il tag <style type="text/css"> Infine esiste la possibilità di definire dei “css di linea” che verranno applicati solo a quell'elemento con l'attributo style

Attributo Media Definisce a seconda del dispositivo che si sta usando a quale css fare riferimento Valore Descrizione all il CSS si applica a tutti i dispositivi di visualizzazione screen schermo di computer print pagina stampata projection presentazioni e proiezioni speech dispositivi a sintesi vocale braille supporti basati sull’uso del braille embossed stampanti braille handheld dispositivi mobili con schermo piccolo e in genere dotati di browser con limitate capacità grafiche tty dispositivi a carattere fisso come i terminali tv visualizzazione su schermi televisivi L'attributo media serve per definire a seconda del dispositivo che si sta usando a quale css fare riferimento. E' un attributo facoltativo, di predefinita è posto su all; per esempio, se scrivo <link href="print.css" media="print" rel="stylesheet" type=”text/css”> quel media=”print” significa che quel foglio di stile verrà applicato solo ai fogli da stampare Volendo si possono definire più dispositivi per ogni css Spesso vengono scritti più tag <link> per definire più css da usare a seconda del dispositivo.

Selettori Selettore universale: * {color: red;} Selettori semplici
h1 {color: red;} Selettori raggruppati Al posto di scrivere lo stesso parametro per più selettori, come nell'esempio h1 {background: white;} h2 {background: white;} h3 {background: white;} Possiamo usare una soluzione che li raggruppa, più efficace: h1, h2, h3 {background: white;} Come detto in precedenza ci sono dei selettori nel css a cui vengono applicati alcuni attributi; per esempio, in h1{color: red;} h1 è il selettore. Esiste un selettore universale che sta a indicare tutti i selettori esistenti (titoli, paragrafi, sottotitoli etc.) che è il carattere *

Id e Classi Definendo nel css una classe, alla quale daremo alcuni parametri, basterà richiamarla da qualunque elemento dell'html per attribuire a quell'elemento le caratteristiche definite in quella classe nel css. Le Classi si usano più volte nel testo, l'Id massimo una Sono gli strumenti più potenti del css. Definendo nel css una classe, alla quale daremo alcuni parametri (tipo sfondo, colore del testo, font, dimensione etc.), basterà richiamarla da qualunque elemento dell'html per attribuire a quell'elemento le caratteristiche definite in quella classe nel css. L'Id è un elemento che di solito si usa massimo una volta nel testo. Per esempio, se devo definire le caratteristiche del titolo della pagina (normalmente c'è un solo titolo per pagina) userò un ID. Se invece volessi creare una classe che mi rende il testo del paragrafo blu (ovvero una cosa che penso di poter usare spesso, perchè in una pagina ci sono tanti paragrafi) userò una classe

Definire una Classe Metodo base .nomeclasse {color: white;}
p.nomeclasse {color: white;} Nell'HTML <p class="nomeclasse">Ciao a tutti</p> Il metodo base è, una volta scelto il nome della classe, scrivere .nomeclasse {color: white;} ovvero il nome della classe preceduto da un punto, e all'interno delle graffe tutti gli attributi. Ovviamente nel nostro HTML ci saranno vari elementi che potranno richiamare la classe “nomeclasse”, come paragrafi, titoli, sottotitoli, link etc. Se vogliamo che, per esempio, solo i paragrafi che richiamano “nomeclasse” abbiano davvero le caratteristiche di quella classe dovremo creare nel css una classe che si chiami p.nomeclasse {color: white;} in questo modo solo ai paragrafi contenenti un riferimento alla classe “nomeclasse” avranno quegli attributi. Nell'html useremo quindi <p class="nomeclasse">Ciao a tutti</p> per richiamare una certa classe del css

Definire un Id Metodo base #nomeID {color: white;} Nell'HTML
<p id="nomeID">Ciao a tutti</p> Selettori ad attributo p[title=”Prova”] {color: red;} <p title=”Prova”> Per il selettore id basta sostituire al “.” un “#”. Per esempio #nomeID {color: white;} e nell'HTML lo richiameremo così: <p id="nomeID">Ciao a tutti</p> Si possono anche creare dei “Selettori ad attributo” con la seguente sintassi in css: elemento[attributo] {dichiarazioni;} Per esempio, se voglio che una certa categoria di paragrafi (per esempio quelli con titolo “Prova”) abbia il testo rosso in css dovrò scrivere p[title=”Prova”] {color: red;} e nella pagina html <p title=”Prova”>

Le Pseudo Classi selettore:pseudo-classe {dichiarazioni;}
Pseudo classi per i link :link e :visited a:link {color: white;} a:visited {color: red;} Pseudo classi dinamiche :hover, :active e :focus a:hover {color: yellow;} a:active {color: green;} a:focus {background: pink;} Una pseudo-classe è un modo per impostare lo stile di un elemento al verificarsi di certe condizioni. La sintassi usata è questa: selettore:pseudo-classe {dichiarazioni;} Pseudo classi per i link :link serve a impostare lo stile dei link non ancora visitati :visited serve ad impostare lo stile dei link visitati Esempio: a:link {color: white;} a:visited {color: red;} Pseudo classi dinamiche Servono per impostare lo stile di un elemento a seconda di un'azione dell'utente. :hover serve per modificare lo stile di un elemento quando il mouse ci passa sopra (esempio menù a tendina o link) a:hover {color: yellow;} :active serve a modificare lo stile dell'elemento nel momento in cui premiamo il pulsante del mouse (dal click al rilascio). a:active {color: green;} :focus serve per impostare lo stile dell'elemento quando ci posizioniamo con il cursore al suo interno. E' spesso usato per i form; a:focus {background: pink;}

Pseudo Elementi Elementi creabili con il css che, se esistono, acquistano certe caratteristiche definite :first-letter p:first-letter {color: white; font-weight: bold;} :first-line p:first-line {color: red;} Sono degli elementi creabili con il css che, se esistono, acquistano certe caratteristiche definite :first-letter serve a definire delle caratteristiche solo per la prima lettera di un elemento. Per esempio p:first-letter {color: white; font-weight: bold;} :first-line serve a definire delle caratteristiche solo per la prima lettera di un elemento. p:first-line {color: red;}

:before e :after Servono per inserire all'interno del documento html un elemento prima o dopo un elemento da noi scelto p:before {content: "Nuovo paragrafo";} Meritano menzione speciale perchè sono i più usati. Servono per inserire all'interno del documento html un elemento (una stringa di testo, un numero, un link, un'immagine o altro) prima o dopo un elemento da noi scelto. Per esempio, se scrivo p:before {content: "Nuovo paragrafo";} Prima di ogni paragrafo ci sarà la scritta “Nuovo paragrafo”. Ovviamente questa si può formattare scrivendo altri attributi sempre all'interno delle graffe

Box Model Diviso in Area del contenuto Padding Bordo Margine
Nei Box Model ci sono delle aree da saper riconoscere: - L’area del contenuto. È la zona in cui trova spazio il contenuto vero e proprio: testo, immagini, video, etc. Le dimensioni orizzontali dell’area possono essere modificate con la proprietà width. Quelle verticali con height. - Il padding. È uno spazio vuoto che può essere creato tra l’area del contenuto e il bordo dell’elemento. Come si vede nella figura, se si imposta un colore di sfondo per un elemento, esso si estende dall’area del contenuto alla zona di padding. - Il bordo. È una linea di dimensione, stile e colore variabile che circonda la zona del padding e l’area del contenuto. - Il margine. È uno spazio di dimensioni variabili che separa un dato elemento da quelli adiacenti.

Proprietà del Box Model
Height, Min-height e Max-height Overflow Visible, hidden, scroll e auto Widht, Min-widht e Max-widht Height: può essere definita con un numero (in pixels), con una percentuale oppure con la scritta auto. In assenza dell'attributo height il valore predefinito sarà auto, ovvero dipenderà dal contenuto del box. Min-height: è l'altezza minima di un elemento. Può essere definita o con un numero, sempre in pixels, o con una percentuale. Max-height: ha le stesse caratteristiche di Min-height ma si può anche dare come valore none e non avrà un'altezza massima Overflow: serve per definire come comportarsi con gli elementi il cui contenuto supera l'altezza definita con le regole di prima; i possibili valori sono: visible: valore iniziale, il contenuto eccedente rimane visibile; hidden: il contenuto eccedente non viene mostrato; scroll: il browser crea barre di scorrimento che consentono di fruire del contenuto eccedente; auto: il browser tratta il contenuto eccedente secondo le sue impostazioni predefinite; di norma dovrebbe mostrare una barra di scorrimento laterale. Width: valgono le stesse cose dette per height. Esistono anche qui min-width e max-width

Sintassi nei Box Model Margini
margin-top, margin-bottom, margin-left e margin-right Padding padding-top, padding-bottom, padding-left e padding-right Per i margini esistono margin-top, margin-bottom, margin-left e margin-right che si possono esprimere o con un numero, o con una percentuale (per top e bottom sarà riferita all'altezza dell'elemento, per left e right alla sua larghezza) o con auto. Il padding si comporta esattamente come i margini, e si esprime nello stesso modo, con la differenza del valore auto che nel padding non è presente.

Sintassi nei Box Model Border Sintassi Classica selettore {
border-lato-color: valore; border-lato-style: valore; border-lato>-width: valore; } Abbreviata Unico Bordo div {border-left: 1px solid black;} Abbreviata div { border-width: 1px 2px 1px 2px; border-style: solid; border-color: black red black red; I bordi sono sempre border-top, bottom, left e right ma cambiano i parametri; ci sono width, style e color. Ci sono tre sintassi per scriverli: Sintassi Classica Specifichiamo di quale bordo si sta parlando, definiamo il parametro e i valori Abbreviata Unico Bordo Una abbreviata in cui si definiscono tutti i parametri dello stesso bordo insieme Abbreviata Ed infine una abbreviata in cui si da lo stesso valore di un certo parametro a tutti e quattro i bordi: Ricordiamo che l'ordine dei bordi è top, right, bottom, left e che quello dei parametri è widht, style e color.

Valori del tag style Stile bordo Descrizione none
l’elemento non presenta alcun bordo e lo spessore equivale a 0 hidden equivalente a none dotted bordo a puntini dashed bordo a lineette solid bordo solido e continuo double bordo solido, continuo e doppio groove tipo di bordo in rilievo ridge altro tipo di bordo in rilievo inset effetto ‘incastonato’ outset effetto ‘sbalzato’

Outline Bordo esterno al bordo
Utile ad evidenziare meglio l'oggetto a cui è applicata Tre parametri Width Style color Infine c'è l'outline, che è una sorta di bordo esterno al bordo, utile ad evidenziare meglio l'oggetto a cui è applicata. Anche questa ha tre parametri (width, style e color) e può assumere gli stessi valori dei bordi; valgono le stesse regole nella sintassi

Sfondo background-color background-image
selettore { background- image: url(valore); } background-repeat repeat L’immagine viene ripetuta in orizzontale e verticale. repeat-x L’immagine viene ripetuta solo in orizzontale. repeat-y L’immagine viene ripetuta solo in verticale. no-repeat L’immagine non viene ripetuta. background-attachment background-position Color: Può assumere come valore un qualunque colore oppure il valore transparent. Quest'ultimo permette di avere come sfondo del nostro elemento un qualcosa di trasparente, e si vedrà quindi il colore dell'elemento parente (per esempio lo sfondo della pagina). Image: Serve per inserire un'immagine di sfondo Repeat: Serve per ripetere l'immagine in una certa direzione Attachment: Serve per definire se l'immagine deve scorrere o meno insieme al testo quando si scorre la pagina. Può scorrere (scroll) o essere fissa (fixed). Position Definisce dove verrà posizionata un'immagine di sfondo o da dove ne inizierà la ripetizione. Normalmente si indica con 2 valori in pixel separati da uno spazio, che indicano le ordinate e le ascisse (partendo dal vertice in alto a sinistra della pagina) in cui posizionare l'immagine. background-position: 50px 30px; Altrimenti si può mettere come valore top, left, bottom, right e center.

Parametro Display Serve per cambiare di categoria un tipo di elemento
Valore Descrizione block l’elemento viene reso come un elemento blocco inline l’elemento a cui viene applicata assume le caratteristiche degli elementi inline inline-block l’elemento può assumere, come gli elementi blocco, dimensioni esplicite (larghezza e altezza), margini e padding, ma come tutti gli elementi inline, si disporrà orizzontalmente e non verticalmente, potendo essere circondato dal testo ed essendo sensibile all’allineamento verticale none l’elemento non viene mostrato; o meglio: è come se non fosse nemmeno presente nel documento, in quanto non genera alcun box; l’uso del valore noneè uno dei mezzi con cui, nei CSS, si può nascondere un elemento Serve per cambiare di categoria un tipo di elemento (per esempio da elemento blocco a elemento inline).

Parametri Float e Clear
Parametro Float serve per spostare su un lato della pagina e “isolare” una zona della pagina dal resto left, right e none Parametro Clear impedisce di far posizionare vicino a un elemento un altro elemento left, right, both e none Parametro Float Serve per spostare su un lato della pagina e “isolare” una zona della pagina dal resto. Può assumere i valori left, right e none (con none è come se non ci fosse il parametro float) Sia in larghezza che in altezza tende ad espandersi per tutta la pagina, quindi è necessario dargli delle misure definite o almeno una misura massima, specialmente di larghezza Parametro Clear Onde evitare che degli elementi float si posizionino uno di fianco all'altro o comunque in posizioni scomode per noi, il parametro clear impedisce di far posizionare vicino a un elemento un altro elemento. I valori che può assumere sono left, right, both (non ci saranno elementi né a destra né a sinistra) e none (come se non ci fosse il parametro)

Posizionare gli elementi
Attributo position Static Relative Absolute Fixed Attributo Visibility Visible Hidden Collapse Attributo position Può assumere diversi valori: static (predefinito), relative, absolute e fixed. Static: è il valore predefinito, indica che l'elemento occuperà la sua normale posizione nel flusso di testo Relative: indica che la posizione è relativa all'elemento in cui il nostro oggetto è contenuto. La posizione sarà quindi traslabile verso i bordi. Se scrivo top: 20px verrà allontanata dal bordo in alto di 20px, se scrivo top -20px verrà avvicinata al bordo in alto. {position: relative; top: 20px} Absolute: indicabile sempre con i 4 nomi dei bordi, ma è riferito all'elemento che lo contiene che abbia una posizione diversa da “static”. Questo non indica uno spostamento quindi verso un bordo ma la sua esatta posizione da quel bordo Fixed: Viene sempre definita la posizione con in 4 bordi ma il blocco è fisso nella pagina, ovvero la posizione è riferita a tutta la pagina e non agli elementi che lo contengono. Indica la sua posizione dal bordo e non lo spostamento verso quello. Visibility: Indica se un elemento debba essere visibile o non. La differenza con “display: none” è che, mentre quello lo rimuoveva proprio dal flusso di testo, ovvero quell'elemento non occupava spazio, questo è nel flusso di testo ma non è visibile. Può assumere tre valori: Visible, predefinito, lo rende visibile normalmente; Hidden, lo rende non visibile ma non lo rimuove dal flusso di testo; Collapse, usato per elementi di tabella (righe, celle, colonne)

Posizionare gli elementi
Z-index definisce l'ordine di posizionamento su più livelli di elementi sovrapposti Z-index: Serve per definire l'ordine di posizionamento su più livelli di elementi sovrapposti, ovvero quali mettere in primo piano etc. Se si definisce uno z-index basso questo starà su un livello basso, quindi sullo sfondo. Uno z-index alto lo porterà in primo piano.

Gestione del testo Font-Family
div {font-family: Georgia, "Times New Roman", serif;} Font-Size 7 valori letterali: xx-small, x-small, small, medium, large, x-large, xx- large I valori seguiti da unità di misura (ex. 20px) Valori relativi espressi con percentuale Font-Family Vengono definiti i font da usare per quel testo. Se ne può inserire più di uno, separati da virgola, perchè se quel font non fosse disponibile il browser tenterà il secondo. E' dovere inserire alla fine della lista dei font da provare una famiglia di font generica, in modo che il browser la usi in assenza degli altri font; le famiglie sono: serif, sans-serif, cursive, fantasy, monospace. div {font-family: Georgia, "Times New Roman", serif;} Font-Size Serve a esprimere la grandezza del font. Ci sono vari modi di definirla: - Ci sono i 7 valori letterali, che sono xx-small, x-small, small, medium, large, x-large, xx-large - I valori seguiti da unità di misura (ex. 20px) - Valori relativi espressi con percentuale

Gestione del testo Font-Weight
Valori in centinaia (da 100 a 900, la predefinita è 400) Valori bold, bolder o lighter Font-Style Normal, italic o oblique Font-Weight Serve a definire il “peso visivo” del testo, in poche parole a metterlo in risalto nella pagina. Si può esprimere o con valori in centinaia (ex. 100, 200, 300 etc. fino a 900) sapendo che la predefinita è 400, oppure con i valori bold (grassetto), bolder (più in risalto rispetto all'elemento che lo contiene) o lighter (meno in risalto rispetto all'elemento che lo contiene). Font-Style Serve a definire lo stile del testo. Può assumere 3 valori: - norma1 che è quello predefinito - italic che sarebbe il corsivo - oblique molto simile ad italic

Gestione del testo Line-Height Valore numerico da 1 in poi
Dimensione in pixels Dimensione in percentuale Text-Align Left, right, center e justify Text-Decoration None, underline, overline, line- through, blink Line-Height Tecnicamente ci permette di definire l'altezza della riga, ma in realtà è un modo per impostare l'interlinea tra le righe di testo. - Si può usare un valore numerico da 1 in poi, tenendo conto che l'altezza effettiva della linea sarà quella normale moltiplicata per il numero inserito. - Si può dare la dimensione in pixels - Si può dare la dimensione in percentuale, riferita alla dimensione del font. Text-Align Serve ad allineare il testo; i valori sono left, right, center, justify. Text-Decoration Serve per decorare il testo. Può assumere questi valori: - none: il testo non avrà alcuna decorazione particolare; - underline: il testo sarà sottolineato; - overline: il testo avrà una linea superiore; - line-through: il testo sarà attraversato da una linea orizzontale al centro; - blink: testo lampeggiante.

Le liste List-Style-Image
selettore {list-style- image: url(<url_immagine>);} List-Style-Position List-Style-Type Nelle liste col css possiamo impostare molte proprietà, come l'immagine degli elenchi puntati, che tipo di numerazione usare con i numerati etc. List-Style-Image Posso applicarla agli elementi ul, ol e li. La sintassi da usare è selettore {list-style-image: url(<url_immagine>);} List-Style-Position Può assumere i valori inside e outside. Se è inside sarà come il primo carattere del testo; se è outside apparirà fuori dall'elemento. List-Style-Type Definisce l'aspetto del marcatore

Le liste Valore Descrizione disc
un cerchietto pieno colorato; il colore può essere modificato per tutti i tipi con la proprietà color circle un cerchietto vuoto square un quadratino decimal sistema di conteggio decimale 1, 2, 3, ... decimal-leading-zero sistema di conteggio decimale ma con la prima cifra preceduta da 0 (01, 02, 03, ...) lower-roman cifre romane in minuscolo (i, ii, iii, iv, ...) upper-roman cifre romane in maiuscolo (I, II, III, IV, ...) lower-alpha lettere ASCII minuscole (a, b, c, ...) upper-alpha lettere ASCII maiuscole (A, B, C, ...) lower-latin simile a lower-alpha upper-latin simile a upper-alpha lower-greek lettere minuscole dell'alfabeto greco antico

Tabelle Table-Layout Fixed o auto Border-Collapse Collapse o separate
Border-Spacing Empty-Cells Show o hide Caption-side Ci sono delle proprietà per impostare lo stile delle tabelle nel css. Table-Layout E' la prima proprietà da definire; può assumere due valori: - fixed, che indica che le proprietà della tabella da visualizzare sono quelle definite dall'autore nel css - auto, che indica che il browser deve automaticamente visualizzare la tabella in un certo modo seguendo delle sue regole predefinite. Border-Collapse e Border-Spacing Border-collapse indica come dev'essere il bordo di una tabella. Può assumere 2 valori: - collapse, che indica che le celle condividono il bordo che le separa - separate, che indica che ogni cella ha il suo proprio bordo. Lo spazio tra i bordi delle varie celle, in quest'ultimo caso, sarà definito da Border-Spacing, che come valore assumerà un numero in pixel. Empty-Cells Gestisce il trattamento delle celle vuote. Può assumere 2 valori: - show, che mostra i bordi della cella - hide, che li nasconde e lascia al posto della cella quindi uno spazio bianco Caption-side In HTML di buona norma si deve dare un titolo alla tabella. Questo titolo sarà da scrivere tra i tag <caption> e </caption>. Nel css, con caption-side definiamo su quale lato della tabella vogliamo che appaia questo titolo. Può assumere i valori top, right, bottom e left.

I CSS.

Presentazioni simili

Presentazione sul tema: "I CSS."— Transcript della presentazione:

Presentazioni simili

Sul progetto

Feed-back

Entrare

Autorizzarsi attraverso i social network:

I CSS.

Presentazioni simili

Presentazione sul tema: "I CSS."— Transcript della presentazione:

Presentazioni simili

Sul progetto

Feed-back