Uno degli aspetti più in termini di tempo di personalizzazione di un modello Web, lo script, o il tema è capire quali stili cambiano una parte specifica di una pagina. Se si conosce bene i CSS, la lettura attraverso un foglio di stile a volte può essere semplice. Ma quando si lavora con i temi CMS o plugin jQuery, si potrebbe trovare i selettori sparsi in più file o scoppiata in più classi. È possibile leggere attraverso il codice sorgente per trovare selettori, ma per essere efficiente questo richiede una profonda conoscenza del codice fondazione. Anche se sei un esperto, utilizzando uno strumento come Firebug o Dreamweaver renderà questo processo più facile.

istruzione

1 Scaricare e installare il Firebug add-on per il browser Firefox da firebug.com. In alternativa, se si utilizza Opera, avviare il browser Opera. Sia il Firebug add-on e il browser Opera aggiungere una funzionalità per il browser che permette di selezionare qualsiasi elemento nella tua pagina web e visualizzare i relativi stili e il codice sorgente.

2 Aprire il documento HTML o pagina web nel browser. Selezionare l'elemento che si desidera personalizzare facendo clic destro direttamente su di esso. Scegliere "Inspect Element" dal menu per aprire l'ispettore codice.

3 Valutare la riga evidenziata di codice nella tab "HTML" sul lato sinistro della finestra. Nella maggior parte dei casi, questa riga contiene il contenitore di elemento e la classe o selettore corrispondente. Ad esempio, se si sceglie di ispezionare una scatola barra laterale su una pagina del blog, si potrebbe vedere qualcosa di simile alla seguente evidenziato:

<Div id = "sidebar">

In altri casi, l'elemento evidenziato non può contenere la classe o il selettore, nel qual caso è necessario guardare le righe di codice appena sopra di esso che in genere corrispondono al contenitore l'elemento è. Per esempio, se si sceglie di ispezionare l'intestazione di una zona del contenuto sulla tua pagina, si potrebbe vedere qualcosa di simile a questo:

<Div class = "post>

<Div id = "title">

<H2> Questo è il contenuto titolo </ h2>

4 Guardate lo stile CSS corrispondente per l'elemento selezionato nella scheda "Stile" sul lato destro. Il nome del file del foglio di stile verrà elencato verso l'estrema destra di ogni selettore. È possibile selezionare diverse righe di codice o di elementi diversi nella finestra del browser per visualizzare gli stili che incidono su di esso. Si noterà che l'elemento selezionato appare anche con un bordo evidenziato nella finestra del browser, rendendo più facile vedere ciò che ogni riga di codice sta creando.

5 Passa il mouse a sinistra di qualsiasi attributo style nella scheda "Stile". Verrà visualizzata una casella di controllo. È possibile selezionare o deselezionare gli attributi per visualizzare l'impatto immediato di disabilitare l'attributo. Questa azione aiuta anche a trovare qualsiasi altro impatto dallo stile. Utilizzando questi metodi, è possibile ottenere il selettore di qualsiasi elemento della pagina ed effettuare le modifiche nella corretta foglio di stile.

Consigli e avvertenze

• Gli elementi con un attributo HTML del colore definito appariranno nella scheda "Stile" con un blocco po 'di colore alla destra del valore dell'attributo. Prova diversi colori facendo clic sulla casella e scegliendo un colore diverso dal ruota dei colori.
• È possibile modificare gli stili direttamente nella finestra "Style". Fare clic sulla scheda e scegliere "Ispezionare in scheda CSS". Le modifiche si fanno in questo modo sarà visibile immediatamente. Se vi piace il risultato, è possibile salvare il file e sovrascrivere l'originale.