Arvutid, Programmeerimine
CSS, pseudo, pseudo: hover, laps, siht
Kombineerides HTML ja CSS, saate kontrollida absoluutselt kõik elemendid veebilehti. Mis stiile saate muuta välimust tahes plokk või joon. Sageli kooder on vaja teha rohkem keeruline ülesanne - muuta välimust element ise ei ole, eraldi osana või konkreetse riigi. Sellisel juhul on abi pseudo CSS.
Pseudo-tegutseda samal põhimõttel nagu tavaklassides Markup, kuid füüsiliselt neid ei esine siin. Nad võivad olla valitud põhjal elemendid ei kuulu dokumendi saamiseks, mis ei vali tavaliselt valijat. Siin on lihtne näide: sul on punane nupp, ja te soovite, kui sa hõljuma see muutus siniseks. Teoreetiliselt on võimalik rakendada JavaScript, aga miks on nii raske? Palju mugavam kasutada : tiirutama CSS. Oma abi saab anda iga üksus parameetrid, mis käivitatakse ainult siis, kui hiirekursor.
Loetelu CSS pseudo-klassi uuendatakse regulaarselt. Ehk kui sa loed seda materjali, mitu uut ilmub. Kõigepealt leiavad need, mis ilmus CSS3 spetsifikatsioon.
: Nth-of-tüüpi
Oletame, et teil on nimekiri, mida te soovite kasutada vaheldumisi värve, st esimene rida on näiteks märgitud punasega, ja teine - .. sinine, punane jälle kolmas, neljas jälle sinine. Varem oli teil luua uusi klasse. Layout mineviku lisatakse iga elemendi klassi nimekirja ja seejärel muutnud oma välimust laaditabeli. See ei olnud liiga mugav ja saastavad paigutuse.
Nüüd on kõik lihtsam. Kasutage CSS pseudo-klass: nda-of-tüüpi. See annab võimaluse saada soovitud visuaalne efekt, muutmata midagi juurdehindlus. Põhimõte on lihtne: sisestad valijat ja sulgudes pärast nime kirjutada valemi või märksõna, mis leiavad vajalikud elemendid. Näiteks ,: nda-of-tüüpi (isegi) kõik isegi elemente, ning: nda-of-tüüpi (paaritu) - paaritu. On suur hulk valemeid kasutatakse täpselt kontrollida. Sulgudes näitab võimalikku arvu - antud juhul stiile kanda element, mille indeks on võrdne selle number.
: Nda lapse
See CSS pseudo-klassi põhimõttel tegevus on sarnane eelmisega, kuid erinevalt see toimib ainult lastega valitud kirje. Näiteks, kui soovite seda kasutada välimuse on vanem
Täpse kontrolli võib kasutada valemit. Nad on üsna raske algaja, kuid see on väärt natuke sügavamale süntaks, kuidas kõik muutub lihtsamaks. Valemid on järgmised: an + b, kus a - on faktor ja b - nihe. Näiteks, kui sulgudes näitavad n, pseudo-valib kõik alielementtiä (sest see ei ole täpsustatud lisatingimuste kujul ja b). Kui määrate n + 2, kõik elemendid, välja arvatud esimene (sest nihe on võrdne kahe) valitakse. Parimat, seekord õppida praktikas. Eksperiment lapse komponendid ja eri valemeid.
: Viimane lapse
Kõik on lihtne. CSS lapse pseudo-klassi kasutatakse, et valida konkreetse objekti. See valib viimase lapse vanem osa. Kasutatakse üsna sageli, näiteks valida viimase rea lauale või eemaldada taandus viimase ploki vältida selle ümberpaigutamist järgmisele reale.
: Nda-viimase lapse
Autor tööpõhimõte on sarnane eelnevalt mainitud nda lapse, kuid toimib vastupidises suunas, st. E. Kui kasutate elemendid liiguvad ülespoole. See on kasulik, kui teil on vaja leida viimastel esemeid.
Võib arvata, et need pseudo-klassi ja pseudo-elemendid CSS kasutu, sest sa saad asju teha ka tavaliste klassi. See ei ole nii. : Nda lapse ,: nth- viimase lapse ja nende analoogid on väga mugav, kui ta töötab suurprojektid - näiteks juhul, kui plokk on suur hulk lapsi. Käsitsi korraldada klasside pikk ja raske.
Pseudo-riigi kontrolli
Mis siis, kui on vaja muuta välimust element teatud riigi? Sel juhul annab CSS pseudo-klõpsamine juhtides ja muud õigusaktid. Uurigem neid üksikasjalikult.
: link
See pseudo CSS viited ei ole kõik, kuid ainult neid, mis ei ole veel külastanud. Seal saab määrata stiile elementide a, mille puhul kasutaja ei ole veel möödas.
: külastatud
Analoog eelmise teostuses mis juhib ainult juba külastanud linke. Ühendades need kaks pseudo-klassi, saate kohandada välimus silte täpselt nii, nagu vaja. Siiski tuleb märkida, et riigid on arvutatud teatud brauserites ja lõpetatakse pärast ravi ajalugu.
Pseudo-klass: sihtmärk CSS
Üks huvitav pseudo-klassi, mis, kui seda kasutatakse mingil määral asendab JavaScripti. See võimaldab kontrolli, et tunnus sisaldub rida lehe aadress. Jah, esimest korda on raske aru saada. Proovi sõeluda näiteks.
Oletame oleme lehel 3 plokid div teatud ID: id1, id2, id3. Meil on ka kolm linke vastavate väärtuste href: # id1, # id2, # id3. Kui klõpsate esimene lüli rida lehe aadress pärast link vastavale id on leht ise.
CSS kõigi plokid div täpsustatud vara displei: puudub, st nad on vaikimisi ei kuvata. Me kasutame sihtmärk: div ja anda see vara kuva: blokeerida. Nüüd, kui klõpsate linke teatud href, plokid vastava id kantakse kuva: blokaad, ja seetõttu nad hakkavad ilmuma lehel! Kui klõpsate linki href = http: // saidi / artikkel / 319683 /% E2% 80% 9D # id1% E2% 80% 9D blokeerib koos id1, ja nii edasi ..
Ikka ei saa aru midagi? Proovige katsetada. Loo leht paigutuse ja stiili eespool kirjeldatud. Paar minutit hiljem teil on suurkuju kõike välja.
Pseudo, mida saab rakendada mis tahes element
Enamik eespool kirjeldatud pseudo-lingid vajalik töö. Kuid mitte kõik elemendid peavad . Mitmed teostustes saab rakendada mis tahes osa leht täielikult.
- : Aktiivne kasutatakse stiili elemente, mille kasutaja klõpsab hiire vasakut nuppu;
- : Hover - CSS elemente, mis kasutaja liigub üle;
- : Fookus - neile lehe osi, mis on nüüd fookuses. See pseudo-klassi kasutatakse sageli töötada vorme. Näiteks, kui soovite valida User Name kiire, kui külastaja määrab kursori üle ja hakkab valides tähemärki.
Pea meeles, et: aktiivne kehtib ainult ajal vajutades. Kohe pärast lõpetamist hiire vasakut nuppu on seatud abiga stiile kaob ja objekt kuvatakse see kuvatakse vaikimisi. Enamikul juhtudel on see pseudo-klassi kasutatakse töötavad nupud. Saate määrata neid suur hulk riike. Näiteks vaikimisi nupp on sinine, hover - roheline, vajutades - punane, jne ...
Muidugi, ainult pseudo-klassi toetab täielikult kaasaegsete brauseritega. Näiteks IE6 ja 7 ei saa kasutada fookuse ja hover ja aktiivne ainult teatmeteoses IE6. Loodetavasti sa ei pea tegema need brauserid, aga kui sa ikka tekkis vajadus kasutada tingimusliku kommenteerida.
täiendava pseudo
Valikud eespool loetletud nimekirja ei peatu seal. Ainult lisada elemente on võimalik taaskasutada tänu kaasaegse CSS (: lubatud) või lihtsalt välja lõigata (: keelatud), vaid lülitab märgitud ruut ja raadio (: kontrollida). Kirjeldage lühidalt mõned rohkem võimalusi, mida saab kasutada põhjalikumat kontrolli välimus sisu.
- : Ainult lapse - hood võimalik kohaldada stiili element, mis on ainus laps element;
- : Lang - töötada elemente, mis on antud keeles kasutades lang atribuut;
- : Root - kasutatud valida root element. Seega on sellised HTML tag on ;
- : Ei - väga võimas vahend. See võimaldab teil piirata teatavate stiile valijad. Siin on näide: .blue värvi: mitte (span ). Valijat kohaldada stiili kõik elemendid klassi sinise värvi, kui nad ei ole .
Täielik nimekiri pseudo-klassi ei saa venitada ühel lehel. Enamik veebidisainerid kasutada praktikas, vaid mõned neist, kes eelistavad juhtida tingimusel JavaScript. Jah, see on mugav, kuid seal on mõned hetked, kus paremaid tulemusi saavutatakse lihtsam, kasutades sobivat pseudo.
Similar articles
Trending Now