Nwlapcug.com


Come collegare 2 pagine Web allo stesso foglio di stile



Gli sviluppatori possono utilizzare le dichiarazioni del foglio di stile CSS per applicare lo stesso stile a più pagine all'interno di un sito Web. Questa caratteristica è uno gli aspetti più utili di CSS, come si possono definire tutte le proprietà di stile all'interno di un singolo file e forzare questi attraverso ogni pagina all'interno di un sito. Collegamento a un singolo file CSS da più di una pagina non è difficile, che richiede solo una piccola quantità di codice di markup HTML. Più grandi siti Web utilizzare un insieme di fogli CSS o un singolo foglio CSS per dettare stile per tutte le pagine HTML.

Istruzioni

1

Preparare il codice CSS. Aprire un nuovo file in un editor di testo, salvarlo con estensione "CSS", ad esempio "sitestyle.css" o un altro nome che riflette lo scopo del suo contenuto. Immettere alcune dichiarazioni CSS base come segue:

intestazione () {

font-weight: bold;

Dimensione carattere: grande;}

contenuto () {

Color: #660000;}

Questo è solo un esempio di codice per la dimostrazione, ma è possibile utilizzare qualsiasi dichiarazioni CSS ti piace.

2

Preparare le pagine Web. Se non avete già pagine HTML pronte, creare ciascuno a sua volta di aprire un nuovo file in un editor di testo e salvarlo con estensione ". html", ad esempio "contact.html" e "FAQ.html." Immettere il codice di markup HTML creando il contenuto di una pagina Web di base come segue:

< html >

< head >

< / head >

< corpo >

< div id = "header" > sito Web di intestazione < / div >

< div id = "contenuto" > il contenuto della pagina < / div >

< / body >

< / html >

Copiare questo contenuto in entrambi delle tue pagine Web. Se si dispone già di pagine HTML in loro, assicurati di che includere contenuto che si riflette nelle dichiarazioni CSS. Nel caso di questo esempio, questo dovrebbe includere elementi con "intestazione" e "contenuto" come gli attributi ID.

3

Aggiungi link al tuo foglio di stile all'interno del codice di markup HTML. Includere un link come segue, tra l'apertura e chiusura testa tag nel codice HTML:

< link rel = "stylesheet" type = "text/css" href="sitestyle.css" / >

Modificare l'attributo "href" per riflettere il nome che scelto per il tuo file CSS. Includere il link all'interno della sezione head di ogni pagina per la quale si desidera utilizzare un foglio di stile. Questa sintassi funziona se le pagine HTML sono nella stessa directory del file CSS. In alternativa, è possibile includere un riferimento relativo, ad esempio dove il file CSS è in una sottodirectory denominata "stile" memorizzati all'interno della stessa directory della pagina Web:

< link rel = "stylesheet" type = "text/css" href="style/sitestyle.css" / >

4

Utilizzare riferimenti assoluti per i collegamenti CSS. Se i file CSS e HTML sono archiviati su server diversi, è necessario utilizzare un riferimento assoluto, piuttosto che una relativa. Il seguente link di esempio si connette a una pagina Web in un file CSS su un altro dominio:

< link rel = "stylesheet" type = "text/css" href = "http://otherdomain.com/style.css" / >

Modificare l'attributo "href" per riflettere il percorso completo al file CSS, se non viene memorizzato nel dominio stesso come pagine Web.

5

Caricare tutti i file. Caricare i file HTML e CSS sul vostro server Web. Individuare il percorso di ciascuna delle tue pagine Web e verifica che le dichiarazioni CSS sono essere applicate in tutto gli elementi su entrambe le pagine. Se lo stile non è essere riflessa correttamente, controllare gli attributi di "href" nuovamente e assicurarsi di che aver incluso il percorso del file corretto. A questo punto, è possibile apportare modifiche al foglio di stile CSS e vedrà tali modifiche su tutte le pagine html che sono collegate al foglio di stile CSS.

Consigli & Avvertenze

  • Utilizzando gli stessi attributi Class e ID all'interno di tutte le pagine del sito consente di applicare loro uno stile tutto in un unico file CSS.