Kompyuta, Programu
CSS, darasa la pseudo, kipengele cha pseudo: hover, mtoto, lengo
Kuchanganya HTML na CSS, unaweza kusimamia vipengele vyote vya ukurasa wa wavuti. Kwa mitindo, unabadilika urahisi uonekano wa kuzuia au mstari wowote. Mara nyingi, coder inahitaji kufanya kazi ngumu zaidi - kubadili muonekano wa si kipengele yenyewe, lakini sehemu yake binafsi au hali fulani. Katika kesi hii, CSS pseudo-madarasa ya kuwaokoa.
Masomo ya pseudo hufanya kazi kwa kanuni sawa kama madarasa ya kawaida katika markup, lakini sio kimwili kwenye ukurasa. Kwa msaada wao, unaweza kuchagua vitu kulingana na habari ambayo haipo katika hati, ambayo haiwezi kuchaguliwa na mchezaji wa kawaida. Hapa ni mfano rahisi: una kifungo nyekundu, na unataka kugeuka rangi ya bluu unapoiweka. Kinadharia inaweza kutekelezwa kwa JavaScript, lakini kwa nini utata huo ni? Ni rahisi zaidi kutumia : hover CSS. Kwa msaada wake, unaweza kutoa kitengo chochote chochote ambacho kitatumika tu wakati unapoingiza mshale wa mouse.
Orodha ya CSS pseudo-darasa ni updated mara kwa mara. Pengine unaposoma nyenzo hizi, kadhaa mpya zitaonekana. Kwanza, hebu tuangalie yale yaliyotokea katika vipimo vya CSS3.
: Nth-of-aina
Tuseme una orodha ambayo unataka kutumia njia ya rangi, yaani, mstari wa kwanza utaandikwa kwa rangi nyekundu, na mstari wa pili utakuwa wa rangi ya bluu, nyekundu ya tatu tena, ya nne ya bluu tena. Hapo awali, ulibidi kuunda madarasa mapya kwa hili. Wafanya wa zamani waliongeza kila kipengele cha orodha kwenye darasa, kisha wakabadilisha muonekano wao katika karatasi ya mtindo. Haikuwa rahisi sana na unajisi mpangilio.
Sasa kila kitu ni rahisi. Tumia darasa la pseudo la CSS: nth-of-aina. Hii itatoa fursa ya kupata athari muhimu ya kuona bila kubadilisha kitu chochote katika markup. Kanuni ya operesheni ni rahisi: wewe hutaja mchezaji, na katika mabano baada ya jina lake, andika formula au neno muhimu ambayo itapata vipengele vinavyotakiwa. Kwa mfano: nth-of-aina (hata) hupata vipengele vyote, na: nth-of-aina (isiyo ya kawaida) - isiyo ya kawaida. Kuna idadi kubwa ya fomu ambayo hutumiwa kwa udhibiti sahihi zaidi. Katika mabano, unaweza kutaja namba - kwa hali ambayo mitindo itatumika kwa kipengele ambacho index yake ni sawa na nambari hii.
: Nth-mtoto
Kiwango hiki cha CSS cha pseudo kinafanana na kilichopita, lakini kinyume na kinachofanya kazi pekee na watoto wa kipengele cha kuchaguliwa. Kwa mfano, ikiwa unataka kutumia ili Customize kuonekana kwa vitambulisho ni mzazi wa
Kwa udhibiti sahihi, formula inaweza kutumika. Wao ni vigumu sana kwa mwanzoni, lakini ni thamani ya kuchimba kidogo kwenye syntax, jinsi mambo yanavyo rahisi. Fomu inaonekana kama hii: b +, ambako ni mchanganyiko, na b inakabiliwa. Kwa mfano, ikiwa utafafanua n katika mabano, darasa la pseudo litachagua watoto wote (kwa sababu hakuna hali ya ziada iliyoelezwa kwa fomu a na b). Ikiwa utafafanua n + 2, vipengele vyote vitachaguliwa, ila ya kwanza (kwa sababu ya kukabiliana ni mbili). Ni vizuri kujifunza wakati huu katika mazoezi. Jaribu na vipengele vya watoto na fomu tofauti.
: Mtoto wa mwisho
Kila kitu ni rahisi. CSS mtoto-madarasa ya pseudo hutumiwa kuchagua kipengele kimoja. Hii huchagua mtoto wa mwisho wa mzazi. Inatumiwa mara nyingi kabisa, kwa mfano, kuchagua mstari wa mwisho wa meza au kuondoa indentation kutoka kuzuia mwisho ili kuepuka uhamisho wake kwa mstari wa pili.
: Nth-mwisho-mtoto
Kwa kanuni ya utekelezaji ni sawa na mtoto wa nth aliyejulikana hapo awali, lakini hufanya kwa mwelekeo tofauti, yaani wakati unatumiwa, vipengele vitaondoka chini hadi juu. Hii ni muhimu ikiwa unataka kupata vitu vichache vya mwisho.
Unaweza kufikiri kwamba hizi madarasa ya pseudo na CSS pseudo-vipengele ni bure, kwani unaweza kufikia lengo kwa kutumia madarasa ya kawaida. Sio kama hiyo. : Nth-child,: nth-last-child na analogs yao ni muhimu sana wakati wa kufanya kazi kwenye miradi kubwa - kwa mfano, wakati ambapo block ina idadi kubwa ya watoto. Masomo ya kupanga kwa manufaa ni ya muda mrefu na ni magumu.
Masomo ya pseudo ya usimamizi wa serikali
Nini ikiwa unahitaji kubadilisha muonekano wa kipengele katika hali fulani? Katika kesi hii, CSS pseudo-madarasa ya uendelezaji, uongozi na vitendo vingine hutolewa. Hebu tuwazingatie kwa undani zaidi.
: Weka
Hii ni kikundi cha pseudo cha viungo vya CSS, sio tu, lakini ni wale ambao hawajawahi kutembelea bado. Katika hiyo, unaweza kutaja mitindo kwa vipengele ambavyo mtumiaji hajavuka.
: Alirudi
Analog ya toleo la awali, ambalo linasaidia tu viungo vilivyotembelewa. Kwa kuchanganya madarasa haya mawili ya pseudo, unaweza kuboresha kuonekana kwa tags kama unavyohitaji. Hata hivyo, angalia kwamba majimbo haya mahesabu kwa browsers maalum na kuweka upya baada ya kufuta historia.
Daraja la pseudo: CSS lengo
Moja ya madarasa ya kuvutia zaidi ya pseudo, ambayo kwa matumizi sahihi kwa kiasi fulani hutumia matumizi ya JavaScript. Inakuwezesha kusimamia kipengele ambacho kitambulisho chake kinasemwa kwenye bar ya anwani ya ukurasa. Ndiyo, mara ya kwanza ni vigumu kuelewa. Hebu jaribu kufanya mfano.
Hebu tuseme kuwa na masanduku ya div 3 kwenye ukurasa na id fulani: id1, id2, id3. Pia tuna viungo vitatu na maadili yanayofanana ya href: # id1, # id2, # id3. Unapobofya kiungo cha kwanza kwenye bar ya anwani ya ukurasa baada ya kiungo kwa ukurasa yenyewe itaonekana id inayohusiana.
Katika CSS, kwa vitengo vyote vya div, kuonyesha: hakuna mali iliyowekwa, yaani, kwa chaguo-msingi, haionyeshe. Tumia lengo: div na kuweka maonyesho yake: kuzuia mali. Sasa, unapobofya viungo na href fulani, vitalu na id inayoambatana vitaonyeshwa: kuzuia, ambayo ina maana kwamba wataanza kuonekana kwenye ukurasa! Ikiwa unabonyeza kiungo na id1, nk, unapobofya kiungo na id1, utaona block na id1, na kadhalika.
Bado hakuna chochote kilicho wazi? Jaribu kujaribu. Unda ukurasa na mitindo na marudio hapo juu. Katika dakika chache utakuwa mzuri kila kitu.
Masomo ya pseudo ambayo yanaweza kutumika kwa kipengele chochote
Wengi wa madarasa ya pseudo yaliyoelezwa juu ya marejeo yanayotakiwa ya kazi. Hata hivyo, si kila mtu anayehitaji vipengele . Chaguzi kadhaa zinaweza kutumika kwa sehemu yoyote ya ukurasa.
- : Kazi imetengenezwa kwa vipengele vya kupiga maridadi ambayo mtumiaji alibofya kifungo cha kushoto cha mouse;
- : Hover - CSS kwa vipengele ambako mtumiaji hupiga mshale;
- : Mtazamo - kwa sehemu hizo za ukurasa ambazo zinazingatia sasa. Kazi hii ya pseudo mara nyingi hutumiwa kufanya kazi na fomu. Kwa mfano, ikiwa unataka kuonyesha kamba ya pembejeo kwa jina la mtumiaji, wakati mgeni anaweka cursor ndani yake na kuanza kuandika safu.
Kumbuka kuwa: kazi inafanya kazi tu wakati unavyoshikilia. Mara baada ya kifungo cha kushoto cha panya kinachaacha kufanya kazi, mitindo iliyopewa nayo yatatoweka na kipengele kitaonyeshwa kama kilichoonyeshwa kwa chaguo-msingi. Mara nyingi, darasa hili la pseudo hutumiwa kufanya kazi na vifungo. Unaweza kuwaweka idadi kubwa ya majimbo. Kwa mfano, kwa chaguo-msingi kifungo kitakuwa cha rangi ya bluu, wakati unapopiga - kijani, wakati unafadhaika - nyekundu, nk.
Bila shaka, madarasa ya pseudo yanaungwa mkono kikamilifu na vivinjari vya kisasa. Kwa mfano, katika IE6 na 7, huwezi kutumia mtazamo, na kuruka na kufanya kazi katika IE6 kazi tu kwa marejeo. Hebu tumaini kwamba huna haja ya kufanya kazi na browsers vile, na kama unahitaji, kisha kutumia maoni masharti.
Vipimo vya ziada vya pseudo
Orodha iliyoorodheshwa hapo juu haipatikani kwenye orodha. Shukrani kwa CSS ya kisasa, unaweza kuchagua mambo tu yaliyojumuishwa (: imewezeshwa) au tu walemavu (: walemavu), tu checkboxes checked na radio (: checked). Kwa kifupi, tutaelezea chaguo chache zaidi ambazo unaweza kutumia ili kudhibiti udhibiti wa maudhui.
- : Mtoto tu - uwezo wa kutumia mtindo kwa kipengele ambacho ni mtoto peke yake;
- : Lang - kufanya kazi na mambo ambayo yana lugha iliyowekwa kwa kutumia sifa ya lang;
- : Mizizi - ilitumia kipengele cha mizizi. Kwa hiyo, katika HTML, hii ni tag;
- : Si chombo chenye nguvu sana. Inafanya iwezekanavyo kuzuia matumizi ya mitindo kwa wateuzi fulani. Hapa ni mfano: .bluu-rangi: si (span). Mchaguzi huyu anatumia mitindo kwa vipengele vyote na darasa la bluu-rangi, ikiwa si .
Orodha kamili ya madarasa ya pseudo yanaweza kunyoosha kwa zaidi ya ukurasa mmoja. Aina nyingi za matumizi hutumia tu baadhi yao katika mazoezi, ikipendelea kusimamia majimbo kwa kutumia JavaScript. Ndiyo, ni rahisi, lakini kuna idadi kadhaa ya matokeo ambapo matokeo bora zaidi yanaweza kupatikana kwa urahisi zaidi kwa kutumia darasa la pseudo sahihi.
Similar articles
Trending Now