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

Opprette en nettside og fylle det med visse elementer av nettsiden, alle vil møte et begrep som CSS-velgeren. Det tjener til mer 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 formateringsalternativer: farge, størrelse, plassering og andre. Hver webdesigner bør vite og være i stand til skikkelig angi ønskede valg. De er delt etter type, hoved som vi diskuterer nedenfor.

Typer velgere i CSS

Avhengig av til hvilken elementet er påført html-formatert, kan CSS-velgeren er knyttet til en av de følgende grupper:

• tag velger;
• klasseselektor;
• id velger;
• attributt velgeren.

tag velgeren

Det er også kalt "type velgeren" eller "element", det er den mest enkle og felles. Som hans CSS-dokument er navnene på elementene i html-fil, som vi beskriver. For eksempel, hvis vi må sette avsnittsstilen oppgir vi egenskapene og deres verdier for element p {background: x; farge: y; størrelse: z}. I dette tilfellet vil alle ledd nettsiden har samme format (bakgrunnsfarge, tekststørrelse og D. osv.).

klasse selector

Og hva hvis du må spørre din hver paragraf er forskjellig fra andre stilarter? For å gjøre dette, er det en klasse selector.

CSS-dokument i dette tilfelle vil inneholde en oppføring av følgende form: p.first {farge: x; font-size: y}. Dermed definerer vi egenskapene til "farge" og "størrelse" bare for førsteklasses ledd.

I et html-dokument i dette tilfellet gikk inn i en klasse attributt til navnet på stilen først. Klasser kan være så mye som den stilen du ønsker å søke om en nettside elementer.

Selector id

Ofte er det behov for å definere en stil mer nøyaktig, for eksempel til ett element på siden, eller for å prøve dem. I denne situasjonen kommer hjelp id-velgeren. Html-fil tildele et ønsket element navn som identifiserer det blant de andre. For eksempel vil de elementene som vi ønsker å sette forskjellig fra andre stil være artikkelen tittelen.

Deretter i et html-dokument tildele overskriften h1 identifikator, slik articlename. Og i CSS-filen, angi stil, og legger til ID-navn grille: #articlename {color: blue; tekst-Justering: center}. Nå vår overskrift vil ha fargen blå og sentrert.

Hver av de ovennevnte typer kan beskrives som "en enkel CSS-velgeren". De definerer formateringen for en bestemt parameter av html-dokument: sammen tilsvarende elementer (f.eks alle avsnittene av artikkelen), en klasse (for eksempel bare det første ledd) eller et bestemt element (for eksempel artikkelen tittel).

attributt velgere

I tillegg til ovennevnte, er det en CSS-velgere attributter - mer komplisert metode for applikasjons stiler. Den tillater HTML-format elementer på den valgte attributten eller verdi. Det finnes flere varianter av denne velgeren:

• ved tilstedeværelsen av den attributt;
• ved dens nøyaktige verdi;
• ved delvis attributtverdi;
• på sin bestemt verdi.

La oss se på hver av disse artene:

1. Det første tilfellet. Formateringen brukes, hvis den er tilstede i en bestemt egenskap HTML-kode (det kan være en p, div, øverste del, etc.). Hvis det ikke er det, bruker det en generisk for alle elementene i stil. For eksempel, for de elementer som har den i overskriften (verktøyspiss).
2. Det andre tilfellet. Stilen gjelder bare for html-elementer som har en eksakt match av attributtverdier. For eksempel, for å legge inn elementene, hvor verdien av den type som attributt lik sende.
3. Den tredje saken. Under formatet vil kun inkludere elementer i listen over verdier som har et bestemt ord. For eksempel Sidebar attributt "klasse" for elementer div.
4. Den fjerde saken. Stil er definert bare for de elementene i html-dokument, hvis spesielle egenskapen har en viss verdi, og begynner med ham. For eksempel, ved bruk av den angitte fargen til alle elementer som det engelske språk attributt (som kan være en, en-rus, en-AU og D. t.).

Således, ved å benytte den ene eller den annen, CSS velgeren, kan best angis som en hel web-side, og beskrive noen av dens elementer.