2. samm: lisage pealkiri

Järgmisena sisestage pealkiri, kasutades suvalist '

' kuni '

” sildid. Näiteks, '

” lisab pealkiri.

3. samm: lisage loendisse andmed

Andmete loendi kujul sisestamiseks kasutage ' ” silt:

---

---

< div klass = 'lemmikloom' >

< h1 > Lemmikloomade nimekiri < / h1 >

< et > Kana < / et >

< et > Part < / et >

< et > Koer < / et >

< et > Kass < / et >

< et > Jänes < / et >

< / div >

Ülalmainitud koodi väljund on järgmine:

Nüüd liikuge loendi kujundamiseks CSS-i jaotise poole.

4. toiming. Stiilige element '.pet-animal'.

Juurdepääs '

' element määratud klassi abil ' .lemmikloom ” ja rakendage loetletud atribuute:

.lemmikloom {

piir : 2 pikslit täpiline rgb ( 230 , viisteist , viisteist ) ;

marginaal : 50 pikslit ;

taustavärv : rgb ( 252 , 239 , 169 ) ;

}

Siin:

• “ piir ” atribuuti kasutatakse elemendi ümber oleva piiri määramiseks.
• “ marginaal ” määratleb ruumi elemendi piiri ümber.
• “ taustavärv ” määrab elemendi tagaküljele värvi.

Saadud pilt näitab ülaltoodud koodi väljundit:

5. samm: laadige lisatud loend 'li'

Nüüd avage '' div 'konteiner, millel on klass' lemmikloom-loom ' kasutades ' .lemmikloom > li ” ja rakendage alltoodud atribuute:

.lemmikloom > et {

nähtavus : peidetud ;

läbipaistmatus : 0.2 ;

üleminek : nähtavus 0s , läbipaistmatus 0,5 s lineaarne ;

}

Siin:

• ' nähtavus ” CSS-i kasutatakse elemendi nähtavuse määramiseks ilma dokumendi paigutust muutmata (nt peidetud või nähtav).
• “ läbipaistmatus ” määrab elemendi läbipaistvuse.
• “ üleminek ” võimaldab kasutajatel teatud aja jooksul sujuvalt atribuutide väärtusi muuta:

6. samm: rakendage hõljuvat pseudoklassi

Nüüd rakendage ' hõljuma ” atribuut loendis:

.lemmikloom : hõljuma > et {

nähtavus : nähtav ;

läbipaistmatus : üks ;

}

' :hõljuma ” CSS on pseudoklass, mis teeb käitamisajal muudatusi, kui hiirekursor liigutatakse elemendi kohale. Tehke loend nähtavaks, kasutades ' nähtavus ' ja määrake läbipaistvus, kasutades nuppu ' läbipaistmatus ” CSS-i atribuudid hõljutatavasse loendisse:

Võib täheldada, et oleme edukalt rakendanud üleminekut kuva ” vara.

Järeldus

CSS-i üleminekut ei saa otse rakendada kuva ” vara. Seda saab aga rakendada ka alternatiivsel viisil. Selleks lisage HTML-dokumendile loendi silt, avage loendile sildi nime järgi ja rakendage ' üleminek ”, „ läbipaistmatus ”, ja „ nähtavus ” CSS-i atribuudid loendis. Seejärel kasutage ' : hõljuma ' pseudoklass ja määrake nähtavuse väärtuseks ' nähtav ”. Selles postituses on selgitatud, kuidas üleminekut CSS-i kuva atribuudile rakendatakse.