Számítógépek, Programozás
CSS, ál ál: hover, gyermek, cél
Kombinálásával HTML és CSS, akkor az ellenőrzés abszolút minden elemét a weboldalakat. A stílusok könnyen változtatni a megjelenés minden blokk vagy sort. Gyakran coder kell végezni a bonyolultabb feladat -, hogy változtatni a kinézetét az elem önmagában nem, külön részeként vagy egy adott állapotban. Ebben az esetben a támogatás az ál CSS.
Pszeudo-működnek ugyanazon az elven, mint a normál osztályokban a jelölésben, de fizikailag nincsenek jelen van. Ezek alapján választják ki az elemeket nem tartalmazza a dokumentum információt, amely nem választ a szokásos választó. Itt egy egyszerű példa: van egy piros gombot, és azt szeretnénk, hogy ha lebeg lett kék. Elméletileg lehet végrehajtani JavaScript, de miért olyan nehéz ez? Sokkal kényelmesebb használni : hover CSS. A segítséget tud adni minden egység a paramétereket, akkor aktiválódik, ha a kurzor.
Listája CSS pszeudo-osztályok rendszeresen frissítik. Talán, miközben olvassa ezt az anyagot, számos új jelenik meg. Kezdeni, úgy az is, hogy megjelent a CSS3 specifikáció.
: N.-of-típusú
Tegyük fel, hogy van egy lista, amelyben a használni kívánt váltakozó színű, azaz az első sorban van, például írva piros betűkkel, és a második - .. Kék, piros ismét harmadik, negyedik ismét kék. Korábban volt, hogy új osztályokat. Elrendezése a múlt adunk minden egyes elemét egy osztály listában, majd megváltoztatta a megjelenését a stíluslap. Nem volt túl kényelmes és környezetszennyező elrendezést.
Most minden könnyebb. Használata CSS pszeudo-osztály: n-ed a típus. Ez ad lehetőséget, hogy a kívánt vizuális hatás megváltoztatása nélkül semmit a jelölést. Az elv egyszerű: belépsz egy választó, és zárójelben a név után levelet formula vagy egy kulcsszó, amely megtalálja a szükséges elemeket. Például ,: n-edik-a-típusú (még) lesz az összes, még elemek, és a: n-edik-A-típusú (páratlan) - a páratlan. Vannak nagyszámú képletek segítségével pontos ellenőrzésére. A zárójelek lehetséges számát - ebben az esetben stílust kell alkalmazni az elemet, amelynek index értéke ez a szám.
: N.-gyermek
Ez a CSS pszeudo-osztály a működési elve hasonló az előzőhöz, de ellentétben működik kizárólag a gyerekekkel a kiválasztott elem. Például, ha azt szeretnénk, hogy használni, hogy személyre szabni a a szülő
A pontos irányítást a képlet használható. Ezek nagyon nehéz egy kezdő, de érdemes egy kicsit mélyebbre a szintaxis, hogy minden könnyebbé válik. A képletek a következők: an + b, ahol a - olyan tényező, és b - eltolás. Például, ha a zárójelben n, a pszeudo-kiválasztja gyerek elemeinek (mert nincs megadva további feltételek formájában a és b). Ha megadja a n + 2, az összes elemet, kivéve az első (eltolás miatt egyenlő kettő) kerül kiválasztásra. A legjobb az egészben, ezúttal tanulni a gyakorlatban. Kísérletezni a gyermek elemek és a különböző képleteket.
: Last gyermek
Minden egyszerű. CSS gyermek pszeudo-osztályokat használják kiválaszt egy tételt. Ez kiválasztja az utolsó gyermek a szülő elem. Használják elég gyakran, például, hogy jelölje ki az utolsó sort a táblázat, vagy távolítsa el bemélyedés az utolsó blokk, hogy elkerülje annak átadása a következő sorra.
: N.-last-gyermek
A működési elve hasonló a korábban említett n-ed gyerek, de működik az ellenkező irányba, azaz a. E. Ha az elemek felfelé mozog. Ez akkor hasznos, ha meg kell találni az elmúlt néhány példány.
Azt gondolhatnánk, hogy ezek a pszeudo-osztályok és pszeudo-elemek CSS haszontalan, mivel akkor lehet kapni dolgokat jól ismert osztályok. Ez nem így van. : N-ed gyermek ,: nth- last-gyermek és analógjaik nagyon kényelmes, ha dolgozik a nagy projektek - például olyan esetekben, amikor a blokk hatalmas gyermekek száma. Kézzel rendezni osztályok hosszú és kemény.
Pszeudo-állami ellenőrzés
Mi van, ha meg kell változtatni a megjelenését egy elem egy adott állapotban? Ez esetben olyan CSS pszeudo-kattintással, rámutatva és egyéb jogszabályok. Nézzük őket részletesen.
: link
Ez ál CSS referenciákkal, nem az összes, hanem csak azokat, amelyek még nem látogatták meg. Ebben megadhatja stílusok elemeit Ra, amelyekre a felhasználó még nem telt el.
: látogatott
Analóg az előző kiviteli alak, amely csak a szabályozza a már meglátogatott hivatkozások. Ötvözi a két ál-osztályok, akkor személyre szabni a tag pontosan, ahogy kell. Megjegyzendő azonban, hogy az állapotokat számított bizonyos böngészőkben, és lemerült a kezelés után a történelem.
A pszeudo-osztály: cél CSS
Az egyik legérdekesebb pszeudo-osztályok, amelyek használat esetén bizonyos mértékig helyettesíti a JavaScript futtatást igényel. Ez lehetővé teszi a szabályozás, hogy az azonosító sorában szerepel az oldal címét. Igen, az első alkalommal nehéz megérteni. Próbálja elemezni a példát.
Mondjuk van az oldalon 3 blokk div bizonyos id: id1, Egyid2, ID3. Mi is három linkeket a megfelelő értékeket href: # id1, # Egyid2, # ID3. Ha rákattint az első link a sorban az oldal címét, miután a link a megfelelő id lesz maga az oldal.
A CSS minden blokk div meghatározott tulajdonság display: none, vagyis azokat nem alapértelmezés szerint megjelennek. Az általunk használt cél: div és adja meg a tulajdon display: block. Most, ha rákattint a linkre bizonyos href, blokkolja a megfelelő id lesz rendelve display: block, és ezért azokat kezd megjelenni az oldalon! Ha rákattint a linkre, hogy href = http: // oldal / cikk / 319683 /% E2% 80% 9D # id1% E2% 80% 9D blokkolja a id1, és így tovább ..
Még mindig nem értem semmit? Próbálja kísérletezni. Hozzon létre egy oldal elrendezését és stílusok a fent leírt. Néhány perccel később, hogy van egy nagy alakja mindent.
Pseudo, amelyet alkalmazni lehet bármely elemét
A legtöbb fent leírt álugrópontok a feladat elvégzéséhez szükséges. Azonban nem minden elemet kell . Több kiviteli lehet alkalmazni, hogy bármely részét a teljes oldal.
- : Aktív használják stílus elemeket, amelyek a felhasználó rákattint a bal egérgombot;
- : Hover - CSS elemeket, amelyekhez a felhasználó fölé;
- : Fókusz - azok az oldal bizonyos részeit, amelyek most a középpontban. Ez a pszeudo-osztály gyakran használják dolgozni formában. Például, ha azt szeretnénk, hogy kiválassza a User prompt, amikor a látogató állítja a kurzort, és tárcsázni kezdi karaktereket.
Ne feledje, hogy: aktív csak időpontjában érvényes préselés. Közvetlenül azután, hogy a felmondás a bal egérgombot beállítása segítségével stílusok fog tűnni, és az elem jelenik meg, ha az megjelenik az alapértelmezett. A legtöbb esetben ez a pszeudo-osztály szokott dolgozni gombokkal. Beállíthatjuk, hogy a nagyszámú államok. Például az alapértelmezett gomb kék, lebeg - zöld, préselés - piros, stb ...
Természetesen csak pszeudo-osztályok teljes mértékben támogatja a modern böngészők. Például az IE6 és 7 nem lesz képes használni a fókuszt, és a hover és aktív csak a hivatkozás munka IE6. Remélhetőleg, akkor nem kell dolgozni ezeket a böngészőket, de ha még mindig kell felmerült, feltételes megjegyzéseket.
további ál
A felsorolt lehetőségek fenti lista nem áll meg itt. Csak olyan elemek nyerhetjük hála a modern CSS (: engedélyezve), vagy csak kivágott (: kikapcsolva), csak a kapcsolók jelölt négyzetet és rádió (: jelölve). Röviden írja még néhány lehetőség, hogy lehet használni egy alaposabb ellenőrzés megjelenése tartalmat.
- : Csak-gyermek - kiüríti lehet alkalmazni a stílust az elem, amely az egyetlen gyermek eleme;
- : Lang - együttműködik az elemeket, amelyek adott nyelvet a lang attribútum;
- : Root - kiválasztásához használt gyökér elem. Ennek megfelelően az ilyen egy HTML tag ;
- : Nem - egy nagyon hatékony eszköz. Ez lehetővé teszi, hogy korlátozzuk a használata bizonyos stílusok szelektor. Itt egy példa: .blue-color: Nem (span ). A választó olyan stílust alkalmazni minden eleme az osztály kék színű, ha nem .
Teljes lista pszeudo-osztályok nem nyúlt egy oldalon. A legtöbb webes tervezők a gyakorlatban csak néhány közülük, inkább kezeli a feltétel a JavaScript. Igen, ez kényelmes, de van néhány pillanat, amikor a hatékonyabb eredmény érhető el könnyebben, a megfelelő ál.
Similar articles
Trending Now