708 Shares 6459 views

sottolineatura decorativi CSS-elementi

foglio di stile Tecnologia ha due funzioni nella progettazione di pagine HTML. In primo luogo, con il suo aiuto, v'è una posizione di formazione dei singoli elementi del sito. In secondo luogo, rende le unità visivamente attraente per l'utente. Attuazione della seconda funzione avviene in molti modi. Uno di loro – di sottolineatura. CSS fornisce per la decorazione di questo attributo su testo.

Specifiche record attributi

Use testo- proprietà decorazione è semplice. Sufficiente registrarsi nel codice file CSS, la seguente riga per la voce:

decorazione su testo: znachenie_atributa;

Invece di "znachenie_atributa» specifica CSS offre una serie di opzioni:

  • sottolineare – la linea che si trova direttamente sotto il testo;
  • overline – linea parte dalla parte superiore del testo;
  • nessuno – la rimozione di tutti gli effetti decorativi;
  • ereditare – adotta il valore dell'elemento genitore.

Quanto sopra non sono tutte le possibili forme di registrazione, in quanto questo attributo specifica non solo sottolineare i CSS, ma anche altri effetti, come "battito" o il testo barrato.

Esempi di collegamenti ipertestuali di progettazione

Principianti nel web design e programmazione, la domanda sorge spontanea: perché la linea di fondo del testo? Agli albori dell'era della tecnologia di Internet questo metodo di ripartizione degli utenti per il fatto che di fronte a lui è un collegamento ipertestuale – Testo, cliccando sul quale verrà effettuata la transizione verso una nuova pagina.

Per impostazione predefinita, la proprietà Hyperlink impostata sottolineatura. In pratica, v'è un problema per rimuovere la linea dai dispositivi inattivi e renderla visibile come l'utente sposta il puntatore di mouse. Ecco un esempio di codice che disabilita i link di sottolineatura CSS:

a {text-decoration: none; }

Per i collegamenti attivi che utilizzano la seguente voce:

a: hover {text-decoration: underline;}

sottolineatura decorativo per avanzati

attributo standard testo- decorazione ha diverse limitazioni:

  • linea colore diverso dal colore del testo di collegamento, è impossibile distinguere tra loro "colorazione";
  • Solo la linea continua è utilizzato come il carattere di sottolineatura. CSS non comporta l'utilizzo di altri stili del marchio.

Ma le tecniche speciali aiutano bypass il look classico del testo. Nel primo caso, per impostare un collegamento ipertestuale utilizzando il tag opzionale .

Ad esempio:

<Span style = "color: blue "> Collegamento

. </ P >

Di conseguenza, la parola sulla pagina il collegamento ipertestuale sarà scritto in blu e il colore della linea sarà rossa.

Un altro metodo avanzato che consente la sottolineatura CSS, border-bottom. L'esempio seguente illustra il suo utilizzo:

un {border-bottom: 1px solid red;}

Il risultato sarà lo stesso come nell'esempio precedente. Ma questo metodo ha un vantaggio importante. Oltre a cambiare il colore della linea (attualmente impostata rosso – rosso), è possibile trasformare il metodo Iscrizione:

  • tratteggiata – fa il punto sottolinea;
  • tratteggiata – linea è costituita da ictus;
  • doppia – disegna una linea doppia.

Così, attributo fondo Border è più funzionale. In aggiunta alla visualizzazione della linea decorativa sotto il testo, esso consente di personalizzare l'aspetto.