CSS velgere. typer velgere

, som hver du vil angi en bestemt farge. Hvordan gjøre det? Standard CSS-velgere er ikke egnet for koder, som indikerer de parametre for alle blokker på en gang. Løsningen er enkel. Gi klassemedlemmer. For eksempel, den første fikk div class = 'rød', andre - class = 'blå', tredje - class = 'grønne'. Nå kan de bli valgt ved hjelp av CSS tabeller.

Syntaksen er som følger: Angir et punkt ( ""), etterfulgt av å skrive navnet på klassen. For å administrere den første enheten, bruker byggingen .red. Second - .Blue og så videre.

Viktig! Det anbefales å bruke meningsfulle verdier av klassen attributtet. Det anses som dårlig å bruke translitterasjon (f.eks krasiviy-blok) eller tilfeldige kombinasjoner av bokstaver / tall (ojfh834871). I denne koden, er du nødt til å bli forvirret, for ikke å nevne de vanskelighetene som vil møte de som vil bli engasjert i prosjektet etter deg. Det beste alternativet - å bruke noen metode, for eksempel BEM.

Fordeler - relativt høy fleksibilitet.

Ulemper - de flere elementer kan være en og samme klasse, hvilket betyr at de vil bli redigert samtidig. Problemet er løst ved hjelp av metoden samt arv preprocessors. Sørg for å få hendene mindre, sass eller annen preprosessor, de i stor grad forenkle arbeidet.

ID-velgeren

Om denne versjonen menings programmerere og programmerere er tvetydig. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Noen CSS tutorials anbefaler ikke bruk av ID, fordi i unøyaktige søknad kan de forårsake problemer med arv. Men mange eksperter er aktivt arrangere dem i hele oppsettet. Du bestemmer. # »), затем имя блока. Syntaksen er som følger: nummertegn ( "#"), deretter navnet på blokken. #red. For eksempel, #Red.

отличается от класса по нескольким параметрам. ID er forskjellig fra klassen på flere måter. ID. For det første kan ikke siden to identiske ID. De er tildelt et unikt navn. For det andre har slik en velger en høyere prioritet. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. Dette betyr at hvis du angir en enhet klasse rødt og spesifisere i CSS tabeller rød bakgrunnsfarge, og deretter tilordne til det samme id blå og angi fargen blå, vil enheten bli blått.

Fordeler - du kan styre bestemt element, ignorerer stiler av koder og klasser.

ID и class. Ulemper - lett å gå seg vill i et stort antall ID og klasse.

Viktig! ID вам, в общем-то, не нужны. Hvis du bruker BEM metodikk (eller dets analoger), ID til deg, generelt, ikke er nødvendig. Denne teknikken innebærer bruk av layout unike klasser som mye mer praktisk.

universell velgeren

{}. Syntax: Starlets tegn ( "*") og bukseseler, dvs. {*} ...

Brukes til å tildele visse egenskaper når alle elementer på siden. Når dette kan være nyttig? box-sizing: border-box. For eksempel, hvis du ønsker å angi side eiendom box-sizing: border-box. div *{}. Kan ikke bare brukes til å administrere alle komponentene av dokumentet, men også til å kontrollere alle barn i den spesifiserte blokken, for eksempel, div * {}.

Fordeler - du kan styre et stort antall elementer på en gang.

Cons - ikke nok fleksibelt alternativ. I tillegg er bruken av denne velgeren, i noen tilfeller forsinke siden arbeidet.

av attributter

Gjør det mulig å kontrollere elementet med en bestemt egenskap. For eksempel, har du en rekke innspill tags med en annen egenskap type. En av dem - tekst, den andre - passord, den tredje - nummer. Selvfølgelig kan du sette hver klasse eller ID, men det er ikke alltid praktisk. CSS velgere attributter gjør det mulig å angi verdier for visse koder med maksimal presisjon. For eksempel slik:

inngangs [type = 'text'] {}

Denne velgeren vil velge alle attributter med den type skrive inn tekst.

Verktøyet er ganske fleksibel og kan brukes sammen med hvilken som helst av koder, i hvilke der kan være attributter. Men det er ikke alt! CSS-spesifikasjonen har evnen til å kontrollere elementene med enda mer komfort!

Tenk deg at siden din har inngang med attributtet plassholder = "Skriv inn et navn" og innspill plassholder = "Skriv inn passord". De kan også velges med velger! For å gjøre dette, bruker du følgende struktur:

inngangs [plassholder = "Skriv inn navn"] {} eller inngangs [plassholder = "Skriv inn passord"]

Kanskje mer fleksibel arbeid med attributter. La oss si at du har en rekke tagger med lignende egenskaper tittel (for eksempel "Caspian" og "Caspian"). For å velge begge deler, bruker du følgende valg:

[Tittel * = "Kaspijsk"]

CSS vil velge alle elementene i tittelen som det er symboler på "Caspian", altså. E., og "Caspian" og "Caspian".

Du kan også velge koder som begynner med en viss karakter attributter:

[Title ^ = "tegnet du vil"] {}

eller avslutte dem:

[Title $ = "riktige tegn"] {}.

Fordeler - maksimal fleksibilitet. Du kan velge alle eksisterende sideelementer uten å rote med klassene.

Ulemper - brukes relativt sjelden, kun i spesielle tilfeller. Mange webdesignere foretrekker å metodikk, da punktet klassen er enklere enn å arrangere en rekke klammer og tegn "lik". I tillegg har disse velgerne ikke fungerer i Internet Explorer versjon 7 og under. Men hvem er nå trenger den gamle Internet Explorer?

pseudo-klassen velgere

Betegner en pseudo-status element. For eksempel ,: hover - hva skjer med den delen av siden når du holder ,: besøkt - det besøkte link. Det inkluderer også elementer som: first-barnet og: siste barn.

Denne typen velgeren brukes aktivt i moderne layout, fordi takket være den kan du lage en side "live" uten bruk av Javascript. For eksempel, du vil være sikker på at når du holder markøren over knappen med klassen av btn fargen endres. For å gjøre dette, bruker vi følgende struktur:

.btn: hover {

background-color: red;

}

Skjønnhet kan være spesifisert i de grunnleggende egenskapene til knappen, overgangen eiendom, for eksempel, 0.5s - i dette tilfellet, knappen vil ikke rødme umiddelbart, og i løpet av et halvt sekund.

Dyder - er mye brukt for "vekkelse" sider. Enkel å bruke.

Ulemper - de er ikke. Dette er et veldig nyttig verktøy. Imidlertid kan uerfarne webdesignere gå seg vill i overflod av pseudo-klasser. Problemet er løst studier og praksis.

pseudo-velgere

"Pseudo" - dette er de delene av siden som ikke er i HTML, men de kan fortsatt bli håndtert. Du ikke forstår? Det er mye enklere enn det ser ut. For eksempel, du ønsker å gjøre den første bokstaven i strengen stor og rød, mens den andre liten og svart tekst. Selvfølgelig kan det konkluderes med at brevet i en periode med en viss klasse, men det er lang og kjedelig. Det er mye lettere å velge hele avsnittet og bruker pseudo :: first-letter. Det gir mulighet til å styre utseendet på den første bokstaven.

Det er ganske stort antall pseudo-elementer. Dem opp i en enkelt artikkel er usannsynlig å lykkes. Du kan finne relevant informasjon i din favoritt søkemotor.

Fordeler - gir fleksibilitet til å tilpasse utseendet på siden.

Ulemper - nye for dem er ofte forvirret. Mange valg av denne type arbeid bare i enkelte nettlesere.

For å oppsummere

Selector - et kraftig verktøy for dokumentflyt kontroll. Takket være ham, kan du velge hver enkelt komponent på siden (det er enda bare delvis). Sørg for å lære alle de tilgjengelige alternativene, eller selv skrive dem ned. Dette er spesielt viktig hvis du lage komplekse sider med et moderne design og mange interaktive elementer.