InternetsWeb Design

CSS-selektors, un tās loma formatēšanas HTML dokumentā

Radīt tīmekļa vietni un aizpildot to ar konkrētiem elementiem mājas lapā, visi būs jāsaskaras ar terminu, piemēram, CSS-selektora. Tas kalpo, lai precīzāk noteiktu visus elementus HTML failā to konstrukcijas un atrašanās vietu lapā. Lai to izdarītu, izveidojiet CSS-dokumentu, kas izklāstītas konkrētas selektori un to formatēšanas iespējas: krāsu, lielumu, atrašanās vietu un citas. Katru web dizainers ir jāzina un jāspēj pareizi ievadītu vēlamo izvēli. Tās ir sadalītas pēc to veida, galvenais no kuriem mēs apspriestu turpmāk.

Veidi iezīmētājiem CSS

Atkarībā no tā, uz kuru elements ir piemērots html formāta, CSS-selektors var attiekties uz vienu no šādām grupām:

  • tag selektors;
  • klase selector;
  • id-selektors;
  • atribūta selektoru.

Tag atlasītājs

To sauc arī par "tipa atlasītājs" vai "elements", tas ir visvairāk vienkārši un bieži. Kā viņa CSS-dokumentā nosaukumi elementu HTML failā, ko mēs apraksta. Piemēram, ja mums ir nepieciešams, lai uzstādītu rindkopas stilu, mēs precizēt īpašības un to vērtības elementa p {fona: x; krāsa: y; izmērs: z}. Šajā gadījumā, visi mājas lapā punkts būs tāds pats formāts (fona krāsu, teksta lielumu, un D. utt.).

klase atlasītājs

Un ko tad, ja jums ir nepieciešams uzdot Jūsu katrs punkts ir atšķirīgs no citiem stiliem? Lai to izdarītu, ir klases selektora.

CSS-dokuments šajā gadījumā būtu jāiekļauj ieraksts par šādu veidlapu: p.first {krāsa: x; font-size: y}. Tātad, mēs definēt īpašības "krāsu" un "izmērs" tikai par pirmās klases daļā.

Ar HTML dokumenta šajā gadījumā ieraksta klases atribūtu nosaukumu stila pirmā. Nodarbības var būt tik daudz, cik stilu jūs vēlaties pieteikties tīmekļa lapu elementus.

atlasītājs id

Bieži vien ir nepieciešams definēt stilu precīzāk, piemēram, lai jebkurā lapas elements, vai arī tos nobaudīt. Šādā situācijā, atbalsts nāk ID selektoru. HTML failu piešķirt vēlamo vienības nosaukumu, kas identificē to starp citiem. Tā, piemēram, elementi, ko mēs vēlamies, lai uzstādītu atšķiras no citu stilu būs raksta nosaukumu.

Tad ar HTML-dokumentu, piešķirot galvenes h1 identifikatoru, piemēram articlename. Un CSS-failu, norādiet stilu, pievienojot ID nosaukums restes: #articlename {krāsa: zila; text-align: centrs}. Tagad mūsu virsraksts būs krāsa zila un centrā.

Katrs no iepriekš minētajiem veidiem, var raksturot kā "vienkāršu CSS-selektora". Tie nosaka formatējumu par konkrētu parametru HTML-dokumentu: kopā līdzīgi elementi (piemēram, visi punkti raksta), viena klase (piemēram, tikai pirmais punkts), vai konkrētu objektu (piemēram, raksta nosaukums).

atribūts selektori

Papildus iepriekš minētajam, ir CSS-pārslēdzējiem atribūtiem - sarežģītāks metode pieteikuma stilus. Tas ļauj HTML formāta elementus izvēlēto atribūtu vai vērtību. Ir vairākas šķirnes šī atlasītāju:

  • klātbūtne atribūta;
  • tās precīzo vērtību;
  • ar daļēju atribūta vērtību;
  • uz tās īpaša vērtība.

Apskatīsim katru no šīm sugām:

  1. Pirmais gadījums. Formatēšana tiek piemērots, ja klāt konkrētā atribūta html kodu (tas var būt p, div, header, uc). Ja tā nav, tā izmanto vispārējs visiem elementiem stilā. Piemēram, attiecībā uz elementiem, kam nosaukumu (rīks tip).
  2. Otrais gadījums. Stils attiecas tikai uz html elementu, kas ir precīzas atbilstības atribūta vērtību. Piemēram, lai ievadītu nepieciešamo elementu, kur vērtība tipa atribūtam vienāds iesniegt.
  3. Trešais gadījums. Saskaņā formātā būs tikai vienumus vērtību saraksta, kas ir zināma vārdu. Piemēram, Sidebar atribūts "class" par elementi div.
  4. Ceturtā lieta. Stils ir definēta tikai tiem elementiem HTML-dokumentu, kuru īpaši atribūts ir zināma vērtība, un sāk ar viņu. Piemēram, izmantojot norādītajā krāsā uz visiem elementiem, kas angļu valodā atribūts (kas var būt en, en-rus, en-au un D. t.).

Tādējādi, izmantojot vienu vai otru, CSS atlasītāju, vislabāk var norādīt kā visu mājas lapā, un aprakstīt dažus tās elementus.

Similar articles

 

 

 

 

Trending Now

 

 

 

 

Newest

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