3 caratteri di un colore, il resto in nero

[Scellino02]

Ciao a tutti, ho la necessità di scrivere qualcosa del genere con i css, vi faccio un paio di esempi:

Blablablabla ciaooo
oppure
CiaoCiaoBlabla buonanotte

E poi devo devo inserire un link su questi due testi...
...è fattibile, con i css, specificare che le prime 2 o 3 lettere devono essere di un colore differente da tutto il resto?

Avendo voi questa stessa necessità, come vi comportereste? qual'è il modo migliore per realizzare qualcosa del genere?

Grazie 1000

[Graboid]

purtroopo non si può con i css senza aggiungere markup.

Potresti fare così:

blabla<span class="red">blabla</span>blabla

[Mich_]

E poi devo devo inserire un link su questi due testi

Un link ha comunque necessita` di marcatura specifica.
Quindi il codice HTML deve essere:

Blablablabla ciaooo

Nota che non ci sono spazi fuori dalle parentesi angolate, in modo che non se ne creino nel testo visualizzato dal browser.

Poi con i CSS puoi dare lo stile che vuoi al pezzo del link, con i selettori:
a { ... }
a:hover { ... }


PS: ho intrpretato che il link dovesse esser al parte rossa, ma se invece il link deve essere tutta la scritta, la marcatura di Geraboid e` corretta; nel CSS dovrai invece specificare gli stili per:
a { ... }
a:hover { ... }
a span { ... }
a:hover span { ... }

[Scellino02]

Grazie per le risposte ragazzi... fino a qualche minuto fa, con il vostro aiuto pensavo di aver risolto... poi mi sono ricordato che ho la necessità di uno stato "Active" oltra allo stato "Hover" e quindi mi ritrovo punto e a capo!

Precisamente il problema è che quando il link è attivo, mi deve cambiare anche la class allo span! come posso risolvere?

Io ho provato in questo modo, ma non funziona:

<a href="#" onFocus="document.getElementById('m1').className='VociMenuBianco';" onmouseover="document.getElementById('m1').className='VociMenuBianco';" onmouseout="document.getElementById('m1').className='VociMenuArancio';"  class="xxx">BlaBlaBlaBla<span class="VociMenuArancio" id="m1">BleBleBle</span>BloBloBlo</a 

In questo modo, mi funziona il cambio della classe solo onmouseover e onmouseout, ma ignora l' onFocus. Come mai? Forse non è corretto scrivere onFocus per indicare lo stato Active?

Spero di essere stato chiaro nella spiegazione!
Mi aiutate a risolvere?

[Mich_]

Ti conviene lasicar perdere JS. Aumenta solo la confusione, e puo` contrastare con i CSS.

Nella mia risposta di prima avevo gia` previsto che lo stato fosse diverso.
Nei CSS l'evento "mouse sopra il link" si chiama :hover

Non hai specificato se il link deve comprendere tutta la parola o e` solo la parte colorata, ma avevo gia` risposto ad ambedue i casi.

[Scellino02]

Si effettivamente, avevo dimenticato di specificare che il mio link comprende tutte le letter, sia quelle arancio che quelle nere...
Mich_, ma allora evitando js come potrei risolvere? Attualmente senza js non riesco a cambiare lo stato dello span quando passo sul link
il mio link A.ecc_ecc comprende questo:

A.VociMenu{
display:block;
width:186px !important;
width:206px;
height:19px;
padding-left:20px;
line-height:19px;
background:url(images/VociMenu.jpg) no-repeat top center;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#FFFFFF;
font-size:11px;
}

...ed ha i famosi altri due stati cioè over e active


io ho provato come hai detto tu, con il tuo esempio di css, ma per ora ho ancora il problema dello stato active(cioè dopo il click)... hai una sluzione per questo?

Forse adesso il mio problema è più chiaro...

[Mich_]

Intanto usa la sintassi corretta.
Il tag <A> non esiste, pertanto non esiste neppure il selettore A.
I selettori di tag vanno scritti tutti in minuscolo. Alcuni browser accettano anche le maiuscole, ma non tutti.

Lo stato :hover (con l'acca) corrisponde al mouse sopra il link
Lo stato :active corrisponde al momento in cui il bottone del mouse e` premuto.
Nei CSS occorre rispettare l'ordine:
:link, :visited, :hover, :active

Dopo il click la pagina non esiste piu` (viene caricata una pagina nuova), quindi il problema dell':active e` da risolvere in altro modo (lato server?)
In casi particolari (ad es. link gestiti da JS) il problema occorre risolverlo in modi particolari, ma in tal caso devi spiegarti meglio.

[Scellino02]

Originariamente inviato da Mich_


Lo stato :hover (con l'acca) corrisponde al mouse sopra il link
Lo stato :active corrisponde al momento in cui il bottone del mouse e` premuto.
Nei CSS occorre rispettare l'ordine:
:link, :visited, :hover, :active

Dopo il click la pagina non esiste piu` (viene caricata una pagina nuova), quindi il problema dell':active e` da risolvere in altro modo (lato server?)
In casi particolari (ad es. link gestiti da JS) il problema occorre risolverlo in modi particolari, ma in tal caso devi spiegarti meglio.

grazie per la correzione della sintassi

Però a proposito del clik sul link... il mio problema resta perchè la pagina non viene ricaricata ma richiama un altra pagina all'interno di un iframe.

A proposito dell'ordine nei css,invece, mi puoi spiegare cosa intendi?
Cioè nn posso scrivere :link, :active, :hover, :visited?... Ma se devo seguire l'ordire che mi hai scritto tu e non voglio specificare uno di questi 4 stati? posso farlo? Oppure se specifico l'hover devo specificare anche il visited?...

[Mich_]

Non e` obbligatorio metterli tutti, ma l'ordine nei CSS e` significativo (sempre!!)

Nella programmazione moderna il target non c'e`, e i CSS non ne prevedono l'uso.
In tal caso l'unico sistema e` usare JS. L'evento che ti serve e` onclick

[Scellino02]

Quindi qualcosa tipo questo:
onClick="document.getElementById('m1').className=' VociMenuBianco';"
??

...con il className=xxx che fa cambiare il colore al testo ...giusto?