, die elk een specifieke kleur moeten krijgen. Hoe dit te doen? Standaard CSS-selectors op tags werken niet; ze geven parameters voor alle blokken tegelijk aan; De oplossing is eenvoudig. Wijs een klasse toe aan de elementen. De eerste div ontving bijvoorbeeld class=’red’, de tweede - class=’blue’, de derde - class=’green’. Nu kunnen ze worden geselecteerd met behulp van CSS-tabellen.

De syntaxis is als volgt: we geven een punt aan (“.”), waarna we de naam van de klasse schrijven. Om het eerste blok te besturen, gebruiken we de .red-constructie. De tweede is .blue enzovoort.

Belangrijk! Het wordt aanbevolen om duidelijke waarden te gebruiken voor het class-attribuut. Het wordt als een slechte vorm beschouwd om transliteratie (bijvoorbeeld krasiviy-blok) of willekeurige combinaties van letters/cijfers (ojfh834871) te gebruiken. Je zult zeker in de war raken door dergelijke code, om nog maar te zwijgen van de moeilijkheden waarmee degenen die na jou aan het project gaan werken, te maken zullen krijgen. De beste optie is om een ​​bepaalde methodologie te gebruiken, zoals BEM.

Voordelen: vrij hoge flexibiliteit.

Nadelen - meerdere elementen kunnen dezelfde klasse hebben, wat betekent dat ze tegelijkertijd worden bewerkt. Het probleem wordt opgelost door gebruik te maken van de methodologie en door preprocessors te erven. Zorg ervoor dat je Less, Sass of een andere preprocessor onder de knie hebt, ze zullen je werk enorm vereenvoudigen.

Selectie op ID

De meningen van lay-outontwerpers en programmeurs over deze optie zijn dubbelzinnig. Enkele studieboekenCSShelemaal niet aanbevolen om te gebruikenidentiteitskaart,omdat ze bij onzorgvuldig gebruik problemen met de erfenis kunnen veroorzaken. Veel experts plaatsen ze echter actief op de markeringen. Het is aan jou om te beslissen. De syntaxis is: hash-symbool ("# "), en vervolgens de bloknaam. Bijvoorbeeld,#rood.

Identiteitskaartverschilt op verschillende manieren van de klas. Ten eerste kunnen er niet twee identieke pagina's op een pagina staan.Identiteitskaart.Ze krijgen unieke namen toegewezen. Ten tweede heeft een dergelijke selector een hogere prioriteit. Dit betekent dat als je een blok een klasse geeftrooden geef dit aan in de tabellenCSSrood en wijs het vervolgens aan hem toeidd blauwen specificeer een blauwe kleur, het blok wordt blauw.

Voordelen - u kunt een specifiek element beheren zonder aandacht te besteden aan stijlen voor tags en klassen.

Nadelen - gemakkelijk in grote aantallen in de war te rakenIdentiteitskaartEnklas.

Belangrijk! Als u de BEM-methodologie (of zijn analogen) gebruikt,IdentiteitskaartOver het algemeen heb je het niet nodig. Deze lay-outtechniek omvat het gebruik van unieke klassen, wat veel handiger is.

Universele keuzeschakelaar

Syntaxis: asterisk (“*”) en accolades, d.w.z. *{}.

Wordt gebruikt om bepaalde attributen in één keer aan alle pagina-elementen toe te wijzen. Wanneer zou dit van pas kunnen komen? Als u bijvoorbeeld de pagina-eigenschap wilt instellendoosgrootte: randdoos.Kan niet alleen worden gebruikt om alle documentcomponenten te controleren, maar ook om alle onderliggende elementen van een bepaald blok te controleren, b.v.div *().

Voordelen - u kunt een groot aantal elementen tegelijkertijd beheren.

Nadelen - niet flexibel genoeg. Bovendien kan het gebruik van deze selector in sommige gevallen de pagina vertragen.

Op attributen

Hiermee kunt u een element met een specifiek attribuut beheren. U hebt bijvoorbeeld verschillende invoertags met verschillende typekenmerken. Een daarvan is tekst, de tweede is een wachtwoord, de derde is een nummer. Natuurlijk kun je aan elke klas klassen of ID's toewijzen, maar dit is niet altijd handig. CSS-attribuutselectors maken het mogelijk om waarden voor specifieke tags met maximale precisie op te geven. Bijvoorbeeld zoals dit:

invoer()

Deze attribuutselector selecteert alle ingangen met teksttype.

De tool is vrij flexibel; hij kan worden gebruikt met alle tags die mogelijk attributen hebben. Maar dat is niet alles! De CSS-specificatie maakt het mogelijk om elementen nog gemakkelijker te manipuleren!

Laten we ons voorstellen dat uw pagina een invoer heeft met het attribuut placeholder = “Voer een naam in” en input placeholder = “Voer een wachtwoord in.” Ze kunnen ook worden geselecteerd met de selector! Hiervoor wordt de volgende constructie gebruikt:

invoer() of invoer

Flexibeler werken met attributen is mogelijk. Stel dat u meerdere tags heeft met vergelijkbare titelkenmerken (bijvoorbeeld 'Caspian' en 'Caspian'). Om beide te selecteren, gebruikt u de volgende selectors:

CSS selecteert alle elementen waarvan de titel de tekens “Kaspiysk” bevat, d.w.z. zowel “Kaspiyskiy” als “Kaspiyskaya”.

U kunt ook tags selecteren waarvan de kenmerken met bepaalde tekens beginnen:

of eindig ermee:

{}.

Voordelen - maximale flexibiliteit. U kunt alle bestaande pagina-elementen selecteren zonder met klassen te rommelen.

Nadelen - het wordt relatief zelden gebruikt, alleen in specifieke gevallen. Veel lay-outontwerpers geven de voorkeur aan methodologieën, omdat het specificeren van een klasse eenvoudiger kan zijn dan het rangschikken van talrijke en gelijke tekens. Bovendien werken deze selectors niet in Internet Explorer 7 en lager. Maar wie heeft nu de oude Internet Explorer nodig?

Pseudo-klasse selectors

Een pseudoklasse geeft de toestand van een element aan. :hover is bijvoorbeeld wat er gebeurt met een deel van de pagina wanneer de cursor beweegt, en :visited is de bezochte link. Dit omvat ook elementen als:eerste-kind en:laatste-kind.

Dit type selector wordt actief gebruikt in de moderne lay-out, omdat je dankzij dit de pagina “live” kunt maken zonder JavaScript te gebruiken. U wilt er bijvoorbeeld zeker van zijn dat wanneer u de muisaanwijzer op een knop met de klasse btn plaatst, de kleur ervan verandert. Hiervoor gebruiken we de volgende constructie:

btn: hover (

Achtergrondkleur: rood;

Voor schoonheid kunt u de overgangseigenschap opgeven in de hoofdeigenschappen van deze knop, bijvoorbeeld op 0,5s - in dit geval wordt de knop niet onmiddellijk rood, maar gedurende een halve seconde.

Voordelen - ze worden actief gebruikt om pagina's "nieuw leven in te blazen". Gemakkelijk te gebruiken.

Nadelen - die zijn er niet. Dit is echt een handig hulpmiddel. Onervaren lay-outontwerpers kunnen echter in verwarring raken door de overvloed aan pseudo-klassen. Het probleem wordt opgelost door studie en praktijk.

Selectors voor pseudo-elementen

"Pseudo-elementen" zijn die delen van de pagina die niet aanwezig zijn in HTML, maar toch kunnen worden gemanipuleerd. Begrijp je niets? Alles is eenvoudiger dan het lijkt. U wilt bijvoorbeeld de eerste letter van een regel groot en rood maken, terwijl u de rest van de tekst klein en zwart laat. Natuurlijk kun je deze brief in een bepaalde klasse insluiten, maar dit is lang en saai. Het is veel eenvoudiger om de hele paragraaf te selecteren en het pseudo-element::first-letter te gebruiken. Hiermee kunt u het uiterlijk van de eerste letter bepalen.

Er zijn een vrij groot aantal pseudo-elementen. Het is onwaarschijnlijk dat het mogelijk zal zijn om ze in één artikel op te sommen. U kunt relevante informatie vinden in uw favoriete zoekmachine.

Voordelen - hiermee kunt u het uiterlijk van de pagina flexibel aanpassen.

Nadelen - beginners raken er vaak over in de war. Veel van dit type selectors werken alleen in bepaalde browsers.

Laten we het samenvatten

Een selector is een krachtig middel om de stroom van een document te controleren. Dankzij dit kun je absoluut elk onderdeel van de pagina selecteren (zelfs de onderdelen die alleen voorwaardelijk bestaan). Zorg ervoor dat u al uw opties leert, of schrijf ze op zijn minst op. Dit is vooral belangrijk als u complexe pagina's maakt met moderne ontwerpen en veel interactieve elementen.

• De taak die wordt uitgevoerd is het selecteren van alle elementen. Eigenlijk iedereen.
• De aanduiding is het asterisk-symbool - *.
• Gebruiksvoorbeeld:

Reset de opvulling naar de standaardwaarde voor alle elementen

Meer informatie over de universele selector

Geïntroduceerd in CSS-versie 2. Komt overeen met elk element in . Daarom worden de stijlen die zijn opgegeven voor de universele selector in één keer op alle elementen toegepast. Om deze reden raad ik je aan om het heel voorzichtig te gebruiken - het overerven van stijlen kan problemen veroorzaken. Of beter gezegd: gedrag dat nauwelijks voorspelbaar is (voor een onervaren codeur). We zullen dit punt in meer detail bespreken in het hoofdstuk over erfenis.

Een ander aspect van een universele selector is dat wanneer deze wordt gebruikt in combinatie met een andere selector (zoals een klasse-, identificatie- of attribuutselector) als onderdeel van een eenvoudige selector, deze ongestraft kan worden overgeslagen. Dit is ongeveer hetzelfde als zeggen in plaats van “Alle dromedarissen zijn dromedariskamelen”, simpelweg “dromedarissen zijn dromedariskamelen.” De betekenis is niet veranderd.

Voorbeeld:

*.error ( kleur: rood; ) .error ( kleur: rood; ) /* deze twee regels zijn gelijkwaardig. In het tweede geval ontbreekt de universele selector */

Toepassingsgebied

Eigenlijk is het het handigst om een ​​universele selector te gebruiken, zoals in het eerste voorbeeld, om de browserafhankelijke beginwaarden van stijlen (in het bijzonder inspringingen) opnieuw in te stellen.

Maar zelfs zo’n toepassing zal niet altijd een goed idee zijn. Vanwege de nadelen van de in het artikel beschreven universele selector is het beter om te gebruiken. Dat wil zeggen: gebruik typekiezers.

Zo benaderden we vlot het volgende onderwerp. Het lijkt erop dat we de universele selector hebben uitgezocht. Het is tijd om verder te gaan. Volgende halte -.

Soms moet u één stijl voor alle elementen van een webpagina tegelijkertijd instellen, bijvoorbeeld een lettertype of tekststijl. In dit geval zal een universele selector die overeenkomt met elk element van de webpagina helpen.

Het asterisk (*)-symbool wordt gebruikt om een ​​universele selector aan te duiden, en in het algemeen is de syntaxis als volgt.

* (Beschrijving van stijlregels)

IN In sommige gevallen is het niet nodig om een ​​universele selector op te geven. Dus bijvoorbeeld opnames*.class en .class zijn identiek in hun uitvoer.

IN Voorbeeld 1.50 toont een van de mogelijke toepassingen van een universele selector: het selecteren van het lettertype en de tekstgrootte voor alle documentelementen.

Voorbeeld 1.50. Met behulp van een universele selector

Sneeuwluipaard

Het sneeuwluipaard (irbis, ak-luipaard) is een groot roofzuchtig zoogdier uit de kattenfamilie. Hij leeft in de bergen van Afghanistan, Birma, Bhutan, India, Kazachstan, Kirgizië, China, Mongolië, Nepal, Pakistan, Rusland, Tadzjikistan en Oezbekistan. Het sneeuwluipaard onderscheidt zich door een dun, lang, flexibel lichaam, relatief korte benen, een kleine kop en een zeer lange staart.

De lengte van het sneeuwluipaard inclusief staart is 200-230 cm, gewicht tot 55 kg.

De vachtkleur is licht, rokerig grijs met ringvormige of effen donkere vlekken.

De sneeuwluipaard jaagt voornamelijk op berggeiten en schapen; zijn dieet omvat ook wilde zwijnen, fazanten en zelfs gophers. Vanwege de ontoegankelijkheid van het leefgebied van de soort worden sneeuwluipaarden nog steeds slecht bestudeerd. Volgens ruwe schattingen varieert hun aantal echter rond de 10.000 individuen. Sinds 2013 is de jacht op sneeuwluipaarden overal verboden.