Dall'invenzione del linguaggio di markup ipertestuale, HTML, i concetti di layout e layout dei documenti Web sono cambiati radicalmente. Con il supporto quasi completo dei browser più diffusi per gli standard dei fogli di stile CSS e CSS2, è diventato possibile influenzare quasi ogni aspetto della presentazione visiva di un documento. Ad esempio, puoi colorare lo sfondo di un collegamento, riempirlo con un'immagine e anche cambiare a seconda delle azioni dell'utente.
Necessario
- - la possibilità di modificare il testo del documento o il testo dei fogli di stile del documento;
- - un editor di testo che permette di salvare il documento nella codifica originale.
Istruzioni
Passo 1
Rendi lo sfondo del collegamento riempito uniformemente con un colore casuale aggiungendo le informazioni di stile in linea all'elemento A. Aggiungi lo stile agli attributi dell'elemento A corrispondente al collegamento di cui desideri modificare lo sfondo. Nel contenuto dell'attributo style, inserisci la proprietà CSS background-color con il valore dato, che è l'identificatore corretto per il colore di sfondo. Ad esempio, potrebbe assomigliare a questo:
testo del collegamento
Passo 2
Definisci lo sfondo del collegamento in un foglio di stile esterno o incorporato nel documento. Nel foglio di stile appropriato, aggiungi una serie di regole indirizzate da un selettore di un livello di specificità accettabile. Nel set di regole, inserisci la proprietà background-color nello stesso modo del passaggio precedente. Selezionare la specificità del selettore in base alle regole CSS2 a cascata e all'ambito desiderato. Quindi, se è necessario impostare il colore di un solo collegamento, ha senso utilizzare un selettore ID, se sono presenti più collegamenti di questo tipo, è meglio utilizzare un selettore di attributi basato sul valore della classe.
Ad esempio, per impostare uno sfondo verde per un collegamento specifico in un documento, puoi aggiungere una serie di regole al foglio di stile:
A # ID_VERDE
{
colore di sfondo: # 00FF00;
}
Dovresti anche impostare l'attributo ID dell'elemento A corrispondente al link desiderato su ID_GREEN:
testo del collegamento
Passaggio 3
Riempi lo sfondo del link con un'immagine. Segui i metodi descritti nei passaggi uno e due, ma invece della proprietà CSS background-color, usa background-image. Per esempio:
testo del collegamento
Se necessario, aggiungi una proprietà di ripetizione dello sfondo al set di regole CSS per definire le opzioni per la duplicazione dell'immagine di sfondo in orizzontale e in verticale.
Passaggio 4
Cambia lo sfondo del collegamento quando ci passi sopra o quando lo stato attivo si sposta. Aggiungi set di regole a un foglio di stile del documento esterno o incorporato che definiscono lo sfondo di un collegamento o di un gruppo di collegamenti in stati diversi. Usa i selettori di ID e attributi insieme alle pseudo-classi dinamiche: hover,: active e: focus. Ad esempio, affinché lo sfondo di un collegamento con un valore dell'attributo ID di ID_DYNAMIC_BACKGROUND sia rosso nello stato inattivo e verde nello stato sotto il cursore del mouse, è necessario aggiungere al foglio di stile i seguenti set di regole:
UN # ID_DYNAMIC_BACKGROUND
{
colore di sfondo: # FF0000;
}
A # ID_DYNAMIC_BACKGROUND: passa il mouse
{
colore di sfondo: # 00FF00;
}
Puoi fare lo stesso per creare uno sfondo con un'immagine che cambia dinamicamente.
