Esimerkki painikkeesta, kun CSS: ssä on 1

Siirrä 1 CSS
Tässä esimerkissä meillä on oltava 3 kuvaa, jotka toimivat kuten;
Levätä

Päällä

Pidetty alas

Sitten sivustomme rungossa meillä on tämä
Koodi:


ALKU

Ja niin kaikkien painikkeidemme kohdalla, kun meidän on käytettävä CSS: ää, aloitamme tällä koodilla:
Koodi:

# bot1 {
reunus: 0 0 0 0;
pehmuste: 0;
tekstin tasaus: keskellä;
}
Jos sanomme, että emme halua ulkoista ja sisäistä marginaalia, kohdistamme tekstin keskelle, jatkat nyt tällä koodilla:
Koodi:

# bot1 - {
taustakuva: url (bg_menu_1.jpg);
taustan sijainti: keskimmäinen yläosa;
korkeus: 30px;
leveys: 100px;
näyttö: lohko;
väri: # 990000;
tekstikoristelu: ei mitään;
toppaus-top: 5px;
tausta-toisto: ei-toista;
fontin paino: lihavoitu;
}
Että hän on käytännössä se, joka tekee kaiken, katsotaanpa rivi riviltä
taustakuva: url (bg_menu_1.jpg);
Tällä sanomme, että haluamme taustakuvan ja annamme tämän polun
taustan sijainti: keskimmäinen yläosa;
Tällä osoitamme, että taustakuvan sijainti keskitetään ja ylöspäin.
tausta-toisto: ei-toista;
Joten tausta ei toistu kuin kuvio.

korkeus: 30px;
leveys: 100;
Sanomme, että korkeus on 30 ja leveys 100 kuvapistettä, jotka ovat taustakuvien mitat.
näyttö: lohko;
Joten se tuottaa ja kunnioittaa laatikkoa toimenpiteillä, jotka olemme asettaneet ennen.
väri: # 990000
Tämän avulla annamme vain värin tekstille, joka on laatikkomme sisällä.
tekstikoristelu: ei mitään;
Sen on vältettävä linkkien alapuolella olevaa viivaa.
toppaus-top: 5px;
Siten, että säästän 5 kuvapisteen tilaa linkkimme yläosassa ja tämän myötä se alentaa asennuksen laatikkomme keskelle.
fontin paino: lihavoitu;
Tekee kirjaimet lihavoituiksi
Sitten sinun tarvitsee vain lisätä luokkia pseudoelementteille "hover" ja "focus"
Koodi:

# bot1 a: vie hiiri {
taustakuva: url (bg_menu_2.jpg);
}
# bot1 vastaan: tarkennus {
taustakuva: url (bg_menu_3.jpg);
}
Mutta kun ymmärrämme, muutimme vain taustakuvien polkua saavuttaaksemme etsimämme vaikutuksen.
Koodimme rollover-esimerkki css: ssä nähtävissä alapuolella:
Koodi:








ALKU


Ja kuvat voidaan ladata tältä sivulta napsauttamalla kuvaa hiiren kakkospainikkeella ja tallentamalla nimellä.