December 22
Utilizzando il codice CSS, è possibile creare pulsanti attraenti, flessibili e funzionali, senza rallentare la tua pagina web con grafica inutili. CSS ha due stili di bordo, inserto e fin dall'inizio, che sono l'ideale per la creazione di un pulsante rialzato e un effetto pulsante premuto. Tuttavia, questi stili non sono le uniche opzioni disponibili. È inoltre possibile creare bottoni piatti e aggiungere un elemento a sottolineare il pulsante mentre in bilico con il mouse.
1 Inserisci il testo del link (<a href>) con uno spazio (& nbsp;) tra ciascun collegamento per i pulsanti nel corpo (<body>) del documento HTML. Assegnare la stessa classe per ogni link.
Ad esempio, il codice seguente contiene cinque pulsanti. Sostituire il "#" con il tuo link desiderato. "Pulsante." La classe per ogni link è Le parole che appariranno sui pulsanti sono GET, lì, se, voi e può. Sostituire queste parole con le parole che si desidera visualizzare sul pulsante.
<Body>
<P>
<a href="#" class="button"> Get </a> & nbsp;
<a href="#" class="button"> Ci </a> & nbsp;
<a href="#" class="button"> Se </a> & nbsp;
<a href="#" class="button"> È </A> & nbsp;
<a href="#" class="button"> Può </a>
</ P>
</ Body>
2 tag tipo di stile nell'intestazione (<head>) sezione del documento sotto i tag di intestazione HTML e soprattutto eventuali tag JavaScript.
Style Tag:
<Style type = "text / css">
<! -
->
</ Style>
3 Digitare il "bottone" di classe sulla riga vuota tra i tag di stile. Utilizzare "a.button" per applicare le impostazioni a qualsiasi tag <a> con la classe "pulsante". Digitare le impostazioni per il pulsante. Le istruzioni all'interno dei tag di commento /
/ Descrivervi ciò che il codice sta dicendo il browser per fare. Il tuo browser ignora le informazioni all'interno dei tag di commento.
Impostazioni pulsanti:
a.button / Le seguenti impostazioni si applicano a tutti i tag con la classe impostata pulsante. /
{
background: # 88bbee; / Impostare lo sfondo per l'esagono colore # 88bbee. /
border: 2px # 88bbee fin dall'inizio; / Impostare la larghezza del bordo di due pixel, colore del bordo per esadecimale # 88bbee e lo stile della linea di partenza. /
padding: 1px 4px; / Pad il collegamento di un pixel sui lati superiore e inferiore e da quattro pixel sui lati destro e sinistro. /
colore nero; / Il colore del testo del collegamento è il nero. /
text-decoration: none; / Non aggiungere decorazioni per il testo del link. /
font: 15px Arial grassetto, Verdana, Helvetica, sans-serif; / Impostare la larghezza dei caratteri in grassetto, la dimensione del carattere di 15 pixel e font da Arial. Se Arial non è disponibile, utilizzare Verdana, altrimenti usare Helvetica, altrimenti usare san serif in questo ordine. /
width: 100px; / Impostare la larghezza del pulsante per 100 pixel (cioè solo). /
text-align: center; / Centro il testo del link nel pulsante. /
}
4 Digitare i "con il mouse sopra link" Impostazioni sotto le impostazioni dei pulsanti tra i tag di stile. Lo scopo di tutte queste modifiche è di dare l'aspetto di un pulsante premuto.
Impostazioni Hover:
a.button: hover /
Le seguenti impostazioni si applicano a tutti i tag con la classe impostata pulsante quando un utente passa sopra l'elemento con il mouse /.
{
border-style: inserto; / I cambiamenti di stile di confine da fin da incasso. /
background-color: # 99CCFF; / I cambiamenti colore di sfondo da esadecimale # 88bbee in esadecimale # 99CCFF, che è un colore più brillante. /
padding: 2px 3px 0 5px; / I cambiamenti imbottitura da un pixel per pixel quattro a due per tre pixel. Questo sposta il testo di un pixel a destra e un pixel verso il basso. /
text-transform: uppercase; Text / modifiche a tutte le lettere maiuscole. /
}
5 Digitare il link visitato e le impostazioni dei collegamenti attivi al di sotto delle impostazioni hover tra i tag di stile.
Visitato e impostazioni attive:
a.button: visited / Questa impostazione si applica ai pulsanti dopo che sono stati cliccato /.
{
colore nero; / Mantenere il colore del nero testo del link /
}
a.button: attiva / Questa impostazione si applica ai pulsanti attivi /.
{
colore nero; / Mantenere il colore del nero testo del link /
}