PROGRAMMAZIONE

LINGUAGGI WEB

Asp

Php

GUIDE DI BASE

Guida ai CSS

Attributi di style

Gli attributi per il colore e lo sfondo

Prima di passare in rassegna le categorie di attributi vorrei ricordare la loro sintassi per poterli adoperare, e questo qualunque sia il modo che deciderete di usare.

Gli attributi devono essere inseriti all'interno di parentesi graffe { } e laddove in HTML verrebbe usato un "=" (uguale) viene invece usato ":" (due punti). Argomenti consecutivi sono separati da ";" (punto e virgola) invece che da "," (virgola). Inoltre molti argomenti sono divisi da - (trattini) anche se questi fanno parte integrante del nome stesso.

Per i parametri ad essi associabili fare riferimento a questa tabellina.

Passiamo in rassegna gli attributi per il colore e lo sfondo:

color : valore;

Questo attributo serve per impostare il colore del testo, fare riferimento alla tabellina per i possibili parametri.

P    {color: red;}
DIV  {color: #990099;}

P {color: red;}
div {color: #990099;}

background-color : valore;

Questo attributo definisce il colore di sfondo di uno style e può essere adoperato indipendentemente dal colore di sfondo del testo.
Per i possibili parametri fare riferimento alla ormai nota tabellina.

P    {background-color: yellow}
DIV  {background-color: #33ccff}

P {background-color: yellow;}
DIV {background-color: #33ccff;}

background-image : url (immagine.gif);

Questo attributo definisce l'immagine di sfondo per un elemento e può essere adoperato indipendentemente dall'immagine e dal colore dello sfondo assegnato alla pagina.

P    {background-image : url(file:immagine.gif);}
DIV  {background-image: url (logo.gif);}

P {background-image : url(file:immagine.gif);}
continuo a scrivere per meglio
rendere l'idea dello sfondo sotto.

DIV {background-image: url (logo.gif);}
continuo a scrivere per meglio
rendere l'idea dello sfondo sotto.

Se associato al tag body diventa lo sfondo di tutta la pagina.

BODY  {background-image: url ("logo.gif");}

background-repeat : repeat | repeat-x | repeat-y | no-repeat ;

Questo attributo serve per specificare come disporre le immagini di sfondo quando non si tratta di uno sfondo omogeneo che riempie tutta la pagina: repeat indica che l'immagine deve essere replicata in orizzontale e in verticale. repeat-x deve essere replicata soltanto in orizzontale. repeat-y deve essere replicata soltanto in verticale. Logicamente questo attributo deve essere adoperato in abbinamento a background-image.

{background-image : url(logo.gif);
      background-repeat : repeat-x ;}

{background-image : url(logo.gif);
      background-repeat : repeat-y ;}

{background-image : url(logo.gif);
      background-repeat : repeat ;}

     {background-image : url(logo.gif);
      background-repeat : no-repeat ;}

background-position : coordinate;

Questo attributo definisce il punto da cui iniziare a posizionare l'immagine e deve essere associato ai due precedentemente illustrati. Si possono adoperare parole chiave per la posizione orizzontale: left, center o right e parole chiave per la posizione verticale: top, center o bottom. E' anche possibile esprimere valori percentuali, dove: 0% 0% indica l'angolo in alto a sinistra (default) e: 100% 100% indica l'angolo in basso a destra. Per maggior precisione si possono specificare anche coordinate espresse in mm, cm, inc.

     {background-image : url(logo.gif);
      background-repeat : repeat-y;
      background-position : 50% 50%;}

      {background-image : url(logo.gif);
      background-repeat : repeat-x;
      background-position : 50% 50%;}

      {background-image : url(logo.gif);
      background-repeat : repeat-x;
      background-position : 10mm 10mm;}

background-attachment : scroll | fixed ;

Questo attributo definisce se l'immagine usata deve scorrere sullo schermo insieme al testo (scroll) oppure restare fissa sullo sfondo (fixed) nel momento in cui si scorre la pagina.

     {background-image : url(logo.gif);
      background-attachment : scroll;}

     {background-image : url(logo.gif);
      background-attachment : fixed;}

background : parametri;

Questo attributo da solo serve per specificare diversi attributi all'interno dello stesso separandoli semplicemente da uno spazio.

{background: red url(logo.gif) repeat-x fixed}

Vi ricordo due indirizzi sui quali reperire ulteriori informazioni: specifiche del W3C , dove troverete tutti gli attributi e i parametri ammessi e supportati dai CSS1 e : specifiche per i nuovi CSS2 dove alcuni di questi non sono ancora supportati da nessun browser, almeno non fino alle versioni 5.5 di IE e 6 di NS.

Continua con posizionare gli oggetti

Nuova pagina 1

CREARE UNA RETE

GUIDE PRATICHE

Abbiamo cambiato indirizzo, troverai il nuovo sito all'url

manuali.tutorialpc.it

HOME PAGE - CONTATTI - COLLABORA - PRIVACY - HOSTING - DOMINI

© Copyright 2002-2011. Tutto il materiale che potete visionare in questo sito è dei rispettivi proprietari.

Tutorialpc non si assume responsabilità per eventuali errori degli autori.
Risoluzione consigliata 800x600 pixel