' veya ' ” etiketleri de kullanılabilir ancak “ etiketlerini kullanmak iyi bir uygulamadır. ' etiket. Ardından, bir “ atayın başlık Başlık bölümünde CSS stillerini uygulamak için ” sınıfı. Bundan sonra, “

” etiketleyin ve ona bir “ sınıfı atayın başlık ” içeriğini görüntülemek için “Linuxhint'e Hoş Geldiniz!”:

sınıf = 'başlık' >

< h1 sınıf = 'yön' > Linuxhint'e hoş geldiniz! < / h1 >

< / başlık>

Bundan sonra, “ ” etiket sınıfı ve aşağıdaki stilleri atayın:

---

---

.başlık {

arka plan resmi: url ( '../bg.jpg' ) ;

arka plan- boyut : kapak;

arka plan tekrarı: tekrar yok;

renk : Beyaz duman;

arka plan konumu: üst;

dolgu: 0px 20px 20px 20px;

}

Yukarıdaki kodun açıklaması aşağıda belirtilmiştir:

• İlk önce görüntüyü ayarlayın ' bg.jpg ” kullanarak başlık bölümü için arka plan olarak arka plan görüntüsü ' mülk.
• Sonra, “ arka plan boyutu ' Ve ' arka plan tekrarı ” özellikleri, sırasıyla görüntü boyutunu ayarlamak ve görüntü tekrarını durdurmak için kullanılır.
• Ardından yazının rengini ve görselin konumunu “” yardımıyla üste getirin. renk ' Ve ' arka plan pozisyonu ' özellikler.
• Sonunda, “ dolgu malzemesi ” özelliği, başlık içeriği ile kenarlık arasında bir boşluk ayarlamak için kullanılır.

Yukarıdaki kodu çalıştırdıktan sonra, web sayfası şöyle görünür:

Yukarıdaki çıktı, başlık bölümünün oluşturulduğunu ve buna CSS stillerinin uygulandığını gösterir.

2. Adım: Bir Gezinme Çubuğu Oluşturun

Başlık, çoğu durumda bir gezinme çubuğu da içerebilir. Gezinme çubuğunun oluşturulması için HTML ' ” etiketi çok faydalı olabilir. Bu nedenle, ' kullanarak navbar öğeleri ekleyin. ” etiketler ve bir “ sınıfı atayın davranmak ”:

sınıf = 'başlık' >



< A sınıf = 'davranmak' href = '#' >ev< / A >

< A sınıf = 'davranmak' href = '#' >Hizmetler< / A >

< A sınıf = 'davranmak' href = '#' >Hakkımızda< / A >

< A sınıf = 'davranmak' href = '#' >Bize Ulaşın< / A >

< A sınıf = 'davranmak' href = '#' >Yeni Gelenler< / A >

< / hayır>

< br >< br >

< h1 sınıf = 'yön' > Linuxhint'e hoş geldiniz! < / h1 >

< / başlık>

Yukarıdaki kodu çalıştırdıktan sonra, web sayfası şöyle görünür:

Yukarıdaki çıktı, navbar öğelerinin “ Ev ”, “ Hizmetler ”, “ Hakkımızda ”, “ Bize Ulaşın ' Ve ' Yeni gelenler ” oluşturulmuştur.

3. Adım: Navbar Öğelerine Stiller Uygulayın

Gezinme çubuğu öğelerine stil vermek için “ davranmak ” sınıfını açın ve aşağıdaki CSS stilleri özelliklerini atayın:

.davranmak {

metin süslemesi: yok;

renk : beyaz;

Ekran bloğu;

dolgu: 15 piksel;

yazı tipi- boyut : büyük;

kayan nokta: sol;

kenar boşluğu: 0 piksel 20 piksel;

}

Yukarıdaki kodun açıklaması şu şekildedir:

• İlk önce ' metin dekorasyonu ” özelliği, “ öğesinin önceden tanımlanmış stilini kaldırmak için “none” olarak ayarlanmıştır. ' etiket.
• Kullanıcının metin görünürlüğünü artırmak için ' beyaz ' Ve ' büyük ” değerleri “ renk ' ve ' yazı Boyutu ' mülk.
• Bundan sonra “ görüntülemek ' Ve ' batmadan yüzmek ” özellikler yardımcı olur “ ” etiketleri aynı satırda görünecektir.
• Sonunda, “ dolgu malzemesi ' Ve ' marj ” özellik değerleri, her bir “ ” etiketi arasında boşluk oluşturmak için kullanılır.

Yukarıdaki kodu çalıştırdıktan sonra, web sayfası şöyle görünür:

Yukarıdaki çıktı, navbar öğelerinin artık stillendirildiğini göstermektedir.

4. Adım: Navbar Öğelerine Vurgulu Efekti Ekleyin

Yukarıdaki çıktıda olduğu gibi, gezinti çubuğu öğesinde gezinme efekti mevcut değildir. Her ikisini de eklemek için “ başlık “ sınıfına atanan sınıf

' etiket. Bundan sonra, “ :vurgulu ” ile seçici davranmak Gezinme çubuğu öğelerine vurgulu efekti uygulamak için ” sınıfı:

.hareket: üzerine gelin {

sınır : 2 piksel düz beyaz;

renk : Mavi menekşe;

}

.başlık {

metin- hizalamak : merkez;

marj: 18 % 0px;

}

Yukarıdaki kodun açıklaması aşağıda verilmiştir:

• İlk olarak, “ sınır ” 2px tipi bir katı ve beyaz bir “ atayın renk ”. Bununla birlikte, “ Mavi menekşe ” yalnızca fare kullanıcı tarafından gezinme çubuğu öğelerinin üzerine getirildiğinde renklendirilir.
• Ardından, “ başlık ” sınıfı ve hizalamasını “ olarak ayarlayın merkez ” ve bölümün daha büyük görünmesi için biraz kenar boşluğu bırakın.

Yukarıdaki kodu çalıştırdıktan sonra, başlığın son görünümü şöyle görünür:

Yukarıdaki çıktı, başlığın HTML ve CSS kullanılarak oluşturulduğunu gösterir.

Çözüm

HTML dosyasında, başlık için bir bölüm oluşturmak için “

” etiketi kullanılır. Bundan sonra kullanıcılar, başlık bölümünü geliştirmek için dolgu ve arka plan resimleri gibi CSS özelliklerini uygulayabilir. Gezinme çubuğu gibi tüm başlık öğeleri için geçerlidir. Bir gezinme çubuğu oluşturmak için, kullanıcılar '