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

Het creëren van een website en vullen met bepaalde elementen van de webpagina, zal iedereen een termijn worden geconfronteerd, zoals de CSS-selector. Het dient om alle elementen van html-bestand van hun ontwerp en de locatie op de pagina nauwkeuriger te bepalen. Om dit te doen, maakt u een CSS-een document dat nadere uitwerking van bepaalde selectors en hun opmaakopties: kleur, grootte, locatie en andere. Iedere webdesigner moet weten en in staat zijn om de gewenste selecties correct in te voeren. Ze zijn onderverdeeld volgens het type, de belangrijkste van die we hieronder bespreken.

Soorten selectors in CSS

Afhankelijk van waarop het element wordt toegepast in HTML-formaat, kunnen CSS-selector hebben betrekking op één van de volgende groepen:

• tagkiezer;
• class selector;
• id-selector;
• attribuut selector.

tagkiezer

Het wordt ook wel "type selector" of "element", het is de meest eenvoudige en gemeenschappelijke. Als zijn CSS-document zijn de namen van de elementen van 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 leden van de webpagina hetzelfde formaat hebben (achtergrondkleur, grootte van de tekst, en ga zo maar door. D.).

class selector

En wat als je moet stellen uw elke paragraaf is anders dan andere stijlen? Om dit te doen, is er een class selector.

p.first {color:: CSS-document zou in dit geval een vermelding van het volgende formulier bevatten x; font-size: y}. Zo definiëren we de eigenschappen van "kleur" en "grootte" alleen voor de eerste klasse paragraaf.

In een html-document in dit geval ging een klasse attribuut om de naam van de stijl eerste. Klassen kunnen zo veel als de stijl die u wilt toepassen voor een webpagina elementen.

Selector id

Vaak is er een noodzaak om een stijl nauwkeuriger te definiëren, bijvoorbeeld één element van de pagina, of om ze te proeven. In deze situatie, komt de hulp id-selector. De html-bestand toe te wijzen het gewenste item naam die het identificeert tussen de anderen. Zo zal de elementen die we willen anders dan andere stijl te stellen de titel van het artikel te zijn.

Vandaar in HTML-document toewijzen van de header h1 identificator, zoals artikelnaam. En in de CSS-bestand, geeft u de stijl, toe te voegen aan de ID naam grille: #articlename {color: blue; text-align: center}. Nu onze headline zal de kleur blauw en gecentreerd.

Elk van de bovengenoemde typen kunnen worden omschreven als "een eenvoudige CSS-selector". Zij bepalen de opmaak voor een bepaalde parameter van de html-document: samen soortgelijke elementen (bijvoorbeeld alle alinea's van het artikel), een klasse (bijvoorbeeld alleen de eerste paragraaf) of een specifiek voorwerp (bijvoorbeeld de titel van het artikel).

attribuut selectors

In aanvulling op het bovenstaande, is er een CSS-selectors attributen - meer ingewikkelde methode van toepassing stijlen. Het laat html-formaat elementen op de geselecteerde attribuut of de waarde. Er zijn verschillende soorten van deze selector:

• Door de aanwezigheid van het kenmerk;
• op zijn exacte waarde;
• door gedeeltelijke attribuutwaarde;
• op zijn specifieke waarde.

Laten we elk van deze soorten te overwegen:

1. Het eerste geval. Opmaak wordt toegepast, indien aanwezig in een bepaald attribuut HTML-code (het kan een p, div, header, etc.). Als het niet, het maakt gebruik van een generiek voor alle elementen van de stijl. Bijvoorbeeld, de elementen met de titel (tooltip).
2. Het tweede geval. De stijl is alleen van toepassing op de html-elementen die een exacte match van het attribuut waarden. Bijvoorbeeld, het invoeren van de elementen, waarbij de waarde van het kenmerk type gelijk dienen.
3. Het derde geval. Onder het formaat bevat alleen items in de lijst van waarden die een bepaald woord heeft. Bijvoorbeeld, sideBar attribuut "class" voor elementen div.
4. Het vierde geval. Style slechts gedefinieerd voor de elementen van html-documenten, waarvan de bijzondere eigenschap heeft een bepaalde waarde, en begint mee. Bijvoorbeeld, het gebruik van de gespecificeerde kleur alle elementen die het Engels taalattribuut (die kunnen worden en, en-rus, en-au en t. D.).

Zo, met behulp van een of de andere, de CSS-selector, kan het beste worden omschreven als een hele webpagina, en beschrijven een aantal van zijn elementen.