August 17
Un modo per catturare l'attenzione di un visitatore del sito è quello di rendere le parole sul colore cambio pagina quando si spostano il mouse sopra. Cascading Style Sheets fornisce una soluzione per realizzare questo compito con la pseudo-classe chiamata hover.
Cambiare il colore del testo con i CSS inizia con la selezione di un tag HTML nel corpo del documento. (Se si sta navigando in Internet utilizzando Internet Explorer 7 o inferiore, questa tecnica funziona solo se si utilizza il tag <a>. Se si utilizza Internet Explorer 8 o Firefox 3, queste istruzioni funzioneranno su qualsiasi tag HTML.)
Utilizzare il tag "span" per modificare le parole nella frase. Ecco un esempio:
Mangerò solo il gelato se ha <span> caramello </ span> <span> cioccolato </ span> o <span> hot fudge </ span>.
Aggiungere i seguenti nomi di classe all'interno all'inizio tag "span" per differenziare ogni topping gelato:
Mangerò solo il gelato se ha <span class = "caramel"> caramello </ span>, <span class = "cioccolato"> cioccolato </ span> o <span class = "fondente"> hot fudge </ span >.
I nomi delle classi sono entrambi utilizzati per identificare quali parole ci toccheranno con le nostre regole di stile e per tenere traccia di ciò che stiamo cambiando.
CSS può essere impostato uno dei tre modi: locali, interni ed esterni. Questo processo specifico, tuttavia, può essere ottenuto solo internamente o esternamente.
Un foglio di stile locale consiste iniziale e finale </ style> tag <style> e un insieme di istruzioni tra loro. I tag di stile può essere eseguito solo tra i tag <head> </ head> tag nella parte superiore del documento. Un foglio di stile locale influenza solo la pagina in cui si trova.
Digitare l'inizio e la fine <style> </ style> tag tra i tag <head> </ head> tag nella parte superiore del documento HTML. Quindi digitare la parola "span" tra di loro. Aggiungere il seguente codice dopo "span" come illustrato:
<Style>
arco {color: blue;}
</ Style>
Aggiungi altri tre "di span" dopo il "span" iniziale, seguito da un periodo e i nomi delle classi di ogni topping gelato, come illustrato:
<Style>
arco {color: blue;}
span.caramel
span.chocolate
span.fudge
</ Style>
Aggiungere i due punti, più la pseudo-classe "hover" dopo ciascun nome topping:
<Style>
arco {color: blue;}
span.caramel: hover
span.chocolate: hover
span.fudge: hover
</ Style>
Aggiungere una parentesi graffa sinistra, quindi "colore", due punti e un colore diverso per ogni sapore. Terminare le dichiarazioni con un punto e virgola e una parentesi graffa destra, come mostrato:
<Style>
arco {color: blue;}
span.caramel: hover {color: red;}
span.chocolate: hover {color: green;}
span.fudge: hover {color: rosa;}
</ Style>
Un foglio di stile esterno è semplicemente un file di testo salvato con estensione CSS. Copiare i regole di stile che si trovano tra i tag <style> </ style> tag nella dichiarazione di cui sopra, quindi, aggiungere il seguente codice tra i tag <head> </ head> tag:
<Link rel = "stylesheet" type = "text / css" href = "percorso / filename.css" />
Quando si posiziona il mouse sopra il testo, la parola "caramello" diventa di colore rosso, "cioccolato" diventa verde e "fondente" si tinge di rosa.