Crea il foglio di stile CSS
Allo stesso modo in cui abbiamo creato un file di testo separato per l'HTML, creerai un file di testo per il CSS. Se hai bisogno di immagini per questo processo, guarda il primo tutorial. Ecco i passaggi per creare il foglio di stile CSS nel Blocco note:
- Scegli File> Nuovo nel Blocco note per ottenere una finestra vuota
- Salva il file come CSS facendo clic su File <Salva con nome …
- Passare alla cartella my_website sul disco rigido
- Cambia "Salva come tipo:" in "Tutti i file"
- Assegna un nome al file "styles.css" (lascia le virgolette) e fai clic su Salva
Collega il foglio di stile CSS al tuo HTML
Una volta ottenuto un foglio di stile per il tuo sito Web, dovrai associarlo alla pagina Web stessa. Per fare ciò usi il tag link. Posiziona il seguente tag link ovunque all'interno del
tag del tuo documento pets.htm:
03 di 10 Quando scrivi XHTML per browser diversi, una cosa che imparerai è che sembrano avere margini e regole diversi per il modo in cui visualizzano le cose. Il modo migliore per assicurarti che il tuo sito abbia lo stesso aspetto nella maggior parte dei browser è non consentire l'impostazione predefinita dei margini come i browser. Preferisco iniziare le mie pagine nell'angolo in alto a sinistra, senza imbottiture o margini extra che circondano il testo. Anche se ho intenzione di riempire il contenuto, ho impostato i margini a zero in modo che io stia iniziando con la stessa tabula rasa. Per fare ciò, aggiungi quanto segue al tuo documento styles.css: Il carattere è spesso la prima cosa che vorrete cambiare su una pagina Web. Il carattere predefinito su una pagina Web può essere brutto, e in realtà si trova sul browser Web stesso, quindi se non definisci il carattere, non saprai davvero come sarà la tua pagina. In genere, si modificherà il carattere sui paragrafi o talvolta sull'intero documento stesso. Per questo sito definiremo il font a livello di intestazione e di paragrafo. Aggiungi quanto segue al tuo documento styles.css: Ho iniziato con 1em come dimensione di base per paragrafi e voci di elenco, quindi l'ho usato per impostare le dimensioni per i titoli. Non mi aspetto di usare un titolo più profondo di h4, ma se lo pianifichi vorrai anche modellarlo. I colori predefiniti per i collegamenti sono blu e viola rispettivamente per i collegamenti non visitati e visitati. Anche se questo è standard, potrebbe non adattarsi alla combinazione di colori delle tue pagine, quindi cambiamo. Nel tuo file styles.css, aggiungi quanto segue: Ho impostato tre stili di collegamento, il collegamento a: come predefinito, a: visitato per quando è stato visitato, cambio il colore e a: hover. Con a: hover ho il link ottenere un colore di sfondo e andare in grassetto per sottolineare che si tratta di un link per essere cliccato. Dal momento che mettiamo la sezione di navigazione (id = "nav") prima nell'HTML, diciamo prima lo stile. Dobbiamo indicare quanto dovrebbe essere ampio e mettere un margine più ampio sul lato destro in modo che il testo principale non si imbatta in esso. Ho anche messo un bordo attorno ad esso. Aggiungi il seguente codice CSS al tuo documento styles.css: La proprietà list-style imposta l'elenco all'interno della sezione di navigazione per non avere pallottole o numeri, e il .footer definisce la sezione sul copyright più piccola e centrata all'interno della sezione. Posizionando la tua sezione principale con il posizionamento assoluto puoi essere sicuro che rimarrà esattamente dove vuoi che rimanga sulla tua pagina web. Ho reso il mio 800px di larghezza per ospitare monitor più grandi, ma se hai un monitor più piccolo, potresti voler renderlo più stretto. Inserisci quanto segue nel tuo documento styles.css: Dato che ho già impostato il carattere del paragrafo sopra, ho voluto dare a ciascun paragrafo un "calcio" in più per farlo risaltare meglio. L'ho fatto mettendo un bordo in alto che ha evidenziato il paragrafo più che solo l'immagine. Inserisci quanto segue nel tuo documento styles.css: Ho deciso di farlo come una classe chiamata "topline" piuttosto che definire tutti i paragrafi in quel modo. In questo modo, se decido di avere un paragrafo senza una linea gialla in alto, posso semplicemente lasciare la classe = "topline" nel tag del paragrafo e non avrà il bordo superiore. Le immagini hanno generalmente un bordo intorno a loro, questo non è sempre visibile a meno che l'immagine non sia un link, ma mi piace avere una classe all'interno del mio foglio di stile CSS che disattiva automaticamente il bordo.Per questo foglio di stile, ho creato la classe "noborder" e la maggior parte delle immagini nel documento fanno parte di questa classe. L'altra parte speciale di queste immagini è la loro posizione sulla pagina. Volevo che facessero parte del paragrafo in cui si trovavano senza usare tabelle per allinearli. Il modo più semplice per farlo è usare la proprietà float CSS. Inserisci quanto segue nel tuo documento styles.css: Come puoi vedere, ci sono anche le proprietà del margine impostate sulle immagini, per assicurarti che non siano sfasciate contro il testo flottato che è accanto a loro nei paragrafi. Una volta salvato il CSS, puoi ricaricare la pagina pets.htm nel tuo browser. La pagina dovrebbe essere simile a quella mostrata in questa immagine, con le immagini allineate e la navigazione posizionata correttamente sul lato sinistro della pagina. Segui questi stessi passaggi per tutte le tue pagine interne per questo sito. Vuoi avere una pagina per ogni pagina nella tua navigazione. Correggere i margini della pagina
Modifica del carattere sulla pagina
Rendere i tuoi collegamenti più interessanti
Disegnare la sezione di navigazione
Posizionamento della sezione principale
Disegnare i tuoi paragrafi
Disegnare le immagini
Ora guarda la tua pagina completa
