, kurių kiekvienai reikia suteikti tam tikrą spalvą. Kaip tai padaryti? Standartinis CSSžymekliai netinka; jie nurodo parametrus visiems blokams iš karto. Sprendimas paprastas. Priskirkite elementams klasę. Pavyzdžiui, pirmasis div gavo class='red', antrasis - class='blue', trečiasis - class='green'. Dabar juos galima pasirinkti naudojant CSS lenteles.

Sintaksė tokia: nurodome tašką (.), po kurio rašome klasės pavadinimą. Norėdami valdyti pirmąjį bloką, naudojame .red konstrukciją. Antrasis yra .mėlynas ir pan.

Svarbu! Klasės atributui rekomenduojama naudoti aiškias reikšmes. Bloga forma laikoma naudoti transliteraciją (pavyzdžiui, krasiviy-blok) arba atsitiktinius raidžių / skaičių derinius (ojfh834871). Tokiame kode tikrai susipainiosite, jau nekalbant apie sunkumus, su kuriais teks susidurti tiems, kurie dirbs prie projekto po jūsų. Geriausias pasirinkimas yra naudoti tam tikrą metodiką, pvz., BEM.

Privalumai: gana didelis lankstumas.

Trūkumai – keli elementai gali turėti tą pačią klasę, vadinasi, jie bus redaguojami vienu metu. Problema išspręsta naudojant metodiką, taip pat paveldint pirminius procesorius. Būtinai įvaldykite mažiau, sass ar kokį kitą pirminį procesorių, jie labai supaprastins jūsų darbą.

Rinkiklis pagal ID

Maketuotojų ir programuotojų nuomonės dėl šios parinkties yra dviprasmiškos. Kai kurie vadovėliaiCSSvisai nerekomenduojama naudotiID,nes neatsargiai naudojami jie gali sukelti paveldėjimo problemų. Tačiau daugelis ekspertų juos aktyviai deda visame žymėjime. Tu nuspręsk. Sintaksė yra: maišos simbolis ("# “), tada bloko pavadinimą. Pavyzdžiui,#raudona.

IDskiriasi nuo klasės keliais atžvilgiais. Pirma, viename puslapyje negali būti dviejų vienodų.ID.Jiems priskiriami unikalūs pavadinimai. Antra, toks parinkiklis turi didesnį prioritetą. Tai reiškia, kad jei blokui suteikiate klasęraudonair nurodykite lentelėseCSSraudoną, tada priskirkite jį jamid mėlynair nurodykite mėlyną spalvą, blokas taps mėlynas.

Privalumai – galite valdyti konkretų elementą nekreipdami dėmesio į žymų ir klasių stilius.

Trūkumai – lengva susipainioti dideliame kiekyjeIDIrklasė.

Svarbu! Jei naudojate BEM metodiką (ar jos analogus),IDApskritai jums to nereikia. Šis išdėstymo būdas apima unikalių klasių naudojimą, o tai yra daug patogiau.

Universalus selektorius

Sintaksė: žvaigždutė (*) ir riestiniai skliaustai, t. y. *{}.

Naudojamas tam tikriems atributams priskirti visiems puslapio elementams vienu metu. Kada tai gali praversti? Pavyzdžiui, jei norite nustatyti puslapio ypatybędėžutės dydis: bortelis.Gali būti naudojamas ne tik valdyti visus dokumento komponentus, bet ir valdyti visus konkretaus bloko antrinius elementus, pvz.div *().

Privalumai – vienu metu galite valdyti daug elementų.

Trūkumai – nepakankamai lankstus. Be to, naudojant šį parinkiklį kai kuriais atvejais puslapis gali sulėtinti.

Pagal atributus

Leidžia valdyti elementą su konkrečiu atributu. Pavyzdžiui, turite keletą įvesties žymų su skirtingo tipo atributu. Vienas iš jų yra tekstas, antrasis - slaptažodis, trečias - skaičius. Žinoma, kiekvienam galite priskirti klases ar ID, tačiau tai ne visada patogu. CSS atributų parinkikliai leidžia maksimaliai tiksliai nurodyti konkrečių žymų reikšmes. Pavyzdžiui, taip:

įvestis ()

Šis atributų parinkiklis pasirinks visas įvestis su tekstu.

Įrankis yra gana lankstus, jį galima naudoti su bet kokiomis žymomis, kurios gali turėti atributų. Bet tai dar ne viskas! CSS specifikacija leidžia manipuliuoti elementais dar patogiau!

Įsivaizduokime, kad jūsų puslapyje yra įvestis su atributo rezervuota vieta = „Įveskite pavadinimą“ ir įvesties rezervuota vieta = „Įveskite slaptažodį“. Juos taip pat galima pasirinkti naudojant selektorių! Tam naudojama ši konstrukcija:

input() arba įvestis

Galimas lankstesnis darbas su atributika. Tarkime, kad turite kelias žymas su panašiais pavadinimo atributais (tarkime, „Kaspijos“ ir „Kaspijos“). Norėdami pasirinkti abu, naudokite šiuos parinkiklius:

CSS pasirinks visus elementus, kurių pavadinime yra simboliai „Kaspiysk“, t. y. ir „Kaspiyskiy“, ir „Kaspiyskaya“.

Taip pat galite pasirinkti žymas, kurių atributai prasideda tam tikrais simboliais:

arba baigti jais:

{}.

Privalumai – maksimalus lankstumas. Galite pasirinkti bet kokius esamus puslapio elementus nesikreipdami į klases.

Trūkumai – naudojamas palyginti retai, tik konkrečiais atvejais. Daugelis maketuotojų teikia pirmenybę metodikoms, nes nurodyti klasę gali būti lengviau nei išdėstyti daugybę lygybės ženklų. Be to, šie parinkikliai neveikia internete Explorer versijos 7 ir žemiau. Tačiau kam dabar reikia senosios „Internet Explorer“?

Pseudoklasių selektoriai

Pseudoklasė žymi elemento būseną. Pavyzdžiui, :hover yra tai, kas nutinka puslapio daliai, kai užvedamas žymeklis, :visited yra aplankyta nuoroda. Tai taip pat apima tokius elementus kaip:pirmas vaikas ir:paskutinysis vaikas.

Šio tipo parinkiklis aktyviai naudojamas šiuolaikiniame makete, nes jo dėka galite padaryti puslapį „gyvą“ be „JavaScript“ programos. Pavyzdžiui, norite įsitikinti, kad užvedus pelės žymeklį virš mygtuko su btn klase, jo spalva pasikeis. Norėdami tai padaryti, naudojame šią konstrukciją:

btn:hover (

Fono spalva: raudona;

Dėl grožio perėjimo ypatybę galite nurodyti pagrindinėse šio mygtuko savybėse, pavyzdžiui, per 0,5 s – tokiu atveju mygtukas raudonuos ne akimirksniu, o pusei sekundės.

Privalumai - jie aktyviai naudojami puslapiams „atgaivinti“. Paprasta naudoti.

Trūkumai – jų nėra. Tai tikrai patogus įrankis. Tačiau nepatyrę maketuotojai gali susipainioti dėl pseudoklasių gausos. Problemą išsprendžia studijos ir praktika.

Pseudo elementų parinkikliai

„Pseudoelementai“ yra tos puslapio dalys, kurių nėra HTML, tačiau jas vis tiek galima manipuliuoti. Nieko nesupranti? Viskas paprasčiau nei atrodo. Pavyzdžiui, pirmąją eilutės raidę norite padaryti didelę ir raudoną, o likusią teksto dalį palikti mažą ir juodą. Žinoma, galite įtraukti šį laišką į tam tikrą klasę, tačiau tai ilga ir nuobodu. Daug lengviau pasirinkti visą pastraipą ir naudoti pseudoelementą::first-letter. Tai leidžia valdyti pirmosios raidės išvaizdą.

Yra gana didelis skaičius pseudoelementai. Vargu ar pavyks juos išvardyti viename straipsnyje. Atitinkamos informacijos galite rasti savo mėgstamoje paieškos sistemoje.

Privalumai – leidžia lanksčiai pritaikyti išvaizda puslapių.

Trūkumai – pradedantieji dažnai dėl jų susipainioja. Daugelis šio tipo parinktuvų veikia tik tam tikrose naršyklėse.

Apibendrinti

selektorius - galingas įrankis dokumentų srauto valdymas. Jo dėka galite pasirinkti absoliučiai kiekvieną puslapio komponentą (net ir tuos, kurie egzistuoja tik sąlyginai). Būtinai sužinokite visas savo galimybes arba bent jau užsirašykite jas. Tai ypač svarbu, jei kuriate sudėtingus puslapius su šiuolaikišku dizainu ir daugybe interaktyvių elementų.

Nustatymai