' O ' Si possono utilizzare anche i tag ', ma è buona norma utilizzare i tag' etichetta '. Successivamente, assegna un ' intestazione ” per applicare gli stili CSS nella sezione dell'intestazione. Successivamente, aggiungi '

” taggalo e assegnagli una classe di “ intestazione ” per visualizzare il contenuto “Welcome to Linuxhint!”:

classe = 'intestazione' >

< h1 classe = 'intestazione' > Benvenuto su Linuxhint! < / h1 >

< / intestazione>

Successivamente, seleziona ' ” etichetta la classe e assegna i seguenti stili:

---

---

.intestazione {

immagine di sfondo: url ( '../bg.jpg' ) ;

sfondo- misurare : copertina;

background-repeat: nessuna ripetizione;

colore : fumo bianco;

posizione sullo sfondo: in alto;

imbottitura: 0px 20px 20px 20px;

}

La spiegazione del codice di cui sopra è menzionata di seguito:

• Innanzitutto, imposta l'immagine ' bg.jpg ” come sfondo per la sezione dell'intestazione utilizzando il “ immagine di sfondo ' proprietà.
• Successivamente, il “ dimensione dello sfondo ' E ' sfondo-ripetizione Le proprietà ” vengono utilizzate rispettivamente per impostare la dimensione dell'immagine e interrompere la ripetizione dell'immagine.
• Successivamente, imposta il colore del testo e la posizione dell'immagine in alto con l'aiuto di ' colore ' E ' posizione di sfondo ' proprietà.
• Alla fine il “ imbottitura La proprietà ” viene utilizzata per impostare uno spazio tra il contenuto dell'intestazione e il bordo.

Dopo aver eseguito il codice sopra, la pagina web si presenta così:

L'output precedente mostra che la sezione dell'intestazione è stata creata e ad essa sono stati applicati gli stili CSS.

Passaggio 2: crea una barra di navigazione

Nella maggior parte dei casi, l'intestazione può anche contenere una barra di navigazione. Per la creazione della barra di navigazione l'HTML “ Il tag ” può essere molto utile. Ecco perché, aggiungi gli elementi della barra di navigazione usando ' ” e assegna una classe di “ atto ”:

classe = 'intestazione' >



< UN classe = 'atto' href = '#' >Casa< / UN >

< UN classe = 'atto' href = '#' >Servizi< / UN >

< UN classe = 'atto' href = '#' >Chi siamo< / UN >

< UN classe = 'atto' href = '#' >Contattaci< / UN >

< UN classe = 'atto' href = '#' >Nuovi Arrivi< / UN >

< / no>

< fratello >< fratello >

< h1 classe = 'intestazione' > Benvenuto su Linuxhint! < / h1 >

< / intestazione>

Dopo aver eseguito il codice sopra, la pagina web si presenta così:

L'output sopra mostra che gli elementi della barra di navigazione ' Casa ”, “ Servizi ”, “ Chi siamo ”, “ Contattaci ' E ' Nuovi arrivi ' è stato creato.

Passaggio 3: applica gli stili agli elementi della barra di navigazione

Per dare uno stile agli elementi della barra di navigazione, seleziona ' atto ” e assegna le seguenti proprietà di stili CSS:

.atto {

decorazione del testo: nessuna;

colore : bianco;

blocco di visualizzazione;

imbottitura: 15px;

font- misurare : grande;

galleggiante: sinistro;

margine: 0px 20px;

}

La spiegazione del codice sopra è:

• Prima il ' decorazione del testo ” è impostata su “none” per rimuovere lo stile predefinito di “ etichetta '.
• Per migliorare la visibilità del testo per l'utente, il ' bianco ' E ' grande ” i valori sono forniti al “ colore ' e il ' dimensione del font ' proprietà.
• Dopodiché il “ Schermo ' E ' galleggiante ” le proprietà aiutano il “ ” in modo che appaiano sulla stessa riga.
• Alla fine il “ imbottitura ' E ' margine I valori delle proprietà ” vengono utilizzati per creare uno spazio tra ogni tag “ ”.

Dopo aver eseguito il codice sopra, la pagina web si presenta così:

L'output sopra mostra che gli elementi della barra di navigazione sono ora stilizzati.

Passaggio 4: aggiungi l'effetto al passaggio del mouse agli elementi della barra di navigazione

Come nell'output precedente, l'effetto al passaggio del mouse non è disponibile sull'elemento della barra di navigazione. Per aggiungere entrambi, seleziona ' intestazione ” classe assegnata al “

etichetta '. Successivamente, aggiungi ' : al passaggio del mouse ” selettore con il “ atto ” per applicare l'effetto hover sugli elementi della barra di navigazione:

.agisci: passa il mouse {

confine : 2px bianco solido;

colore : blu viola;

}

.intestazione {

testo- allineare : centro;

margine: 18 %0px;

}

La spiegazione del suddetto codice è fornita di seguito:

• Innanzitutto, imposta il ' confine ” di un solido di tipo 2px e assegnare un bianco “ colore ”. Insieme ad esso, imposta il ' blu viola ” colore solo quando il mouse viene posizionato dall'utente sugli elementi della barra di navigazione.
• Quindi, seleziona ' intestazione ” class e imposta il suo allineamento su “ centro ” e fornire un po' di margine per far sembrare la sezione più grande.

Dopo aver eseguito il codice precedente, l'aspetto finale dell'intestazione è simile al seguente:

L'output precedente mostra che l'intestazione è stata creata utilizzando HTML e CSS.

Conclusione

Nel file HTML, il tag '

' viene utilizzato per creare una sezione per l'intestazione. Successivamente, gli utenti possono applicare proprietà CSS come riempimento e immagini di sfondo per migliorare la sezione dell'intestazione. Si applica a tutti gli elementi dell'intestazione come una barra di navigazione. Per creare una barra di navigazione, gli utenti possono utilizzare il tag '