Prima di CSS, web designer mescolati caratteri e colori nello stesso codice che componevano i loro elementi della pagina Web. Un pulsante HTML, per esempio, potrebbe aver contenuto il tag "input" che definisce il pulsante, così come un tag "font" per impostare carattere del pulsante. Gli sviluppatori Savvy ora utilizzare fogli di stile CSS per separare il codice che crea un elemento di pagina Web dal codice che indica i browser come visualizzare esso. Quando è necessario aggiungere un tocco di stile a una pagina Web, lo stile i font dei pulsanti e colori usando classi CSS.

istruzione

1 Aprire il Blocco note o qualsiasi editor HTML. Copiare il codice riportato di seguito e incollarlo nella sezione corpo di un nuovo documento HTML:

<Class input = "style1" type = valore "pulsante" = "Pulsante 1" />

<Class input = "style2" type = valore "pulsante" = "Pulsante 2" />

Questo codice crea due pulsanti che fanno riferimento a due classi CSS denominati "style1" e "style2." Quelle classi di controllo come i pulsanti vengono visualizzati nella pagina Web.

2 Incollare il seguente codice nella sezione "testa" del documento:

.style1 {color: red; background-color: yellow; font-size: 2em; font-weight: bold; font-family: "Times New Roman", Arial, serif;}

.style2 {{color: blue; font-size: 0.8em; font-weight: bold; font-family: Georgia, Helvetica, Arial;}

Questo codice CSS crea la "style1" e classi "STYLE2" a cui fa riferimento i pulsanti nel passaggio precedente. Nota gli attributi di ogni classe. L'attributo colore imposta il colore del testo di primo piano del pulsante. Il background-attributo controlla il colore di sfondo del pulsante. L'attributo font-size, set per 2em unità nella prima classe, determina la dimensione del carattere del pulsante. L'attributo font-family dice browser per tentare di utilizzare l'elenco dei caratteri mostrati nell'ordine in cui appaiono. Mettere tra parentesi intorno nomi dei font che contengono spazi, come ad esempio "Times New Roman".

3 Salvare il documento e visualizzarlo in qualsiasi browser. I due pulsanti visualizzare le caratteristiche di colore e caratteri definiti nelle definizioni delle classi CSS. Il secondo pulsante non ha colore di sfondo perché la classe style2 a cui fa riferimento non ha fissato quella proprietà.

Consigli e avvertenze

• E 'saggio per specificare un elenco di nomi di caratteri desiderati in l'attributo CSS font-family perché alcuni utenti potrebbero non avere il font desiderato installato sul proprio computer. In questi casi, i loro browser ignoreranno quel tipo di carattere e tentare di utilizzare il prossimo nella lista.
• Sperimentando con diverse combinazioni di CSS, si può produrre una varietà di personalizzato cerca tutti i pulsanti HTML.