' of ' ”-tags kunnen ook worden gebruikt, maar het is een goede gewoonte om de “ ' label. Wijs vervolgens een ' koptekst ” class om CSS-stijlen toe te passen op de koptekstsectie. Voeg daarna de '

' tag erin en wijs het een klasse toe van ' rubriek ' om de inhoud 'Welkom bij Linuxhint!' weer te geven:

klas = 'kop' >

< h1 klas = 'kop' > Welkom bij Linuxhint! < / h1 >

< / kop>

Selecteer daarna de ' ” tag class en wijs de volgende stijlen toe:

---

---

.kop {

achtergrondafbeelding: url ( '../bg.jpg' ) ;

achtergrond- maat : omslag;

achtergrondherhaling: geen herhaling;

kleur : witte rook;

achtergrondpositie: boven;

opvulling: 0px 20px 20px 20px;

}

De uitleg van de bovenstaande code wordt hieronder vermeld:

• Stel eerst de afbeelding in ' bg.jpg ' als achtergrond voor het kopgedeelte met de ' achtergrond afbeelding ' eigendom.
• Vervolgens de “ achtergrondformaat ' En ' achtergrond herhaling ” eigenschappen worden gebruikt om respectievelijk de afbeeldingsgrootte in te stellen en de beeldherhaling te stoppen.
• Stel daarna de kleur van de tekst en de positie van de afbeelding naar boven in met behulp van ' kleur ' En ' achtergrond-positie ' eigenschappen.
• Op het einde, de “ opvulling ” eigenschap wordt gebruikt voor het instellen van een spatie tussen de inhoud van de koptekst en de rand.

Na het uitvoeren van bovenstaande code ziet de webpagina er als volgt uit:

De bovenstaande uitvoer geeft aan dat de koptekstsectie is gemaakt en dat er CSS-stijlen op zijn toegepast.

Stap 2: maak een navigatiebalk

De koptekst kan in de meeste gevallen ook een navigatiebalk bevatten. Voor het maken van de navbar de HTML “ ” tag kan erg handig zijn. Voeg daarom navbar-items toe met ' ”-tags en wijs een klasse toe van “ handeling ”:

klas = 'kop' >



< A klas = 'handeling' href = '#' >Thuis< / A >

< A klas = 'handeling' href = '#' >Diensten< / A >

< A klas = 'handeling' href = '#' >Over ons< / A >

< A klas = 'handeling' href = '#' >Contacteer ons< / A >

< A klas = 'handeling' href = '#' >Nieuwe aankomsten< / A >

< / nee>

< br >< br >

< h1 klas = 'kop' > Welkom bij Linuxhint! < / h1 >

< / kop>

Na het uitvoeren van bovenstaande code ziet de webpagina er als volgt uit:

De bovenstaande uitvoer illustreert dat de navigatiebalkitems ' Thuis ”, “ Diensten ”, “ Over ons ”, “ Neem contact met ons op ' En ' Nieuwkomers ' zijn gemaakt.

Stap 3: Stijlen toepassen op navigatiebalkitems

Selecteer de optie ' handeling ” klasse en wijs de volgende CSS-stijleigenschappen toe:

.handeling {

tekstversiering: geen;

kleur : wit;

weergeven: blokkeren;

opvulling:15px;

lettertype- maat : groot;

zweven: links;

marge: 0px 20px;

}

De uitleg van de bovenstaande code is:

• Eerst de ' tekst-decoratie ” eigenschap is ingesteld op “none” om de vooraf gedefinieerde stijl van de “ ' label.
• Om de zichtbaarheid van de tekst voor de gebruiker te verbeteren, is de ' wit ' En ' groot ” waarden worden verstrekt aan de “ kleur ' en de ' lettertypegrootte ' eigendom.
• Daarna is de “ weergave ' En ' vlot ” eigenschappen helpen de “ ”-tags op dezelfde regel verschijnen.
• Op het einde, de “ opvulling ' En ' marge ” eigenschappen waarden worden gebruikt om ruimte te creëren tussen elke “ ” tag.

Na het uitvoeren van bovenstaande code ziet de webpagina er als volgt uit:

De bovenstaande uitvoer illustreert dat de navbar-items nu zijn opgemaakt.

Stap 4: voeg zweefeffect toe aan navigatiebalkitems

Zoals in de bovenstaande uitvoer, is het zweefeffect niet beschikbaar op het navigatiebalkitem. Om beide toe te voegen, selecteert u de ' rubriek ” klasse die is toegewezen aan de “

' label. Voeg daarna de ' :zweven ” keuzeschakelaar met de “ handeling ” klasse om het zweefeffect toe te passen op de items in de navigatiebalk:

.act: zweven {

grens : 2px effen wit;

kleur : blauw Violet;

}

.rubriek {

tekst- uitlijnen : centrum;

marge: 18 % 0px;

}

De uitleg van de bovenstaande code wordt hieronder gegeven:

• Stel eerst de ' grens ' van een 2px type solid en wijs een wit toe ' kleur ”. Stel daarbij de ' blauw Violet ” kleur alleen wanneer de muis door de gebruiker op de items in de navigatiebalk wordt bewogen.
• Selecteer vervolgens de ' rubriek ” class en stel de uitlijning in op “ centrum ” en zorg voor wat marge om de sectie groter te laten lijken.

Na het uitvoeren van de bovenstaande code ziet het uiteindelijke uiterlijk van de koptekst er als volgt uit:

De bovenstaande uitvoer geeft aan dat de koptekst is gemaakt met behulp van HTML en CSS.

Conclusie

In het HTML-bestand wordt de tag '

' gebruikt om een ​​sectie voor de header te maken. Daarna kunnen gebruikers CSS-eigenschappen zoals opvulling en achtergrondafbeeldingen toepassen om het koptekstgedeelte te verbeteren. Het is van toepassing op alle koptekstelementen, zoals een navigatiebalk. Om een ​​navigatiebalk te maken, kunnen gebruikers de tag '