InternetWebbdesign

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

Att skapa en webbplats och fylla den med vissa delar av webbsidan, kommer alla att möta en term såsom CSS-väljare. Det tjänar till att mer exakt bestämma alla delar av html-fil av sin konstruktion och placering på sidan. För att göra detta, skapa en CSS-ett 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 ange önskade val. De är uppdelade efter typ, det viktigaste som vi diskuterar nedan.

Typer av väljare i CSS

Beroende på till vilken elementet appliceras html-formaterad, kan CSS-väljare avser en av följande grupper:

  • kodväljaren;
  • klass väljare;
  • id-väljare;
  • attributväljaren.

taggväljaren

Den kallas också "typ väljare" eller "element", det är den mest enkla och vanliga. Som hans CSS-dokument är namnen på de delar av html-fil, som vi beskriver. Till exempel, om vi måste ställa in styckeformat, vi anger egenskaper och deras värden för element p {background: X; färg: y; storlek: z}. I detta fall kommer alla stycken av webbsidan har samma format (bakgrundsfärg, textstorlek, och så vidare. D.).

klass väljare

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

CSS-dokument i detta fall skulle innehålla en post av följande form: p.first {färg: x; font-size: y}. Därför definierar vi egenskaperna för "färg" och "storlek" endast för första klass stycket.

I ett html-dokument i det här fallet gick in i en klass attribut till namnet på stilen först. Klasser kan vara så mycket som den stil du vill använda för en webbsida element.

väljaren id

Ofta finns det ett behov av att definiera en stil mer exakt, till exempel med något element i sidan, eller att prova dem. I denna situation, kommer stödet id-väljare. HTML-filen tilldela ett önskat objekt namn som identifierar det bland de andra. Till exempel kommer de element som vi vill ställa skiljer sig från andra stil vara artikelns rubrik.

Sedan i ett html-dokument tilldela rubrik h1 identifierare sådan articlename. Och i CSS-filen anger stil, lägga till ID-namn galler: #articlename {color: blue; text-align: center}. Nu har vår rubrik kommer att ha färgen blå och centrerad.

Var och en av de ovan nämnda typerna kan beskrivas som "en enkel CSS-väljare". De definierar formateringen för en viss parameter hos html-dokumentet: tillsammans liknande element (t.ex. alla styckena i artikeln), en klass (till exempel, bara den första stycket) eller ett specifikt objekt (till exempel artikelns titel).

attribut selektorer

I tillägg till ovanstående, det finns en CSS-selektorer attribut - mer komplicerad metod av applikations stilar. Det gör att HTML-format element på den valda attribut eller värde. Det finns flera varianter av denna väljare:

  • genom närvaron av attributet;
  • vid dess exakta värde;
  • genom partiell attributvärde;
  • på dess specifika värde.

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

  1. Det första fallet. Formatering tillämpas, om den är närvarande i ett visst attribut html-kod (det kan vara en p, div, sidhuvud, etc). Om det inte är, använder den en generisk för alla delar av stil. Till exempel, för de element som har titeln (verktygsspetsen).
  2. Det andra fallet. Stilen gäller endast html-element som har en exakt matchning av attributvärden. Till exempel för att mata in de element, där värdet av attributtypen är lika klicka.
  3. Det tredje fallet. Under formatet kommer endast innehålla poster i listan över värden som har ett visst ord. Till exempel, sidebar attributet "klass" för element div.
  4. Det fjärde fallet. Style definieras endast för de delar av html-dokument, vars särskilda attribut har ett visst värde, och börjar med honom. Till exempel, användningen av den angivna färgen till alla element vilket språk attributet den engelska (som kan vara en, en-rus, en-au och t. D.).

Genom att använda det ena eller det andra, CSS väljaren kan bäst anges som en hel webbsida och beskriva några av dess delar.

Similar articles

 

 

 

 

Trending Now

 

 

 

 

Newest

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