CSS-velgeren, og dens rolle i formater html-dokument

Opprette en nettside og fylle det med visse elementer av en nettside, vil alle møte et begrep som CSS-velgeren.Det tjener til mest nøyaktig bestemme alle elementene i html-fil av sin utforming og plassering på siden.For å gjøre dette, lage en CSS-et dokument som staver ut enkelte velgere og deres formateringsvalg: farge, størrelse, posisjon og andre.Hver webdesigner bør vite og kunne ordentlig inn datoene for velgere.De er delt etter type, hoved som vi diskuterer nedenfor.

Typer velgere i CSS

Avhengig av i hvilken html-element gjelder formatering, kan CSS-velgeren henvise til en av følgende grupper:

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

tag velger

Det kalles også "type selector" og "på elementet", det er den mest enkle og vanlig.Som hans CSS-dokument er navnene på de elementene html-fil som vi beskriver.For eksempel, hvis vi må sette avsnittsstilen, vi angi egenskapene og deres verdier for elementet p {bakgrunn: x;farge: y;Størrelse: z}.I dette tilfellet vil alle avsnitt webside har samme format (bakgrunnsfarge, tekststørrelse og lignende. D.).

klasseselektor

Men hva hvis du trenger å spørre alle ledd er forskjellig fra andre stilarter?For dette formål er det en klasse velger.

CSS-dokument i dette tilfellet, vil inneholde en oppføring som ligner på følgende: p.first {color: x;font-size: y}.Dermed kan vi definere egenskapene til "farge" og "størrelse" bare for et avsnitt av klasse først.

i html-dokument i så tilfelle går klassen attributt til navnet på stilen først.Klasser kan være så mye som den stilen du ønsker å søke på web sideelementer.

velger id

Det er ofte et behov for å definere stilen mer presist, for eksempel til et hvilket som helst element av en side eller i sin prøve.I denne situasjonen, ved hjelp kommer id-velgeren.Html-fil tildele et ønsket element navn som identifiserer det blant de andre.For eksempel vil det elementet som vi ønsker satt en stil forskjellig fra de andre, vil overskriften artikkelen.

Så tildele html-dokument header h1 identifikator, slik articlename.Og i CSS-filen for å sette stilen, og legger til navnet identifikator grille: #articlename {color: blue;text-align: center}.Nå vår overskrift vil være blå og sentrert farge.

Hver av de ovennevnte typer kan kalles "en enkel CSS-selektor».De definerer formatering for en bestemt parameter html-dokument: sammen lignende elementer (for eksempel alle avsnittene av artikkelen), en klasse (for eksempel bare første ledd) eller et bestemt element (for eksempel tittelen på artikkelen).

velger attributter

tillegg til ovennevnte, er det CSS-in attributt velgere - en mer sofistikert måte å bruke stiler.Det gjør at HTML-formatering elementer av en valgt attributt eller verdi.Det finnes flere varianter av denne velgeren:

  • ved nærværet av et attributt;
  • på sin eksakte verdi;
  • om delvis attributtverdi;
  • av sin spesielle verdi.

La oss se på hver av disse variantene:

  1. første tilfellet.Formateringen brukes hvis det er en bestemt attributt i html-kode (det kan være p, div, header, etc.).Dersom det ikke er det, bruker den en generisk for alle elementer av stilen.For eksempel elementer som har tittelen (tooltip).
  2. andre tilfellet.Stilen gjelder bare for html-elementer som er en eksakt match attributtverdier.For eksempel vil de deler av inngangs, der verdien av den type som attributt lik sende.
  3. tredje tilfellet.Under formatet vil kun omfatte elementene i listen over verdier som har et bestemt ord.For eksempel sidebar attributt "klasse" i elementene div.
  4. fjerde tilfelle.Stilen er definert bare for de elementene html-dokument der en bestemt egenskap har en viss verdi, og begynner med ham.For eksempel bruk av den angitte fargen på alle elementer, attributter som det engelske språket (det kan være en, en-rus, en-au og så videre. D.).

Dermed bruker en eller annen CSS-velgeren best kan plasseres i en hel nettside, og beskrive noen av dens elementer.