In questa lezione, vedremo come modificare alcune proprietà-valore, utilizzando le spiegazioni del codice direttamente sul progetto del nostro sito.

Transcript

1 Corso html 5. Di Roberto Abutzu. Lezione 18 "CSS - Formattazione testo ed elementi". Formattazione css base degli elementi. In questa lezione, vedremo come modificare alcune proprietà-valore, utilizzando le spiegazioni del codice direttamente sul progetto del nostro sito. Non seguiremo uno schema prestabilito, ma faremo degli esempi, i più utilizzati con lo scopo di imparare la logica del linguaggio Css. Soprattutto con il nuovo Css3, le potenzialità di questo linguaggio si sono ampliate tantissimo. Comunque, è difficile poter riproporre in un corso base come questo tutte le sue potenzialità. Facciamo quindi degli esempi, utili per il nostro sito ma soprattutto didattici. Daremo un aspetto più gradevole al testo e agli elementi della pagina web, riordinando il layout. Poi, resta a voi applicare praticamente le nozioni riportate al progetto del vostro sito. Liste. Quando creiamo una ul, una lista non ordinata, per default ci viene messo un elenco puntato per ogni elemento della lista. Se volessimo disattivare questo, ecco il codice:

2 ul { list-style-type: none; } /* nessun simbolo */ Analizziamo il codice. Notate per prima cosa che c'è un commento. Stiamo lavorando su una tag, "ul", quindi il selettore verrà scritto col solo nome della tag stessa. List-style-type, si intende esattamente: tipo di stile della lista. Attenzione che stiamo dando una proprietà agli elementi della lista: "li". Quindi come vogliamo questa lista? Ho inserito il valore "none", indicando con questo attributo che non voglio nessuno stile. Però, avrei potuto inserire un pallino nero, un quadratino, un circolo o anche una immagine a mia scelta. Esistono vari elenchi in rete per questi valori, ma in questo caso ho voluto disattivare il default. I più usati sono:

3 Disc=Pallino nero pieno. Square=Quadrato nero. Circle=Pallino vuoto all interno. Il Valore "none", indica che quella proprietà non avrà un valore, quindi non la deve visualizzare. A volte è necessario disattivare questa proprietà in quanto i browser hanno una loro personalizzazione delle pagine e inseriscono elementi che non vogliamo. Ovviamente, in questo caso, non è un'aggiunta del browser, ma stiamo parlando di un elenco puntato reale per il quale, se non indichiamo nulla, il browser interpreta a modo suo e inserisce il grafico di default per indicare gli elementi della lista. Per questo esempio, mi sono comportato allo stesso modo di quando abbiamo affrontato lo stile dei link, ho assegnato questo stesso valore, il "none", per disabilitare la sottolineatura dei link, reinserendola solo quando il puntatore ci si posizionava sopra. Vi riporto per memoria a chiarimento il codice: a:link {text-decoration: none; } a:hover {text-decoration: underline; } Tanto per capirci, Text-decoration significa decorazione del testo. Nel valore, con quel "none", abbiamo inserito nessuna decorazione, ma avremmo potuto inserire Underline per sottolinearla, o sottolinearla tratteggiata, a puntini ecc...inserendo i codici appropriati per queste decorazioni.

4 a:hover, significa quando il puntatore si posiziona sul link. In questo attributo "text-decoration", abbiamo inserito il valore "underline" nella sua proprietà. Quindi, per ricapitolare, il valore none di questo attributo, disabilita la proprietà, anche quelle che il browser inserisce di default. Tornando ai link, esattamente al selettore "a", notate che dopo i due punti abbiamo inserito lo stato. Brevemente vi ricordo che un link può essere normale, visitato, attivato, con il focus sopra o il puntatore sopra. Può avere, quindi, più stati e noi, a parte la sottolineatura, avevamo inserito un colore per ogni stato. In pratica, è possibile assegnare le proprietà a un selettore anche a seconda dello stato e lo si fa nel modo appena citato. Nav. Questa tag, nel file html, ci indica il menu di navigazione del sito. Anche se precedentemente il menu del nostro sito lo avevamo già creato, ora dobbiamo posizionarlo correttamente nella pagina. Dobbiamo anche tenere presente che quando facciamo una lista, questa viene messa in verticale ed il browser ci mostra ogni elemento su una riga. Nel caso abbiamo la necessità di avere gli elementi su una riga, dobbiamo programmarlo. Ora vediamo come si fa e metteremo tutti gli elementi della lista in orizzontale. Attenzione, per non farvi fare confusione, tenete presente che stiamo parlando degli elementi della lista e non dei link.

5 E' importante capire che il nostro selettore è: "nav li", quindi, gli elementi "li" sono quelli contenuti nella nav. Fisicamente, sulla nostra pagina, mettiamo in orizzontale anche i link, solo perché li abbiamo inseriti nella lista. Anche se gli elementi della lista non fossero stati dei link, si sarebbero allineati in orizzontale ugualmente. La precisazione è doverosa, perché spesso, soprattutto per chi è all'inizio, ci si confonde, pensando che si stia operando sui link. Invece no, operiamo sugli elementi della lista e li possiamo far visualizzare come vogliamo, in orizzontale o in verticale. Primo codice: nav li { display:inline; } Questa proprietà mette in orizzontale gli elementi della lista ed è la più semplice. Dove non vi necessitano formattazioni particolari, utilizzate questa proprietà per allineare in orizzontale le liste o gli elementi in generale. Volendo è possibile utilizzare anche la proprietà: "float" che fa scorrere gli elementi verso sinistra, accostandoli gli uni agli altri. Se usate questa proprietà, ricordatevi che risulta molto complessa, soprattutto per noi non vedenti, in quanto il riscontro a video è fondamentale, anzi indispensabile e va richiesto ad un occhio in prestito. Non dico che sia impossibile, solo molto difficoltoso, ed alla fine bisogna far verificare come per tutte quelle

6 cose che senza la vista, non si possono fare. Comunque, rimandando a lezioni successive la spiegazione dettagliata delle proprietà float e clear, eccone di seguito un accenno: nav li {float:left;} Come vi siete sicuramente resi conto, è un codice semplice, ma và spiegato e compreso. La proprietà float indica di prendere un elemento e lo posiziona a seconda del valore della proprietà. Precisamente, allinea gli oggetti a destra o a sinistra rispetto al contenitore, quindi all'elemento che contiene il "float". Gli elementi che vengono spostati, sono anch'essi quelli all'interno dello stesso elemento. Però, quando la proprietà float arriva a spostare un elemento fino a riempire la riga all'estrema destra, quindi non c'è più spazio per altri elementi, i successivi rimarranno sotto, nella riga successiva, e non verranno spostati in coda agli altri. Ecco la ragione per la quale si diceva sopra che ci vuole poi un occhio in prestito per controllare che non ci siano posizionamenti anomali. Proviamo a fare un esempio. Abbiamo indicato "left", a sinistra, quindi, il primo elemento verrà posizionato a sinistra del secondo. Il secondo verrà posizionato a sinistra del terzo e così via. In pratica, gli elementi si accodano tutti a sinistra del contenitore, il primo accostato al lato sinistro del contenitore e gli altri di seguito sulla stessa riga. Un esempio semplice che chiarisce ancora di più. Facciamo l'ipotesi che abbiamo la parola "CASA" scritta in verticale. Se consideriamo ogni lettera come se fosse un elemento della lista non ordinata, un "li", per leggerla correttamente in orizzontale, possiamo applicare il nostro codice appena scritto a

7 questi elementi. Quando il browser leggerà che deve mettere in orizzontale queste 4 lettere, farà come segue: La lettera C andrà a sinistra della riga e risulterà poi alla sinistra della lettera A. La lettera A andrà a destra della lettera c già posizionata e sarà poi a sinistra della lettera S. La lettera S andrà a destra della lettera A appena posizionata e sarà poi a sinistra dell'ultima A. La ultima lettera, la A, sarà posizionata a destra della S. Come spiegato, gli elementi saranno visualizzati in orizzontale, quindi,visto che ogni elemento è una lettera, la parola verrà scritta correttamente in orizzontale. Tornando alla nostra nav e al nostro sito, ecco l'elenco degli elementi posizionati da sinistra a destra sulla riga: Operando sul menu principale della pagina, posizionato in verticale, e che ha questi elementi visualizzati in questo ordine: Home page, chi siamo, Lezioni, html 5, Css, download, Java script, utilizzando il codice con la proprietà "float",vediamo cosa avviene. Ipotizzando di mettere questo codice: nav li {float:right;}, il menu a video, in orizzontale, sarà: "Java script, download, Css, html 5, Lezioni, chi siamo, Home page". Come vi siete sicuramente resi conto, il menu visualizzato sullo schermo si è invertito. Vi sarete sicuramente chiesti per quale motivo ho specificato a video? La ragione è presto detta: dopo questa modifica e utilizzando lo Screen-readerJaws, scorrendo con il tabulatore o con le frecce verticali nel menu, questo pare non essere cambiato affatto. Anche se sembra strano, strano non è, perché lo Screen-readervà a leggere il codice del file html che è rimasto uguale.

8 Infatti, la modifica l'abbiamo eseguita tramite il file CSS. Per chi usa Jaws, per verificare questa inversione di posizione dei link del menu, attivare il cursore Jaws e leggere con la freccia giù il menu. Sentirete la sintesi che vi legge il menu modificato con gli elementi invertiti. Fate comunque analizzare a un vedente a video. Nota bene: la proprietà di questo attributo lavora solo con i valori: left e right, non altro che rispettivamente Sinistra e Destra. Nota importante: la proprietà float verrà spiegata successivamente nel dettaglio. Questa proprietà, agendo in base al contenitore che la contiene, a volte trae in inganno il programmatore. Quando abbiamo esigenza affinché un elemento non lo vogliamo far considerare dalla proprietà "float", è possibile utilizzare la proprietà "clear" per dire che quell'elemento viene escluso dall'influenza della "float". Sarà più semplice la comprensione di queste due proprietà nelle prossime lezioni quando faremo esempi più dettagliati. Se volessimo inserire a destra la nostra "aside", il codice sarà: aside {float:right; } Bordi. Per delimitare gli elementi in una pagina web, spesso vengono utilizzati i bordi. Introduciamoli restando anche ora sulle proprietà principali tanto per capire il codice. Nel nostro progetto, ho inserito una cornice alle pagine. Quindi, ho inserito una cornice che racchiude la pagina, come un quadro, con la cornice che racchiude

9 il dipinto al suo interno. Nel file template.css, dove avevamo inserito il codice del colore del nostro sito, inseriamo il codice completo di questa cornice. Ecco il codice: body {background-colour: #F0FFFF; border:20px; border-style: solid; border-color:#0000ff; padding: 10px; } Analizziamo questa stringa: Il selettore è il body. La prima proprietà: "background-color", è il colore dello sfondo. Il "border:20px;", Significa che il nostro body avrà un bordo e gli ho dato una misura in pixel per lo spessore. Il border-style: solid;, è lo stile del bordo e: "solid" indica che è come una linea, non tratteggiato e non a puntini. Insomma, un pezzo unico. Il padding: 10px;, questa proprietà mette una distanza tra il bordo e gli elementi della pagina. Ho inserito 10 px e si evita che il testo o gli altri elementi risultino troppo attaccati al bordo. Il "border-color" è semplicemente il colore che abbiamo assegnato al bordo. Per i non vedenti, fate verificare visivamente la distanza tra gli oggetti come in questo caso e, cambiando il valore, cercate di dare alla pagina le giuste proporzioni. I bordi possono essere assegnati a qualsiasi elemento della pagina e spesso vengono utilizzati per delimitare o circondare un elemento. Visivamente parlando, i vedenti vengono aiutati ad identificare meglio gli oggetti. Ecco di seguito una stringa come esempio. Si tratta delle stesse proprietà applicate alla "aside". aside {padding:15px; border:1px; border-style:solid; border-color:#800000; }

10 Con questo codice ho detto che: Gli elementi all'interno dell'aside dovranno stare distanziati di 15 px dai suoi confini, usando la proprietà "padding". Ho fatto una cornice intorno, "border", intera, "solid", e gli ho dato un colore, "border-color". Un altro esempio col "padding". Ecco il codice: p {text-align:justify; padding:15px; } Ho dato una proprietà ai paragrafi, tenendo il loro contenuto distanziato di 15 px dai confini del paragrafo stesso. Ma è comparsa un'altra proprietà: text-align:justify;. Si tratta dell'allineamento del testo e il valore è giustificato. Considerando che non serva spiegare troppo questa proprietà, i valori possono essere: right, left, center e justify Si raccomanda di non usare il valore "justify", se non strettamente necessario e facendo molta attenzione, perché il testo giustificato rende illeggibile la pagina ad alcune categorie di ipovedenti. Margini. Proviamo a inserire dei margini agli elementi che sono molto importanti per evitare di sovrapporre gli oggetti nella pagina. Vediamo il codice: aside {margin-left: 10px; }

11 In pratica, ho dato un margine all'aside di 10 px, dato che la Aside voglio metterla a destra del contenuto del sito, che è testo. Quindi, ho indicato di allontanare il testo a sinistra di 10 px dal bordo della Aside. Questo concetto è importante. Infatti, la proprietà margin, allontana dall'elemento gli altri oggetti html. Le scelte sono: margin-left = sinistra. margin-right = destra. margin-top = sopra. margin-bottom = sotto. Ho specificato e usato l'esempio della Aside perché spesso ci si confonde con la proprietà Padding. Infatti, quando ho applicato la padding all'aside, in realtà gli ho detto di creare una distanza tra il bordo dell'aside e i contenuti al suo interno. Immaginiamo la aside come un contenitore rettangolare con del testo dentro. Il padding mette le distanze tra i contenuti interni della aside e il bordo della aside. Il margin, invece, mette le distanze tra il bordo esterno dell'aside e gli elementi che ha intorno. E' come se con questa proprietà spingessimo verso l'esterno gli altri elementi intorno alla Aside. Per non confondervi, ricordate solo: Padding lavora all'interno dell'elemento al quale è applicato. Margin agisce con ciò che si trova all'esterno dell'elemento.

12 Quando dobbiamo distanziare all'esterno dell'elemento, potremmo avere anche la necessità di distanziare quattro punti. Per farlo, abbiamo delle regole che aiutano queste proprietà: Per spiegare, utilizziamo sempre la Aside. Prima avevamo inserito: aside {margin-left: 10px; } e questo codice agisce sul margine sinistro. Ipotizzando che la Aside sia al centro: aside {margin: 10px; } In pratica, ho eliminato il riferimento a sinistra e non ne ho aggiunto nessun altro. Ebbene, questo indica che il margine sarà di 10 px su tutti e quattro i lati. Potrei scrivere: aside {margin: 10px 20px 30px 40px; } In pratica, ho inserito 4 valori separati solo da uno spazio. Bisogna considerare questi valori in senso orario. Il primo, 10px, top, in alto. il secondo, 20px, right, a destra. il terzo, 30px, bottom, in basso. il quarto, 40px, left, a sinistra. Da ricordare, quindi, alto, destro, sotto e sinistro, questo è l'ordine dei lati. Per ultimo,vediamo questo codice: margin: 10px 30px

13 In pratica, ho inserito solo due valori. Il primo, 10px, indica sopra e sotto. Il secondo, 30px, indica destra e sinistra. Allo stesso modo e con le stesse modalità, questi valori possono essere applicati anche alla proprietà padding. Provate, magari anche modificando il CSS per la index del vostro sito, ad applicare queste proprietà e cercando di comprenderne la logica del codice. Per terminare, un codice CSS 3, tanto per far un po' di effetti speciali anche noi. Questo è il codice per fare lo sfondo sfumato, dall alto al basso, dal blu al bianco: body {background: -ms-linear-gradient(top, #589BED 0%,#FFFFFF 100%); /* IE10+ */ background: -moz-linear-gradient(top, #589BED 0%, #FFFFFF 100%); /* FF3.6+ */} Per invertire la direzione, sarà sufficiente sostituire il valore "top" nel codice sopra indicato con: bottom, right, left. Attenzione, non ho inserito tutti i browser, ma solo quelli da IE 10 in su e MozillaFirefox dalla 3.6 in su. Per i browser più vecchi il codice diventa davvero impossibile da gestire e l'apertura della pagina diventa eterna e, spesso, neanche funziona correttamente. Queste nozioni, devono essere considerate davvero care, in quanto poi sono quelle che andremo a utilizzare maggiormente quando dovremo rifinire ed abbellire le nostre pagine.

14 Quando si pubblica un sito e non si fa guardare il tutto da un occhio amico e competente, troviamo sempre qualcuno che ci indica le cose che non vanno bene, come il testo troppo vicino ai bordi o agli oggetti, l'immagine è piccola o grande, il testo o la Nav torna a capo prima, eccetera. Con queste regole e questi codici, possiamo intervenire e correggere quello che il nostro navigatore ci ha indicato. Se veramente volete evitare di avere queste segnalazioni da parte di chi naviga il vostro sito, è davvero importante, e non smetterò mai di ripeterlo, dovete consultarvi con una o più persone vedenti che vi controllino il sito. Se vi rivolgete ad una persona preparata, ancora meglio. Per concludere questa lezione, voglio dirvi una cosa importante, valorizzando ancor di più i vostri sforzi nel seguire questo corso: almeno l'80 per 100 delle persone che costruiscono siti, non hanno la più pallida idea di cosa siano le nozioni riportate in questo corso e in quelli simili a questo. La maggior parte dei programmatori usano i CMS per costruire un sito. Ad inserire il codice per loro, ci pensano proprio questi software. Però, spesso i CMS hanno dei limiti ed arrivano fino ad un certo punto e, poi, non tengono conto di molte delle regole dell'accessibilità. Ce ne accorgiamo noi quando che usiamo uno Screen-reader quando navighiamo tali siti, ma se ne accorgono anche loro, soprattutto quando si utilizza il validatore del W3C. In pratica, compaiono centinaia di errori. Quando non si conosce il codice HTML e quello CSS, questi errori sarà difficile, molto difficile correggerli. Voi che state imparando il codice, questi errori sarete in grado di correggerli da soli. Vi rimando alla prossima lezione, dove, utilizzando il linguaggio CSS, vedremo gli altri comandi per formattare gli elementi sulle pagine del nostro sito. ***********

15 Per ulteriori spiegazioni, scrivere a: Roberto Abutzu