Steg 2: Lägg till en rubrik

Infoga sedan en rubrik genom att använda någon '

' till '

'-taggar. Till exempel, '

” lägger till en rubrik.

Steg 3: Lägg till data i listan

För att infoga data i form av en lista, använd ' ' tag:

---

---

< div klass = 'husdjur' >

< h1 > Lista över sällskapsdjur < / h1 >

< den där > Höna < / den där >

< den där > Anka < / den där >

< den där > Hund < / den där >

< den där > Katt < / den där >

< den där > Kanin < / den där >

< / div >

Utdata från ovan nämnda kod är som följer:

Gå nu vidare mot CSS-sektionen för styling av listan.

Steg 4: Stil '.pet-animal' Element

Gå till '

' element med hjälp av den tilldelade klassen ' .husdjur ' och tillämpa de listade egenskaperna:

.husdjur {

gräns : 2px prickad rgb ( 230 , femton , femton ) ;

marginal : 50 px ;

bakgrundsfärg : rgb ( 252 , 239 , 169 ) ;

}

Här:

• ' gräns ”-egenskapen används för att specificera gränsen runt elementet.
• ' marginal ” definierar utrymmet runt elementgränsen.
• ' bakgrundsfärg ” tilldelar en färg på baksidan av elementet.

Den resulterande bilden visar utdata från ovanstående kod:

Steg 5: Style Added List 'li'

Gå nu till listan över ' div 'behållare med klass' husdjur ' använder sig av ' .sällskapsdjur > li ” och tillämpa nedanstående egenskaper:

.husdjur > den där {

synlighet : dold ;

opacitet : 0,2 ;

övergång : synlighet 0s , opacitet 0,5 s linjär ;

}

Här:

• den ' synlighet ” CSS används för att ställa in synligheten för elementet utan att ändra layouten på ett dokument, till exempel dold eller synlig.
• ' opacitet ” specificerar transparensen för ett element.
• ' övergång ” tillåter användare att ändra egenskapsvärden smidigt under en given varaktighet:

Steg 6: Tillämpa 'hover' Pseudo Class

Använd nu ' sväva ” fastighet på listan:

.husdjur : sväva > den där {

synlighet : synlig ;

opacitet : ett ;

}

den ' :sväva ” CSS är en pseudoklass som gör ändringar på körtiden när muspekaren flyttas över elementet. Gör en lista synlig med hjälp av ' synlighet ' och ställ in transparensen med ' opacitet ' CSS-egenskaper till listan när du håller muspekaren:

Det kan observeras att vi framgångsrikt har tillämpat övergången på ' visa ' fast egendom.

Slutsats

CSS-övergången kan inte tillämpas direkt på ' visa ' fast egendom. Det kan dock tillämpas på ett alternativt sätt. För att göra det, lägg till listtaggen i HTML-dokumentet, öppna listan efter taggnamn och använd ' övergång ”, “ opacitet ', och ' synlighet ” CSS-egenskaper på listan. Använd sedan ' : sväva ' pseudo-klass och ställ in synlighetsvärdet som ' synlig ”. Det här inlägget har förklarat hur övergången tillämpas på CSS-visningsegenskapen.