"CSS - Formattazione testo ed elementi".

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:
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:
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.
“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.
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
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
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.
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
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; }
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; }
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.
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
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.
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.
***********
Per ulteriori spiegazioni, scrivere a: Roberto Abutzu…