CSS selektors un tā loma HTML formāta dokumentu formatēšanā

Internets

Izveidojiet vietni un aizpildiet to ar noteiktiemtīmekļa lapas elementi, ikviens noteikti saskarsies ar tādu jēdzienu kā CSS selektors. Tas kalpo, lai precīzi noteiktu visus html faila elementus, to dizainu un vietu lapā. Lai to izdarītu, izveidojiet CSS dokumentu, kurā norādīti tie vai citi selektori un to formatēšanas parametri: krāsa, lielums, pozīcija un citi. Katram tīmekļa dizaineram ir jāzina un jāspēj pareizi ievadīt vēlamos selektorus. Tie ir sadalīti tipos, galvenie no kuriem mēs to aplūkosim tālāk.

Atlasītāju veidi CSS

Atkarībā no tā, kurš HTML formāta elements ir piemērots formatēšanai, CSS selektors var attiekties uz kādu no šīm grupām:

  • tagu atlasītājs;
  • klases atlasītājs;
  • id selektors;
  • atribūtu selektors.

css selektors

Atlases tags

To sauc arī par "tipa selektoru" vai "pēcelements ", tas ir vienkāršākais un visizplatītākais, tā kā tajā aprakstītajā html faila elementu nosaukumā, piemēram, ja mums ir nepieciešams norādīt rindkopas stilu, mēs norādām p fons: x; krāsa: y; izmērs: z}. Šajā gadījumā visiem tīmekļa lapas punktiem būs vienāds formatējums (fona krāsa, teksts, lielums utt.).

Klases selektors

Un ko tad, ja katram rindam ir nepieciešams iestatīt savu stilu atšķirīgiem citiem? Šim nolūkam ir klases atlasītājs.

Šajā dokumentā CSS būs šāds ieraksts: p.first {color: x; fonta izmērs: y}. Tādējādi mēs iestatām rekvizītus "krāsa" un "izmērs" tikai pirmās klases punktam.

Šajā gadījumā html-dokumentā vispirms ievadiet klases atribūtu ar stila nosaukumu. Klasēs var būt tik daudz stilu, kādu vēlaties piemērot tīmekļa lapas elementiem.

css atribūtu atlasītāji

Atlasītājs pēc ID

Bieži vien ir nepieciešams definēt stiluvēl precīzāk, piemēram, uz vienu lapas elementu vai tā paraugu. Šajā situācijā id-selektors nāk uz glābšanu. HTML failā mēs piešķiram nosaukumu vēlamajam elementam, identificējot to starp citiem. Piemēram, elements, kuru mēs vēlamies iestatīt atšķirīgi no cita stila, būs raksta virsraksts.

Tad html-dokumentā mēs piešķiram virsrakstu h1id, piemēram, articlename. Un CSS failā, uzstādiet stilu, pievienojot režģi pirms identifikatora nosaukuma: #articlename {color: blue; text-align: centrs}. Tagad mūsu virsrakstam būs zila krāsa un izlīdzinājums centrā.

Katru no iepriekš minētajiem veidiem var saukt"vienkāršs CSS selektors". Tie definē html dokumenta konkrēta parametra formatējumu: līdzīgu elementu kolekciju (piemēram, visus raksta punktus), vienu klasi (piemēram, tikai pirmo rindkopu) vai noteiktu elementu (piemēram, raksta virsrakstu).

css selektors

Atribūtu atlasītājs

Papildus iepriekš minētajam ir CSS selektoriatribūti ir sarežģītāks stilu pielietošanas veids. Tas ļauj formatēt html elementus pēc atlasītā atribūta vai tā vērtības. Šim atlasītājam ir vairākas šķirnes:

  • ar atribūtu;
  • tā precīza vērtība;
  • ar daļēju atribūtu vērtību;
  • tā īpašā nozīmē.

Ļaujiet mums rūpīgi izskatīt katru no šīm šķirnēm:

  1. Pirmais gadījums.Formatēšana tiek izmantota, ja html kodā ir īpašs atribūts (tie var būt p, div, galvenes un citi). Ja tas trūkst, tad tiek izmantots universāls stils visiem elementiem. Piemēram, vienumiem, kuriem ir virsraksts (rīka padoms).
  2. Otrais gadījums. Stils tiek pielietots tikai tiem html elementiem, kuriem ir precīzi atbilstības vērtības. Piemēram, tiem ievades elementiem, kuru tipa atribūta vērtība ir vienāda ar iesniegšanu.
  3. Trešais gadījums. Formatēšana ir ierobežota ar precēm ar konkrētu vārdu vērtību sarakstā. Piemēram, SideBar divu elementu atribūts "class".
  4. Ceturtā lieta.Stils tiek norādīts tikai tiem html-dokumenta elementiem, kuriem konkrētam atribūtam ir noteikta vērtība un kas sākas ar to. Piemēram, norādītās krāsas piemērošana visiem elementiem, kuru atribūtu valoda ir angļu valoda (tas var būt en, en-rus, en-au uc).

Tādējādi, izmantojot īpašu CSS selektoru, jūs vislabāk varat izveidot gan visu tīmekļa lapu, gan aprakstīt atsevišķus elementus.