Può avete visto caselle colorate sul Web e si chiedeva come gli sviluppatori li ha creati. Il segreto sta nel saper utilizzare i CSS per rendere le pagine web vengono visualizzati come più che ti piace. Se si desidera attirare l'attenzione a un controllo checkbox, magari girando il suo sfondo rosso e che lo circonda con un bordo di 10 pixel, sei libero di farlo una volta che si impara qualche CSS styling regole.

CSS

Cambiare il colore, dimensioni, posizione e altre proprietà di pagina Web oggetti alterando i valori di attributo CSS. CSS, acronimo di Cascading Style Sheets, consente di creare classi CSS che definiscono queste proprietà. Gli elementi della pagina possono quindi fare riferimento una classe CSS per nome. Se qualsiasi casella di controllo sulla tua pagina Web fa riferimento a questa classe CSS, acquisisce le proprietà definite nella classe creata. Separando lo stile di un elemento della pagina dal codice HTML che crea l'elemento, si rende il codice più semplice e più facile da mantenere. Ad esempio, se avete bisogno di cambiare il colore del testo di tutte le caselle di testo dal giallo al verde un giorno, semplicemente modificare la parola "gialla" a "verde" in una singola classe CSS. Tutte le caselle di controllo che fa riferimento alla classe visualizzerà il testo in verde.

Caselle di controllo

Una casella di controllo è un controllo di input HTML. Il tag di input HTML possa creare una varietà di controlli unici. È possibile utilizzare per creare una casella di testo o un pulsante, oltre a una casella di controllo. Gli sviluppatori inserire caselle di controllo nelle pagine Web al fine di raccogliere informazioni dai visitatori del sito. Una casella di controllo, che presenta uno stato checked e unchecked, è il perfetto controllo da utilizzare quando è necessario un utente di prendere una decisione oppure no. Quando si aggiunge un controllo checkbox a una pagina, acquisisce uno stile predefinito. La scatola ha una forma quadrata standard, non ha colore sfondo e colore del testo è nero. Molti sviluppatori sono felici con questo aspetto, se le caselle di controllo non giocare alcun ruolo prominente sulla pagina Web. È possibile, tuttavia attirare l'attenzione su un particolare checkbox o semplicemente liven sulla tua pagina Web con grafica accattivante, colori e stili di carattere. Questo scopo, styling vostra caselle di controllo.

Stili di base

Gli sviluppatori di creare classi CSS loro istituzione nella sezione di stile di una pagina Web come illustrato nell'esempio seguente:

.redFontWithBorder {background-color: Red; border-style: solid; border-width: 2px;}

Questa classe denominata ".redFontWithBorder" definisce le proprietà CSS necessari per aggiungere un bordo intorno a un elemento di pagina e modificare il tipo di carattere in rosso. È quindi possibile aggiungere questo riferimento di classe a una casella di controllo come segue:

< input type = "checkbox" class = "redFontWithBorder" / >

Quando un browser consente di visualizzare questa casella di controllo, è necessario che la casella di controllo acquisirà le proprietà di stile definite dalla classe CSS. Molti altri attributi CSS esistono, compreso colore di sfondo, dimensione carattere, font-family e larghezza del bordo. È anche possibile utilizzare gli attributi width e height CSS per impostare le dimensioni di una casella di controllo. Mescolare diversi attributi CSS per creare lo stile che si adatta alle vostre esigenze.

Styling avanzato

Il World Wide Web Internet Consortium, organo di governo di Internet, elenca sette "pseudo-classi" è inoltre possibile utilizzare le caselle di controllo di stile. Queste classi sono ": attivo," ": messa a fuoco",": al passaggio del mouse," ": abilitato," ": disattivato," ": indeterminato"e": controllato." Una casella di controllo può avere più Stati. Quando i visitatori del sito apre una pagina Web contenente la casella di controllo, vedono stile predefinito della casella di controllo o qualsiasi stile creato per la casella di controllo. Quando un utente controlla la casella di controllo, lo stato cambia in "controllato". Quando l'utente posiziona il cursore del mouse su una casella di controllo, la casella di controllo acquisisce un stato "hover". Disattivazione di una casella di controllo dà uno stato "disattivato". Utilizzando uno dei sette pseudo-classi, è possibile effettuare la vostra caselle di controllo visualizzazione stili diversi in base al loro stato attuale.