Nwlapcug.com


Come inserire CSS & HTML div

Come inserire CSS & HTML div


Inserimento di contenuto HTML e applicare i CSS styling ad esso all'interno di un elemento di "div" HTML esistente è generalmente un'attività semplice. È possibile includere qualsiasi contenuto HTML che ti piace all'interno di un "div", poiché questi elementi sono semplicemente progettati per definire le sezioni di contenuto della pagina. Applicando le regole CSS (Cascading Style Sheet) per il contenuto di "div" HTML consente di formattare e visualizzarli in diversi modi possibili. Focalizzando l'attenzione su un compito alla volta, avrete il vostro contenuto HTML aggiunto e regole CSS applicate rapidamente ed efficacemente.

Istruzioni

1

Individuare il file HTML che si desidera aggiungere contenuto a. Il file può essere salvato con estensione ". html" o con un'estensione, ad esempio ". php" se è stato creato utilizzando un linguaggio di programmazione lato server. Quando avete il file HTML che si desidera modificare, aprirlo in un programma di editor di testo. Trovare il "div" per aggiungere contenuti e stile a. La seguente pagina HTML di esempio contiene un elemento vuoto "div":

< html >

< head >

< / head >

< corpo >

< div >< / div >

< / body >

< / html >

Sfogliare il file della pagina fino a trovare l'area che si desidera modificare.

2

Aggiungere contenuti al tuo elemento "div". Utilizzare tag HTML per aggiungere qualsiasi contenuto che ti piace all'elemento "div". Ad esempio, la seguente alterazione aggiunge qualche testo e un'immagine per l'elemento:

< div > Ciao! < img alt = "immagine" / >< / div >

Questo markup funzionerebbe per un file di immagine salvato come "immagine. jpg" sullo stesso server della pagina HTML, all'interno di una cartella denominata "immagini" che è nella stessa directory della pagina. Inserire i tuoi contenuti HTML nel modo desiderato.

3

Aggiungere un attributo di identificazione al vostro elemento "div". Modo che è possibile identificare il "div" entro le dichiarazioni CSS, modificare il tag di apertura come segue, aggiungendo un attributo di classe:

< div class = "test" >

In alternativa è possibile utilizzare un attributo ID, se l'elemento sta per essere univoco all'interno di ogni pagina:

< div id = "test" >

Utilizzando un attributo di classe è migliore se si desidera lo stile più elementi nello stesso modo.

4

Creare un file CSS. Aprire un nuovo file in un editor di testo e salvarlo con estensione "CSS", ad esempio "teststyle.css" per questa dimostrazione. Se è stato utilizzato un attributo di classe per l'elemento "div", immettere quanto segue:

. test () {

Color: #FF0000;

colore di sfondo: #FFFFCC; }

Se invece si utilizza un inserto di attributo ID al seguente:

test {

Color: #FF0000;

colore di sfondo: #FFFFCC; }

Questo esempio di codice imposta i colori di testo e sfondo. Aggiungere un collegamento al foglio di stile tra l'apertura e la chiusura di "testa" tag nel markup HTML:

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

5

Salvare i file HTML e CSS. Caricarle sul tuo server e visualizzare la pagina per verificare le aggiunte apportate. Si dovrebbe vedere il contenuto aggiuntivo in stile secondo le regole CSS che hai aggiunto. Modificare il codice CSS e il contenuto HTML per riflettere tutto ciò che si desidera visualizzare nella tua pagina. Se non vedete le modifiche vengono riportate nella tua pagina, controllare l'indirizzo e la posizione del vostro file CSS.

Consigli & Avvertenze

  • Quando si modificano le regole CSS, raffinazione per ottenere l'aspetto desiderato, esso può essere utile per test localmente piuttosto che caricare continuamente sul Web.
  • Non date per scontato che il tuo stile di pagina è stato raggiunto con successo dopo il test in un solo browser. Molti browser interpretano HTML e CSS in modi molto diversi.