Site icon Noir Solutions

Guida completa all’utilizzo dei fogli di Stile e dei CSS

Fabrizio S.

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

  1. follow passa anche alle pagine successive;
  2. noindex non indicizzare la pagina;
  3. nofollows non seguire i link presenti nel documento;
  4. 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

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

 

Exit mobile version