leer CSS: De Complete Guide

we hebben een complete guide gemaakt om u te helpen CSS te leren, of u nu net begint met de basis of u wilt meer geavanceerde CSS verkennen.

CSS Selectors

dus u leerde de basis id, class, en descendant selectors-en dan noemde het een dag? Als dat zo is, mis je enorm veel flexibiliteit. Je bent het aan jezelf verplicht om deze geavanceerde CSS en CSS3 selectors naar het geheugen te committen.

basis Selectors

1., *

* { margin: 0; padding: 0;}

laten we de voor de hand liggende uit, voor de beginners, voordat we gaan naar de meer geavanceerde selectors.

het ster symbool zal zich richten op elk element op de pagina. Veel ontwikkelaars zullen deze truc gebruiken om de margins en paddinguit te schakelen. Hoewel dit zeker prima is voor snelle tests, adviseer ik je dit nooit in productiecode te gebruiken. Het voegt te veel gewicht op de browser, en is onnodig.

de * kan ook worden gebruikt met onderliggende selectors.,

#container * { border: 1px solid black;}

Dit zal zich richten op elk element dat een kind is van de #container div. Nogmaals, probeer deze techniek niet te gebruiken heel veel, als ooit.

2. #X

#container { width: 960px; margin: auto;}

het voorvoegsel van het hashsymbool naar een selector stelt ons in staat te targeten met id. Dit is gemakkelijk het meest voorkomende gebruik; wees echter voorzichtig bij het gebruik vanid selectors.,

vraag jezelf af: moet ik absoluut een id toepassen op dit element om het te richten?

id selectors zijn stijf en staan hergebruik niet toe. Probeer, indien mogelijk, eerst een tagnaam te gebruiken, een van de nieuwe HTML5 elementen, of zelfs een pseudo-klasse.

3. .X

.error { color: red;}

Dit is een class selector. Het verschil tussen ids en classes is dat u met deze laatste meerdere elementen kunt targeten., Gebruik classes wanneer u wilt dat uw styling wordt toegepast op een groep elementen. Als alternatief, gebruik ids om een naald in een hooiberg te vinden, en stijl alleen dat specifieke element.

4. X

a { color: red; }ul { margin-left: 0; }

Wat als u alle elementen op een pagina wilt targeten volgens hun type, in plaats van een id of classnaam? Houd het eenvoudig, en gebruik een type selector. Als u alle ongeordende lijsten wilt targeten, gebruik dan ul {}.,

Live Demo van basis Selectors

Combinator Selectors

5. X Y

li a { text-decoration: none;}

de volgende meest voorkomende selector is de descendant selector. Wanneer je specifieker moet zijn met je selectors, gebruik je deze. Wat als u bijvoorbeeld, in plaats van alle anker tags te targeten, alleen de ankers hoeft te targeten die zich in een ongeordende lijst bevinden? Dit is specifiek wanneer je een afstammeling selector zou gebruiken.

Pro-tip: als uw selector eruit ziet als X Y Z A B.error, doet u het verkeerd., Vraag jezelf altijd af of het absoluut noodzakelijk is om al dat gewicht toe te passen.

6. X + Y

ul + p { color: red;}

Dit wordt een aangrenzende selector genoemd. Het selecteert alleen het element dat onmiddellijk wordt voorafgegaan door het eerste element. In dit geval zal alleen de eerste alinea na elke ul rode tekst hebben.

7., X > Y

div#container > ul { border: 1px solid black;}

het verschil tussen de standaard X Y en X > Y is dat de laatste alleen directe kinderen selecteert. Overweeg bijvoorbeeld de volgende opmaak.

 <div> <ul> <li> List Item <ul> <li> Child </li> </ul> </li> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> </div>

een selector van #container > ul zal alleen gericht zijn op uls die directe kinderen zijn van div met een id of container., Het zal bijvoorbeeld niet gericht zijn op deul die een kind is van de eersteli.

daarom zijn er prestatievoordelen bij het gebruik van de child combinator. In feite, het is vooral aanbevolen bij het werken met JavaScript-gebaseerde CSS selector engines.

8. X ~ Y

ul ~ p { color: red;}

Deze combinator is vergelijkbaar met X + Y, maar is minder streng., Terwijl een aangrenzende selector (ul + p) alleen het eerste element selecteert dat onmiddellijk wordt voorafgegaan door de vorige selector, is deze meer gegeneraliseerd. Het zal, verwijzend naar ons voorbeeld hierboven, elke p elementen selecteren, zolang ze een ulvolgen.

Live Demo van Combinator Selectors

attribuut Selectors

9. X

a { color: green;}

aangeduid als een attributen selector, in ons voorbeeld hierboven, zal dit alleen de anker tags selecteren die een title attribuut hebben., Anker tags die niet zullen deze specifieke styling niet ontvangen. Maar wat als je specifieker moet zijn? Bekijk het volgende voorbeeld!

10. X

a { color: #83b348; /* Envato green */}

het fragment hierboven geeft de stijl van alle anker tags die linken naar https://code.tutsplus.com; ze krijgen onze groene kleur. Alle andere anker tags blijven onaangetast.

merk op dat we de waarde tussen aanhalingstekens stoppen. Vergeet niet om dit ook te doen bij het gebruik van een JavaScript CSS selector engine. Gebruik, indien mogelijk, altijd CSS3 selectors over Onofficiële methoden.,

Dit werkt goed, hoewel het een beetje stijf is. Wat als de link inderdaad direct naar Envato Tuts+, maar misschien is het pad code.tutsplus.com in plaats van de volledige URL? In die gevallen kunnen we een beetje van de reguliere expressies syntaxis gebruiken.

11. X

a { color: #83b348; /* Envato green */}

daar gaan we; dat is wat we nodig hebben. De ster geeft aan dat de voortgangswaarde ergens in de waarde van het attribuut moet staan. Op die manier dekt dit tutsplus.com, code.tutsplus.com, en zelfs webdesign.tutsplus.com.

Houd er rekening mee dat dit een brede verklaring is., Wat als de anker tag gekoppeld aan een niet-Envato site met de string tutsplus in de URL? Wanneer u specifieker moet zijn, gebruikt u ^ en $ om respectievelijk het begin en het einde van een tekenreeks te refereren.

12. X

a { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px;}

ooit afgevraagd hoe sommige websites in staat zijn om een klein pictogram te tonen naast de links die extern zijn? Ik weet zeker dat je deze eerder hebt gezien; ze zijn leuke herinneringen dat de link u naar een heel andere website zal leiden.

Dit is een makkie met het karaatsymbool., Het wordt het meest gebruikt in reguliere expressies om het begin van een string aan te duiden. Als we alle anker tags willen targeten die een href hebben die begint met http, kunnen we een selector gebruiken die vergelijkbaar is met het fragment hierboven.

merk op dat we niet zoeken naar ; dat is niet nodig, en houdt geen rekening met de URL ‘ s die beginnen met

nu, wat als we in plaats daarvan alle ankers willen stylen die linken naar bijvoorbeeld een foto?, In die gevallen, laten we zoeken naar het einde van de string.

13. X

a { color: red;}

opnieuw gebruiken we een symbool voor reguliere expressies, $, om naar het einde van een tekenreeks te verwijzen. In dit geval zoeken we naar alle ankers die linken naar een afbeelding—of op zijn minst een URL die eindigt op .jpg. Houd er rekening mee dat dit geen GIF-en PNG-afbeeldingen zal vastleggen.

14. X

a { color: red;}

hoe compenseren we alle verschillende afbeeldingstypen?, Nou, we zouden meerdere selectors kunnen maken, zoals:

a,a,a,a { color: red;}

maar dat is een pijn, en het is inefficiënt. Een andere mogelijke oplossing is om aangepaste attributen te gebruiken. Wat als we ons eigen data-filetype attribuut toevoegen aan elk anker dat naar een afbeelding linkt?

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

dan, met die haak op zijn plaats, kunnen we een standaard attributen selector gebruiken om alleen die ankers te targeten.

a { color: red;}

15. X

 a { color: red;}a { border: 1px solid black;}

Hier is een speciale die indruk zal maken op je vrienden. Niet veel mensen weten van deze truc., Het symbool tilde (~) staat ons toe om een attribuut te targeten dat een door spaties gescheiden lijst van waarden heeft.

samen met ons aangepaste attribuut van nummer 15 hierboven, kunnen we een data-info attribuut aanmaken, dat een door spaties gescheiden lijst kan ontvangen van alles wat we moeten noteren. In dit geval maken we nota van externe links en links naar afbeeldingen—alleen voor het voorbeeld.,

"<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

met die opmaak kunnen we nu alle tags die een van deze waarden hebben targeten, met behulp van de ~ attributen selector Truc.

behoorlijk handig, hè?

Live Demo van attribuut Selectors

Pseudo Selectors

16. X: bezocht en X: link

a:link { color: red; }a:visited { color: purple; }

we gebruiken de :link pseudo-klasse om alle anker-tags aan te pakken waarop nog moet worden geklikt.,

als alternatief hebben we ook de :visited pseudo klasse, die, zoals je zou verwachten, ons toestaat om specifieke styling toe te passen op alleen de anker tags op de pagina waarop is geklikt, of “bezocht”.

17. X: checked

input:checked { border: 1px solid black;}

deze pseudo—klasse richt zich alleen op een gebruikersinterface-element dat is aangevinkt-zoals een keuzerondje of een keuzevakje. Zo simpel is het.

18. X: na

zijn debefore enafter pseudo-klassen groot., Elke dag, zo lijkt het, vinden mensen nieuwe en creatieve manieren om ze effectief te gebruiken. Ze genereren gewoon inhoud rond het geselecteerde element.

velen werden voor het eerst geïntroduceerd in deze klassen toen ze de clear-fix hack tegenkwamen.

Deze hack gebruikt de:after pseudo-klasse om een spatie na het element toe te voegen en deze vervolgens te wissen. Het is een uitstekende truc om in je gereedschapstas te hebben, vooral in de gevallen waarin deoverflow: hidden; methode niet mogelijk is.

voor een ander creatief gebruik van dit, refereer je naar mijn snelle tip over het creëren van schaduwen.,

volgens de CSS3 Selectors specificatie, moet je technisch gebruik maken van de pseudo element syntaxis van twee dubbele punten ::. Echter, om compatibel te blijven, de user-agent zal accepteren een enkele dubbele punt gebruik ook.

19. X: beweeg

div:hover { background: #e3e3e3;}

Oh kom op. Deze ken je. De officiële term hiervoor is “user action pseudo class”. Het klinkt verwarrend, maar dat is het echt niet. wilt u een specifieke styling toepassen wanneer een gebruiker over een element zweeft? Dit zal de klus klaren!,

houd er rekening mee dat oudere versies van Internet Explorer niet reageren wanneer de :hover pseudo-klasse wordt toegepast op iets anders dan een anker-tag.

u zult deze selector het vaakst gebruiken wanneer u bijvoorbeeld een border-bottom toepast op anker tags, wanneer u eroverheen zweeft.

a:hover { border-bottom: 1px solid black;}

Pro-tip: border-bottom: 1px solid black; ziet er beter uit dan text-decoration: underline;.

20., X: not (selector)

div:not(#container) { color: blue;}

de pseudo-klasse van negatie is bijzonder nuttig. Laten we zeggen dat ik alle divs wil selecteren, behalve degene die een id heeft van container. Het fragment hierboven zal die taak perfect af te handelen.

of, als ik elk element wil selecteren (niet aangeraden) behalve voor alineatags, kunnen we het volgende doen:

*:not(p) { color: green;}

21., X:: pseudoElement

p::first-line { font-weight: bold; font-size: 1.2em;}

We kunnen pseudo-elementen (aangeduid door ::) gebruiken om fragmenten van een element op te maken, zoals de eerste regel of de eerste letter. Houd er rekening mee dat deze moeten worden toegepast op blokniveau elementen om van kracht te worden.,

een pseudo-element bestaat uit twee dubbele punten: ::

doel de eerste Letter van een alinea

p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px;}

dit fragment is een abstractie die alle alinea ‘ s op de pagina vindt en vervolgens alleen de eerste letter van dat element sub-target.

Dit wordt meestal gebruikt om een krantachtige styling te maken voor de eerste letter van een artikel.,

Target de eerste regel van een alinea

p::first-line { font-weight: bold; font-size: 1.2em;}

Op dezelfde manier zal het ::first-line pseudo-element, zoals verwacht, alleen de eerste regel van het element stylen.

“voor compatibiliteit met bestaande typogrammen moeten gebruikersagenten ook de vorige één-dubbele notatie accepteren voor pseudo-elementen die in CSS-niveaus 1 en 2 zijn geïntroduceerd (namelijk :first-line, :first-letter, :before en :after). Deze compatibiliteit is niet toegestaan voor de nieuwe pseudo-elementen die in deze specificatie zijn geïntroduceerd.,”- W3C Selectors Specs

Live Demo van Pseudo Selectors

Nth Child en Type Selectors

22. X: nth-child (n)

li:nth-child(3) { color: red;}

herinner je de dagen dat we geen manier hadden om specifieke elementen in een stack te targeten? Denth-child pseudo-klasse lost dat op!

merk op dat nth-child een geheel getal als parameter accepteert, maar dit is niet op nul gebaseerd. Als u het tweede lijstitem wilt targeten, gebruik dan li:nth-child(2).

we kunnen dit zelfs gebruiken om een variabele set kinderen te selecteren., We kunnen bijvoorbeeld li:nth-child(4n) doen om elk vierde lijstitem te selecteren.

23. X: nth-last-child(n)

li:nth-last-child(2) { color: red;}

Wat als u een enorme lijst met items had in een ul, en u alleen toegang nodig had tot bijvoorbeeld het derde tot laatste item? In plaats van li:nth-child(397) te gebruiken, kunt u de nth-last-child pseudo-klasse gebruiken.

deze techniek werkt bijna identiek aan Nummer 16 hierboven. Het verschil is dat het begint aan het einde van de collectie, en werkt zijn weg terug.

24., X: nth-of-type (n)

ul:nth-of-type(3) { border: 1px solid black;}

Er zullen momenten zijn waarop u, in plaats van een child te selecteren, in plaats daarvan moet selecteren volgens de type van het element.

stel markup voor die vijf ongeordende lijsten bevat. Als u alleen de derde ul wilt stylen en geen unieke id wilt gebruiken om in te haken, kunt u de nth-of-type(n) pseudo-klasse gebruiken. In het fragment hierboven heeft alleen de derde ul een rand eromheen.

25., X: nth-last-of-type(n)

ul:nth-last-of-type(3) { border: 1px solid black;}

en ja, om consistent te blijven, kunnen we ook nth-last-of-type gebruiken om aan het einde van de selectielijst te beginnen en terug te werken naar het gewenste element.

26. X: first-child

ul li:first-child { border-top: none;}

deze structurele pseudo klasse staat ons toe om alleen het eerste kind van de ouder van het element te targeten. U zult dit vaak gebruiken om randen van de eerste en laatste lijst items te verwijderen.

bijvoorbeeld, laten we zeggen dat je een lijst met rijen hebt, en elke rij heeft een border-top en een border-bottom., Nou, met die regeling, zal het eerste en laatste item in die set er een beetje vreemd uitzien.

veel ontwerpers passen klassen van first en last toe om dit te compenseren. In plaats daarvan kunt u deze pseudo-klassen gebruiken.

27. X: last-child

ul > li:last-child { color: green;}

het tegenovergestelde van first-child, last-child richt zich op het laatste item van de ouder van het element.

last-child Selector Example

laten we een eenvoudig voorbeeld bouwen om een mogelijk gebruik van deze klassen te demonstreren., We maken een lijst item.

 <ul> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul>

voor de opmaak is er niets bijzonders: gewoon een eenvoudige lijst.

Hier is de CSS:

deze opmaak zal een achtergrond instellen, de browser standaard padding verwijderen op de ul, en randen toepassen op elke li om een beetje diepte te geven.

om diepte aan uw lijsten toe te voegen, moet u een border-bottom toepassen op elke li die een tint of twee donkerder is dan de achtergrondkleur van li., Pas vervolgens een border-top toe, wat een paar tinten lichter is.

het enige probleem, zoals weergegeven in de afbeelding hierboven, is dat een rand zal worden toegepast op de boven—en onderkant van de ongeordende lijst-wat er vreemd uitziet. Laten we de :first-child en :last-child pseudo klassen gebruiken om dit op te lossen.

li:first-child { border-top: none;}li:last-child { border-bottom: none;}

daar gaan we; dat lost het op!

28., X: only-child

div p:only-child { color: red;}

eerlijk gezegd zult u waarschijnlijk niet merken dat u de only-child pseudo-klasse te vaak gebruikt. Toch is het beschikbaar, mocht u het nodig hebben.

Hiermee kunt u elementen targeten die de enige dochter van zijn ouder zijn. Bijvoorbeeld, refererend aan het fragment hierboven, wordt alleen de alinea die het enige kind is van de div rood gekleurd.

laten we de volgende opmaak aannemen.,

<div><p> My paragraph here. </p></div><div> <p> Two paragraphs total. </p> <p> Two paragraphs total. </p></div>

In dit geval zal de tweede div’s alinea’ s niet worden benaderd; alleen de eerste div. Zodra u meer dan één kind op een element toepast, stopt de pseudo-klasse only-child.

29. X: only-of-type

li:only-of-type { font-weight: bold;}

deze structurele pseudoklasse kan op een aantal slimme manieren worden gebruikt. Het zal zich richten op elementen die geen broers en zussen hebben in de ouder container. Als voorbeeld, laten we alle uls targeten die slechts één lijstitem hebben.,

vraag jezelf eerst af hoe je deze taak zou volbrengen. U kunt ul li doen, maar dit zou op alle lijstitems gericht zijn. De enige oplossing is only-of-typete gebruiken.

ul > li:only-of-type { font-weight: bold;}

30. X: first-of-type

met defirst-of-type pseudo-klasse kunt u de eerste broers en zussen van het type selecteren.

een Test

om dit beter te begrijpen, laten we een test doen. Kopieer de volgende opmaak naar uw code-editor:

<div> <p> My paragraph here. </p> <ul> <li> List Item 1 </li> <li> List Item 2 </li> </ul> <ul> <li> List Item 3 </li> <li> List Item 4 </li> </ul> </div>

Probeer nu, zonder verder te lezen, uit te zoeken hoe u alleen”List Item 2″ kunt richten., Als je het hebt uitgevogeld (of opgegeven), lees dan verder.

oplossing 1

Er zijn verschillende manieren om deze test op te lossen. We zullen er een paar bekijken. Laten we beginnen met first-of-type.

ul:first-of-type > li:nth-child(2) { font-weight: bold;}

dit fragment zegt in wezen, om de eerste ongeordende lijst op de pagina te vinden, zoek dan alleen de directe kinderen, die lijst items zijn. Filter dat vervolgens naar beneden naar alleen het tweede lijstitem in die set.

oplossing 2

een andere optie is om de aangrenzende selector te gebruiken.,

p + ul li:last-child { font-weight: bold;}

In dit scenario vinden we de ul die onmiddellijk de p tag voortbrengt, en dan vinden we het allerlaatste kind van het element.

Oplossing 3

We kunnen zo onaangenaam of zo speels zijn als we willen met deze selectors.

ul:first-of-type li:nth-last-child(1) { font-weight: bold; }

Deze keer pakken we de eerste ul op de pagina, en dan vinden we het allereerste lijstitem, maar vanaf de onderkant!,

Live Demo van Nth Child en Type Selectors

conclusie

Als u compenseert voor oudere browsers, zoals Internet Explorer 6, moet u nog steeds voorzichtig zijn bij het gebruik van deze nieuwere selectors. Maar laat dat je er niet van weerhouden om deze te leren. Je zou jezelf een slechte dienst bewijzen. Zorg ervoor dat u hier voor een browser-compatibiliteitslijst verwijzen. Als alternatief kun je Dean Edward ‘ s uitstekende IE9 gebruiken.js script om ondersteuning voor deze selectors naar oudere browsers te brengen.,

ten tweede, wanneer u werkt met JavaScript-bibliotheken, zoals de populaire jQuery, probeer dan altijd deze native CSS3-selectors te gebruiken over de aangepaste methoden/selectors van de bibliotheek, indien mogelijk. Het zal uw code sneller te maken, als de selector engine native parsing van de browser kan gebruiken, in plaats van zijn eigen.

Het is geweldig dat je tijd besteedt aan het leren van webdesign fundamentals, maar als je een snelle oplossing nodig hebt, kan een van onze kant-en-klare CSS-sjablonen een goede optie zijn. We hebben ook een paar premium CSS items voor u om te overwegen.,

• CSS3
  12 Elegante CSS Prijzen Tafels voor Uw nieuwe Web-Project
  Monty Shokeen
• Bootstrap 4
  18 Beste Bootstrap 4 Plugins
  Monty Shokeen

Gratis Toegang tot Envato Elementen voor 1 Maand

tot slot, hier is een speciale aanbieding om u te helpen bij het bouwen van professionele websites en apps. Naast het gebruik van deze CSS-selectors, waarom niet profiteren van hoogwaardige stockfoto ‘ s, videobeelden, premium lettertypen, afbeeldingen, illustraties, en meer?,

normaal gesproken moet je voor zulke bronnen betalen. Maar op dit moment, kunt u toegang krijgen tot miljoenen creatieve activa voor uw codering projecten voor een hele maand, volledig gratis. En wat meer is, krijg je onbeperkt downloads, zodat je kunt grijpen zo veel als je wilt tijdens die maand, en alleen betalen als je besluit om door te gaan!,

om gebruik te maken van deze aanbieding, klik op deze speciale aanmeldlink of voer de onderstaande code in op de registratiepagina:

elements_cont_tuts-freemonth1-4bwkbp

wacht niet te lang—de aanbieding is slechts geldig voor een beperkte tijd!