August 30
Inserimento di contenuti HTML e l'applicazione di stile CSS ad esso all'interno di un elemento esistente HTML "div" è in genere un'attività semplice. È possibile includere qualsiasi contenuto HTML che ti piace all'interno di un "div", in quanto questi elementi sono progettati semplicemente per definire le sezioni del contenuto della pagina. L'applicazione di CSS (Cascading Style Sheet) regole per il codice HTML "div" content consente di formattare e visualizzare in numerosi modi possibili. Focalizzando l'attenzione su un compito alla volta, avrete il vostro contenuto HTML aggiunto e regole CSS applicate in modo rapido ed efficace.
1 Individuare il file HTML che si desidera aggiungere contenuto. Il file può essere salvato con estensione ".html" o con un'estensione come ".php" se è stato creato utilizzando un linguaggio di programmazione lato server. Quando si ha il file HTML che si desidera modificare, aprirlo in un editor di testo. Trovare il "div" che si desidera aggiungere contenuti e styling per. La seguente pagina di esempio HTML contiene un elemento vuoto "div":
<Html>
<Head>
</ Head>
<Body>
<Div> </ div>
</ Body>
</ Html>
Sfoglia il file pagina fino a trovare l'area che si desidera modificare.
2 Aggiungi contenuti al tuo elemento "div". Utilizzare markup HTML per aggiungere qualsiasi contenuto che ti piace l'elemento "div". Ad esempio, la seguente modifica aggiunge un testo e un'immagine all'elemento:
<Div> Ciao! <Img alt = "immagine" /> </ div>
Questo markup avrebbe funzionato per un file di immagine salvato come "immagine.jpg" sullo stesso server come pagina HTML, all'interno di una cartella denominata "immagini" che si trova nella stessa directory della pagina. Inserisci il tuo contenuto HTML come richiedete.
3 Aggiungere un attributo che identifica al vostro elemento "div". In modo che è possibile identificare il "div" all'interno delle vostre dichiarazioni CSS, alterare il suo tag di apertura come segue, l'aggiunta di un attributo di classe:
<Div class = "test">
In alternativa è possibile utilizzare un attributo ID se l'elemento sta per essere unico all'interno di ogni pagina:
<Div id = "test">
Utilizzando un attributo di classe è migliore se si vuole per lo stile più elementi nello stesso modo.
4 Creare un file CSS. Aprire un nuovo file in un editor di testo e salvarlo con "css" estensione, ad esempio "teststyle.css" per questa dimostrazione. Inserire il seguente se si è utilizzato un attributo di classe per il vostro elemento "div":
.test {
color: # FF0000;
background-color: #FFFFCC; }
Se è stato utilizzato un ID attribuire inserire il seguente invece:
Test {
color: # FF0000;
background-color: #FFFFCC; }
Questo codice di esempio imposta i colori del testo e dello sfondo. Aggiungere un link al tuo foglio di stile tra l'apertura e la chiusura tag "testa" nel markup HTML:
<Link rel = "stylesheet" type = "text / css" href = "teststyle.css" />
5 Salvare i file HTML e CSS. li caricare sul server e individuare la pagina per verificare le aggiunte apportate. Si dovrebbe vedere il contenuto aggiuntivo stile secondo le regole CSS aggiunti. Modificare il contenuto del codice CSS e HTML per riflettere quello che vuoi visualizzare nella tua pagina. Se non vedi i cambiamenti riflessi nella tua pagina, controllare l'indirizzo e la posizione del file CSS.