Quando tu costruire un sito web da zero, è intelligente iniziare con gli stili di base definiti. È come iniziare con una tela pulita e pennelli freschi. Uno dei primi problemi che devono affrontare i web designer è che browser web sono tutti diversi. La dimensione del carattere predefinita è diversa da piattaforma a piattaforma, la famiglia di caratteri predefinita è diversa, alcuni browser definiscono i margini e il riempimento sul tag del corpo mentre altri no, e così via. Supera queste incongruenze definendo gli stili predefiniti per le tue pagine web.
CSS e il set di caratteri
Per prima cosa, imposta il set di caratteri dei tuoi documenti CSS su utf-8. Sebbene sia probabile che la maggior parte delle pagine che progetti siano scritte in inglese, alcune potrebbero essere localizzate, adattate a contesti linguistici e culturali diversi. Quando lo sono, utf-8 semplifica il processo. Impostazione del set di caratteri nel foglio di stile esterno non avrà la precedenza su un HTTP intestazione, ma in tutte le altre situazioni lo farà.
È facile impostare il set di caratteri. Per la prima riga del documento CSS scrivi:
@charset "utf-8";
In questo modo, se utilizzi caratteri internazionali nella proprietà del contenuto o come nomi di classe e ID, il foglio di stile continuerà a funzionare correttamente.
Modellare il corpo della pagina
La prossima cosa di cui ha bisogno un foglio di stile predefinito sono gli stili da azzerare margini, padding e bordi. Ciò garantisce che tutti i browser inseriscano il contenuto nello stesso posto e che non vi siano spazi nascosti tra il browser e il contenuto. Per la maggior parte delle pagine Web, questo è troppo vicino al bordo per il testo, ma è importante iniziare da lì in modo che le immagini di sfondo e le divisioni del layout siano allineate correttamente.
html, corpo {
margine: 0px;
imbottitura: 0px;
bordo: 0px;
}
Imposta il colore di primo piano o del carattere predefinito su nero e il colore di sfondo predefinito su bianco. Anche se molto probabilmente cambierà per la maggior parte dei design di pagine Web, con questi colori standard impostati sul corpo e tag HTML in un primo momento rende la pagina più facile da leggere e con cui lavorare.
html, corpo {
colore: #000;
sfondo: #fff;
}
Stili di carattere predefiniti
La dimensione del carattere e la famiglia del carattere sono qualcosa che cambierà inevitabilmente una volta che il design prende piede, ma inizia con una dimensione del carattere predefinita di 1 em e un default famiglia di font di Arial, Ginevra, o qualche altro carattere sans-serif. L'uso di ems mantiene la pagina il più accessibile possibile e un carattere sans-serif è più leggibile sullo schermo.
html, corpo, p, th, td, li, dd, dt {
font: 1em Arial, Helvetica, sans-serif;
}
Potrebbero esserci altri posti in cui potresti trovare del testo, ma p, questo, td, li, dd, e dt sono un buon inizio per definire il carattere di base. Includere HTML e corpo per ogni evenienza, ma molti browser sovrascrivono il scelte di carattere se definisci i tuoi caratteri solo per l'HTML o il corpo.
Titoli
Intestazioni HTML sono importanti da utilizzare per aiutare a delineare il tuo sito e consentire ai motori di ricerca di approfondire il tuo sito. Senza stili, sono tutti abbastanza brutti, quindi imposta gli stili predefiniti su tutti e definisci la famiglia di caratteri e le dimensioni dei caratteri per ciascuno.
h1, h2, h3, h4, h5, h6 {
font-family: Arial, Helvetica, sans-serif;
}
h1 { dimensione del carattere: 2em; }
h2 { dimensione del carattere: 1.5em; }
h3 { dimensione del carattere: 1.2em; }
h4 { dimensione del carattere: 1.0em; }
h5 { dimensione del carattere: 0.9em; }
h6 { dimensione del carattere: 0.8em; }
Non dimenticare i link
Lo stile dei colori dei collegamenti è quasi sempre una parte fondamentale del design, ma se non li definisci negli stili predefiniti, è probabile che dimenticherai almeno una delle pseudo-classi. Definirli con qualche piccola variazione sul blu e poi cambiarli una volta definita la tavolozza dei colori per il sito.
Per impostare il link nei toni del blu, impostare:
- link come blu
- link visitati come blu scuro dark
- link al passaggio del mouse come azzurro
- link attivi come un blu ancora più pallido
Come mostrato in questo esempio:
a: link { colore: #00f; }
a: visitato { colore: #009; }
a: hover { color: #06f; }
a: attivo { colore: #0cf; }
Disegnando i collegamenti con uno schema di colori abbastanza innocuo, ti assicura di non dimenticare nessuna delle classi e le rende anche un po' meno rumorose rispetto al blu, al rosso e al viola predefiniti.
Foglio di stile completo
Ecco il foglio di stile completo:
@charset "utf-8";
html, corpo {
margine: 0px;
imbottitura: 0px;
bordo: 0px;
colore: #000;
sfondo: #fff;
}
html, corpo, p, th, td, li, dd, dt {
font: 1em Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: Arial, Helvetica, sans-serif;
}
h1 { dimensione del carattere: 2em; }
h2 { dimensione del carattere: 1.5em; }
h3 { dimensione del carattere: 1.2em; }
h4 { dimensione del carattere: 1.0em; }
h5 { dimensione del carattere: 0.9em; }
h6 { dimensione del carattere: 0.8em; }
a: link { colore: #00f; }
a: visitato { colore: #009; }
a: hover { color: #06f; }
a: attivo { colore: #0cf; }