Guida completa ai fogli di stile CSS
Si definisce l’elemento head di xhtml dei fogli di stile CSS come intestazione vediamo un attimo piu’ in dettaglio di cosa si tratta. Al suo interno troveremo il tag Title. Si tratta proprio del titolo della pagina, che viene visualizzato dal browser come titolo appunto della pagina web. E’ quello di cui i motori di ricerca tengono maggiormente conto al fine di indicizzare al pagina stessa. Ci sono pero’ anche altri elementi altrettanto importanti e sono i meta tag. Vediamone una carrellata per capire cosa sono ed i loro usi
- Title serve ad inserire il titolo della pagina <title> Titolo della pagina </title>
- Description serve per definire una descrizione della pagina che verrà utilizzata poi dai motori di ricerca, si consiglia di non superare i 150 caratteri in quanto è questa la dimensione utilizzata da google.
- Keywords serve per inserire le parole chiave di cui tratta la tua pagina web, quindi dovranno essere il piu’ attinenti possibili al contenuto. Google tiene conto solamente delle prime 5.
- Rivisit -Afert serve per permette di impostare i giorni che devono trascorrere prima che il bot (per esempio il motore di ricerca di google ) ritorni a visitare il documento, anche se è solo un tag molto indicativo, ossia che non viene preso in particolare conto dai motori di ricerca.
- Robots permette di specificare allo spider se indicizzare o meno un determinato documento, oppure se è finita l’indicizzazione dello stesso , di continuare all’interno delle pagine da esso linkate. la sua sintassi è la seguente <meta name= “robots” content=”all” /> Mentre questi sono i possibili valore che puo’ contenere l’attributo contentindex indicizza la pagina che il riporta il meta tag;
- follow passa anche alle pagine successive;
- noindex non indicizzare la pagina;
- nofollows non seguire i link presenti nel documento;
- noarchive il robot indicizzerà la pagina e seguirà il link , ma non l’archivierà , nel caso specifico di google al pagina sarà disponibile in versione cache
- Author Identifica l’autore che ha compiuto la pagina dove si sta navigando
- Owner indica il proprietario del sito
- Copyright persona o società che detengono il copyright del sito
- Reply -to indica a coloro che utilizzano il sorgente della pagina l’email di contatto, molto poco utilizzata
- Generator indica il software utilizzato per generare al pagina
- Accessibility Level E’ usato per fare conoscere agli utenti il livello di accessibilità raggiunto dal documento che si sta visitando, secondo le specifiche WCAG (Web Content Accessibility Gudielines) personalmente non ricordiamo di averlo mai utilizzato una volta, cmq esistono al momento della scrittura di questa guida tre livelli che sono A, AA, AAA, che indica la totale o meno aderenza, maggiori sono le A e maggiore è l’aderenza
- Classification Permette allo sviluppatore di scegliere la categoria di appartenenza del sito , a secondo dei contenuti dello stesso
Questi sono solamente i meta tag piu’ importanti, ce ne sono anche altri che pero’ riguardano anche il linguaggio inteso in senso piu’ stretto , ma prima di mostrarveli vi facciamo vedere degli esempi di questi.
Facciamo adesso un esempio cumulativo di tutto quanto abbiamo detto.
<html>
<head>
<title> Titolo della pagina </title>
<meta name =”Description” Content =” Qui mettiamo la descrizione della pagina”>.
<meta name=”keywords” Content=”nome, pagina, esempio, guida, css”>
<meta name=”description” Content =”Descrizione alternativa della pagina per indicare al server che qui troverà solamente delle pagina in italiano” lang=”it”>
<meta name=”revisit-after” content =”20 days” />
<meta name=”robots” content =”all” />
<meta name=”Author” content =”Antares big Cavaliar”/>
<meta name=”Owner” content =”Gruppo associato” />
<meta name=”Reply-to” content =”Email fittizia” />
<meta name=”Generator” content=”Notepad” />
<meta name=”Classification” content =”Programmatore Web”>
<meta name=”Accessibilty-Level” content=”A”/>
</head>
<body>
…….
…….
</body>
</html>
Sintassi dei CSS
I fogli di stile non sono altro che un modo di definire le caratteristiche di un documento, separando quelle che sono le regole di visualizzazione e permettendo di avere un controllo maggiore e realizzando moduli che poi sono riutilizzabili anche in altre pagine web, cioe’ andando a costituire dei veri e propri template. In termini pratici i fogli di stile sono delle dichiarazioni , scritte secondo determinate regole e una determinata sintassi che vedremo , che vengono inserite in una pagina web o meglio ancora vengono messe direttamente dentro dei fogli di stile con estesile file css e da qui collegati alla pagina html. I Fogli di stile ahanno il vantaggio di dare molto piu’ controllo sul comportamento grafico , si possono per esempio creare stili per i titolo, per i link di navigazione o per quelli nel testo , per le note. Ma di preciso cos’e’ uno stile? Uno stile è l’insieme di caratteristiche di un elemento della pagina ossia colore e dimensione del font, tipo di bordi, allineamento e cosi via… I Fogli di stile possono essere interni o esterni alla pagina i fogli di stile interni si fanno con text e css. Volendo fare un esempio di codice avremo
<head>
<style type =”text/css” media=”screen”>
//esempio di stile per il video
<style type =”text/css” media=”print”>
//stile per la stampa
</head>
La soluzione ideale pero’ quando si lavora con i CSS è proprio quella di definire uno o piu’ file css esterni che contengano tutti gli stili in uso all’interno del sito.
All’interno dell’head del file andrà poi inserito un elemento link con i seguenti attributi
- rel serve a definire il tipo di relazione che intercorre tra il documento e il file collegato, per indicare un foglio di stile si usa il valore stylesheet
- type specifica il tipo di dati del file da collegare in questo caso si usa la dicitura text/css
- href indica la posizione del foglio di stile , puo’ assumere come valore un percorso, assoluto o relativo, o un url;
- media permette di definire un foglio di stile differente che si sta utilizzando per la visualizzazione. Quindi un possibile link esterno potrebbe essere composto nella seguente maniera
<link href=”dsafa.sas” rel=”stylesheet” type=”text/css” />
Se utilizzate un’editor visuale come per esempio dreamweaver questo avviene in maniera quasi automatica senza cioe’ che il programmatore quasi se ne accorga, è possibile utilizzare quindi questi tipi di programma come dreamweaver, Komposer e altri che facilitano e non poco la vita del programmatore, ma che purtroppo sono quasi tutti a pagamento.
Classi e Selettori dei fogli di Stili
Veniamo adesso a parlarvi della codifica dei fogli di stile possa sintassi che è fondamentalmente data da
Selettore { dichiarazioni }
Vediamo subito un esempio
<style>
p { font-family: Arial, Helvetica, sans-serif; background-color: #000FF; }
Quelli che abbiamo visto si chiamano selettori e possono avere le seguenti tipologie
- elementi HTML quindi si puo’ definire tutte le occorrenze di un determinato elemento devono avere un determinato stile
- ID un identificatore univoco nel documento, ossia il nome di un’istanza di un elemento all’interno del testo, si inserisce con un attributo del tipo id=”valore”
- Classi le classi vengono richiamate con la seguente metodologia class= nome della classe.
Vediamo adesso le pseudoclassi, ossia quelle che permettono di impostare la visualizzazione di un elemento in un ben determinato stato, probabilmente le avete gia’ riviste , l’elemento tipico infatti è l’elmento A che impostate nelle proprietà di pagina di Dreamweaver per permettere ai visitatori di accedere ai vari link in diverse modalità per esempio
a:link { color:#CC3366; }
a:hover{ : #669933; }
a:visited { color: @000000; }
dove
- link è il collegamento alla pagina web che ancora si deve visitare
- visited indica lo stato di collegamento gia’ visitato
- hover lo stato del collegamento quando ci passiamo sopra con il mouse
- active definisce il collegamento attivo ossia nel momento stesso in cui l’utente ci fa click sopra.
Vediamo adesso come è possibile agire sui Font tramite i CSS
Innanzitutto vediamo qual’e’ la dichiarazione dei font disponibili.
- font-family segue uno o piu’ tipi di font
- font-size per la dimensione
- font-style puo’ assumere valore italic o oblique
- font-weight sta ad indicare lo spessore i suoi valori sono bold, bolder, lighter
- font-variant definisce una variante come il maiuscoletto
- text-transform puo’ avere valori come capitalize , ossia le iniziali maiuscole, uppercase tutto maiuscolo, lowercase tutto minuscolo
- color da il colore del testo
- text-decoration assume valori come underline sottolineato, over line linea appoggiata, line.through per il barrato, blink per il lampeggiante
- lette spacing e word spacing la spaziatura tra lettere e tra parole espressa in em
vediamo subito un esempio
.carattere {
font-family : Arial , Helvetica, sans-serif;
font-size: 20 pt;
font-style: oblique;
line-height:30 px;
font-weight: bolder;
text-transform: capitalize;
color : #00000CC00;
text-decoration: underline;
letter-spacing: 1em;
word-spacing: 1em;
}
e adesso vediamo come si puo’ modificare i blocchi di testo per i quali abbiamo a nostra disposizione i seguenti comportamenti
line-height per derinire l’altezza in pt o in pixel per ogni riga
background.color imposta il colore dello sfondo
text-align definisce l’allineamento del testo; oltre che centrato center, a sinistra left e destra right e giustificato justify
text indent permette di definire un rientro in pixe o in punti della prima riga del paragrafo;
width fissa la massima larghezza del blocco di testo. Come sempre facciamo subito un esempio
.esempio
{
line-height: 20 px;
background-color: #CCCCFF;
text-align: justify;
text-indent : 20 pt;
width : 500 px;
font-family: Georgia, “Times New Roman”, Times, serif ;
andate all’interno del body e scrivete ad esempio
<p class=”esempio”> —-</p>
e cosi potrete vedere il risultato ottenuto, dalla prossima lezione inizieremo a trattare dei layout avanzati.
Il Box Model
Trattiamo adesso di un elemento che fa parte del layout avanzato dei css ossia il box model. I Box model sono blocchi di elementi che possono contenere del codice html oppure a loro volta altri elementi e come dice chiaramente il nome sono dei box ossia delle scatole , contenitori. Secondo le specifiche emesse dal Consorzio w3, ogni box deve essere composto da un content e da dei margini opzionali.
- padding margine interno del box
- border il bordo del box
- margin la distanza tra il bordo e gli elementi che lo circondano.
Non vi preoccupate capirete tutto meglio con gli esempi. scriviamo infatti
.esempiobox {
background : #FFFFFCC;
margin 30: px;
border 2 px solid #006600;
padding :8 px;
width : 400 px;
height : 100 px;
font-family:Georgia, “Times New Roman”, Times, serif; text-align: justify;
}
e richiamatelo con un tag div avente class esempiobox Come potrete vedere avete ricreato una scatola all’interno del quale potrete inserire un testo a vostra scelta. Volendo si puo’ mettere anche uno sfondo utilizzando la solita proprietà dei paragrafi che si chiama
- background-image con url di un’immagine che si vuole utilizzare all’interno del box, le altre proprietà sempre inerente all’immagine da utilizzare all’interno del nostro oggetto potrebbero essere
- background-repeat serve a definire il comportamenti dell’immagine di sfondo, ossia se essa dovra’ essere ripetuta
- bakground-position consente di definire la posizione dell’immagine di sfondo , se non ripetuta o il punto da cui partire, puo’ essere definita in pixel o percentuale e ovviamente allineata
- background-attachment permette di stabilire se l’immagine di sfondo dovra’ scorrere insieme al resto del contenuto oppure rimanere ferma quando l’utente agisce sulle barre di scorrimento. Puo’ assumere i valori di scroll ed in tal caso l’immagine scorre insieme alla pagina, fixed invece rimane fissata
Ora vediamo come fare scorrere i contenuti all’interno del box con delle barre di scorrimento.
In quanto i css danno la possibilità di gestire quel che viene chiamato overflow, ossia la sovrabbondanza dei contenuti. Esiste, infatti, la possibilità di definire il comportamento del browser quando la dimensione fissata non è sufficiente alla visualizzazione completa del contenuto E quindi si ricorre alla proprietà overflow che puo’ assumere come valori.
- visibile rimane il contenuto visibile ma viene forzata la dimensione del contenitore
- ridde i contenuti eccedenti rimangono nascosti alla vista dell’utente nel browser
- scrool vengono aggiunte delle barre di scorrimento che permettano di accedere ai contenuti eccedenti
- Auto il browser si comporta secondo la sua impostazione di default.
Volendo si puo’ ricorrere anche a una soluzione diciamo piu’ raffinata introducendo le proprietà che definiscono i margini e la spaziatura interna del box. In questo caso l’utilizzo sarà:
- margin-left per il margine sinistro, dimensione fissata o percentuale
- margin-right per il margine destro, dimensione fissata o percentuale
- margin-top per margine del lato superiore
- margin-bottom margine del lato inferiore
ma non finisce qui le potenzialità dei box model dei css non sono finite ve ne vogliamo illustrare una ultimissima ossia quella che consente di utilizzare dei box sovrapposti., stiamo parlando di visibility e z-index .
- visibility: hidden/visible ovviamente hidden nascosto e visible visibile
- z-index: <valore>
ovviamente il box avente valore di z superiore ad un altro che per default è zero, sarà sovrapposto a questo ultimo
Mi piace:
Mi piace Caricamento...
Correlati
Fabrizio S.
Share post:
Guida completa ai fogli di stile CSS
Si definisce l’elemento head di xhtml dei fogli di stile CSS come intestazione vediamo un attimo piu’ in dettaglio di cosa si tratta. Al suo interno troveremo il tag Title. Si tratta proprio del titolo della pagina, che viene visualizzato dal browser come titolo appunto della pagina web. E’ quello di cui i motori di ricerca tengono maggiormente conto al fine di indicizzare al pagina stessa. Ci sono pero’ anche altri elementi altrettanto importanti e sono i meta tag. Vediamone una carrellata per capire cosa sono ed i loro usi
Questi sono solamente i meta tag piu’ importanti, ce ne sono anche altri che pero’ riguardano anche il linguaggio inteso in senso piu’ stretto , ma prima di mostrarveli vi facciamo vedere degli esempi di questi.
Facciamo adesso un esempio cumulativo di tutto quanto abbiamo detto.
<html>
<head>
<title> Titolo della pagina </title>
<meta name =”Description” Content =” Qui mettiamo la descrizione della pagina”>.
<meta name=”keywords” Content=”nome, pagina, esempio, guida, css”>
<meta name=”description” Content =”Descrizione alternativa della pagina per indicare al server che qui troverà solamente delle pagina in italiano” lang=”it”>
<meta name=”revisit-after” content =”20 days” />
<meta name=”robots” content =”all” />
<meta name=”Author” content =”Antares big Cavaliar”/>
<meta name=”Owner” content =”Gruppo associato” />
<meta name=”Reply-to” content =”Email fittizia” />
<meta name=”Generator” content=”Notepad” />
<meta name=”Classification” content =”Programmatore Web”>
<meta name=”Accessibilty-Level” content=”A”/>
</head>
<body>
…….
…….
</body>
</html>
Sintassi dei CSS
I fogli di stile non sono altro che un modo di definire le caratteristiche di un documento, separando quelle che sono le regole di visualizzazione e permettendo di avere un controllo maggiore e realizzando moduli che poi sono riutilizzabili anche in altre pagine web, cioe’ andando a costituire dei veri e propri template. In termini pratici i fogli di stile sono delle dichiarazioni , scritte secondo determinate regole e una determinata sintassi che vedremo , che vengono inserite in una pagina web o meglio ancora vengono messe direttamente dentro dei fogli di stile con estesile file css e da qui collegati alla pagina html. I Fogli di stile ahanno il vantaggio di dare molto piu’ controllo sul comportamento grafico , si possono per esempio creare stili per i titolo, per i link di navigazione o per quelli nel testo , per le note. Ma di preciso cos’e’ uno stile? Uno stile è l’insieme di caratteristiche di un elemento della pagina ossia colore e dimensione del font, tipo di bordi, allineamento e cosi via… I Fogli di stile possono essere interni o esterni alla pagina i fogli di stile interni si fanno con text e css. Volendo fare un esempio di codice avremo
<head>
<style type =”text/css” media=”screen”>
//esempio di stile per il video
<style type =”text/css” media=”print”>
//stile per la stampa
</head>
La soluzione ideale pero’ quando si lavora con i CSS è proprio quella di definire uno o piu’ file css esterni che contengano tutti gli stili in uso all’interno del sito.
All’interno dell’head del file andrà poi inserito un elemento link con i seguenti attributi
<link href=”dsafa.sas” rel=”stylesheet” type=”text/css” />
Se utilizzate un’editor visuale come per esempio dreamweaver questo avviene in maniera quasi automatica senza cioe’ che il programmatore quasi se ne accorga, è possibile utilizzare quindi questi tipi di programma come dreamweaver, Komposer e altri che facilitano e non poco la vita del programmatore, ma che purtroppo sono quasi tutti a pagamento.
Classi e Selettori dei fogli di Stili
Veniamo adesso a parlarvi della codifica dei fogli di stile possa sintassi che è fondamentalmente data da
Selettore { dichiarazioni }
Vediamo subito un esempio
<style>
p { font-family: Arial, Helvetica, sans-serif; background-color: #000FF; }
Quelli che abbiamo visto si chiamano selettori e possono avere le seguenti tipologie
Vediamo adesso le pseudoclassi, ossia quelle che permettono di impostare la visualizzazione di un elemento in un ben determinato stato, probabilmente le avete gia’ riviste , l’elemento tipico infatti è l’elmento A che impostate nelle proprietà di pagina di Dreamweaver per permettere ai visitatori di accedere ai vari link in diverse modalità per esempio
a:link { color:#CC3366; }
a:hover{ : #669933; }
a:visited { color: @000000; }
dove
Vediamo adesso come è possibile agire sui Font tramite i CSS
Innanzitutto vediamo qual’e’ la dichiarazione dei font disponibili.
vediamo subito un esempio
.carattere {
font-family : Arial , Helvetica, sans-serif;
font-size: 20 pt;
font-style: oblique;
line-height:30 px;
font-weight: bolder;
text-transform: capitalize;
color : #00000CC00;
text-decoration: underline;
letter-spacing: 1em;
word-spacing: 1em;
}
e adesso vediamo come si puo’ modificare i blocchi di testo per i quali abbiamo a nostra disposizione i seguenti comportamenti
line-height per derinire l’altezza in pt o in pixel per ogni riga
background.color imposta il colore dello sfondo
text-align definisce l’allineamento del testo; oltre che centrato center, a sinistra left e destra right e giustificato justify
text indent permette di definire un rientro in pixe o in punti della prima riga del paragrafo;
width fissa la massima larghezza del blocco di testo. Come sempre facciamo subito un esempio
.esempio
{
line-height: 20 px;
background-color: #CCCCFF;
text-align: justify;
text-indent : 20 pt;
width : 500 px;
font-family: Georgia, “Times New Roman”, Times, serif ;
andate all’interno del body e scrivete ad esempio
<p class=”esempio”> —-</p>
e cosi potrete vedere il risultato ottenuto, dalla prossima lezione inizieremo a trattare dei layout avanzati.
Il Box Model
Trattiamo adesso di un elemento che fa parte del layout avanzato dei css ossia il box model. I Box model sono blocchi di elementi che possono contenere del codice html oppure a loro volta altri elementi e come dice chiaramente il nome sono dei box ossia delle scatole , contenitori. Secondo le specifiche emesse dal Consorzio w3, ogni box deve essere composto da un content e da dei margini opzionali.
Non vi preoccupate capirete tutto meglio con gli esempi. scriviamo infatti
.esempiobox {
background : #FFFFFCC;
margin 30: px;
border 2 px solid #006600;
padding :8 px;
width : 400 px;
height : 100 px;
font-family:Georgia, “Times New Roman”, Times, serif; text-align: justify;
}
e richiamatelo con un tag div avente class esempiobox Come potrete vedere avete ricreato una scatola all’interno del quale potrete inserire un testo a vostra scelta. Volendo si puo’ mettere anche uno sfondo utilizzando la solita proprietà dei paragrafi che si chiama
Ora vediamo come fare scorrere i contenuti all’interno del box con delle barre di scorrimento.
In quanto i css danno la possibilità di gestire quel che viene chiamato overflow, ossia la sovrabbondanza dei contenuti. Esiste, infatti, la possibilità di definire il comportamento del browser quando la dimensione fissata non è sufficiente alla visualizzazione completa del contenuto E quindi si ricorre alla proprietà overflow che puo’ assumere come valori.
Volendo si puo’ ricorrere anche a una soluzione diciamo piu’ raffinata introducendo le proprietà che definiscono i margini e la spaziatura interna del box. In questo caso l’utilizzo sarà:
ma non finisce qui le potenzialità dei box model dei css non sono finite ve ne vogliamo illustrare una ultimissima ossia quella che consente di utilizzare dei box sovrapposti., stiamo parlando di visibility e z-index .
ovviamente il box avente valore di z superiore ad un altro che per default è zero, sarà sovrapposto a questo ultimo
Condividi:
Mi piace:
Correlati