Trin 2: Tilføj en overskrift

Indsæt derefter en overskrift ved at bruge en '

' til '

” tags. For eksempel, '

” tilføjer en overskrift.

Trin 3: Tilføj data til listen

For at indsætte dataene i form af en liste, skal du bruge ' ' tag:

---

---

< div klasse = 'kæledyr' >

< h1 > Liste over kæledyr < / h1 >

< at > Høne < / at >

< at > And < / at >

< at > Hund < / at >

< at > Kat < / at >

< at > Kanin < / at >

< / div >

Outputtet af den ovennævnte kode er som følger:

Gå nu videre mod CSS-sektionen for at style listen.

Trin 4: Stil '.pet-animal' Element

Få adgang til '

' element ved hjælp af den tildelte klasse ' .kæledyr ' og anvend de angivne egenskaber:

.kæledyr {

grænse : 2px prikket rgb ( 230 , femten , femten ) ;

margen : 50 px ;

baggrundsfarve : rgb ( 252 , 239 , 169 ) ;

}

Her:

• “ grænse ” egenskab bruges til at angive grænsen omkring elementet.
• “ margen ” definerer rummet omkring elementgrænsen.
• “ baggrundsfarve ” tildeler en farve på bagsiden af ​​elementet.

Det resulterende billede viser outputtet af ovenstående kode:

Trin 5: Style tilføjet liste 'li'

Få nu adgang til listen over ' div ' container med klasse ' kæledyr ' ved brug af ' .kæledyr > li ” og anvend nedenstående egenskaber:

.kæledyr > at {

sigtbarhed : skjult ;

Gennemsigtighed : 0,2 ;

overgang : sigtbarhed 0s , Gennemsigtighed 0,5 sek lineær ;

}

Her:

• Det ' sigtbarhed ” CSS bruges til at indstille synligheden af ​​elementet uden at ændre layoutet af et dokument, såsom skjult eller synligt.
• “ Gennemsigtighed ” angiver gennemsigtigheden af ​​et element.
• “ overgang ” tillader brugere at ændre egenskabsværdier jævnt over en given varighed:

Trin 6: Anvend 'hover' Pseudo Class

Anvend nu ' svæve ” ejendom på listen:

.kæledyr : svæve > at {

sigtbarhed : synlig ;

Gennemsigtighed : en ;

}

Det ' :hover ” CSS er en pseudo-klasse, der foretager ændringer på køretid, når musemarkøren flyttes hen over elementet. Gør en liste synlig ved at bruge ' sigtbarhed ' og indstil gennemsigtigheden ved at bruge ' Gennemsigtighed ' CSS-egenskaber til listen ved svævning:

Det kan bemærkes, at vi med succes har anvendt overgangen på ' Skærm ” ejendom.

Konklusion

CSS-overgangen kan ikke anvendes direkte på ' Skærm ” ejendom. Det kan dog anvendes på en alternativ måde. For at gøre det skal du tilføje listetagget til HTML-dokumentet, få adgang til listen efter tagnavn og anvende ' overgang ', ' Gennemsigtighed ', og ' sigtbarhed ” CSS-egenskaber på listen. Brug derefter ' : svæve ' pseudo-klasse og indstil synlighedsværdien som ' synlig '. Dette indlæg har forklaret, hvordan overgangen anvendes på CSS-visningsegenskaben.