CSS-selector, og dets rolle i formatering html-dokument

click fraud protection

Oprettelse af en hjemmeside og udfylde det med visse elementer af en webside, vil alle stå over et udtryk som CSS-vælgeren.Det tjener til mest præcist bestemme alle de elementer af html-fil af deres design og placering på siden.For at gøre dette, skal du oprette en CSS-et dokument, som præciserer visse vælgere og deres formateringsindstillinger: farve, størrelse, placering og andre.Hver webdesigner bør vide og være i stand til korrekt indtast datoer for selektorer.De er opdelt efter type, den vigtigste, som vi diskuterer nedenfor.

Typer selektorer i CSS

Afhængigt til hvad html-element anvender formatering, kan CSS-selector henvise til en af ​​følgende grupper:

  • selector tags;
  • class selector;
  • id-selector;
  • selector attributter.

tag selector

Det kaldes også "type vælgeren" og "på posten", det er den mest enkle og almindelige.Som hans CSS-dokument er navnene på de elementer html-fil, som vi beskriver.For eksempel, hvis vi har brug for at indstille afsnitstypografi, vi angiver egenskaber og deres værdier for elementet p {baggrund: x;farve: y;størrelse: z}.I dette tilfælde vil alle stykker webside har samme format (baggrundsfarve, tekst størrelse og lignende. D.).

klasse selector

Men hvad nu hvis du har brug for at spørge alle dine punkt er forskellig fra andre stilarter?Til dette formål er der en klasse vælgeren.

CSS-dokument i denne sag, vil indeholde en indgang der ligner følgende: p.first {color: x;font-size: y}.Således har vi definere egenskaberne for "farve" og "størrelse" kun for et afsnit af klassen først.

i html-dokument i denne sag, skal du indtaste klassen attribut til navnet på den stil først.Klasser kan være så meget som den stil, du ønsker at søge om websideelementer.

selector id

Ofte er der behov for at definere stilen mere præcist, for eksempel et hvilket som helst element i en side eller i deres prøve.I denne situation, at støtten kommer id-vælgeren.Html-fil tildele en ønsket post navn, der identificerer det blandt de andre.For eksempel, at det element, at vi ønsker sat en stil forskellig fra de andre, vil overskrift artiklen.

derefter tildele html-dokument header h1 id, sådan articlename.Og i CSS-filen for at indstille stil, tilføjer til navnet identifier gitter: #articlename {color: blue;text-align: center}.Nu er vores overskrift vil være farven blå og centreret.

Hver af de ovennævnte typer kan kaldes "en simpel CSS-vælgeren."De definerer formateringen for en bestemt parameter html-dokument: sammen lignende elementer (for eksempel alle afsnit af artiklen), en klasse (for eksempel kun den første afsnit) eller en bestemt vare (f.eks titlen på artiklen).

selector attributter

tillæg til ovenstående, er der CSS-i attribut vælgere - en mere sofistikeret måde at bruge typografier.Det gør det muligt html formatering elementer af en valgt attribut eller værdi.Der er flere varianter af denne selector:

  • ved tilstedeværelsen af ​​en attribut;
  • om dens nøjagtige værdi;
  • om delvis attribut værdi;
  • sin særlige værdi.

Lad os betragte hver af disse sorter:

  1. første tilfælde.Formatering anvendes, hvis der er en specifik attribut i html-kode (det kan være p, div, header, etc.).Hvis det ikke er, det bruger en generisk for alle elementer i den stil.For eksempel elementer, der har titlen (tooltip).
  2. andet tilfælde.Stilen gælder kun html-elementer, der er en eksakt match attributværdier.For eksempel, at de elementer i input, hvor værdien af ​​den type tillægger lig indsende.
  3. tredje tilfælde.Under formatet kun vil indeholde elementer på listen over værdier, der har et bestemt ord.For eksempel, sidebar attribut "klasse" i elementerne div.
  4. fjerde tilfælde.Stil defineres kun for de elementer html-dokument, hvor en bestemt egenskab har en vis værdi, og begynder med ham.For eksempel anvendelse af den angivne farve til alle elementer, attributter hvis engelske sprog (det kan være en, en-rus, en-au osv. D.).

Således ved hjælp af en eller anden CSS-selector kan bedst placeres i en hel webside, og beskrive nogle af dens elementer.