' ili ' ” također se mogu koristiti oznake, ali dobra je praksa koristiti “ ” oznaka. Zatim dodijelite ' Zaglavlje ” za primjenu CSS stilova na odjeljak zaglavlja. Nakon toga dodajte '

” i dodijelite mu klasu „ naslov ” za prikaz sadržaja “Dobrodošli u Linuxhint!”:

razreda = 'Zaglavlje' >

< h1 razreda = 'naslov' > Dobrodošli u Linuxhint! < / h1 >

< / zaglavlje>

Nakon toga odaberite ' ” označite klasu i dodijelite sljedeće stilove:

---

---

.Zaglavlje {

pozadinska slika: url ( '../bg.jpg' ) ;

pozadina- veličina : pokriti;

pozadinsko ponavljanje: bez ponavljanja;

boja : bijeli dim;

položaj pozadine: vrh;

ispuna: 0px 20px 20px 20px;

}

Objašnjenje gornjeg koda navedeno je u nastavku:

• Prvo postavite sliku ' bg.jpg ' kao pozadinu za odjeljak zaglavlja koristeći ' pozadinska slika ” vlasništvo.
• Zatim, ' veličina pozadine ' i ' pozadinsko ponavljanje ” Svojstva se koriste za postavljanje veličine slike i zaustavljanje ponavljanja slike.
• Nakon toga postavite boju teksta i poziciju slike na vrh uz pomoć “ boja ' i ' pozadina-položaj ' Svojstva.
• Na kraju, “ podstava ” Svojstvo se koristi za postavljanje razmaka između sadržaja zaglavlja i obruba.

Nakon izvršavanja gornjeg koda, web stranica izgleda ovako:

Gornji izlaz prikazuje da je odjeljak zaglavlja stvoren i da su na njega primijenjeni CSS stilovi.

Korak 2: Napravite navigacijsku traku

U većini slučajeva zaglavlje može sadržavati i navigacijsku traku. Za stvaranje navigacijske trake HTML “ ” može biti vrlo korisna. Zato dodajte stavke navigacijske trake pomoću ' ” oznake i dodijelite klasu „ djelovati ”:

razreda = 'Zaglavlje' >



< a razreda = 'djelovati' href = '#' >Početna< / a >

< a razreda = 'djelovati' href = '#' >Usluge< / a >

< a razreda = 'djelovati' href = '#' >O nama< / a >

< a razreda = 'djelovati' href = '#' >Kontaktirajte nas< / a >

< a razreda = 'djelovati' href = '#' >Novi dolasci< / a >

< / ne>

< br >< br >

< h1 razreda = 'naslov' > Dobro došli u Linuxhint! < / h1 >

< / zaglavlje>

Nakon izvršavanja gornjeg koda, web stranica izgleda ovako:

Gornji izlaz ilustrira da stavke navigacijske trake ' Dom ”, “ Usluge ”, “ O nama ”, “ Kontaktirajte nas ' i ' Novi dolasci ” su stvorene.

Korak 3: Primijenite stilove na stavke navigacijske trake

Da biste stilizirali stavke navigacijske trake, odaberite ' djelovati ” i dodijelite sljedeća svojstva CSS stilova:

.djelovati {

tekst-ukras: nema;

boja : bijela;

prikaz: blok;

padding:15px;

font- veličina : velika;

plovak: lijevo;

margina: 0px 20px;

}

Objašnjenje gornjeg koda je:

• Prvo, ' tekst-ukras ” svojstvo je postavljeno na „none” kako bi se uklonio unaprijed definirani stil za „ ” oznaka.
• Da biste poboljšali vidljivost teksta za korisnika, ' bijela ' i ' velika ' vrijednosti dane su u ' boja ' i ' veličina fonta ” vlasništvo.
• Nakon toga, ' prikaz ' i ' plutati ' svojstva pomažu ' ” da se pojave u istom retku.
• Na kraju, “ podstava ' i ' margina ” vrijednosti svojstava koriste se za stvaranje prostora između svake oznake “ ”.

Nakon izvršavanja gornjeg koda, web stranica izgleda ovako:

Gornji izlaz ilustrira da su stavke navigacijske trake sada stilizirane.

Korak 4: Dodajte efekt lebdenja stavkama na navigacijskoj traci

Kao u gornjem izlazu, efekt lebdenja nije dostupan na stavci navigacijske trake. Da biste dodali oboje, odaberite ' naslov ' klasa koja je dodijeljena '

” oznaka. Nakon toga dodajte ' :lebdjeti ” birač s “ djelovati ” za primjenu efekta lebdenja na stavke navigacijske trake:

.djelovati: lebdjeti {

granica : 2 px puna bijela;

boja : plavoljubičasta;

}

.naslov {

tekst- uskladiti : centar;

margina: 18 % 0px;

}

Objašnjenje gornjeg koda navedeno je u nastavku:

• Prvo postavite ' granica ” čvrstog tipa od 2 px i dodijelite bijeli “ boja ”. Uz to postavite ' plavoljubičasta ” boje samo kada korisnik lebdi mišem na stavkama navigacijske trake.
• Zatim odaberite ' naslov ' klase i postavite njeno poravnanje na ' centar ” i osigurajte određenu marginu kako bi odjeljak izgledao veći.

Nakon izvršavanja gornjeg koda, konačni izgled zaglavlja izgleda ovako:

Gornji izlaz prikazuje da je zaglavlje stvoreno pomoću HTML-a i CSS-a.

Zaključak

U HTML datoteci oznaka “

” koristi se za stvaranje odjeljka za zaglavlje. Nakon toga korisnici mogu primijeniti CSS svojstva kao što su ispuna i pozadinske slike kako bi poboljšali odjeljak zaglavlja. Primjenjuje se na sve elemente zaglavlja kao što je navigacijska traka. Za izradu navigacijske trake korisnici mogu koristiti oznaku “