2. korak: dodajte naslov

Zatim umetnite naslov pomoću bilo kojeg '

” do “

' oznake. Na primjer, '

” dodaje naslov.

Korak 3: Dodajte podatke na popis

Kako biste umetnuli podatke u obliku popisa, upotrijebite ' ” oznaka:

---

---

< div razreda = 'kućni ljubimac' >

< h1 > Popis kućnih ljubimaca < / h1 >

< da > Kokoš < / da >

< da > Patka < / da >

< da > Pas < / da >

< da > Mačka < / da >

< da > Zec < / da >

< / div >

Izlaz gore navedenog koda je sljedeći:

Sada idite naprijed prema odjeljku CSS za stiliziranje popisa.

Korak 4: Stilizirajte element '.pet-animal'.

Pristupite '

” element uz pomoć dodijeljene klase “ .kućni ljubimac-životinja ” i primijenite navedena svojstva:

.kućni ljubimac-životinja {

granica : 2 px točkasta rgb ( 230 , petnaest , petnaest ) ;

margina : 50 px ;

boja pozadine : rgb ( 252 , 239 , 169 ) ;

}

Ovdje:

• “ granica ” Svojstvo se koristi za određivanje granice oko elementa.
• “ margina ” definira prostor oko granice elementa.
• “ boja pozadine ” dodjeljuje boju na stražnjoj strani elementa.

Rezultirajuća slika prikazuje izlaz gornjeg koda:

Korak 5: Stilski dodan popis 'li'

Sada pristupite popisu ' div ' spremnik koji ima klasu ' ljubimac-životinja ' pomoću ' .ljubimac-životinja > li ” i primijenite dolje navedena svojstva:

.kućni ljubimac-životinja > da {

vidljivost : skriven ;

neprozirnost : 0,2 ;

tranzicija : vidljivost 0s , neprozirnost 0,5 s linearni ;

}

Ovdje:

• ' vidljivost ” CSS se koristi za postavljanje vidljivosti elementa bez mijenjanja izgleda dokumenta, poput skrivenog ili vidljivog.
• “ neprozirnost ” određuje prozirnost elementa.
• “ tranzicija ” omogućuje korisnicima glatku promjenu vrijednosti svojstava tijekom zadanog trajanja:

Korak 6: Primijenite pseudo klasu lebdenja

Sada primijenite ' lebdjeti ” nekretnina na popisu:

.kućni ljubimac-životinja : lebdjeti > da {

vidljivost : vidljivo ;

neprozirnost : jedan ;

}

' :lebdjeti ” CSS je pseudoklasa koja vrši promjene tijekom izvođenja kada se pokazivač miša pomakne preko elementa. Učinite popis vidljivim pomoću ' vidljivost ' i postavite prozirnost pomoću ' neprozirnost ” CSS svojstva na popis dok lebdite:

Može se primijetiti da smo uspješno primijenili prijelaz na ' prikaz ” vlasništvo.

Zaključak

CSS prijelaz ne može se izravno primijeniti na ' prikaz ” vlasništvo. Međutim, može se primijeniti na alternativni način. Da biste to učinili, dodajte oznaku popisa u HTML dokument, pristupite popisu prema nazivu oznake i primijenite ' tranzicija ”, “ neprozirnost ', i ' vidljivost ” CSS svojstva na popisu. Zatim upotrijebite ' : lebdjeti ” pseudoklasu i postavite vrijednost vidljivosti kao “ vidljivo ”. Ovaj post je objasnio kako se prijelaz primjenjuje na CSS svojstvo prikaza.