, som hver må gis en bestemt farge. Hvordan gjøre dette? Standard CSS velgere etter tagger er ikke egnet de indikerer parametere for alle blokker samtidig. Løsningen er enkel. Tilordne en klasse til elementene. For eksempel fikk den første div klasse=’rød’, den andre – klasse=’blå’, den tredje – klasse=’grønn’. Nå kan de velges ved hjelp av CSS-tabeller.

Syntaksen er som følger: vi angir et punktum (“.”), hvoretter vi skriver navnet på klassen. For å kontrollere den første blokken bruker vi .red-konstruksjonen. Den andre er .blue og så videre.

Viktig! Det anbefales å bruke klare verdier for klasseattributtet. Det anses som dårlig form å bruke en translit (for eksempel krasiviy-blok) eller tilfeldige kombinasjoner av bokstaver/tall (ojfh834871). Du vil definitivt bli forvirret i en slik kode, for ikke å nevne vanskelighetene som de som skal jobbe med prosjektet etter deg vil måtte møte. Det beste alternativet er å bruke noen metodikk, som BEM.

Fordeler: ganske høy fleksibilitet.

Ulemper - flere elementer kan ha samme klasse, noe som betyr at de vil bli redigert samtidig. Problemet løses ved å bruke metodikken, samt arve forprosessorer. Sørg for å mestre mindre, sass eller en annen forprosessor, de vil i stor grad forenkle arbeidet ditt.

Velger etter ID

Meningene til layoutdesignere og programmerere angående dette alternativet er tvetydige. Noen lærebøkerCSSanbefales ikke å bruke i det hele tattID,siden hvis de brukes uforsiktig kan de forårsake problemer med arv. Imidlertid plasserer mange eksperter dem aktivt gjennom markeringene. Det er opp til deg å bestemme. Syntaksen er: hash-symbol ("# "), deretter blokknavnet. For eksempel#rød.

IDskiller seg fra klassen på flere måter. For det første kan det ikke være to identiske på en side.ID.De tildeles unike navn. For det andre har en slik velger høyere prioritet. Dette betyr at hvis du gir en blokk en klasserødog angi i tabelleneCSSrød og deretter tilordne den til hamid blåog spesifiser en blå farge, blir blokken blå.

Fordeler - du kan kontrollere et spesifikt element uten å ta hensyn til stiler for tagger og klasser.

Ulemper - lett å bli forvirret i et stort antallIDOgklasse.

Viktig! Hvis du bruker BEM-metodikken (eller dens analoger),IDGenerelt trenger du det ikke. Denne layoutteknikken innebærer bruk av unike klasser, noe som er mye mer praktisk.

Universalvelger

Syntaks: stjerne ("*") og krøllete klammeparenteser, dvs. *{}.

Brukes til å tildele visse attributter til alle sideelementer samtidig. Når kan dette komme til nytte? For eksempel hvis du vil angi sideegenskapenboksstørrelse: border-box.Kan brukes ikke bare til å kontrollere alle komponenter i et dokument, men også til å kontrollere alle underordnede elementer i en bestemt blokk, f.eks.div *().

Fordeler - du kan administrere et stort antall elementer samtidig.

Ulemper - ikke fleksibel nok. I tillegg kan bruk av denne velgeren redusere hastigheten på siden i noen tilfeller.

Etter attributter

Lar deg administrere et element med et spesifikt attributt. Du har for eksempel flere inndatakoder med forskjellige typeattributter. En av dem er tekst, den andre er passord, den tredje er nummer. Selvfølgelig kan du tilordne klasser eller IDer til hver, men dette er ikke alltid praktisk. CSS-attributtvelgere gjør det mulig å spesifisere verdier for spesifikke tagger med maksimal presisjon. For eksempel slik:

input()

Denne attributtvelgeren vil velge alle innganger med typetekst.

Verktøyet er ganske fleksibelt det kan brukes med alle tagger som kan ha attributter. Men det er ikke alt! CSS-spesifikasjonen gjør det mulig å manipulere elementer enda mer praktisk!

La oss forestille oss at siden din har en inngang med attributtet plassholder = "Skriv inn et navn" og skriv inn plassholder = "Skriv inn et passord." De kan også velges ved hjelp av velgeren! Følgende konstruksjon brukes til dette:

input() eller input

Mer fleksibelt arbeid med attributter er mulig. La oss si at du har flere tagger med lignende tittelattributter (f.eks. "Caspian" og "Caspian"). For å velge begge, bruk følgende velgere:

CSS vil velge alle elementene hvis tittel inneholder karakterene "Kaspiysk", dvs. både "Kaspiyskiy" og "Kaspiyskaya".

Du kan også velge tagger hvis attributter begynner med bestemte tegn:

eller slutt med dem:

{}.

Fordeler - maksimal fleksibilitet. Du kan velge alle eksisterende sideelementer uten å fikle med klasser.

Ulemper - det brukes relativt sjelden, bare i spesifikke tilfeller. Mange layoutdesignere foretrekker metoder, siden det å spesifisere en klasse kan være enklere enn å arrangere mange og like-tegn. I tillegg fungerer ikke disse velgerne på Internett Explorer-versjoner 7 og under. Men hvem trenger gamle Internet Explorer nå?

Pseudoklassevelgere

En pseudoklasse angir tilstanden til et element. For eksempel er :hover det som skjer med en del av siden når markøren holdes, :visited er den besøkte lenken. Dette inkluderer også elementer som:førstebarn og:sistebarn.

Denne typen velger brukes aktivt i moderne layout, fordi takket være den kan du gjøre siden "live" uten JavaScript-applikasjoner. Du vil for eksempel være sikker på at når du holder musepekeren over en knapp med btn-klassen, endres fargen. For å gjøre dette bruker vi følgende konstruksjon:

btn:hover (

Bakgrunnsfarge: rød;

For skjønnhet kan du spesifisere overgangsegenskapen i hovedegenskapene til denne knappen, for eksempel ved 0,5 s - i dette tilfellet blir knappen ikke rød umiddelbart, men i et halvt sekund.

Fordeler - de brukes aktivt til å "gjenopplive" sider. Enkel å bruke.

Ulemper - det er ingen. Dette er et veldig praktisk verktøy. Imidlertid kan uerfarne layoutdesignere bli forvirret av overfloden av pseudo-klasser. Problemet løses ved studier og praksis.

Pseudoelementvelgere

"Pseudoelementer" er de delene av siden som ikke finnes i HTML, men som fortsatt kan manipuleres. Forstår ingenting? Alt er enklere enn det ser ut til. For eksempel vil du gjøre den første bokstaven i en linje stor og rød, mens resten av teksten er liten og svart. Selvfølgelig kan du legge ved dette brevet i et spenn med en bestemt klasse, men dette er langt og kjedelig. Det er mye lettere å velge hele avsnittet og bruke pseudo-elementet::first-letter. Den lar deg kontrollere utseendet til den første bokstaven.

Det er ganske stort antall pseudo-elementer. Det er usannsynlig at det vil være mulig å liste dem opp i én artikkel. Du kan finne relevant informasjon i din favoritt søkemotor.

Fordeler - tillate fleksibel tilpasning utseende sider.

Ulemper - nybegynnere blir ofte forvirret over dem. Mange velgere av denne typen fungerer bare i visse nettlesere.

La oss oppsummere det

Velger - kraftig verktøy dokumentflytkontroll. Takket være det kan du velge absolutt hver komponent på siden (selv de som kun eksisterer betinget). Sørg for å lære alle alternativene dine eller i det minste skriv dem ned. Dette er spesielt viktig hvis du lager komplekse sider med moderne design og mange interaktive elementer.

Innstillinger