Risorse per webmaster

L A   C O M U N I T À   V I R T U A L E   I T A L I A N A   P E R   W E B   M A S T E R S

 
 
      Tecnologie
      HTML
      CSS
      DHTML
      FLASH
      ASP
      PHP
      JSP
      PERL
      XML
      SMIL
      WIRELESS
      PALMARI
      APACHE
      MYSQL
      PICOSQL
 
      Grafica
 
      Servizi
 
      Raccolte
 
      Recensioni
 
      Analisi
 
      Disclaimer

   Per tutti
 
  .: Magazine
  .: Editor
  .: Appunti
  .: Gratis
  .: Scripts
  .: Components
 
   Home page

Partner
Comunicati stampa
Proposte di viaggio
Prenotazione hotel
Prenota vacanze
Accessori palmari
Cerca alberghi
Guide turistiche

versione stampabile Mostra una versione adatta per la stampa  

Livello di difficoltà:Livello di difficoltà: basso  
I Css, Cascade style sheets, che in italiano significa fogli di stile a cascata, sono una tecnologia per migliorare le proprie pagine Web. Sono stati implementati dal W3 Consorzium nella quarta versione di Html.
 

Posizionare gli elementi

Cascade style sheets
Utilizzando i fogli di stile si possono posizionare gli elementi in un qualsiasi punto del documento. In questo modo si puo' risparmiare tempo prezioso, altresi' sprecato nella creazione di complicate tabelle usate per perfezionare la distribuzione degli oggetti.
Ecco quindi le proprieta' da utilizzare per posizionare gli elementi:

Position
Imposta la posizione di un elemento. I valori possibili sono:
  • relative relativamente ad altri elementi.

  • static (default).

  • absolute la posizione dell'oggetto e' assoluta: in relazione a nessun altro elemento.
    Il codice, per esempio potrebbe essere:
    #nomeID { position: absolute }

    Left
    Attribuisce il limite sinistro all'elemento. I valori che puo' assumere sono:

  • unita' di misura quali pixel, punti, pollici ecc.

  • auto (default).

  • percentuale calcolata in relazione alle dimensioni dell'elemento parent. Se tali dimensioni sono impostate su auto, il valore rimane indefinito.
    Per esempio:
    #nomeID { left: 7em }

    Top
    Attribuisce il limite superiore all'elemento. I valori che puo' assumere sono:

  • unita' di misura quali pixel, punti, pollici ecc.

  • auto (default).

  • percentuale calcolata in relazione alle dimensioni dell'elemento parent. Se tali dimensioni sono impostate su auto, il valore rimane indefinito.
    Per esempio:
    #nomeID { top: 20ex }

    Clip
    Individua un'area appartenente a un elemento la sola che deve essere visualizzata. I valori che puo' assumere sono:

  • shape rect(top right bottom left)

  • auto (default).
    Per esempio:
    #nomeID { clip: rect(10pt 100pt 100pt 10pt) }

    Overflow
    Gestisce i casi in cui il contenuto di un elemento superi le dimensioni dell'area all'interno della quale deve essere inserito. I valori che puo' assumere sono:

  • visible visibile.

  • hidden nascosto.

  • auto (default).

  • scroll all'area viene aggiunta una barra di scorrimento.
    Per esempio:
    #nomeID { overflow: hidden }

    Visibility
    Attribuisce all'elemento la possibilita' di essere visto dall'utente. Tramite JavaScript, il suo valore iniziale puo' essere cambiato. Le possibilita' di scelta sono:

  • visible visibile.

  • hidden nascosto.

  • inherit inerente ad altri elementi.

  • auto (default).
    Per esempio:
    #nomeID { visibility: visible }

    Z-index
    Attribuisce un indice all'oggetto specificato in modo da permettere l'accavallamento tra oggetti. Gli elementi con un indice-z piu' basso appariranno davanti. Le possibilita' di scelta sono:

  • indice un numero da 1 in poi.

  • auto (default).
    Per esempio:
    #nomeID { z-index: 1 }

    Float
    Permette il posizionamento del testo intorno a un elemento. I possibili valori sono:

  • left sinistra.

  • right destra.

  • none (default).
    Per esempio:
    image { float: right }

    Clear
    Definisce la posizione di un oggetto rispetto a un altro. I possibili valori sono:

  • left sinistra.

  • right destra.

  • both

  • none (default).
    Per esempio:
    font { clear: left }

  •  

     
     
    Home > css > ...   © 1999-2017 Risorse.net, tutti i diritti riservati