CSS-parinkiklis ir jo vaidmuo formuojant html-dokumentus

Internetas

Sukurkite savo svetainę ir užpildykite ją tam tikraistinklalapio elementai, kiekvienas tikrai susidurs su tokia koncepcija kaip CSS parinkiklis. Tai padeda tiksliai nustatyti visus html failo elementus, jų dizainą ir vietą puslapyje. Norėdami tai padaryti, sukurkite CSS dokumentą, kuriame nurodomi tie ar kiti rinkmenos ir jų formatavimo parametrai: spalva, dydis, pozicija ir kt. Kiekvienas interneto dizaineris turi žinoti ir sugebėti teisingai įvesti pageidaujamus selektorius. Jie yra suskirstyti į tipus, pagrindinius iš kurių mes svarstysime žemiau.

CSS rinkmenų tipai

Priklausomai nuo to, kokiam html elementui taikomas formatavimas, CSS selektorius gali nurodyti vieną iš šių grupių:

  • žymių parinkiklis;
  • klasės selektorius;
  • id selektorius;
  • atributo parinkiklis.

css parinkiklis

Pasirinkimo žyma

Jis taip pat vadinamas "tipo selektoriumi" arba "byelementas ", tai paprastas ir dažnai. Kaip jo CSS-dokumente į HTML failą elementų, kurie aprašyti pavadinimai. Pavyzdžiui, jei mes turime nustatyti pastraipos stilių, mes nurodyti savybes ir jų vertės elemento p { fonas: x; spalva: Y; dydis :. Z} šiuo atveju visi internetiniame puslapyje punktai turės tą patį formatą (fono spalva, teksto dydis, ir tt ...).

Klasės parinkiklis

O kas, jei norite kiekvienai pastraipai atskirą stilių nustatyti kitam? Tam yra klasių parinkiklis.

Šiame dokumente CSS bus toks įrašas: p.first (color: x; font-size: y}. Taigi, mes nustatome savybes "spalva" ir "dydis" tik pirmosios klasės pastraipoje.

Tokiu atveju html-dokumente pirmiausia įveskite klasės atributą su stiliaus pavadinimu. Klasės gali būti tiek pat, kiek stilių, kuriuos norite taikyti svetainės elementams.

css atributų parinktys

Pasirinkimas pagal ID

Dažnai reikia apibrėžti stiliųdar tiksliau, pavyzdžiui, vienam puslapio elementui arba jo pavyzdžiui. Esant tokiai situacijai, ID rinkiklis ateina į pagalbą. HTML failo pavadinime priskiriame norimą elementą, jį identifikuojame tarp kitų. Pavyzdžiui, elementas, kurį norime nustatyti kitaip nei kitas stilius, bus straipsnio pavadinimas.

Tada html-dokumente priskiriame pavadinimą h1id, pavyzdžiui, articlename. Į CSS failą nustatykite stilius, prieš vardą identifikuodamas pridedant grotelės: #articlename {color: blue; text-align: center}. Dabar mūsų pavadinimas bus mėlynos spalvos ir išcentruoti centre.

Kiekvieną iš pirmiau nurodytų tipų galima pavadinti"paprastas CSS parinkiklis". Jie apibrėžia konkretaus html dokumento parametro formatavimą: panašių elementų rinkinį (pavyzdžiui, visas straipsnio dalis), vieną klasę (pavyzdžiui, tik pirmąją pastraipą) arba konkretų elementą (pavyzdžiui, straipsnio pavadinimą).

css parinkiklis

Atributo pasirinkimas

Be to, aukščiau yra CSS selektoriaiatributai yra sudėtingesnis stilių pritaikymo būdas. Tai leidžia jums formatuoti HTML elementus pasirinktu atributu arba jo verte. Yra keletas šio rinkiklio veislių:

  • esant atributui;
  • pagal jo tikslią vertę;
  • daline atributine verte;
  • pagal savo konkrečią reikšmę.

Leiskite išsamiai išnagrinėti kiekvieną iš šių veislių:

  1. Pirmasis atvejis.Formatavimas naudojamas, jei html kode yra tam tikras atributas (jie gali būti p, div, antraštės ir kt.). Jei trūksta, tada naudojamas visuotinis visų elementų stilius. Pavyzdžiui, elementams, turintiems pavadinimą (patarimas).
  2. Antras atvejis. Stilius taikomas tik tiems html elementams, kurie tiksliai atitinka atributų reikšmes. Pavyzdžiui, tiems įvesties elementams, kurių tipo tipo atributas yra lygus pateikti.
  3. Trečioji byla. Formatavimas yra apribotas elementais, kurių konkretus žodis yra verčių sąraše. Pavyzdžiui, "sideBar" "div" elementų "klasėje" atributas.
  4. Ketvirta byla.Stilius nurodytas tik tiems HTML-dokumento elementams, kuriems tam tikras atributas turi tam tikrą reikšmę ir prasideda. Pavyzdžiui, taikydami nurodytą spalvą visi elementai, kurių atributų kalba yra anglų (tai gali būti en, en-rus, en-au ir tt).

Taigi, naudojant tam tikrą CSS parinkiklį, galite geriausiai suplanuoti visą tinklalapį ir apibūdinti jo atskirus elementus.