Visualizzazione dei risultati da 1 a 8 su 8

Discussione: [CSS] Link e Classi

  1. #1
    Utente di HTML.it
    Registrato dal
    Aug 2002
    Messaggi
    87

    [CSS] Link e Classi

    Ciao ragazzi, mi scuso per riaprire un argomento su cui si è già discusso più volte, ma ho provato a leggere i post vecchi e la guida sui CSS e la cosa non mi è ancora chiara
    Supponiamo che io abbia una classe
    codice:
    .pippo { ... }
    che uso tranquillamente con:
    codice:
    <p class="pippo">blablabla</p>
    Se ora volessi che se dentro a blablabla ci sia un link del tipo:
    codice:
    <p class="pippo">Questo è un <a>link</a></p>
    in questo modo la parola link non viene formattata secondo pippo, perchè seguirà le eventuali direttive
    a:link, a:hover ecc.. presenti nel CSS.
    Però anche se faccio:
    codice:
    <a class="pippo">link</a></p>
    non funziona...
    Se invece faccio:
    codice:
    .pippo a{ ... }
    <p class="pippo">questo è un <a>link</a></p>
    link viene formattato secondo pippo ma "questo è un" no...
    Sembra funzionare se definisco il CCS così:
    codice:
    .pippo{ ... }
    .pippo a{ ... }
    ma per ogni classe devo ricopiarla due volte aggiungendo a e cambiando magari un solo parametro.
    In sostanza vorrei che un link all'interno di un paragrafo segua esattamente lo stesso stile dell'intero paragrafo, e al massimo fargli cambiare un attributo quale il colore.
    Spero di essere stato chiaro
    grazie ciao!!

  2. #2
    Utente di HTML.it L'avatar di salasir
    Registrato dal
    Apr 2004
    Messaggi
    1,881
    Ogni browser ha dei CSS di default che vengono utilizzati in mancanza di altre specifiche.
    Quindi se definisci la classe solo per

    quando viene incontrato un tag <a> che ha una definizione di default, questo prende le definizioni
    codice:
    a { definizioni default}
    Le strade sono svariate a seconda di quello che vuoi ottenere.
    Tutti i link della pagina, ovunque risiedano, hanno la stessa impostazione: definisci gli attributi sotto un a { ... }
    Solo i link dentro a

    devono assumere quelle caratteristiche: definisci gli attributi sotto un p a { ... }.
    Attribuisci una classe speciale ad un paragrafo o allo stesso link:
    definisci gli attributi sotto un .classe a { ... } oppure p.classe a { ... }

  3. #3
    Utente di HTML.it
    Registrato dal
    Aug 2002
    Messaggi
    87
    Le strade sono svariate a seconda di quello che vuoi ottenere.
    Tutti i link della pagina, ovunque risiedano, hanno la stessa impostazione: definisci gli attributi sotto un a { ... }
    Chiaro.
    Solo i link dentro a

    devono assumere quelle caratteristiche: definisci gli attributi sotto un p a { ... }.
    Ok, ma se voglio che p e i link dentro a p abbiamo gli stessi attributi, devo definirli due volte? Prima in p {color: red} e poi in p a {color: red}
    Attribuisci una classe speciale ad un paragrafo o allo stesso link: definisci gli attributi sotto un .classe a { ... } oppure p.classe a { ... }
    Ok, stessa domanda di prima, devo definire due volte la classe prima senza a e poi con a? .pippo {attributi} .pippo a {stessi attributi di prima}
    Grazie!

  4. #4
    Utente di HTML.it L'avatar di salasir
    Registrato dal
    Apr 2004
    Messaggi
    1,881
    Solitamente per i tag <a> si definiscono attributi diversi da quelli per il tag

    .
    Per i paragrafi, sempre che non ti convenga definirli su html o body oppure sull'id del contenitore, definisci il tipo di carattere, la dimensione, il colore, ecc...
    Per i link definisci il colore (che altrimenti prende quello di default) la sottolineatura, ecc. mentre per la dimensione, il carattere, ecc.. le eredita dalla definizione superiore (

    , <body>, contenitore).
    Quindi, p.e.:
    codice:
      p {font: 1.1em Verdana,Arial,sans-serif; }
      p a { text-decoration:underline; }
    ..
    Spero di essere stato chiaro.

    PS Ovviamente il colore dei link è uno degli attributi definiti nel default, per cui è quasi obbligatorio definirlo!

  5. #5
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Fermo restando che salasir ha ragione, sia sulla sintassi che sulle motivazioni che spingono i browser a visualizzare i link in modo dal resto del testo, solo ai fini della verifica della sintassi mi e` venuta un'idea (da verificare).


    Puoi definire le varie classi, come hai fatto prima, e poi:
    a:link, a:hover {
    color: inherit;
    text-decoration: inherit;
    /* eventuali altre proprieta` */
    }


    Se non funziona, devi definire
    .classe, .classe a:link, .classe a:hover { ... }
    per ogni classe.
    In questo modo non devi ripetere tutte le proprieta`, ma solo i selettori.
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  6. #6
    Utente di HTML.it
    Registrato dal
    Aug 2002
    Messaggi
    87
    Quindi se ho capito bene posso fare:
    .testo {font-size: 10px;
    color: red;
    text-align: left;
    }
    .testo a:link {
    font-size: 12px;
    }

    <p class="testo">Questo è un <a>link</a></p>

    I link di .testo ereditano lo stile da .testo eccetto per il font-size, e nel paragrafo, 'link' dovrebbe apparire dello stesso stile di .testo ma più grande di 2 pixel?
    Ho appena fatto una prova ma mi sembra non funzionare.. cosa mi sfugge ?

  7. #7
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    No.
    I link ereditano le caratteristiche non altrimenti definite.
    Dato che il browser di suo definisce un colore ed una decorazione per i link, queste due caratteristiche non vengono ereditate direttamente.

    Per farle ereditare, dovresti definirle come inherit; riprendendo il tuo esempio:
    .testo a:link, .testo a:hover {
    font-size: 12px;
    color: inherit;
    text-decoration: inherit;
    }
    (pero` non ho fatto esperimenti in tal senso).
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  8. #8
    Utente di HTML.it
    Registrato dal
    Aug 2002
    Messaggi
    87
    Si funziona e finalmente mi è tutto chiaro
    Grazie a tutti e due

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.