Kompjuters, Programmazzjoni
CSS, psewdo-klassi, psewdo-element: imbagħad jerġgħu, tfal, mira
Jikkombinaw HTML u CSS, tista 'tmexxi assolutament l-elementi kollha ta' paġna web. Bi stili, tista 'faċilment tbiddel id-dehra ta' kwalunkwe blokka jew linja. Ħafna drabi, il-kodifikatur għandu jwettaq kompitu iktar kumpless - biex ibiddel id-dehra ta 'mhux l-element innifsu, iżda l-parti individwali tiegħu jew ċertu stat. F'dan il-każ, is-psewdo-klassijiet tas-CSS jiġu għas-salvataġġ.
Pseudo-klassijiet jaħdmu fuq l-istess prinċipju bħal klassijiet regolari fil-markup, iżda mhumiex fiżikament preżenti fuq il-paġna. Bl-għajnuna tagħhom, tista 'tagħżel oġġetti bbażati fuq l-informazzjoni li mhix fid-dokument, li ma tistax tiġi magħżula bis-selettur tas-soltu. Hawnhekk hawn eżempju sempliċi: għandek buttuna ħamra, u trid li ddawwar il-blu meta timsaħha. Teoretikament jista 'jiġi implimentat f'JavaScript, iżda għaliex din il-kumplessità? Aktar konvenjenti ħafna biex jintużaw : imbagħad il-CSS. Bl-għajnuna tagħha, tista 'tagħti lill-unità kwalunkwe parametru li jaħdem biss meta timxi l-mouse cursor.
Il-lista ta 'psewdo-klassi tas-CSS hija aġġornata regolarment. Forsi waqt li qed taqra dan il-materjal, se jidhru bosta oħrajn ġodda. L-ewwel, ħares lejn dawk li dehru fl-ispeċifikazzjoni tas-CSS3.
: Nru tat-tip
Ejja ngħidu li għandek lista li fiha trid tuża l-alternazzjoni tal-kuluri, jiġifieri l-ewwel linja se tkun, per eżempju, miktuba bl-aħmar, u t-tieni linja tkun blu, it-tielet aħmar għal darb'oħra, ir-raba 'darb'oħra blu. Preċedentement, kellek toħloq klassijiet ġodda għal dan. L-imgħoddi tal-passat żiedu kull element tal-lista mal-klassi, u mbagħad bidlu d-dehra tagħhom fil-folja tal-istil. Ma kienx konvenjenti ħafna u mniġġsa t-tqassim.
Issa kollox huwa eħfef. Uża s-sekwenza tas-CSS tal-klassi: nth-of-type. Dan jagħti l-opportunità li jikseb l-effett viżwali meħtieġ mingħajr ma jinbidel xejn fil-markup. Il-prinċipju ta 'operazzjoni huwa sempliċi: għandek tispeċifika selettur, u bejn il-parentesi wara l-isem tagħha, ikteb formula jew keyword li ssib l-elementi meħtieġa. Pereżempju: nth-of-type (anke) issib l-elementi kollha parzjali, u: nth-of-type (fard) - fard. Hemm numru kbir ta 'formuli li jintużaw għall-aktar kontroll preċiż. Fil-parentesi, tista 'tispeċifika numru - f'liema każ l-istili jiġu applikati għall-element li l-indiċi tiegħu huwa ugwali għal dan in-numru.
: Nth-child
Din is-psewdo-klassi tas-CSS hija simili għal dik ta 'qabel, iżda b'differenza taħdem esklussivament mat-tfal ta' l-element magħżul. Per eżempju, jekk trid tużaha biex tippersonalizza l-apparenza tat-tikketti hija l-omm ta '
Għal kontroll preċiż, il-formuli jistgħu jintużaw. Huma pjuttost diffiċli għal Bidu, iżda huwa tajjeb li tħaffer ftit fis-sintassi, kif l-affarijiet jiksbu aktar sempliċi. Il-formuli jħarsu bħal dan: a + b, fejn a huwa multiplikatur, ub hija kkumpensata. Per eżempju, jekk tispeċifika n fi parentesi, is-psewdo-klassi se tagħżel it-tfal kollha (għaliex l-ebda kundizzjoni addizzjonali mhija speċifikata fil-formola aub). Jekk tispeċifika n + 2, l-elementi kollha se jintgħażlu, ħlief l-ewwel wieħed (minħabba li l-kumpens huwa tnejn). L-aħjar huwa li dan il-mument jiġi studjat fil-prattika. Esperiment mal-komponenti tat-tfal u l-formuli differenti.
: L-aħħar tarbija
Kollox huwa sempliċi. Is-psewdo-klassijiet tat-tfal tas-CSS jintużaw biex jintgħażel element partikolari wieħed. Dan jagħżel l-aħħar tarbija tal-ġenitur. Jintuża ħafna drabi, per eżempju, biex tagħżel l-aħħar ringiela tat-tabella jew biex tneħħi l-indentazzjoni mill-aħħar blokk biex tevita t-trasferiment tagħha għal-linja li jmiss.
: L-aħħar tarbija
Skond il-prinċipju ta 'l-azzjoni huwa simili għal dak imsemmi qabel, iżda jaġixxi fid-direzzjoni opposta, jiġifieri meta jintuża, l-elementi se jimxu minn isfel għal fuq. Dan huwa utli jekk trid issib l-aħħar ftit oġġetti.
Inti tista 'taħseb li dawn is-psewdo-klassijiet u l-psewdo-elementi CSS huma inutli, peress li tista' wkoll tikseb l-għan billi tuża klassijiet normali. Mhuwiex bħal dak. : Nth-child ,: nth-last-child u l-Analogi tagħhom huma utli ħafna meta jaħdmu fuq proġetti kbar - pereżempju, f'każijiet fejn il-blokk għandu numru kbir ta 'tfal. It-twaqqif manwali tal-klassijiet huwa twil u diffiċli.
Pseudo-klassijiet ta 'amministrazzjoni statali
X'jiġri jekk għandek bżonn tibdel id-dehra ta 'element f'ċertu stat? F'dan il-każ, klassijiet ta 'pressjoni, gwida u azzjonijiet oħra tas-CSS huma pprovduti. Ejjew nikkunsidrawhom f'aktar dettall.
: Rabta
Din hija pseudo-klassi ta 'links tas-CSS, mhux biss kwalunkwe, iżda biss dawk li għadhom ma ġewx viżitati. Fiha, tista 'tispeċifika stili għal dawk l-elementi li l-utent għadu ma qasmux.
: Żjarat
Analogu tal-verżjoni preċedenti, li tamministra biss il-links li diġà żaru. Billi tgħaqqad dawn iż-żewġ psewdo-klassijiet, tista 'tippersonalizza l-apparenza tat-tags kif għandek bżonnhom. Madankollu, innota li l-istati huma kkalkulati għal browsers speċifiċi u ssettjati wara l-ikklerjar tal-istorja.
Pseudo-klassi: CSS fil-mira
Waħda mis-psewdo-klassijiet l-aktar interessanti, li b'użu xieraq sa ċertu punt tissostitwixxi l-użu ta 'JavaScript. Jippermetti li timmaniġġja element li l-identifikatur tiegħu huwa speċifikat fil-bar ta 'l-indirizz tal-paġna. Iva, l-ewwel darba huwa diffiċli li tifhem. Ejja nippruvaw nagħmlu eżempju.
Ejja ngħidu għandna 3 kaxxi div fuq il-paġna b'ċertu id: id1, id2, id3. Għandna wkoll tliet links mal-valuri href korrispondenti: # id1, # id2, # id3. Meta tikklikkja fuq l-ewwel link fil-bar ta 'l-indirizz tal-paġna wara li l-link għall-paġna nnifisha tkun tidher l-id korrispondenti.
F'CSS, għall-blokki div, il-wiri: l-ebda proprjetà mhija speċifikata, jiġifieri, b'mod awtomatiku, ma jintwerewx. Uża l-mira: div u ssettja l-wiri tagħha: proprjetà tal-blokk. Issa, meta tikklikkja fuq links b'ċertu href, blokki bl-id korrispondenti jiġu assenjati wiri: blokk, li jfisser li se jibdew jidhru fuq il-paġna! Jekk tikklikkja fuq ir-rabta bl-id1, eċċ, meta tikklikkja l-link bl-id1, se tara blokk b'id1, u l-bqija.
Xejn xejn m'hu ċar? Ipprova esperiment. Oħloq paġna bil-markup u l-istili ta 'hawn fuq. Fi ftit minuti intom tkun multa f'kollox.
Pseudo-klassijiet li jistgħu jiġu applikati għal kwalunkwe element
Ħafna mill-psewdo-klassijiet deskritti hawn fuq kienu jeħtieġu referenzi għax-xogħol. Madankollu, mhux kulħadd jeħtieġ l-elementi . Għadd ta 'għażliet jistgħu jiġu applikati għal assolutament kwalunkwe parti tal-paġna.
- : Attiva hija maħsuba għal elementi ta 'grafika li fuqhom l-utent għafsu l-buttuna mawsella tax-xellug;
- : Imbattla - CSS għall-elementi li għalihom l-utent iħaddem il-cursor;
- : Focus - għal dawk il-partijiet tal-paġna li bħalissa huma fokus. Din il-psewdo klassi spiss tintuża biex taħdem bil-forom. Per eżempju, jekk trid tenfasizza l-sekwenza ta 'l-input għall-isem ta' l-utent, meta l-viżitatur ipoġġi l-cursor fiha u jibda jtajpja karattri.
Ftakar li: attiva hija attiva biss meta tagħfasha. Immedjatament wara li l-buttuna tal-maws xellug tieqaf mix-xogħol, l-istili assenjati miegħu se jisparixxu u l-element se jintwera kif ġie muri b'mod awtomatiku. Fil-biċċa l-kbira tal-każijiet, din is-psewdo-klassi tintuża biex taħdem bil-buttuni. Tista 'tissettja numru kbir ta' stati. Pereżempju, il-buttuna tkun bla kulur, meta toqgħod bil-qiegh - aħdar, meta tkun ippressata - aħmar, eċċ.
Naturalment, psewdo-klassijiet huma kompletament appoġġjati biss minn browsers moderni. Pereżempju, f'IE6 u 7, ma tistax tuża l-attenzjoni, u l-imblukkar u l-attiv fl-IE6 jaħdmu biss għal referenzi. Nisperaw li m'għandekx taħdem ma 'dawn il-browsers, u jekk għandek bżonn, imbagħad tuża kummenti kondizzjonali.
Pseudo-klassijiet addizzjonali
Il-lista elenkata hawn fuq mhix limitata għal-lista. Grazzi għal CSS moderni, tista 'tagħżel biss l-elementi inklużi (: ppermettiet) jew biss b'diżabilità (: b'diżabilità), checkboxes iċċekkjati biss u radju (: ikkontrollati). Fil-qosor, se niddeskrivu ftit għażliet oħra li tista 'tuża biex tikkontrolla aktar mill-qrib id-dehra tal-kontenut.
- : Biss-tfal - l-abbiltà li tapplika stil lil element li huwa l-uniku tarbija;
- : Lang - biex taħdem ma 'elementi li għandhom lingwa stabbilita bl-użu tal-attribut lang;
- : Għerq - jintuża biex jintgħażel l-għerq. Għaldaqstant, f'HTML, din hija t-tikketta ;
- : Mhux hija għodda qawwija ħafna. Dan jagħmilha possibbli li l-applikazzjoni tal-istili tiġi limitata għal ċerti seletturi. Hawn hu eżempju: .blue-color: mhux (span). Dan is-selettur japplika stili għall-elementi kollha bil-klassi blu-kulur, jekk ma jkunux .
Lista kompluta ta 'psewdo-klassijiet tista' tinfirex għal aktar minn paġna waħda. Il-biċċa l-kbira tat-tipi jużaw biss ftit minnhom fil-prattika, u pprefera li jimmaniġġjaw l-istati li jużaw JavaScript. Iva, huwa konvenjenti, iżda hemm numru ta 'punti fejn jistgħu jinkisbu riżultati aktar effettivi b'mod aktar faċli bl-użu tas-psewdo-klassi adattat.
Similar articles
Trending Now