Quando si crea 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 i web designer devono affrontare è che i browser Web sono tutti diversi. La dimensione del carattere predefinito è diversa da piattaforma a piattaforma, la famiglia di font predefinita è diversa, alcuni browser definiscono margini e spaziatura sul tag body mentre altri no, e così via. Risolvi queste incoerenze 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 utf-8 . Mentre è probabile che la maggior parte delle pagine che disegni siano scritte in inglese, alcune possono essere adattate localmente per diversi contesti linguistici e culturali. Quando lo sono, utf-8 semplifica il processo. L'impostazione del set di caratteri nel foglio di stile esterno non avrà la precedenza su un'intestazione HTTP, ma in tutte le altre situazioni, lo sarà.
È facile impostare il set di caratteri. Per la prima riga del documento CSS scrivi:
@charset "utf-8";
In questo modo, se si utilizzano caratteri internazionali nella proprietà del contenuto o come nomi di classi e ID, il foglio di stile continuerà a funzionare correttamente. La prossima cosa di cui un foglio di stile predefinito ha bisogno sono gli stili per azzerare margini, spaziature e bordi. Ciò assicura che tutti i browser inseriscano il contenuto nello stesso luogo e 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 di layout siano allineate correttamente. html, body { 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 delle progettazioni di pagine web, avere questi colori standard impostati sul corpo e il tag HTML in un primo momento rende la pagina più facile da leggere e lavorare. html, body { colore: # 000; sfondo: #fff; } La dimensione del font e la famiglia di font sono qualcosa che cambierà inevitabilmente una volta che il design ha preso piede, ma inizia con una dimensione del font predefinita di 1em e una famiglia di font predefinita di Arial, Geneva o qualche altro font sans-serif. L'uso di ems mantiene la pagina il più accessibile possibile e un font sans-serif è più leggibile sullo schermo. html, body, p, th, td, li, dd, dt { font: 1em Arial, Helvetica, sans-serif; }
Potrebbero esserci altri luoghi in cui potresti trovare del testo, ma p , esimo , 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 sostituiscono le scelte dei font se definisci solo i tuoi caratteri per l'HTML o il corpo. Le intestazioni HTML sono importanti da utilizzare per aiutare la struttura del tuo sito e consentire ai motori di ricerca di approfondire il tuo sito. Senza stili, sono tutti abbastanza brutti, quindi imposta tutti gli stili di default su tutti e definisci la famiglia di caratteri e le dimensioni dei caratteri per ognuno. h1, h2, h3, h4, h5, h6 { font-family: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {font-size: 0.8em; } Disegnare i colori dei collegamenti è quasi sempre una parte fondamentale del progetto, ma se non li definisci negli stili predefiniti, è probabile che dimenticherai almeno una delle pseudo-classi. Definiscili con qualche piccola variazione sul blu e poi modificali una volta che hai la tavolozza dei colori per il sito definito. Per impostare i collegamenti nei toni del blu, impostare: come mostrato in questo esempio: a: link {color: # 00f; }a: visited {color: # 009; }a: hover {color: # 06f; }a: active {color: # 0cf; }
Disegnando i collegamenti con una combinazione di colori abbastanza innocua, assicura che non dimenticherete nessuna delle classi e le renderà un po 'meno rumorose rispetto al blu, al rosso e al viola di default. Ecco il foglio di stile completo: @charset "utf-8"; html, body { margine: 0px; imbottitura: 0px; bordo: 0px; colore: # 000; sfondo: #fff; } html, body, 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 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {font-size: 0.8em; } a: link {color: # 00f; } a: visited {color: # 009; } a: hover {color: # 06f; } a: active {color: # 0cf; } Disegnare il corpo della pagina
Stili di carattere predefiniti
Notizie
Non dimenticare i collegamenti
Foglio di stile completo
