CSS-väljare, och dess roll i formaterings html-dokument

Skapa en hemsida och fylla den med vissa delar av en webbsida, kommer alla att stå inför en term som CSS-väljare.Det tjänar till att på bästa sätt fastställa alla delar av html-fil av sin konstruktion och placering på sidan.För att göra detta, skapa en CSS-dokument som klargör vissa väljare och deras formateringsalternativ: färg, storlek, läge och andra.Varje webbdesigner bör känna till och kunna korrekt Fyll i datumen för väljarna.De är indelade efter typ, den viktigaste som vi diskuterar nedan.

Typer selektorer i CSS

Beroende på vad html-elementet applicerar formatering kan CSS-väljare avser en av följande grupper:

  • väljar taggar;
  • klass väljare;
  • id-väljare;
  • väljaren attribut.

kodväljaren

Den kallas också "typ väljare" och "på posten", det är det enklaste och vanligaste.Som hans CSS-dokument är namnen på de element html-fil som vi beskriver.Till exempel, om vi måste ställa in styckeformat, vi ange egenskaper och deras värden för elementet p {background: x;color: y;storlek: z}.I detta fall kommer alla punkter webbsida har samma format (bakgrundsfärg, textstorlek och liknande. D.).

klass väljare

Men vad händer om du behöver ställa alla dina punkt skiljer sig från andra stilar?För detta ändamål finns det en klass väljare.

CSS-dokument i det här fallet, kommer att innehålla en post som liknar följande: p.first {color: x;font-size: y}.Därför definierar vi egenskaperna hos "färg" och "storlek" bara för ett stycke av klass först.

i html-dokument i det här fallet, anger class-attribut till namnet på stilen först.Klasser kan vara så mycket som den stil du vill använda för webb sidelement.

väljare id

Ofta finns det ett behov av att definiera stilen mer exakt, till exempel något inslag av en sida eller i deras urval.I denna situation, kommer stödet id-väljare.HTML-filen tilldela en önskad funktion namn som identifierar det bland de andra.Till exempel, att det element som vi vill ställa in en stil som skiljer sig från de andra, kommer rubrik artikeln.

tilldela sedan html-dokumenthuvudet h1 identifierare, såsom articlename.Och i CSS-filen för att ställa in stilen, lägga till namnet identifierare gallret: #articlename {color: blue;text-align: center}.Nu har vår rubrik blir färgen blå och centrerad.

Var och en av de ovan nämnda typerna kan kallas "en enkel CSS-väljare."De definierar formateringen för en viss parameter html-dokument: tillsammans liknande element (till exempel alla punkterna i artikeln), en klass (till exempel endast den första stycket) eller en viss punkt (till exempel titeln på artikeln).

väljare attribut

Utöver ovanstående finns CSS-in attributväljare - ett mer sofistikerat sätt att använda stilar.Det gör html formatering delar av ett valt attribut eller värde.Det finns flera varianter av denna väljare:

  • genom närvaron av ett attribut;
  • på dess exakta värde;
  • om partiell attributvärde;
  • av dess särskilt värde.

Låt oss betrakta var och en av dessa sorter:

  1. första fallet.Formatering tillämpas om det finns ett specifikt attribut i html-koden (det kan vara p, div, sidhuvud, etc.).Om så inte är fallet använder det en generisk för alla delar av stil.Exempelvis element som har titeln (verktygstips).
  2. andra fallet.Stilen gäller endast html-element som är en exakt matchning attributvärden.Till exempel, till de delar av indata, där värdet på type skriver lika att lämna.
  3. tredje fallet.Enligt formatet kommer endast innehålla poster i förteckningen över värden som har ett visst ord.Till exempel, sidebar attributet "klass" i elementen div.
  4. fjärde fallet.Style definieras endast för de delar html-dokument där en viss egenskap har ett visst värde, och börjar med honom.Till exempel användning av den angivna färgen på alla element, attribut som det engelska språket (det kan vara en, en-rus, en-au osv. D.).

Således, med hjälp av en eller annan CSS-väljare kan bäst placeras i en hel webbsida, och beskriva några av dess beståndsdelar.