Crea il foglio di stile CSS
Allo stesso modo abbiamo creato un file di testo separato per il HTML, creerai un file di testo per il CSS. Se hai bisogno di elementi visivi per questo processo, consulta il primo tutorial. Ecco i passaggi per creare il tuo foglio di stile CSS in Blocco note:
- Scegliere File > Nuovo nel Blocco note per ottenere una finestra vuota
- Salva il file come CSS facendo clic su File < Salva con nome...
- Passa alla cartella my_website sul tuo disco rigido
- Cambiare il "Salva come tipo:" per "Tutti i files"
- Assegna un nome al tuo file "stili.css" (lascia le virgolette) e clicca Salva
Collega il foglio di stile CSS al tuo HTML
Una volta che hai un foglio di stile per il tuo sito web, dovrai associarlo alla pagina web stessa. Per fare ciò si utilizza il tag link. Posiziona il seguente tag di collegamento ovunque all'interno del file.
Correggi i margini della pagina
Quando scrivi XHTML per browser diversi, una cosa che imparerai è che tutti sembrano avere margini e regole diversi per la modalità di visualizzazione delle cose. Il modo migliore per essere sicuri che il tuo sito abbia lo stesso aspetto nella maggior parte dei browser è quello di non consentire a elementi come i margini di impostare automaticamente la scelta del browser.
Preferiamo iniziare le pagine nell'angolo in alto a sinistra, senza imbottitura o margine extra che circondano il testo. Anche se andremo a riempire i contenuti, impostiamo i margini a zero in modo da iniziare con la stessa lavagna vuota. Per fare ciò, aggiungi quanto segue al tuo documento styles.css:
html, corpo {
margine: 0px;
imbottitura: 0px;
bordo: 0px;
sinistra: 0px;
in alto: 0px;
}
Modifica del carattere sulla pagina
Il carattere è spesso la prima cosa che vorrai cambiare in una pagina web. Il predefinito carattere su una pagina web può essere brutto e in realtà dipende dal browser web stesso, quindi se non definisci il carattere, non sai davvero come sarà la tua pagina.
In genere, cambieresti il carattere sui paragrafi o talvolta sull'intero documento stesso. Per questo sito, definiremo il carattere a livello di intestazione e paragrafo. Aggiungi quanto segue al tuo documento styles.css:
p, li {
font: 1em Arial, Helvetica, sans-serif;
}
h1 {
font: 2em Arial, Helvetica, sans-serif;
}
h2 {
font: 1.5em Arial, Helvetica, sans-serif;
}
h3 {
font: 1.25em Arial, Helvetica, sans-serif;
}
Abbiamo iniziato con 1em come dimensione di base per i paragrafi e gli elementi dell'elenco e poi l'abbiamo usata per impostare la dimensione per i miei titoli. Non ci aspettiamo di utilizzare un titolo più profondo di h4, ma se hai intenzione di farlo, vorrai anche modellarlo.
Rendere i tuoi link più interessanti
I colori predefiniti per i collegamenti sono rispettivamente blu e viola per i collegamenti non visitati e visitati. Anche se questo è standard, potrebbe non adattarsi alla combinazione di colori delle tue pagine, quindi cambiamolo. Nel tuo file styles.css, aggiungi quanto segue:
un collegamento {
font-family: Arial, Helvetica, sans-serif;
colore: #FF9900;
decorazione del testo: sottolineatura;
}
a: visitato {
colore: #FFCC66;
}
a: hover {
sfondo: #FFFFCC;
font-weight: grassetto;
}
Abbiamo impostato tre stili di collegamento, il collegamento a: come predefinito, a: visitato per quando è stato visitato, cambiamo il colore e a: hover. Con un: al passaggio del mouse, il collegamento assume un colore di sfondo e va in grassetto per sottolineare che è un collegamento su cui fare clic.
Disegnare la sezione di navigazione
Poiché mettiamo la sezione di navigazione (id="nav") per prima nell'HTML, prima definiamola. Dobbiamo indicare quanto dovrebbe essere largo e mettere un margine più ampio sul lato destro in modo che il testo principale non vada a sbattere contro di esso. anche noi mettiamo un bordo intorno
Aggiungi il seguente CSS al tuo documento styles.css:
#nav {
larghezza: 225 px;
margine destro: 15px;
bordo: pieno medio #000000;
}
#nav li {
stile elenco: nessuno;
}
.piè di pagina {
dimensione del carattere: .75em;
chiaro: entrambi;
larghezza: 100%;
allineamento del testo: centro;
}
La proprietà list-style imposta l'elenco all'interno della sezione di navigazione in modo che non contenga punti elenco o numeri e il .footer definisce la sezione del copyright in modo che sia più piccola e centrata all'interno della sezione.
Posizionamento della sezione principale
Posizionando la tua sezione principale con il posizionamento assoluto puoi essere sicuro che rimarrà esattamente dove vuoi che rimanga sulla tua pagina web. L'abbiamo realizzato con una larghezza di 800 pixel per adattarlo monitor più grandi, ma se hai un monitor più piccolo, potresti volerlo restringere.
Inserisci quanto segue nel tuo documento styles.css:
#principale {
larghezza: 800 px;
in alto: 0px;
posizione: assoluta;
sinistra: 250 px;
}
Disegnare i tuoi paragrafi
Dato che ho già impostato il carattere del paragrafo sopra, volevo dare a ogni paragrafo un piccolo "calcio" in più per farlo risaltare meglio. L'ho fatto mettendo un bordo in alto che ha evidenziato il paragrafo più della sola immagine.
Inserisci quanto segue nel tuo documento styles.css:
.linea superiore {
bordo-top: massello di grosso spessore #FFCC00;
}
Abbiamo deciso di farlo come una classe chiamata "topline" piuttosto che definire semplicemente tutti i paragrafi in quel modo. In questo modo, se decidiamo di volere un paragrafo senza una linea gialla superiore, possiamo semplicemente omettere class="topline" nel tag di paragrafo e non avrà il bordo superiore.
Disegnare le immagini
Le immagini in genere hanno un bordo intorno a loro, questo non è sempre visibile a meno che l'immagine non sia un collegamento, ma ci piace avere una classe all'interno del Foglio di stile CSS che disattiva automaticamente il bordo. Per questo foglio di stile, abbiamo 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 nella pagina. Volevamo che facessero parte del paragrafo in cui si trovavano senza utilizzare tabelle per allinearli. Il modo più semplice per farlo è usare la proprietà CSS float.
Inserisci quanto segue nel tuo documento styles.css:
#main img {
galleggiante: sinistro;
margine destro: 5px;
margine inferiore: 15px;
}
.noborder {
bordo: 0px nessuno;
}
Come puoi vedere, ci sono anche le proprietà dei margini impostate sulle immagini, per assicurarti che non vengano schiacciate contro il testo flottato che si trova accanto a loro nei paragrafi.
Ora guarda la tua pagina completata
Una volta salvato il tuo CSS, puoi ricaricare la pagina Pets.htm nel tuo browser web. La tua 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 pagine interne di questo sito. Vuoi avere una pagina per ogni pagina della tua navigazione.