CSS-selector, en haar rol in de opmaak html-document

maken van een website en vullen met bepaalde elementen van een webpagina, zal iedereen een termijn worden geconfronteerd, zoals CSS-selector.Het dient om alle elementen van het html-bestand van hun ontwerp en de locatie op de pagina meest nauwkeurig te bepalen.Om dit te doen, maakt u een CSS-een document dat spreuken uit bepaalde selectors en hun opmaakopties: kleur, grootte, positie, en andere.Iedere webdesigner moet weten en goed te kunnen Vul de data van selectors.Ze zijn onderverdeeld type, de belangrijkste waarvan wij hieronder besproken.

Types selectors in CSS

Afhankelijk van wat html-element geldt opmaak, kunnen CSS-selector verwijzen naar een van de volgende groepen:

  • selector labels;
  • class selector;
  • id-selector;
  • selector attributen.

tagkiezer

Het wordt ook wel "type selector" en "op het punt", het is de meest eenvoudige en gemeenschappelijke.Als zijn CSS-document zijn de namen van de elementen html-bestand dat we beschrijven.Bijvoorbeeld, als we nodig hebben om de paragraaf stijl te stellen, specificeren we de eigenschappen en hun waarden voor het element p {background: x;kleur: y;size: z}.In dit geval worden alle punten webpagina dezelfde indeling (achtergrondkleur, tekengrootte ed. D.) hebben.

class selector

Maar wat als je nodig hebt om te vragen uw elke paragraaf is verschillend van andere stijlen?Voor dit doel is er een klasse selector.P.first {color::

CSS-document in dit geval zal een ingang vergelijkbaar met het volgende bevatten x;font-size: y}.Zo definiëren we de eigenschappen van de "kleur" en de "grootte" maar voor een paragraaf van het eerste klasse.

in html-document in dit geval, voer de klasse attribuut om de naam van de eerste stijl.Klassen kunnen zo veel als de stijl die u wilt toepassen voor web pagina-elementen zijn.

selector id

Vaak is er een behoefte om de stijl preciezer te definiëren, bijvoorbeeld één element van een pagina of in hun steekproef.In deze situatie is de hulp komt id-selector.De html-bestand toewijzen een gewenste item naam die het identificeert tussen de anderen.Bijvoorbeeld, het element dat we willen een stijl anders dan de anderen, als headliner artikel.

toewijzen Dan html-document header h1 identifier, zoals artikelnaam.En in de CSS-bestand naar de stijl te stellen, toe te voegen aan de naam identifier grille: #articlename {color: blue;text-align: center}.Nu onze headline zal de kleur blauw en gecentreerd zijn.

Elk van de bovengenoemde typen worden genoemd "een eenvoudige CSS-selector."Zij bepalen de opmaak van een bepaalde parameter HTML-document: waarin gelijkaardige elementen (bijvoorbeeld alle punten van het artikel), één klasse (bijvoorbeeld alleen de eerste paragraaf) of een specifiek artikel (bijvoorbeeld de titel van het artikel).

selector attributen

aanvulling op het bovenstaande, zijn er CSS-in attribuut selectors - een meer geavanceerde manier om stijlen te gebruiken.Het maakt het mogelijk HTML-opmaak elementen van een geselecteerde attribuut of de waarde.Er zijn verschillende varianten van deze selector:

  • door de aanwezigheid van een attribuut;
  • op de exacte waarde;
  • op gedeeltelijke attribuut waarde;
  • van haar bijzondere waarde.

Laten we elk van deze rassen te overwegen:

  1. eerste geval.Opmaak wordt toegepast wanneer er een bepaald attribuut in de HTML-code (het kan p, div, header, etc.).Zo niet, gebruikt een generiek voor alle elementen van de stijl.Zo elementen met de titel (tooltip).
  2. tweede geval.De stijl is alleen van toepassing op de html-elementen die een exacte match attribuut waarden zijn.Bijvoorbeeld, om die elementen van input, waarbij de waarde van het type attribuut gelijk aan te leggen.
  3. derde geval.Onder het formaat zal bevatten alleen items in de lijst van waarden die een bepaald woord heeft.Bijvoorbeeld, sideBar attribuut "class" in de elementen div.
  4. vierde geval.Style gedefinieerd alleen die elementen HTML-document waarin een bepaald attribuut een zekere waarde, en begint mee.Bijvoorbeeld, het gebruik van de gespecificeerde kleur alle elementen, attributen die het Engels (het kan zijn en, en-rus, en-au enz. D.).

Zo, met behulp van een of andere CSS-selector kan het best worden geplaatst in een hele webpagina, en beschrijven een aantal van haar elementen.