Računalniki, Programiranje
CSS, pseudo, psevdo: hover, otrok, cilj
Z združevanjem HTML in CSS, lahko nadzorujete popolnoma vse elemente spletne strani. S slogi lahko enostavno spremeniti videz katere koli bloka ali liniji. Pogosto koder morali izvesti bolj kompleksno nalogo - da spremenite videz elementa sama po sebi ni, kot ločen del ali posamezno državo. V tem primeru, na pomoč psevdo CSS.
Psevdo-delujejo na istem principu kot redne oddelke v označevalni, vendar fizično niso predstavili tukaj. Lahko se izbere na podlagi elementov, ki niso vključeni v podatke o dokumentu, ki ne bodo izbrali običajno izbiro. Tukaj je preprost primer: imate rdeč gumb, in si želim, da ko hover je postala modra. Teoretično je mogoče izvajati v JavaScriptu, ampak zakaj je to tako težko? Veliko bolj priročno, da uporabite : hover CSS. Z njeno pomočjo lahko daš katero koli enoto parametre, ki se sprožijo le, ko je kazalec miške.
Seznam CSS psevdo-razredi se redno posodabljajo. Morda, ko ste prebrali ta material, nekaj novih prikaže. Za začetek, menijo tisti, ki so bili videti v specifikaciji CSS3.
: N-ti-of-tipa
Recimo, da imate seznam, ki ga želite uporabiti različnih barvah, in sicer, prva vrstica je, na primer, napisana v rdečimi črkami, in drugi - .. modra, rdeča spet tretji, četrti spet v modrem. Prej si moral ustvariti nove razrede. Postavitev preteklosti dodali vsak element na seznamu razreda, nato pa spremenil svoj videz v slogi. To ni bilo preveč udobno in onesnažujejo postavitev.
Zdaj je vse lažje. Uporaba CSS psevdo-razred: n-of-tipa. To bo priložnost, da se želeni vizualni učinek, ne da bi spremenili ničesar v označevalni. Princip je enostaven: vnesete izbirnik, in v oklepaju za imenom napisati formulo ali ključno besedo, da boste našli zahtevane elemente. Na primer ,: n-od-tipa (celo), bodo tudi elementi, in: n-of-tipa (lihe) - liho. Obstaja veliko formul se uporabljajo za natančno krmiljenje. Nosilci navesti možno število - v tem primeru stilov, ki se uporablja za element, katerega indeks je enaka tej številki.
: N-ti-otrok
Ta CSS pseudo-class na načelu delovanja je podoben prejšnjemu, vendar za razliko deluje izključno z otroki izbranem predmetu. Na primer, če želite, da ga uporabljate, da prilagodite videz je matična
Za natančno kontrolo s formulo se lahko uporabljajo. So precej težko za začetnike, vendar je vredno malo globlje v sintakso, kako vse postane lažje. Formule so: an + b, kjer - je faktor, in b - odmik. Na primer, če je v oklepaju navesti n, psevdo-izbere vse otroke elemente (ker ni navedena dodatne pogoje v obliki a in b). Če podate n + 2, vse elemente, razen prvega (ker je odmik je enaka dvema) bodo izbrani. Najboljše od vsega pa je to čas za študij v praksi. Eksperimentiranje z deli otrok in različnih formul.
: Last otrok
Vse je enostavno. CSS otrok psevdo-razredi se uporabljajo za izbiro posebno postavko. To izbere zadnjo otroka matične komponente. Se uporablja zelo pogosto, na primer, da izberete zadnjo vrstico tabele ali odstraniti zamik od zadnjega bloka, da se prepreči njegov prenos v naslednjo vrstico.
: N-ti-zadnja-otrok
Z princip delovanja je podoben prej omenjeni n-to-otrok, vendar deluje v nasprotni smeri, tj. E. Pri uporabi elementov bo premaknil navzgor. To je koristno, če boste morali najti zadnjih nekaj predmetov.
Morda misliš, da ti psevdo-razredi in psevdo-elementi CSS neuporabna, saj se lahko stvari narediti tudi z običajnimi razrede. To ni tako. : N-otrok ,: nth- zadnjem otrok in njihovi analogi so zelo priročno, ko delajo na velikih projektov - na primer, v primerih, ko ima blok veliko število otrok. Ročno poskrbi razredi dolgo in težko.
Nadzor psevdo-state
Kaj pa, če želite spremeniti videz elementa v posamezni državi? V tem primeru zagotavlja CSS psevdo-klikom, kaže in druge akte. Dovolite nam jih podrobno preučiti.
: povezava
Ta psevdo CSS reference, ne vseh, ampak samo tiste, ki še niso obiskali. V njem lahko določite sloge za elemente, Ra, za katerega je uporabnik še ni opravil.
: obiskal
Analog prejšnje izvedbe, ki nadzoruje le že obiskanih povezav. Združevanje teh dveh psevdo-razreda, ki jih lahko prilagodite videz oznak, točno tako, kot ga potrebujete. Opozoriti pa je treba, da so države izračuna za posamezne brskalnike in odvajajo po zgodovini zdravljenja.
Psevdo-razred: cilj CSS
Ena izmed najbolj zanimivih psevdo-razredi, ki bodo, če se uporabljajo do neke mere nadomešča uporabo JavaScript. To omogoča nadzor, da je identifikator vključen v naslov vrstice strani. Da, prvič, da je težko razumeti. Poskusite razčleniti primer.
Recimo, da smo na strani 3 bloki div na z nekaterimi id: ID1 ID2, ID3. Imamo tudi tri povezave do ustrezne vrednosti href: # ID1 # ID2, # ID3. Ko boste kliknili na prvo povezavo v naslovu vrstici strani po povezavi z ustrezno id bo stran sama.
CSS vseh blokov div določenih zaslon nepremičnine: ni, to pomeni, da niso privzeto prikazani. Uporabljamo cilj: div in mu zaslon nepremičnine: blok. Zdaj, ko boste kliknili na povezave z nekaterimi href, bloki z ustreznim id bodo dodeljena za prikaz: blok, zato bodo začeli pojavljati na strani! Ko kliknete na povezavo href = http: // Spletna stran / članek / 319683 /% E2% 80% 9D # ID1% E2% 80% 9D bo blok s ID1, in tako naprej ..
Še vedno ne razumem, kaj? Poskusite eksperimentirati. Ustvarite postavitev strani in stilov zgoraj opisano. Nekaj minut kasneje imate veliko sliko vse ven.
Psevdo ki se lahko uporablja za vsak sestavni
Večina zgoraj opisanih psevdo-povezav, potrebnih za delo. Vendar pa niso vsi elementi potrebujejo . Več izvedbe se lahko uporablja kateri koli del strani popolnoma.
- : Aktivna se uporablja za slog elementov, na katerih uporabnik klikne na levi gumb miške;
- : Hover - CSS za elemente, na katere je uporabnik lebdi nad;
- : Poudarek - za tiste dele strani, ki so zdaj v središču pozornosti. Ta psevdo-razred se pogosto uporablja za delo z obrazci. Na primer, če želite izbrati uporabniško ime poziv, ko obiskovalec nastavi kazalec nad njim in se začne klicanje znakov.
Ne pozabite, da: aktivna veljavna le v času stiskanja. Takoj po prenehanju levi gumb miške nastavite s pomočjo slogov bo izginila in element se prikaže, kot je prikazano privzeto. V večini primerov je to psevdo-razred se uporablja za delo z gumbi. Jih je mogoče nastaviti v velikem številu držav. Na primer, gumb privzeto je modra, hover - zelena, stiskanje - rdeča, itd ...
Seveda, so samo psevdo-razredi v celoti podprta s sodobnimi brskalniki. Na primer, v IE6 in 7 ne bodo mogli uporabljati fokus, in hover in aktivna samo za referenčno delo v IE6. Upamo, da vam ne bo treba delati s temi brskalniki, če pa še vedno potrebujejo nastala, uporabo pogojnih komentarje.
dodatna psevdo
Možnosti Zgornji seznam naštete ne ustavi tam. Samo vključeni elementi mogoče izterjati zaradi sodobnega CSS (: omogočeno) ali samo izrežemo (: invalidi), le stikala označeno polje in radio (: preveriti). Na kratko opišite nekaj več možnosti, ki jih lahko uporabite za bolj temeljit nadzor tudi pojav vsebine.
- : Samo otrok - vročine mogoče uporabiti slog na elementu, ki je edini otrok element;
- : Lang - za delo z elementi, ki so podale jezik uporablja atribut lang;
- : Koren - Uporablja se za izbiro korenskega elementa. Zato taka oznaka HTML je ;
- : Ni - zelo močno orodje. To vam omogoča, da omejijo uporabo nekaterih stilov selektorjev. Tukaj je primer: .blue-barva: ne (span ). Selektor uporabiti slog vseh elementov z razreda modro barvo, če niso .
Celoten seznam psevdo-razredov ni mogoče raztegne na eni strani. Večina spletnih oblikovalcev uporabo v praksi, le nekatere od njih, raje za upravljanje stanja s JavaScript. Ja, to je priročno, vendar obstajajo trenutki, kjer bodo bolj učinkovite rezultate, dosežene lažje, z uporabo ustreznega psevdo.
Similar articles
Trending Now