top of page

 

CSS

 

I fogli di stile a cascata o Cascading Style Sheets (CSS) servono a migliorare l'aspetto estetico e al tempo stesso facilitano la creazione e la manutenzione degli stili.

I CSS possono essere utilizzati in tre diversi modi:

 

1) in Linea


Si utilizzano quando si ha la necessità che lo stile sia relativo al solo blocco che stiamo trattando senza che questo influisca su altre parti dello stesso documento.


Es.:
<P STYLE="TEXT-ALIGN:justify; TEXT-INDENT:12px;></P>

 

2) ad inizio pagina (Fogli di Stile Incorporato)
 

Si utilizzano quando allo stesso stile fanno riferimento elementi (tags) diversi. In questo caso le istruzioni di stile non saranno inserite all'interno del singolo tag ma ad inizio pagina tra i tag <STYLE> e </STYLE> posti nella sezione <HEAD>.

 

Es.:
<HTML>
<HEAD>
   <STYLE type="text/css">
   <!--
      p {"TEXT-ALIGN:justify;
          TEXT-INDENT:12px}
   -->
   </STYLE>
<HEAD>
<BODY>
   <P>

   Tutto ciò che sarà scritto tra l'elemento di apertura e l'elemento di chiusura
   avrà come stile: giustificato con una indentazione di 12 pixel
   </P>
</BODY>
</HTML>

 

3)collegando un foglio di stile esterno (Fogli di stile Esterni)

 

 Il foglio di stile esterno è una struttura con estensione .CSS che contiene tutte le
 dichiarazioni di un foglio di stile. La dichiarazione esterna viene richiamata in un documento HTML con il seguente  tag:

   <LINK REL="STYLESHEET" HREF="STILE.CSS" TYPE="TEXT/CSS">

all'interno della sezione <HEAD>.
Il parametro HREF indica il nome del foglio di stile esterno.

 

L'esempio successivo mostra il contenuto di un foglio di stile esterno:


   BODY { margin-left: .5cm;
          margin-right: .5cm;
          color: #000099;
          font-family: verdana, arial;
          font-size: 10pt }

    A:LINK { text-decoration: none;
            color: #009900 }  
    A:VISITED { text-decoration: none;
            color: gray }
    A:HOVER { text-decoration: none;
            color: #FFFF00 }

   TD { font-family: verdana, arial;
        font-size: 12pt }

    P { text-align: justify;
        font-size: 12pt }
 

In questo esempio:

il corpo del documento avrà un margine destro e sinistro di 0,5 cm, i caratteri verranno scritti in blue, il font dei caratteri utilizzato sarà Verdana e se non installato sul computer del browser verrà utilizzato il font Arial, la grandezza del carattere sarà 10 pt.

Link da visitare: non sottolineati di colore verde. 

Link visitati: non sottolineati di colore grigio. Cambio colore al passaggio del mouse: non sottolineati di colore grigio. Tabelle intestazione: font verdana, arial con dimensione 12 punti. Paragrafo: allineamento giustificato, grandezza font 12 pt.                        

 

Gli attributi

 

- font-family: elenca la famiglia di font
  BODY {font-family: arial, "COURIER NEW", verdana}

- font-syze: stabilisce le dimenzioni del testo.
- font-style: indica lo stile del font.
     BODY {font-style: normal} testo di default
     BODY {font-style: italic} testo corsivo
     BODY {font-style: oblique} obliquo verso destra

- font-variant: imposta il maiuscoletto.
     BODY {font-variant: small-caps}
   
- font-weight: imposta il grassetto.
     BODY {font-weight: extra-light}
     BODY {font-weight: demi-light}
     BODY {font-weight: light}
     BODY {font-weight: medium}
     BODY {font-weight: extra-bold}
     BODY {font-weight: demi-bold}
     BODY {font-weight: bold}

- text-decoration: permette di abbellire il testo con sottolineature ed altri
  effetti.
     BODY {text-decoration: none}
     BODY {text-decoration: underline}
     BODY {text-decoration: overline}
     BODY {text-decoration: italic}
     BODY {text-decoration: line-height}
  per eliminare la sottolineatura dei link utilizzare:
     <STYLE>
     A:link, A:visited{text-decoration: none}
     A:hover {text-decoration: underline}
     </STYLE>
  oppure per i  CSS in linea:
     <A HREF="...." STYLE="text-decoration: none"> Link </A>

- Text-trasform: manipola le minuscole e maiuscole del testo.
  Uppercase: rende maiuscole le lettere
  Capitalize: rende maiuscola la prima lettera di ogni parola
  Lowercase: rende minuscole tutte le lettere
  none: testo normale
    <Div style="font-family:arial; Text-trasform:Capitalize">
     ....
    </div>

- Text-align: visualizza il testo in base a quattro allineamenti
  Left, center, right, justify.
    <Div style="font-family:arial; Text-align:Justify">
     ....
    </div>
- List-style: sostituisce i punti standard di un elenco puntato standard
  con immagini in formato GIF.
    <style type="text/css">
UL {list-style-image:URL(punto.gif) }
    <style>


 

LISTE



- list-style-image: imposta una immagine come marcatore delle voci di una lista.
  valori ammessi:
  none: nessuna immagine
  url: percorso dell'immagine
  es.:
  <STYLE>
  UL {list-style-image: URL(immagine.gif) }
  </style>
  <body>
     <ul>
     <li> pippo</li>
     <li> pluto</li>
     <li> paperino</li>
     </ul>
   </body>


Attributi

- Margin, Margin-left, margin-right, margin-top, margin-bottom:
  impostano lo spessore del margine.


  Es.:
  BODY {Margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px}
  oppure (la sequenza è la stessa espressa nell'esempio precedete)
  BODY {Margin: 10px 10px 10px 10px}



- Padding, Padding-left, Padding-right, Padding-top, Padding-bottom:
  impostano la distanza tra il margine e gli elementi del testo.


  Es.:
  BODY {Padding-top: 10pt; Padding-right: 10pt; Padding-bottom: 10pt; Padding-left: 10pt}
  oppure (la sequenza è la stessa espressa nell'esempio precedete)
  BODY {Padding: 10pt 10px 110% 2in}



- border-width / border-top-width, border-right-width, border-bottom-width,
  border-left-width
  Definiscono lo spessore dei bordi delle tabelle. E' possibile impostare misure percentuali o di riferimento (em) o parole chiavi (thin, medium, thick)


  Es.:
  BODY {border-top-width: 5px;
        border-right-width: 4pt
        border-bottom-width: thick
        border-left-width: 2em
       }
  oppure:
  BODY {border-width: 5px 4pt thick 2em }



- border-color
  definisce i colori dei quattro bordi del CSS. Non è possibile stabilire colori diversi per ognuno di essi.
 

  Es.:
  BODY {border-color: green }



- border-style
  Imposta lo stile dei bordi del CSS.


  Es.:
  BODY {border-style: xxx }
  xxx può assumere i seguenti valori: none, dotted, dashed, solid,
                                      double, groove, ridge, insert, outset.



- Border
  racchiude tutte le varianti relative ai bordi, agli stili, al colore e alla larghezza.

 

  Es.:
  BODY {border: 12px grove green } 



- Width


  Imposta la larghezza orizzontale del foglio. La parola riservata AUTO permette il redimensionamento in base agli elementi contenuti.


  BODY {width: 300px }



- Float
  Definisce l'allineamento orizzontale. Tutti i box vengono visualizzati sulla stessa riga fino al raggiungimento del margine esterno del   contenitore principale.
  I valori possibili sono: left, right e none.


  Es.:
  <HTML>
  <HEAD>
  <STYLE> 
    IMG {
        FLOAT: LEFT;
        MARGIN: 29PX;
        }
  </STYLE>
  </HEAD>
  <BODY>
    <P>
      <IMG SCR=IMMAGINE.GIF>
      IN QUESTO CASO L'IMMAGINE VERRA' VISUALIZZATA A SINISTRA DEL TESTO
    </P>
  </BODY>
  </HTML>


-Color 

Definisce il colore del testo del documento.


  <DIV STYLE="color: yellow">
     ...
  </DIV>



- BackGround-Color
  Determina il colore di sfondo.


  Es.:
  <DIV STYLE="background-color: blue">
     ...
  </DIV>



- Background-Image
  Visualizza una immagine sullo sfondo del CSS.


  Es.:
  <DIV STYLE="background-image: url(sfondo.jpj)">
     ...
  </DIV>



- Background-repeat
  Ripete l'immagine di sfondo. 


  Es.:
  <DIV STYLE="background-repeat: repeat-y">
     ...
  </DIV>



- Background-position
  Indica la posizione a partire dalla quale l'immagine verrà visualizzata. 


  Es.:
  <DIV STYLE="background-repeat: repeat-y; Background-position: right top">
     ...
  </DIV>


 
- Backgroud-attachment: indica se l'immagine di sfondo è fissa o si muove con la pagina.
  I valori ammessi sono:


  SCROLL: l'immagine di sfondo si muove con il resto della pagina.
  FIXED: l'immagine resta fissa.

 

- Cursori

 

L'attributo CURSOR permette di visualizzare il puntatore nelle forme previste dal sistema.
Le forme permesse sono:
 

  • Auto

Il cursore viene definito in base alle impostazioni automatiche di default del browser

 

  • Crosshair

Il browser visualizza il cursore con la forma di croce .


 

  • Default

Il browser visualizza il puntatore sempre nella sua forma standard (solitamente una
freccia rivolta verso l'alto a sinistra)


 

  • Hand

Il cursore assume per tutto il documento la forma della mano.


 

  • Move

Il cursore assume la forma tipica degli elementi trascinati


 

  • e-resize

Il cursore assume la forma di una freccia verso sinistra (tipicamente attivata quando
si ridimensionano finestre o oggetti)


 

  • ne-resize

Freccia di default rivolta in alto a destra


 

  • nw-resize

Freccia rivolta verso l'alto a sinistra .


 

  • n-resize

Freccia non-standard rivolta verso l'alto.


 

  • se-resize

Freccia standard rivolta verso il basso a destra


 

  • sw-resize

Freccia standard rivolta verso il basso a sinistra.


 

  • s-resize

Freccia non-standard rivolta verso il basso.


 

  • w-resize

Freccia non-standard rivolta verso sinistra


 

  • text

Al cursore viene assegnata la tipica forma della barra verticale che i browser
impostano quando incontrano testo senza link o immagini.


 

  • wait

Il classico cursore a forma di clessidra od orologio.


 

  • help

Il cursore a forma di punto interrogativo o fumetto, che solitamente indica la
possibilita' di ottenere maggiori informazioni sull'oggetto.

 

 

- Classi

Le Classi permettono di dichiarare degli stili che possono essere richiamati
all'interno dei vari tag html. Il nome della classe deve essere preceduto dal punto.


Es.:

   .firma { font-family:verdana, arial;
            color: FF0000;
            font-weight: lighter;
          }



Nel corpo della pagina HTML:



   <P CLASS=".FIRMA"> ... </P>



La stessa classe può essere usata con qualsiasi altro tag della pagina.

 

- Box Model

Ogni pagina html è formata da un box principale nel quale vengono collocati di altri box.

La conformazione del box è rappresenteta nella figura BoxModel.
Notiamo che il blocco è rappresentato da quattro sezioni concatenate:

 

  • Contenuto

  • Padding

  • Bordo

  • Margin

 

 

Il padding è lo spazio tra il bordo del box e il proprio contenuto.
Il margine è lo spazio tra vari box.
Impostando la larghezza (width) si imposta la dimensione al solo contenuto.
Il blocco con width:400px, padding:50px , border:10px, margin:30px occuperà 490 px. Questa regola vale per tutti i browser escluso explorer 5 (e se non impostato il doctype anche nella versione 6) che considera width come la somma di contenuto+padding+bordo.


I box upossono essere di due tipi:

 

  1.  block level

  2.  in line


Le caratteristiche dell'elemento  block level sono:

 

  • - Un elemento block level si posiziona sotto il blocco prededente,

  • - occupa tutto lo spazio dell'elemento che lo contiene,

  • - può contenere altri blocchi e elementi inline

  • - un blocco possiede della dimenzioni configurabili tramitè proprietà (height e width)

 

Es.: Div, Form, Ul, Ol
   

Le caratteristiche di un elemento in line sono:


- si posiziona a fianco del blocco precedente
- occupa lo spazio effettivo del suo contenuto
- può contenere solo altri elementi in line,
- non può essere configurato in altezza e larghezza.
Es,: a, em, strong, b, span

bottom of page