' tai ' ' -tunnisteita voidaan myös käyttää, mutta on hyvä käytäntö käyttää ' ' -tunniste. Määritä seuraavaksi ' otsikko ” luokka käyttää CSS-tyylejä otsikkoosiossa. Lisää sen jälkeen '

' -tunniste siihen ja määritä sille luokka ' otsikko ' näyttääksesi sisällön 'Tervetuloa Linuxhintiin!':

luokkaa = 'otsikko' >

< h1 luokkaa = 'otsikko' > Tervetuloa Linuxhintiin! < / h1 >

< / otsikko>

Valitse sen jälkeen ' ” merkitse luokka ja määritä seuraavat tyylit:

---

---

.header {

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

tausta- koko : peite;

taustatoisto: ei toistoa;

väri : valkoinen savu;

tausta-asento: ylhäällä;

täyte: 0px 20px 20px 20px;

}

Yllä olevan koodin selitys mainitaan alla:

• Aseta ensin kuva ' bg.jpg ' otsikkoosion taustana käyttämällä ' taustakuva ” omaisuutta.
• Seuraavaksi ' taustan kokoinen ' ja ' taustatoisto ”-ominaisuuksia käytetään kuvan koon asettamiseen ja kuvan toiston pysäyttämiseen.
• Aseta sen jälkeen tekstin väri ja kuvan sijainti yläreunaan ' väri ' ja ' tausta-asento ” ominaisuuksia.
• Lopulta ' pehmuste ” -ominaisuutta käytetään välilyönnin asettamiseen otsikon sisällön ja reunan väliin.

Yllä olevan koodin suorittamisen jälkeen verkkosivu näyttää tältä:

Yllä oleva tulos näyttää, että otsikkoosio on luotu ja siihen sovelletaan CSS-tyylejä.

Vaihe 2: Luo navigointipalkki

Useimmissa tapauksissa otsikko voi sisältää myös navigointipalkin. Navigointipalkin luomista varten HTML ' ' -tunniste voi olla erittäin hyödyllinen. Siksi lisää navigointipalkin kohteita käyttämällä ' ' -tunnisteet ja määritä 'luokka' toimia ':

luokkaa = 'otsikko' >



< a luokkaa = 'toimia' href = '#' >Koti< / a >

< a luokkaa = 'toimia' href = '#' >Palvelut< / a >

< a luokkaa = 'toimia' href = '#' >Meistä< / a >

< a luokkaa = 'toimia' href = '#' >Ota yhteyttä< / a >

< a luokkaa = 'toimia' href = '#' >Uusia tulokkaita< / a >

< / ei>

< br >< br >

< h1 luokkaa = 'otsikko' > Tervetuloa Linuxhintiin! < / h1 >

< / otsikko>

Yllä olevan koodin suorittamisen jälkeen verkkosivu näyttää tältä:

Yllä oleva tulos osoittaa, että navigointipalkin kohteet ' Koti ”, “ Palvelut ”, “ Meistä ”, “ Ota meihin yhteyttä ' ja ' Uutuudet ” on luotu.

Vaihe 3: Käytä tyylejä navigointipalkin kohteisiin

Tyyliäksesi navigointipalkin kohteet, valitse ' toimia ” luokka ja määritä seuraavat CSS-tyylien ominaisuudet:

.toimia {

tekstikoristelu: ei mitään;

väri : valkoinen;

näyttö: lohko;

täyte: 15px;

fontti- koko : suuri;

kellua: vasen;

marginaali: 0px 20px;

}

Yllä olevan koodin selitys on:

• Ensinnäkin ' teksti-sisustus ' -ominaisuuden arvoksi on asetettu 'ei mitään', jotta ' ' -tunniste.
• Tekstin näkyvyyden parantamiseksi käyttäjälle ' valkoinen ' ja ' suuri ' arvot annetaan ' väri ' ja ' Fonttikoko ” omaisuutta.
• Sen jälkeen ' näyttö ' ja ' kellua 'ominaisuudet auttavat' ' -tunnisteet näkyvät samalla rivillä.
• Lopulta ' pehmuste ' ja ' marginaali '-ominaisuuksien arvoja käytetään luomaan tilaa kunkin ' ' -tunnisteen väliin.

Yllä olevan koodin suorittamisen jälkeen verkkosivu näyttää tältä:

Yllä oleva tulos osoittaa, että navigointipalkin kohteet on nyt tyylitelty.

Vaihe 4: Lisää hover-tehoste navigointipalkin kohteisiin

Kuten yllä olevassa lähdössä, hover-tehoste ei ole käytettävissä navigointipalkin kohdassa. Jos haluat lisätä molemmat, valitse ' otsikko ' luokka, joka on määritetty '

' -tunniste. Lisää sen jälkeen ' :hover ” valitsin ” toimia ” luokka käyttääksesi hover-tehostetta navigointipalkin kohteissa:

.act:hover {

rajaa : 2px kiinteä valkoinen;

väri : sininen violetti;

}

.otsikko {

teksti- kohdistaa : keskus;

marginaali: 18 % 0px;

}

Yllä olevan koodin selitys on alla:

• Aseta ensin ' rajaa ” 2px-tyyppisestä kiinteästä materiaalista ja määritä valkoinen ” väri ”. Aseta sen kanssa ' sinivioletti ” väriä vain, kun käyttäjä pitää hiiren osoitinta navigointipalkin kohteiden päällä.
• Valitse seuraavaksi ' otsikko ' luokka ja aseta sen kohdistukseksi ' keskusta ” ja anna marginaalia, jotta osa näyttää suuremmalta.

Yllä olevan koodin suorittamisen jälkeen otsikon lopullinen ulkoasu näyttää tältä:

Yllä oleva tulos näyttää, että otsikko on luotu HTML:n ja CSS:n avulla.

Johtopäätös

HTML-tiedostossa

-tunnistetta käytetään otsikolle osion luomiseen. Tämän jälkeen käyttäjät voivat parantaa otsikko-osion käyttöä CSS-ominaisuuksilla, kuten täyte ja taustakuvia. Se koskee kaikkia otsikkoelementtejä, kuten navigointipalkkia. Luodakseen navigointipalkin käyttäjät voivat käyttää '