Come personalizzare CSS Templates

March 22

CSS o Cascading Style Sheets, è un modo speciale per impostare gli stili in una pagina web. modelli CSS possono essere utilizzati per impostare un singolo tutto il sito stile. Molti modelli sono disponibili che forniscono un punto di partenza su cui costruire un sito web. Molti di questi modelli sono molto belle, ma non può essere esattamente ciò che si desidera per il tuo sito. Si consiglia di iniziare con ottenere un modello e poi personalizzarlo per renderlo adatto alle tue esigenze personali e stile.

istruzione

1 Scarica un modello CSS. Molti Free CSS Templates sono disponibili online per il download (vedi Risorse aggiuntive). Con il modello di solito venuto un index.html campione. Guardate questo esempio come vi aiuterà a iniziare. Sarà probabilmente definire alcuni elementi <div> con alcuni attributi di classe o ID. Cercare <div class = \ "main \" id = \ "\ principale">. Questi tag saranno di cui al CSS.

2 Installare il modello. Se si avvia una pagina web o un sito web nuovo, utilizzare la index.html che è venuto con il modello. Se si installa il modello di un sito esistente, quindi è necessario modificare o aggiungere una riga di codice al sito. Si dovrebbe trovare un elemento <link> che sembra qualcosa di simile:
<Link rel = \ tipo "stylesheet \" = \ "text / css \" href = \ "style.css \" media = \ "schermata \" />
Quella linea dovrebbe essere in cima alla vostra intestazione, al di sopra della </ head>. <Link> è un elemento che indica la pagina che è il collegamento ad un file esterno. L'attributo rel specifica la relazione con il file collegato. Questo attributo non è completamente supportato da tutti i browser. L'attributo type dice al browser quale tipo di documento che è il collegamento a. L'attributo href Stati in cui si trova il file. L'attributo media dice al browser che questo dovrebbe applicarsi in particolare ai tipi di visualizzazione elencate. È possibile utilizzare questo per impostare un foglio di stile per la visualizzazione dello schermo e un altro per la stampa. Gli attributi REL e dei media sono entrambi opzionali.

3 Imparare un po 'di CSS di base e HTML. Non è necessario essere un esperto di CSS o HTML ma avere alcune conoscenze di base aiuta. Un tutorial è oltre la portata di questo articolo, ma le cose principali che dovete sapere sono la sintassi.
In HTML si hanno elementi. Tutti gli elementi sono tra parentesi angolari, come <div>. Alcuni elementi devono essere chiusi con un tag di chiusura (ad esempio, </ div>). All'interno gli elementi sono gli attributi che raccontano le informazioni del browser sull'elemento. <Div class = \ "\ principale"> è un elemento div con un nome di classe di \ "principale. \"
Nel CSS è possibile fare riferimento classi, ids o elementi. Se si dispone di un set di stile per uno, tutti gli altri con lo stesso nome di ereditare lo stesso stile. Dopo il riferimento, sono gli stili impostati tra parentesi graffe ({e}). Ogni stile è una proprietà in stile seguito da due punti e poi quello che la proprietà dovrebbe essere fissato a. Per esempio,
b {font-color: red;}
significa che tutti i <b> elementi devono avere carattere rosso. (.) Se si desidera fare riferimento una classe, invece di ogni elemento di un tipo, utilizzare un punto seguito dal nome della classe:
.Red {font-color: red;}
Ids sono speciali. Ogni id su una pagina deve avere un nome univoco. Se si desidera fare riferimento a un attributo id, utilizzare un cancelletto (#):

principale {font-color: red;}

È inoltre possibile impilare i riferimenti per essere molto specifico:

b.red principale {font-color: red;}

Questo codice dice che se c'è un id con il nome di \ "\ principale" con un <b> tag al suo interno che ha un nome di classe di \ "\ rosso" allora dovrebbe avere un carattere rosso. Le proprietà sono separate da un punto e virgola (;).
b.red {font-color: red; font-weight: bold;}
Lo spazio bianco viene ignorato in modo che il sopra viene spesso visualizzato come:
b.red {
font-colore: rosso
ANDARE
font-weight: bold
ANDARE
}

4 Ora che sapete un po 'di CSS e HTML, si dovrebbe essere in grado di fare qualche modifica. Effettuare una copia del tuo modello prima di iniziare e salvarlo in modo che quando si incasina avete un posto per un nuovo inizio. Potrai fare degli errori; che è il modo migliore per imparare. Giocare con essa e vedere cosa succede. Si impara di più da fare errori e vedere come si effettua nella pagina che se farlo bene ogni volta. A volte gli errori fanno cose davvero interessanti.
Guardate il codice HTML per la classe, id o elemento che si desidera modificare. Trova tale elemento nel foglio di stile e si vedrà una o più proprietà che possono essere modificate. A seconda di quale elemento si vuole incidere, si potrebbe cambiare il tipo di carattere, fondo, linea o qualche altra proprietà. Potete guardare un riferimento CSS, come ad esempio DevGuru (vedi Risorse aggiuntive) per avere un'idea di tutte le proprietà che è possibile modificare.