CSS di messa a fuoco Styles

September 23

CSS di messa a fuoco Styles


Cascading Style Sheets consentono ai progettisti Web di applicare regole di progettazione per i loro siti web. Una di queste regole di progettazione è conosciuta come la messa a fuoco pseudo-classe. Questa regola consente ai progettisti web per lo stile l'aspetto dei campi di input di testo e link che richiedono l'input dalla tastiera del utente del sito. Una volta scritto nel file CSS, la regola messa a fuoco viene attivato quando l'utente naviga verso l'elemento di pagina Web che richiede l'input da tastiera.

Ingresso Campo Borders

Web designer portare l'attenzione su un campo di input di testo attiva utilizzando la regola messa a fuoco per mettere in evidenza il bordo del campo. Questa strategia di progettazione imposta il campo attivo da parte gli altri campi e permette all'utente Web di vedere chiaramente in quale campo di input suo cursore è posizionato. Questo aiuta a prevenire errori di input. Per esempio, un Web designer potrebbe mettere un 2-pixel, solido punto culminante rosso intorno al bordo di un campo di input che richiede il primo nome dell'utente web. Questo avrebbe portato l'attenzione sul primo campo nome e aiutare l'utente Web evitare un errore come ad esempio inserendo il suo cognome. La regola CSS per creare questa funzionalità sarebbe simile a questa: Ingresso: focus {border: 2px solid red;}.

Sfondi Campo di immissione

La regola messa a fuoco può essere utilizzato anche per lo stile sfondo di un campo di input da tastiera. Ad esempio, utilizzando l'esempio precedente, il progettista potrebbe stile sfondo del primo campo Nome. Potrebbe stile campo visualizzando un fondo giallo brillante oltre al bordo rosso quando il campo viene attivato. Poteva farlo rafforzando lo stato di messa a fuoco CSS per simile al seguente: Ingresso: focus {border: 2px solid red; background-color: yellow;}.

Collegamento

La pseudo-classe fuoco non è limitato a formare solo campi di input. La classe focus è disponibile per l'uso in collegamenti styling o tag di ancoraggio anche quando il visitatore del sito naviga al link utilizzando una tastiera. Tradizionalmente, l'hover pseudo-classe è utilizzata da web designer per lo stile link che l'utente è in bilico su. Questo stile viene applicato quando l'utente passa il mouse sopra il link prima del tempo che fa clic sul collegamento. La strategia di progettazione imposta il collegamento a parte il testo nella pagina Web. Tuttavia, la regola hover non si applica quando l'utente si sposta al link utilizzando una tastiera. Web designer che lo stile anche il legame con la classe di messa a fuoco in modo che gli utenti che navigano con una tastiera vedere lo stesso stile collegamento come coloro che navigano con un mouse. Questa è una regola CSS che utilizza la classe messa a fuoco per mettere uno sfondo rosso dietro un collegamento quando un utente Web naviga per il collegamento con una tastiera: a: focus {background: red;}.

Compliance Browser

Alcuni dei browser più vecchi non riconoscono la pseudo-classe fuoco CSS. Gli utenti di Internet Explorer versione 7 e precedenti non vedranno questa regola di progettazione.