Conflitto stili

[brain]

Ciao a tutti,
ho un problema su un CSS. Ho impostato uno stile <A> color rosso, solo che in un paio di casi ho bisogno che il testo non compaia di quel colore ma di uno differente. Allora ho creato due stili class che qui chiamerò .link1 e .link2.
Quando guardo la pagina online però, sebbene abbia assegnato al secondo stile ed al terzo le classi .link1 e 2 questi compaiono rossi.
Esiste un modo per poter superare questo ostacolo?
Grazie mille.

[fcaldera]

se posti il codice possiamo vedere dov'è il problema

[brain]

.Prodotto-list { color: #6e6e6e; font-style: normal; font-weight: bold; font-size: 14px; line-height: 20px; font-family: "Lucida Grande", Verdana, sans-serif; text-decoration: none }
a { color: #e11c25; font-style: normal; font-weight: normal; font-size: 11px; line-height: 20px; font-family: "Lucida Grande", Verdana, sans-serif; text-decoration: none }
body { color: #6f6f6f; font-style: normal; font-weight: normal; font-size: 11px; line-height: 20px; font-family: "Lucida Grande", Verdana, sans-serif; text-decoration: none }
p { color: #6f6f6f; font-style: normal; font-weight: normal; font-size: 11px; line-height: 20px; font-family: "Lucida Grande", Verdana, sans-serif; text-decoration: none }
td { color: #6f6f6f; font-style: normal; font-weight: normal; font-size: 11px; line-height: 20px; font-family: "Lucida Grande", Verdana, sans-serif; text-decoration: none }
.Categoria { color: #999; font-style: normal; font-weight: normal; font-size: 12px; line-height: 20px; font-family: "Lucida Grande", Verdana, sans-serif; text-decoration: none }
.form { color: #727272; font-style: normal; font-weight: normal; font-size: 13px; line-height: 24px; font-family: "Lucida Grande", Verdana, sans-serif; text-decoration: none }
.link-brain { color: #6f6f6f; font-style: normal; font-weight: normal; font-size: 11px; line-height: 11px; font-family: "Lucida Grande", Verdana, sans-serif; text-decoration: underline }
.Prodotto { color: #6e6e6e; font-style: normal; font-weight: normal; font-size: 16px; line-height: 20px; font-family: "Lucida Grande", Verdana, sans-serif; text-decoration: none }
.Titoli { color: #727272; font-style: normal; font-weight: normal; font-size: 17px; line-height: 24px; font-family: "Lucida Grande", Verdana, sans-serif; text-decoration: none }
.TornaIndice { color: #e11c25; font-style: normal; font-weight: normal; font-size: 12px; line-height: 20px; font-family: "Lucida Grande", Verdana, sans-serif; text-decoration: none }

[brain]

Pardon, inserisco i nomi indicati prima:

.link1 { color: #6e6e6e; font-style: normal; font-weight: bold; font-size: 14px; line-height: 20px; font-
family: "Lucida Grande", Verdana, sans-serif; text-decoration: none }
.link2 { color: #999; font-style: normal; font-weight: normal; font-size: 12px; line-height: 20px; font-family: "Lucida Grande", Verdana, sans-serif; text-decoration: none }
a { color: #e11c25; font-style: normal; font-weight: normal; font-size: 11px; line-height: 20px; font-family: "Lucida Grande", Verdana, sans-serif; text-decoration: none }
body { color: #6f6f6f; font-style: normal; font-weight: normal; font-size: 11px; line-height: 20px; font-family: "Lucida Grande", Verdana, sans-serif; text-decoration: none }
p { color: #6f6f6f; font-style: normal; font-weight: normal; font-size: 11px; line-height: 20px; font-family: "Lucida Grande", Verdana, sans-serif; text-decoration: none }
td { color: #6f6f6f; font-style: normal; font-weight: normal; font-size: 11px; line-height: 20px; font-family: "Lucida Grande", Verdana, sans-serif; text-decoration: none }
.form { color: #727272; font-style: normal; font-weight: normal; font-size: 13px; line-height: 24px; font-family: "Lucida Grande", Verdana, sans-serif; text-decoration: none }
.link-brain { color: #6f6f6f; font-style: normal; font-weight: normal; font-size: 11px; line-height: 11px; font-family: "Lucida Grande", Verdana, sans-serif; text-decoration: underline }
.Prodotto { color: #6e6e6e; font-style: normal; font-weight: normal; font-size: 16px; line-height: 20px; font-family: "Lucida Grande", Verdana, sans-serif; text-decoration: none }
.Titoli { color: #727272; font-style: normal; font-weight: normal; font-size: 17px; line-height: 24px; font-family: "Lucida Grande", Verdana, sans-serif; text-decoration: none }
.TornaIndice { color: #e11c25; font-style: normal; font-weight: normal; font-size: 12px; line-height: 20px; font-family: "Lucida Grande", Verdana, sans-serif; text-decoration: none }

[fcaldera]

.link1 { color: #6e6e6e; font-style: normal; font-weight: bold; font-size: 14px; line-height: 20px; font-
family: "Lucida Grande", Verdana, sans-serif; text-decoration: none }

.link2 { color: #999; font-style: normal; font-weight: normal; font-size: 12px; line-height: 20px; font-family: "Lucida Grande", Verdana, sans-serif; text-decoration: none }

a { color: #e11c25; font-style: normal; font-weight: normal; font-size: 11px; line-height: 20px; font-family: "Lucida Grande", Verdana, sans-serif; text-decoration: none }



messi in quest'ordine la regola applicata al link vince in cascata rispetto alle regole con le classi:
inverti di posizione così

a { color: #e11c25; font-style: normal; font-weight: normal; font-size: 11px; line-height: 20px; font-family: "Lucida Grande", Verdana, sans-serif; text-decoration: none }

a.link1 { color: #6e6e6e; font-style: normal; font-weight: bold; font-size: 14px; line-height: 20px; font-
family: "Lucida Grande", Verdana, sans-serif; text-decoration: none }

a.link2 { color: #999; font-style: normal; font-weight: normal; font-size: 12px; line-height: 20px; font-family: "Lucida Grande", Verdana, sans-serif; text-decoration: none }


ricorda poi di gestire il colore del link per tutte le pseudoclassi :hover, :active, :visited....

P.s. hai molte regole duplicate, quel css potrebbe essere ottimizzato.

[brain]

Grazie per il suggerimento.
In realtà ho anche provato ad invertire la posizione, mettendo link in alto. Purtroppo la cosa non sembra cambiare. Io non me ne intendo molto di CSS. Cosa intendi per ottimizzata?
Ci sono classi simili, ma non uguali. Tu come le imposteresti?

Grazie

[fcaldera]

io lo riscriverei così (cambiando le dimensioni in ems)

body, td {
    font            : 11px/20px "Lucida Grande", Verdana, sans-serif;
}

body * {    
    color           : #6f6f6f; 
}

a {
    text-decoration : none;
    font-style      : normal;
    font-size       : 1em;
}

a.link1 { 
    color: #6e6e6e; 
    font-weight: bold; 
    font-size: 1.3em; 
}

a.link2 { 
    color: #999; 
    font-size: 1.1em; 
}

.form { 
    color: #727272; 
    font-size: 1.2em; 
    line-height: 24px;  
}

.link-brain { 
    line-height: 11px; 
}

.Prodotto { 
    font-size: 1.46em; 
}

.Titoli { 
    color: #727272; 
    font-size: 1.56em;
    font-weight: normal; 
    line-height: 24px; 
}

.TornaIndice { 
    color: #e11c25; 
    font-size: 1.1em; 
}

Tra l'altro suggerisco di usare solo classi e id con lettere minuscole oppure di essere coerente con una notazione (alcune delle tue classi iniziano con una maiuscola, altri con una minuscola, altri hanno un trattino che alcuni browser potrebbero non 'digerire').

Ho eliminato i text-decoration: none (non hanno senso se utilizzati per elementi diversi dai link, da <ins> o da <del>) e font-weight: normal (anche se dipende a quali elementi lo applichi) e raggruppato font, line-height, color.

Ovviamente se usi questa forma più compatta ci saranno delle imperfezioni da correggere (perché non so a quale markup vengono applicate le tue regole)

[brain]

Grazie mille.
Mi sto rendendo conto sempre di più che dovrò studiarmi bene i CSS.

Ciao