CSS selektoriai. tipų selektoriai

, kurių kiekvienas norite nustatyti konkrečią spalvą. Kaip tai padaryti? Standartiniai CSS selektoriai netinka žymeles, jie nurodyti visų blokų parametrus vienu metu. Tirpalas yra paprasta. Susieti klasės narius. Pavyzdžiui, pirmasis gavo div class = 'raudona', antrasis - class = "mėlyna", trečioji - class = "žalia". Dabar jie gali būti atrenkami naudojant CSS lenteles.

Sintaksė yra tokia: Nurodo tašką ( "."), O po to rašyti, kad klasėje vardą. Valdyti pirmąjį įrenginį, naudokite statybos .red. Antra - .blue ir pan.

Svarbu! Rekomenduojama naudoti prasmingus vertybes klasės atributas. Manoma, bloga forma naudoti transliteracija (pvz krasiviy-BLOK) arba atsitiktinius derinius raides / skaičiai (ojfh834871). Šiame kodekse, jūs privalo susipainioti, jau nekalbant apie sunkumus, su kuriais susidurs tie, kurie bus užsiima projekto po tavęs. Geriausias variantas - naudoti bet kokį metodiką, pavyzdžiui, BEM.

Privalumai - santykinai didelis lankstumas.

Trūkumai - kad keli elementai gali būti vienas ir tas pats klasė, o tai reiškia, kad jie bus redagavo vienu metu. Problema išspręsta naudojant metodiką, taip pat paveldėjimo pirminio apdorojimo procesoriai. Būkite tikri, kad gauti savo rankas mažiau, Sass ar kai kurių kitų pirminio apdorojimo procesorius, jie labai supaprastinti darbą.

ID selektorių

Apie šią versiją nuomonės programuotojams ir programuotojų yra dviprasmiškas. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Kai CSS Pamokos nereikia rekomenduojame ID naudoti, nes netikslią taikymo jie gali sukelti problemų su palikimu. Tačiau daugelis ekspertų aktyviai organizuoti juos visoje maketą. Jūs nuspręsti. # »), затем имя блока. Sintaksė yra tokia: svaras ženklą ( "#"), tada bloko vardą. #red. Pavyzdžiui, #red.

отличается от класса по нескольким параметрам. ID yra skiriasi nuo keliais būdais klasėje. ID. Pirma, puslapis negali būti dviejų vienodų ID. Jie savo unikalų vardą. Antra, toks selektorius turi aukštesnį prioritetą. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. Tai reiškia, kad jei nurodysite vieneto klasę raudoną ir nurodyti CSS lentelių raudona fono spalvą, ir tada priskirti jai tą patį ID mėlyna ir nurodykite spalvą mėlyna, įrenginys įsijungs mėlyna.

Privalumai - galite kontroliuoti konkretų elementą, ignoruojant stilių žodžius ir klases.

ID и class. Trūkumai - Lengva pasiklysti daug ID ir klasės.

Svarbu! ID вам, в общем-то, не нужны. Jei naudojate BEM metodiką (arba jo analogų), asmens tapatybės jums apskritai nereikia. Šis metodas apima išdėstymo unikalių klasių, kad daug patogiau naudoti.

universali selektorių

{}. Sintaksė: Starlets ženklas ( "*") ir petnešos, ty {*} ...

Naudota priskirti tam tikrus atributus Kai visi puslapio elementai. Kai tai gali būti naudinga? box-sizing: border-box. Pavyzdžiui, jei norite nustatyti puslapio objekto dėžutės dydžio nustatymas: border-langelį. div *{}. Negali būti naudojami tik siekiant valdyti visus dokumento komponentus, bet ir kontroliuoti visus nurodytą bloko vaikus, pavyzdžiui, DIV * {}.

Privalumai - galite kontroliuoti daug daiktų vienu metu.

Trūkumai - nėra pakankamai lanksti alternatyva. Be to, šio selektorių naudojimas, kai kuriais atvejais sulėtinti puslapio darbą.

pagal požymius

Kad būtų galima kontroliuoti elementas su specifiniu atributas. Pavyzdžiui, jūs turite įvesti žymes skaičių su kitu atributo tipo. Vienas iš jų - tekstas, o antrasis - slaptažodis, trečioji - skaičius. Žinoma, jūs galite nustatyti kiekvieną klasę arba ID, bet tai ne visada patogu. CSS selektoriai atributų, kad būtų galima nustatyti vertes tam tikrų žymių su maksimaliu tikslumu. Pavyzdžiui, kaip šis:

įvesties [Type = "tekstas '] {}

Tai selektorius bus pasirinkti visus atributus su įvesties teksto tipą.

Šis įrankis yra gana lanksti ir gali būti naudojamas su bet žymeles, kurioje gali būti atributai. Bet tai dar ne viskas! CSS specifikacija turi galimybę kontroliuoti elementai su dar daugiau patogumo!

Įsivaizduokite, kad jūsų puslapis turi įvestį su atributas vietaženklį = "Įveskite vardą" ir įvesties vietos rezervavimo = "Įveskite slaptažodį". Jie taip pat gali būti pasirinktas naudojant rankenėlę! Norėdami tai padaryti, naudokite šią struktūrą:

įvesties [vietos rezervavimo = "Įveskite vardą"] {} arba įvesties [vietos rezervavimo = "Įveskite slaptažodį"]

Galbūt daugiau kaip lankstus darbas su požymius. Tarkime, jūs turite žymės su panašiu atributų pavadinimą (pavyzdžiui, "Kaspijos" ir "Kaspijos") skaičių. Norėdami pasirinkti tiek, naudokite šiuos pasirinkimus:

[Pavadinimas * = "Kaspiysk"]

CSS rinksis visus pavadinimo elementus, iš kurių yra simboliai "Kaspijos", ty. E., ir "Kaspijos" ir "Kaspijos".

Taip pat galite pasirinkti žodžius, prasidedančius tam tikras charakteris atributus:

[Pavadinimas ^ = "norimas simbolis"] {}

arba nutraukti jų:

[Pavadinimas $ = "teisę simbolis"] {}.

Privalumai - maksimalus lankstumas. Galite pasirinkti bet kokias esamas puslapio elementus be Messing su klasių.

Trūkumai - naudojami gana retai, tik konkrečiais atvejais. Daugelis interneto dizaineriai nori metodiką, nes taškas klasė yra lengviau, nei susitarti daug skliaustus, ir ženklus "lygūs". Be to, šie selektoriai neveikia Internet Explorer versijas 7 ir toliau. Tačiau, kas yra dabar reikia seną Internet Explorer?

Pseudo-klasės selektoriai

Žymi pseudo būsenos elementas. Pavyzdžiui ,: hover - kas atsitinka su puslapio dalis, kai jūs Pakimba ,: lankėsi - lankomos nuorodą. Ji taip pat apima elementus, tokius kaip: pirmosios vaiko ir: Paskutinis vaikui.

Šis selektorių tipas yra aktyviai naudojamas šiuolaikinėje išdėstymą, nes dėka juo jūs galite padaryti puslapio "gyvai" be JavaScript naudojimas. Pavyzdžiui, jūs norite įsitikinti, kad kai užveskite pelės žymeklį ant mygtuko su BTN jo spalva pasikeitė klasėje. Norėdami tai padaryti, mes naudojame šių struktūrą:

.btn: hover {

background-color: red;

}

Grožis gali būti nurodyta pagrindinių savybių mygtuką, perėjimas turto, pavyzdžiui, 0.5s - šiuo atveju, mygtukas nebus skaistalai karto, o per pusę sekundės.

Dorybės - yra plačiai naudojamas "atgimimo" puslapių. Paprasta naudoti.

Trūkumai - jie nėra. Tai tikrai patogus įrankis. Tačiau nepatyrusiems interneto dizaineriai gali pasiklysti į pseudo-klasės gausa. Problema išspręsta studijų ir praktikos.

pseudo-selektoriai

"Pseudo" - tai puslapio, kad yra ne HTML dalių, tačiau jie vis dar gali būti valdoma. Jūs nesupratau? Tai daug lengviau nei atrodo. Pavyzdžiui, norite, kad pirmoji raidė į eilutę didelis ir raudonas, paliekant kitų mažų ir juodą tekstą. Žinoma, galima daryti išvadą, kad laišką į span su tam tikra klase, bet tai ilgas ir nuobodus. Jis yra daug lengviau pasirinkti visą pastraipą ir naudoti pseudo :: pirmąjį raidžių. Ji suteikia galimybę kontroliuoti pirmąją raidę išvaizdą.

Yra gana daug pseudo-elementais. Sąrašas juos viename straipsnyje yra mažai tikėtina, kad pavyks. Jūs galite rasti svarbią informaciją savo mėgstama paieškos sistemą.

Privalumai - suteikti galimybę lanksčiai pritaikyti puslapio išvaizdą.

Trūkumai - Nauja į jų yra dažnai painiojama. Daugelis atrankas šios rūšies darbą tik tam tikrose naršyklėse.

apibendrinti

Parinkimo - galingas įrankis, skirtas dokumentas srauto kontrole. Jo dėka, galite pasirinkti kiekvieną komponentą puslapyje (yra net tik iš dalies). Būtinai sužinokite visas galimybes, ar net užsirašyti. Tai ypač svarbu, jei jums sukurti sudėtingas puslapius su modernaus dizaino ir daug interaktyvių elementų.