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.
 

Effetti interattivi sui links

Cascade style sheets
Nel passaggio precedente abbiamo visto tutti dei bellissimi stili, ma nessuno di essi era interattivo, ovvero non modificava in alcun modo a seconda delle azioni eseguite dall'utente.
I Css, come Javascript d'altronde, permette di interagire (anche se in maniera prettamente estetica) con gli eventi generati dal visitatore.
Tutti gli effetti che vedremo adesso hanno come oggetto gli hyperlink.

  • LINK NON SOTTOLINEATO
    Cominciamo eliminando la comune sottolineatura ai link ipertestuali. Sia Explorer che Netscape 4, permettono di eliminare la sottolineatura ai collegamenti. Ecco come fare.

    <STYLE>
    A:link, A:visited { text-decoration: none }
    </STYLE>



  • LINK NON SOTTOLINEATO AL PASSAGGIO DEL MOUSE
    E' uno degli effettipiu' aggrazziati tra quelli che vi presenteremo. Elimina la sottolineatura solo quando ci si passa sopra con il mouse. Invertendo i valori underline con none si otterra' l'effetto contrario.

    <STYLE>
    A:link, A:visited { text-decoration: underline }
    A:hover { text-decoration: none }
    </STYLE>



  • LINK SOPRALINEATO AL PASSAGGIO DEL MOUSE
    Essendo un effetto poco usato, potrebbe diventare la peculiarita' del vs sito web. Anche in questo caso, invertendo i valori overline e none, si otterra' un effetto opposto.
    Ecco come fare:

    <STYLE>
    A:link, A:visited { text-decoration: overline }
    A:hover { text-decoration: none }
    </STYLE>



  • LINK CON CAMBIO DI COLORE AL PASSAGGIO DEL MOUSE
    Una volta che il mouse passa sopra il link, questo cambia di colore. Il colore puo' essere espresso sia in valori esadecimali (per es. #000080) sia in inglese (navy). Ecco il codice:

    <STYLE>
    A:link, A:hover { color:navy }
    </STYLE>



  • CAMBIO DEL COLORE DI SFONDO AL PASSAGGIO DEL MOUSE
    E' possibile impostare un colore di sfondo ai link, anche solo quando si passa sopra con il mouse.

    <STYLE>
    A:link, A:hover { background:red }
    </STYLE>

  •  

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