Nwlapcug.com


Stili CSS Focus

Stili CSS Focus


Fogli di stile CSS consentono ai progettisti Web di applicare regole di progettazione ai loro siti Web. Una di queste regole di progettazione è noto come la pseudo-classe di fuoco. Questa regola consente ai progettisti Web di stile l'aspetto dei campi di input di testo e link che richiedono l'input da tastiera dell'utente del sito Web. Una volta scritti nel file CSS, la regola di messa a fuoco viene attivata quando l'utente si sposta all'elemento di pagina Web che richiede l'input della tastiera.

Bordi del campo di input

Web designer portare l'attenzione a un campo di input di testo attivo utilizzando la regola di messa a fuoco per evidenziare il bordo del campo. Questa strategia di progettazione campo attivo distingue dagli altri campi e consente all'utente Web di vedere chiaramente in quale campo di input si trova suo cursore. Questo aiuta a prevenire gli errori di input. Per esempio, un Web designer potrebbe mettere un'evidenziazione 2 pixel, tinta di rossa intorno al bordo di un campo di input che richiede il nome dell'utente Web. Questo vorrei portare l'attenzione per il campo nome ed evitare un errore ad esempio l'immissione il suo ultimo nome utente Web. La regola CSS per creare questa funzionalità sarebbe simile a questa: ingresso: focus {border: 2px solid red;}.

Sfondi campo di input

La regola di messa a fuoco è utilizzabile anche per lo sfondo di un campo di input di tastiera di stile. Ad esempio, utilizzando l'esempio precedente, il progettista potrebbe stile sullo sfondo del campo di immissione nome. Egli potrebbe stile sul campo mediante la visualizzazione di uno sfondo giallo luminoso oltre il bordo rosso quando il campo è attivo. Egli potrebbe farlo migliorando la regola messa a fuoco CSS per essere simile alla seguente: ingresso: messa a fuoco {border: 2px rosso fisso; background-colore: giallo;}.

Collegamenti

La pseudo-classe di messa a fuoco non è limitata ai soli campi di modulo ingresso. La classe di messa a fuoco è anche disponibile per l'uso in stile link o tag di ancoraggio quando il visitatore del sito passa al collegamento utilizzando una tastiera. Tradizionalmente, la pseudoclasse hover è utilizzata da Web Designer per collegamenti di stile che l'utente sta librandosi sopra. Questo stile viene applicato quando l'utente passa il mouse sopra il link prima del momento in cui si fa clic sul link. La strategia di progettazione imposta il collegamento a parte il testo nella pagina Web. Tuttavia, la regola hover non si applica quando l'utente passa al collegamento utilizzando una tastiera. Web designer che anche il collegamento con la classe di fuoco di stile assicurarsi che quegli utenti che navigano con una tastiera vedono lo stesso stile di collegamento come coloro che navigare con il mouse. Si tratta di una regola CSS che utilizza la classe di fuoco per inserire uno sfondo rosso dietro un link quando un utente Web passa al collegamento con una tastiera: r: focus {background: red;}.

Conformità del browser

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