InternetasWeb dizainas

CSS selektorius, ir jo vaidmuo formatavimo html dokumento

Sukurti svetainę ir užpildyti jį su tam tikrais elementais tinklalapį, kiekvienas susiduria terminą, pavyzdžiui, CSS-selektorių. Tai padeda tiksliau nustatyti visus html failą savo dizaino ir puslapio vietą elementus. Norėdami tai padaryti, sukurti CSS-dokumentą, kuriame nurodomi tam tikri selektoriai ir jų formatavimo pasirinktis: Spalva, dydis, buvimo vieta ir kita. Kiekvienas web dizaineris turi žinoti ir gebėti tinkamai įvesti norimus pasirinkimus. Jie skirstomi pagal tipą, pagrindiniai iš kurių mes aptarti toliau.

Rūšių selektoriai CSS

Priklausomai nuo į kurią elementas taikoma HTML formato, CSS selektorius gali būti susiję su vienu iš šių grupių:

  • žymės parinkimo;
  • klasės selektorių;
  • ID-selektorių;
  • atributas rankenėlę.

Gairė selektorių

Jis taip pat paragino "tipo parinkiklis" arba "elementas", tai paprastas ir dažnai. Kaip savo CSS-dokumente į HTML failą elementų, kurie aprašyti pavadinimus. Pavyzdžiui, jei mes turime nustatyti pastraipos stilių, mes nurodyti savybes ir jų vertės elemento p {fone: x; spalva: Y; dydis: Z}. Šiuo atveju, visi internetiniame puslapyje punktai turės tą patį formatą (fono spalvą, teksto dydį, ir D. pan.).

klasės selektorių

Ir ką daryti, jei jums reikia užduoti savo kiekvienam dalis skiriasi nuo kitų stilių? Norėdami tai padaryti, yra klasės selektorių.

CSS dokumentas šiuo atveju būtų pateikiamas iš šių formų įrašą: p.first {spalva: x; šrifto-dydis: Y}. Taigi, mes apibrėžti "spalva" ir "dydis" tik už pirmos klasės dalyje savybes.

Be html dokumento šioje byloje įrašytas klasės atributą prie stiliaus vardą. Klasės gali būti tiek, kiek stilius norite kreiptis dėl tinklalapio elementus.

selektorius tapatybės

Dažnai yra poreikis tiksliau apibrėžti stilių, pavyzdžiui, bet vieno elemento puslapio, arba juos paragauti. Esant tokiai situacijai, pagalba ateina ID-rankenėlę. HTML failą priskirti norimą elementą vardą, kuris identifikuoja jį tarp kitų. Pavyzdžiui, elementai, kad mes norime nustatyti skiriasi nuo kitų stilių bus straipsnio pavadinimas.

Tada į html dokumentą priskirti antraštės h1 identifikatorių, pavyzdžiui articlename. Ir CSS failą, nurodykite stilių, pridedant prie ID, pavadinimas grotelių: #articlename {spalva: mėlyna; teksto lygiavimas: centras}. Dabar mūsų Antraštė turės spalva mėlyna ir centre.

Kiekviena iš pirmiau minėtų tipų gali būti apibūdinta kaip "paprastą CSS-selektorių". Jie apibrėžia formatavimą konkretaus parametro HTML-dokumentą: Kartu panašius elementus (Straipsnio pvz, visi punktai) viena klasė (pavyzdžiui, tik pirmoji dalis) arba konkretų daiktą (pavyzdžiui, straipsnio pavadinimas).

atributas selektoriai

Be to, kas išdėstyta pirmiau, yra CSS-selektoriai atributus - sudėtingesnis metodas, stilių. Tai leidžia HTML formatu elementus pasirinkto atributo ar vertės. Yra keletas veislių šio selektorių:

  • pagal atributo buvimą;
  • jos tiksliai naudą;
  • dalinio atributo vertę;
  • savo konkrečią reikšmę.

Panagrinėkime kiekvieną iš šių rūšių:

  1. Pirmasis atvejis. Formatavimas taikomas, jei yra tam tikra atributas html kodo (tai gali būti p, DIV, antraštės ir tt). Jei taip nėra, ji naudoja visiems stiliaus elementų bendrinis. Pavyzdžiui, dėl elementų, turinčių norimas (įrankio viršūnė).
  2. Antrasis atvejis. Stiliaus taikoma tik HTML elementų, kurie turi tikslią rungtynės atributų reikšmes. Pavyzdžiui, įvesties elementų, kur tipo atributo reikšmė lygi pateikti.
  3. Trečiasis atvejis. Pagal formatą bus įtraukti tik elementus vertybių sąrašą, kuris turi tam tikrą žodį. Pavyzdžiui, sidebar atributas "klasė" elementų div.
  4. Ketvirtas atvejis. Stilius apibrėžiama tik tiems HTML-dokumentą, kurio ypač atributas turi tam tikrą vertę elementų, ir pradeda su juo. Pavyzdžiui, nurodyto spalvos naudojimas visų elementų, kurie anglų kalba atributas (tai gali būti LT, EN-RUS, LT-AU ir D. k.).

Taigi, naudojant vieną ar kitą, CSS selektoriaus, geriausiai gali būti nurodyta kaip visą tinklalapį, ir aprašyti kai kurie jos elementai.

Similar articles

 

 

 

 

Trending Now

 

 

 

 

Newest

Copyright © 2018 lt.birmiss.com. Theme powered by WordPress.