Computers, Programmering
CSS, pseudo, pseudo: hover, kind, doel
Door het combineren van HTML en CSS, kunt u absoluut alle elementen van webpagina's te beheersen. Met stijlen kunt u eenvoudig het uiterlijk van een blok of lijn te veranderen. Vaak Coder moeten een meer complexe taak uit te voeren - om het uiterlijk van het element zelf is niet veranderen, als een afzonderlijk onderdeel of een bepaalde staat. In dit geval, om de hulp van pseudo CSS.
Pseudo-werken volgens hetzelfde principe als de reguliere lessen in de markup, maar fysiek zijn ze hier niet voor te stellen. Ze kunnen worden geselecteerd op basis van de elementen die niet in het document informatie, die niet zal kiezen de gebruikelijke selector. Hier is een eenvoudig voorbeeld: je hebt een rode knop, en je wilt als je de muisaanwijzer deze blauw werd. Theoretisch kan het in JavaScript worden uitgevoerd, maar waarom is het zo moeilijk? Veel handiger om een gebruik : hover CSS. Met zijn hulp kunt u een eenheid de parameters die wordt geactiveerd wanneer de muiscursor geven.
Lijst van CSS pseudo-classes worden regelmatig geactualiseerd. Misschien, terwijl u dit materiaal, een aantal nieuwe verschijnt lezen. Om te beginnen, overweeg dan degenen die verscheen in de CSS3 specificatie.
: Nde-of-type
Stel dat u een lijst waarin u wilt afwisselende kleuren, dat wil zeggen het gebruik, de eerste regel is bijvoorbeeld, geschreven in rode letters, en de tweede - .. Blauw, rood weer derde, vierde weer in blauw. Voorheen moest je nieuwe klassen te creëren. Lay-out van het verleden toegevoegd aan elk element op een klasse lijst, en vervolgens veranderde hun verschijning in de stylesheet. Het was niet al te comfortabel en vervuilende lay-out.
Nu is alles makkelijker. Gebruik CSS pseudo-klasse: n-of-type. Dit zal een gelegenheid om de gewenste visuele effect te krijgen, zonder iets te veranderen in de markup geven. Het principe is eenvoudig: u voert een selector, en tussen haakjes achter de naam te schrijven een formule of een zoekwoord dat de vereiste elementen te vinden. Bijvoorbeeld ,: n-of-type (even) zullen alle even elementen, en: n-of-type (oneven) - de oneven. Er zijn een groot aantal formules worden gebruikt om nauwkeurig te regelen. De haakjes geven het mogelijke aantal - in dit geval stijlen toe te passen op het element waarvan de index gelijk aan het nummer.
: Ne-kind
Deze CSS pseudo-class op het principe van de actie is vergelijkbaar met de vorige, maar in tegenstelling tot het werkt uitsluitend met kinderen van het geselecteerde item. Bijvoorbeeld, als je wilt om het te gebruiken om het uiterlijk van is de moedermaatschappij
Voor nauwkeurige regeling van de formule kan worden gebruikt. Ze zijn heel moeilijk voor een beginner, maar het is een beetje dieper in de syntax van hoe alles wordt makkelijker waard. De formules zijn als volgt: een + b, waarbij a - is een factor, en b - verschuiving. Indien bijvoorbeeld n haakjes geven de pseudo-selecteert alle onderliggende elementen (omdat het geen extra termen in de vorm van een gespecificeerd en b). Als de n + 2, alle elementen behalve het eerste specificeren (omdat de offset gelijk aan twee) worden geselecteerd. Het beste van alles, dit keer om te studeren in de praktijk. Experiment met het kind componenten en verschillende formules.
: Last-kind
Alles is eenvoudig. CSS kind pseudo-klassen worden gebruikt om een bepaald item te selecteren. Hiermee selecteert u het laatste kind van de ouder component. Wordt heel vaak gebruikt, bijvoorbeeld om de laatste rij van de tabel te selecteren of te verwijderen inspringen van het laatste blok om de overdracht naar de volgende regel te voorkomen.
: N-de-laatste-kind
Het werkingsprincipe lijkt op de eerder genoemde n-kind, maar werkt in de tegengestelde richting, dwz. E. Bij toepassing van elementen omhoog bewegen. Dit is handig als je nodig hebt om de laatste paar items te vinden.
Je zou kunnen denken dat deze pseudo-classes en pseudo-elementen CSS nutteloos, want je kunt krijgen dingen goed met conventionele klassen gedaan. Dit is niet zo. : N-kind ,: nth- laatste kind en hun analogen zijn erg handig bij het werken op grote projecten - bijvoorbeeld in gevallen waarin het blok heeft een groot aantal kinderen. Handmatig regelen klassen lang en hard.
Pseudo-state control
Wat gebeurt er als je nodig hebt om het uiterlijk van een element te veranderen in een bepaalde toestand? Deze zaak biedt CSS pseudo-klikken, aanwijzen en andere acts. Laten we ze in detail onderzoeken.
: Link
Deze pseudo CSS referenties, niet allemaal, maar alleen degenen die nog niet bezocht. In deze functie kunt u stijlen voor elementen , waarvoor de gebruiker is nog niet geslaagd te specificeren.
: visited
Een analoog van de voorgaande uitvoering, die alleen reeds bezochte links regelt. De combinatie van deze twee pseudo-klassen, kunt u het uiterlijk van -tags aan te passen precies zoals je nodig hebt. Merk echter op dat de staten worden berekend voor specifieke browsers en na de behandeling geschiedenis geloosd.
De pseudo-klasse: target CSS
Een van de meest interessante pseudo-klassen, die als het gebruikt wordt tot op zekere hoogte vervangt het gebruik van JavaScript. Het stelt controle die de identifier opgenomen in de rij adres van de pagina. Ja, de eerste keer is het moeilijk te begrijpen. Probeer het voorbeeld ontleden.
Laten we zeggen dat we op de pagina 3 blokken div met bepaalde id: id1, ID2, id3. We hebben ook drie links naar de bijbehorende waarden href: # id1, # id2, # id3. Wanneer u klikt op de eerste schakel in de rij adres van de pagina na de link naar de bijbehorende id zal de pagina zelf.
De CSS voor alle blokken div opgegeven eigenschap display: none, dat wil zeggen, zijn ze niet standaard weergegeven. We maken gebruik van target: div en geef het een eigenschap display: block. Nu, als u klikt op de links met bepaalde de href, blokken met de bijbehorende id zal worden toegewezen aan display: block, en daarom zullen ze beginnen op de pagina te verschijnen! Wanneer u klikt op de link naar href = http: // website / article / 319.683 /% E2% 80% 9D # id1% E2% 80% 9D zal blokkeren met id1, en ga zo maar door ..
Nog steeds niet begrijpen niets? Probeer om te experimenteren. Maak een pagina-indeling en stijlen zoals hierboven beschreven. Een paar minuten later heb je een grote figuur alles uit.
Pseudo die kan worden toegepast op elk element
De meeste van de hierboven beschreven pseudo-verbindingen die nodig zijn voor de baan. Echter, niet alle elementen nodig . Verschillende uitvoeringsvormen kunnen worden toegepast op elk deel van deze helemaal.
- : Actief wordt gebruikt om stijlelementen waarop de gebruiker klikt op de linker muisknop;
- : Hover - CSS voor elementen waarop de gebruiker de muisaanwijzer op;
- : Focus - voor die delen van de pagina, die nu in focus. Deze pseudo-class wordt vaak gebruikt om te werken met formulieren. Bijvoorbeeld, als u de prompt User Name te selecteren, wanneer de bezoeker zet de cursor over het en begint met het kiezen karakters.
Vergeet niet dat: actief alleen geldig op het moment van drukken. Onmiddellijk na de beëindiging van de linker muisknop wordt ingesteld met behulp van stijlen zal verdwijnen en het item zal worden weergegeven als het wordt standaard weergegeven. In de meeste gevallen wordt deze pseudo-klasse die wordt gebruikt om te werken met knoppen. U kunt instellen dat ze een groot aantal staten. Bijvoorbeeld, de standaard knop is blauw, hover - groen, persen - rood, etc ...
Uiteraard worden alleen pseudo-classes volledig ondersteund door moderne browsers. Bijvoorbeeld, in IE6 en 7 zullen niet in staat om de focus en de hover en actieve alleen te gebruiken voor naslagwerk in IE6. Hopelijk hoef je niet te werken met deze browsers, maar als je nog steeds ontstond nodig hebt, gebruik voorwaardelijke opmerkingen.
aanvullende pseudo
De bovenstaande lijst genoemde opties is nog niet alles. Alleen opgenomen elementen kan worden hersteld dankzij de moderne CSS (: ingeschakeld) of gewoon uitgesneden (: invalide), alleen schakelaars gemarkeerd checkbox en radio (: aangevinkt). Beschrijf kort nog een paar opties die u kunt gebruiken voor een meer grondige controle van de verschijning van de inhoud.
- : Enkel-kind - spoelt het mogelijk om de stijl toe te passen op het element dat is het enige kind element;
- : Lang - om te werken met de elementen die taal met de lang attribuut hebben gegeven;
- : Root - gebruikt voor het hoofdelement te selecteren. Dienovereenkomstig zijn dergelijke een HTML-tag is ;
- : Niet - een zeer krachtig instrument. Hiermee kunt u het gebruik van bepaalde stijlen van selectors te beperken. Hier is een voorbeeld: .Blue-color: niet (overspanning ). Een selector om een stijl toe te passen op alle elementen met de klas blauwe kleur, als ze niet .
Volledige lijst van de pseudo-classes kan niet worden uitgerekt op één pagina. De meeste web-ontwerpers gebruiken in de praktijk slechts een aantal van hen, de voorkeur aan de voorwaarde JavaScript beheren. Ja, het is handig, maar er zijn enkele momenten waar meer effectieve resultaten gemakkelijker zal worden bereikt, met de juiste pseudo.
Similar articles
Trending Now