2. Adım: Bir Başlık Ekleyin

Ardından, herhangi bir ' kullanarak bir başlık ekleyin.

' ile '

” etiketleri. Örneğin, '

” başlığı ekler.

3. Adım: Listeye Veri Ekleyin

Verileri bir liste şeklinde eklemek için “ ' etiket:

---

---

< div sınıf = 'Evcil Hayvan' >

< h1 > Evcil hayvanların listesi < / h1 >

< o > Tavuk < / o >

< o > Ördek < / o >

< o > Köpek < / o >

< o > Kedi < / o >

< o > Tavşan < / o >

< / div >

Yukarıda belirtilen kodun çıktısı aşağıdaki gibidir:

Şimdi, listeyi şekillendirmek için CSS bölümüne doğru ilerleyin.

4. Adım: '.pet-animal' Öğesini Stillendirin

Erişmek '

'atanan sınıfın yardımıyla öğe' .Evcil Hayvan ” ve listelenen özellikleri uygulayın:

.Evcil Hayvan {

sınır : 2 piksel noktalı rgb ( 230 , onbeş , onbeş ) ;

marj : 50 piksel ;

arka plan rengi : rgb ( 252 , 239 , 169 ) ;

}

Burada:

• “ sınır ” özelliği, elemanın etrafındaki sınırı belirtmek için kullanılır.
• “ marj ”, öğe sınırının etrafındaki boşluğu tanımlar.
• “ arka plan rengi ” öğesinin arka tarafına bir renk ayırır.

Ortaya çıkan görüntü, yukarıdaki kodun çıktısını gösterir:

Adım 5: Stil Eklenen Liste “li”

Şimdi, “ listesine erişin div ' sınıfa sahip konteyner ' Evcil Hayvan ” kullanarak “ .evcil hayvan > li ” ve aşağıda belirtilen özellikleri uygulayın:

.Evcil Hayvan > o {

görünürlük : gizlenmiş ;

opaklık : 0.2 ;

geçiş : görünürlük 0s , opaklık 0,5 saniye doğrusal ;

}

Burada:

• “ görünürlük ” CSS, gizli veya görünür gibi bir belgenin düzenini değiştirmeden öğenin görünürlüğünü ayarlamak için kullanılır.
• “ opaklık ”, bir öğenin saydamlığını belirtir.
• “ geçiş ”, kullanıcıların özellik değerlerini belirli bir süre boyunca sorunsuz bir şekilde değiştirmesine olanak tanır:

Adım 6: “hover” Pseudo Class'ı uygulayın

Şimdi, “ üzerine gelin ” listedeki özellik:

.Evcil Hayvan : üzerine gelin > o {

görünürlük : görünür ;

opaklık : bir ;

}

“ :vurgulu ” CSS, fare işaretçisi öğenin üzerine getirildiğinde çalışma zamanında değişiklikler yapan sözde bir sınıftır. “ kullanarak bir listeyi görünür yapın. görünürlük ” ve şeffaflığı “ kullanarak ayarlayın. opaklık ” Üzerine gelindiğinde listeye CSS özellikleri:

“ üzerinde başarılı bir şekilde geçiş uyguladığımız görülmektedir. Görüntüle ' Emlak.

Çözüm

CSS geçişi doğrudan “ öğesine uygulanamaz. Görüntüle ' Emlak. Ancak alternatif bir şekilde uygulanabilir. Bunu yapmak için, HTML belgesine liste etiketini ekleyin, listeye etiket adına göre erişin ve ' geçiş ”, “ opaklık ', ve ' görünürlük ” Listedeki CSS özellikleri. Ardından, “ : üzerine gelin ” sözde sınıf ve görünürlük değerini “ olarak ayarlayın görünür ”. Bu gönderi, geçişin CSS görüntüleme özelliğine nasıl uygulandığını açıkladı.