Tietokoneet, Ohjelmointi
CSS, pseudo pseudo: hover, lapsi, tavoite
Yhdistämällä HTML ja CSS, voit ohjata ehdottomasti kaikki elementit Web-sivuja. Tyylit voit helposti muuttaa ulkoasua tahansa lohkon tai linja. Usein koodaaja täytyy tehdä monimutkaisempaa - muuttaa ulkonäköä elementin itsessään ei ole, erillisenä osana tai tietyssä tilassa. Tällöin avuksi pseudo CSS.
Pseudo-toimivat samalla periaatteella kuin tavallisella luokalla on markup, mutta fyysisesti Niitä ei kuitenkaan ole täällä. Ne voidaan valita tekijöiden perusteella, jotka eivät sisälly asiakirjan tiedot, jotka eivät valita tavallista valitsin. Tässä on yksinkertainen esimerkki: olet punaista nappia, ja haluat kun viet tuli sininen. Teoriassa voidaan toteuttaa JavaScriptiä, mutta miksi se on niin vaikeaa? Paljon kätevämpää käyttää : hover CSS. Sen avulla voit antaa kaikkiin yksiköihin parametrit, laukeaa vasta, kun hiiren kursori.
Luettelo CSS näennäisluokat päivitetään säännöllisesti. Ehkä, kun luet tätä materiaalia, useita uusia ilmestyy. Aloita katsovat niitä, jotka ilmestyi CSS3 spesifikaation.
: Nnen-of-tyyppinen
Oletetaan, että luettelon, johon haluat käyttää vuorotellen värejä, eli ensimmäinen linja on esimerkiksi kirjoitettu punaisin kirjaimin, ja toinen - .. Sininen, punainen jälleen kolmas, neljäs taas sinisenä. Aiemmin teillä oli luoda uusia luokkia. Ulkoasu menneisyyden lisätty jokaiseen elementtiin luokan luettelosta ja muuttivat esiintyminen stylesheet. Se ei ollut kovin mukava ja saastuttavien asettelua.
Nyt kaikki on helpompaa. Käytä CSS pseudo-luokka: nnen-of-tyyppiä. Tämä antaa mahdollisuuden saada toivottua visuaalinen vaikutus, muuttamatta mitään markup. Periaate on yksinkertainen: annat valitsin, ja suluissa nimen perässä kirjoittaa kaava tai avainsana, joka löytää tarvittavat elementit. Esimerkiksi ,: nnen-of-tyyppi (jopa) tulee kaikki parilliset elementit, ja: nnen-of-tyyppi (pariton) - outoa. On olemassa suuri määrä kaavojen käytetään tarkasti valvoa. Suluissa osoittavat mahdollista lukumäärää - tässä tapauksessa tyylejä voidaan soveltaa elementin, jonka indeksi on yhtä suuri kuin tämä luku.
: Nnen-lapsi
CSS pseudo-luokan toiminnan periaate on samanlainen kuin edellinen, mutta toisin kuin se toimii yksinomaan lasten valitun kohteen. Jos esimerkiksi haluat käyttää sitä muokata ulkoasua on vanhempi
Tarkkaa säätöä varten, jolla on kaava, voidaan käyttää. Ne ovat melko vaikeita aloittelijalle, mutta se kannattaa hieman syvemmälle syntaksin miten kaikki muuttuu helpommaksi. Kaavat ovat seuraavat: an + b, jossa - on tekijä, ja b - offset. Esimerkiksi, jos sulkeissa n, pseudo-valitsee kaikki alaelementtien (koska se ei ole määritelty lisäehtoja muodossa ja b). Jos annat n + 2, kaikki elementit ensimmäistä lukuunottamatta (koska offset on yhtä kuin kaksi) valitaan. Mikä parasta, tällä kertaa tutkia käytännössä. Testata lastasi komponentteja ja eri kaavoja.
: Viimeisten lapsi
Kaikki on yksinkertainen. CSS lapsi näennäisluokat käytetään valita tietty kohde. Tämä valitsee viimeksi vanhemman lapsen komponentin. On käytetty melko usein, esimerkiksi valita viimeinen rivi taulukon tai poistaa sisennys viimeisen lohkon välttää sen siirtämistä seuraavalle riville.
: Nnen last lapsi
Jonka toimintaperiaate on samanlainen kuin edellä mainittu n: nnen lapsi, mutta toimii vastakkaiseen suuntaan, eli. E. Kun käytetään elementtejä liikkua ylöspäin. Tämä on hyödyllistä, jos haluat löytää viime kohteita.
Voisi ajatella, että nämä pseudo-luokat ja pseudo-CSS: ää hyödytön, koska voit tehdä asioita hyvin tavanomaisin luokissa. Tämä ei ole niin. : Nnen-lapsi ,: nth- viime lapsi ja niiden analogit ovat erittäin kätevä kun työskennellään suurissa projekteissa - esimerkiksi silloin, kun lohko on valtava määrä lapsia. Manuaalisesti järjestää luokat pitkään ja hartaasti.
Pseudo-tilassa ohjaus
Mitä jos haluat muuttaa ulkonäköä elementin tietyssä tilassa? Tämä tapaus antaa CSS pseudo-napsauttamalla, osoittaen ja muita säädöksiä. Tarkastellaan niitä tarkemmin.
: link
Tämä pseudo CSS viittauksia, ei kaikkia, vaan ainoastaan ne, jotka eivät ole vielä käynyt. Siinä voit määritellä tyylejä elementtejä , josta käyttäjä ei ole vielä hyväksytty.
: vieraili
Analogi edellisessä suoritusmuodossa, joka vain ohjaa jo käynyt linkkejä. Yhdistämällä nämä kaksi näennäisluokat, voit muokata ulkoasua tunnisteet täsmälleen kuin haluat. Huomaa kuitenkin, että valtiot lasketaan erityisiä selaimet ja puhdistuskäsittelyn jälkeen historiaa.
Näennäisluokka: tavoite CSS
Yksi mielenkiintoisimmista näennäisluokat, jotka, jos käytetään jossakin määrin korvaa JavaScriptiä. Se mahdollistaa valvonnan, että tunniste sisällytetään riviin sivun osoite. Kyllä, ensimmäistä kertaa on vaikea ymmärtää. Yritä jäsentää esimerkkiä.
Sanotaan olemme sivulla 3 korttelin div tiettyjen id: ID1, ID2, id3. Meillä on myös kolme yhteyksiä vastaaviin arvoihin section: # ID1, # ID2, # id3. Kun klikkaat ensimmäinen lenkki riviosoitetta sivun jälkeen linkki vastaavaan id on itse sivun.
CSS Kaikkien lohkojen div määritetyn ominaisuuden display: none, eli niitä ei ole näkyvissä oletuksena. Käytämme tavoite: div ja antaa sille ominaisuutta display: block. Kun nyt klikkaa linkkejä tiettyihin href, lohkojen vastaavaan id käytetään kyseiseen display: block, ja siksi ne alkavat näkyä sivulla! Kun klikkaat linkkiä href = http: // site / artikkeli / 319683 /% E2% 80% 9D # ID1% E2% 80% 9D estää kanssa ID1, ja niin edelleen ..
Vieläkään ymmärrä mitään? Yritä kokeilla. Luo asettelun ja tyylejä kuvatulla tavalla. Muutama minuutti myöhemmin olet suuri luku kaiken pois.
Pseudo että voidaan soveltaa mihin tahansa elementtiin
Suurin osa edellä kuvattua pseudo-yhteyksiä tarvitaan työtä. Kuitenkin kaikki elementit tarvitse . Useita suoritusmuotoja voidaan soveltaa mihin tahansa osaan sivun kokonaan.
- : Aktiivinen käytetään tyylielementit joihin käyttäjä napsauttaa hiiren vasenta painiketta;
- : Hover - CSS elementtien johon käyttäjä vie hiiren;
- : Focus - niiltä sivun jotka ovat nyt keskipisteenä. Tämä näennäisluokka käytetään usein toimimaan muotoihin. Jos esimerkiksi haluat valita käyttäjänimen kuiskata, kun vierailija asettaa kursori sen ja alkaa valita merkkiä.
Muista, että: aktiivinen vain kulloinkin voimassa puristaminen. Välittömästi päättymisen jälkeen hiiren vasenta painiketta asetetaan avulla tyylejä katoaa ja kohde näytetään se näkyy oletusarvoisesti. Useimmissa tapauksissa tämä näennäisluokka on tottunut työskentelemään napeilla. Ne voidaan asettaa suuri määrä valtioita. Esimerkiksi oletuspainike on sininen, leijailla - vihreä, paina - punainen, jne ...
Tietenkin vain näennäisluokat tukee täysin modernit selaimet. Esimerkiksi IE6 ja 7 ei voi käyttää keskittyä, ja leijuvat aktiivinen vain hakuteos IE6. Toivottavasti sinun ei tarvitse työskennellä näiden selaimilla, mutta jos vielä nousivat ehdollisen kommentteja.
Muut pseudo
Mainittuja mahdollisuuksia lista ei lopu tähän. Vain mukana elementtejä voidaan palauttaa Nykyaikaisen CSS (: käytössä) tai vain leikattu (: vammaiset), kytkee vain merkitty valintaruutu ja radio (: valittuna). Kuvaa lyhyesti muutamia vaihtoehtoja, että voit käyttää perusteellisempaa valvontaa ulkonäkö sisällön.
- : Vain-lapsi - huuhtelee mahdollista käyttää tyyliä elementtiin, joka on ainoa lapsi elementti;
- : Lang - työskennellä elementtejä, jotka ovat antaneet kieli käyttäen lang;
- : Root - käytetään valitsemaan juuri elementti. Niinpä tällaiset HTML-tunniste on ;
- : Ei - erittäin tehokas työkalu. Sen avulla voit rajoittaa tiettyjen tyylejä valitsimista. Tässä on esimerkki: .blue-väri: ei (span ). Valitsin soveltaa tyyliä kaikki elementit luokan kanssa on sininen, jos ne eivät ole .
Täysi lista näennäisluokat ei voida venyttää yhdellä sivulla. Useimmat web-suunnittelijat käyttävät käytännössä vain osa niistä, mieluummin hallita kunnossa JavaScript. Kyllä, se on kätevä, mutta on olemassa joitakin hetkiä, jolloin tehokkaampia tuloksia saadaan helpommin käyttäen sopivia pseudo.
Similar articles
Trending Now