CSS-selektor i njegova uloga u oblikovanju HTML dokumenata

Internet

Izrada web stranice i njegovo ispunjavanje s određenimelementi web stranice, svatko će sigurno naići na koncept kao što je CSS selektor. Ona služi za precizno određivanje svih elemenata html datoteke, njihovog dizajna i mjesta na stranici. Da biste to učinili, izradite CSS dokument koji propisuje one ili druge odabire i parametre za njihovo oblikovanje: boja, veličina, položaj i ostali. Svaki web dizajner bi trebao znati i biti u mogućnosti ispravno unijeti željene selektore. Podijeljeni su na vrste, od kojih će glavne razmotriti u nastavku.

Vrste selektora u CSS-u

Ovisno o tome koji se HTML oblik oblikuje, CSS selektor može se odnositi na jednu od sljedećih skupina:

  • selektor oznaka;
  • klasa selektor;
  • id-selektor;
  • izbornik atributa.

css selektor

Odabir oznake

Također se naziva "odabir tipa" ili "po"element ", to je najjednostavniji i najčešći, kao ime elemenata html datoteke koju opisujemo u njoj, na primjer, ako trebamo odrediti stil odlomka, navodimo svojstva i njihove vrijednosti za p { pozadina: x, boja: y, veličina: z}. U ovom slučaju, svi odlomci web stranice imat će isti oblik (boju pozadine, tekst, veličinu itd.).

Odabir klase

A što ako trebate postaviti svoj stil različit za druge za svaki odlomak? Za to postoji klasni selektor.

CSS dokument u ovom slučaju sadrži sljedeći unos: p.first {color: x; veličina slova: y}. Stoga postavljamo svojstva "boja" i "veličina" samo za stavak klase prve.

U HTML dokumentu u ovom slučaju, prvo unesete atribut klase s nazivom stila. Nastava mogu biti jednako kao i stilovi koje želite primijeniti na elemente web stranice.

css odabiri atributa

Odabir prema id

Često postoji potreba za definiranjem stilačak i točnije, na primjer, na jedan element stranice ili na njihov uzorak. U takvoj situaciji id-selektor dolazi u spašavanje. U html datoteci smo dodijelili naziv željenom elementu, identificirajući ga među ostalima. Na primjer, element koji želimo postaviti drugačiji od drugog stila bit će naslov članka.

Zatim u html dokumentu dodijelimo naslov h1id, na primjer artikulacija. I u CSS datoteci postavite stil dodavanjem rešetke prije naziva identifikatora: #articlename {boja: plava; tekstualni poravnaj: centar}. Sada će naš naslov imati plavu boju i poravnanje u sredini.

Svaki od gore navedenih vrsta može se nazvati"jednostavni CSS-selektor". Oni definiraju oblikovanje za određeni parametar HTML-dokumenta: zajedno slične elemente (npr svi stavaka članka), jedan razred (na primjer, samo prvi stavak) ili određenu stavku (na primjer, naslov članka).

css selektor

Odabir atributa

Osim gore navedenog, postoje CSS selektoriatributa je složeniji način primjene stilova. To vam omogućuje oblikovanje HTML elemenata odabranim atributom ili njegovom vrijednošću. Postoji nekoliko vrsta ovog odabira:

  • po prisustvu atributa;
  • po svojoj točnoj vrijednosti;
  • po djelomičnoj vrijednosti atributa;
  • svojim specifičnim značenjem.

Razmotrimo detaljno svaku od ovih sorti:

  1. Prvi slučaj.Oblikovanje se koristi ako u html kodu postoji određeni atribut (mogu biti p, div, zaglavlje i drugi). Ako to nedostaje, koristi se univerzalni stil za sve elemente. Na primjer, za stavke koje imaju naslov (opis alata).
  2. Drugi slučaj. Stil se primjenjuje samo na one HTML elemente koji imaju točno podudaranje vrijednosti atributa. Na primjer, onim elementima unosa čija je vrijednost atributa tipa jednaka predaji.
  3. Treći slučaj. Oblikovanje je ograničeno na stavke s određenom riječi na popisu vrijednosti. Na primjer, sideBar u atributu "klase" div elemenata.
  4. Četvrti slučaj.Stil je specificiran samo za one elemente HTML dokumenta, za koji određeni atribut ima određenu vrijednost i počinje s njom. Na primjer, primjenom navedene boje na sve elemente čiji je jezik atributa engleski (to može biti en, en-rus, en-au, itd.).

Stoga pomoću određenog CSS-izbornika možete najbolje dizajnirati i cijelu web stranicu i opisati njegove pojedinačne elemente.