Met Cascading Style Sheets (CSS) kunt u het uiterlijk van uw webpagina's veranderen. Van lettertypen en kleuren tot spatiëring en algehele lay-out, allerlei ontwerptools zijn binnen handbereik. Hoewel CSS in zijn geheel een gecompliceerde taal is, zijn er slechts twee basisconcepten die u moet begrijpen om te beginnen.
Het begint allemaal met het identificeren van welk deel van een pagina u precies wilt opmaken.
Een CSS-bestand bevat een reeks regels die beschrijven hoe een HTML-bestand moet worden opgemaakt. Elke regel bestaat uit twee delen: wat je moet stylen en hoe je het moet stylen. Het eerste deel wordt bestuurd met behulp van een reeks termen die bekend staan als 'selectors'.
Voorbeelden in dit artikel zijn stijldeclaraties, maar daar gaat het niet om: de selectors zelf wel.
Historisch gezien waren er drie CSS-selectorniveaus (of versies) met verschillende mate van browserondersteuning. Volgens Can I Use zijn deze in 2020 allemaal beschikbaar voor meer dan 99 procent van de gebruikers over de hele wereld.
Niveau 1 introduceerde de vier fundamentele soorten selectors die een groot aantal gevallen dekken, zelfs vandaag de dag.
| Patroon | Wedstrijden |
|---|---|
E |
alle E-elementen |
.c |
alle elementen met class="c" |
#myid |
het element met id="mijnid" |
E F |
een F-element in een E-element |
| Pseudo-lessen | |
E:link |
een hyperlink naar een pagina die nog niet eerder is bezocht |
E:visited |
een hyperlink naar een pagina die al is bezocht |
E:active |
een hyperlink die momenteel is geselecteerd |
| Pseudo-elementen | |
E::first-line |
de eerste opgemaakte regel van een E-element |
E::first-letter |
de eerste opgemaakte letter van een E-element |
De allereenvoudigste selector is de “type selector”. Het is gericht op alle instanties van een element, zoals een alinea of vetgedrukte tekst:
p { margin-bottom: 0; } b { font-family: sans-serif; }
Met het class-attribuut kan verdere semantiek worden toegevoegd aan een HTML-element, zoals een specifiek type alinea. Dergelijke elementen kunnen als volgt in CSS worden geselecteerd:
.intro { font-weight: bold; }
Deze selector zou overeenkomen met:
…
Maar merk op dat het ook zou overeenkomen met:
…Als je wilt dat het alleen van toepassing is op intro-paragrafen, kun je de typekiezer en de klassenkiezer combineren:
p.intro { font-weight: bold; }
Het HTML-id-attribuut moet uniek zijn binnen een document, bijvoorbeeld als u:
…
Dat zou het enige element moeten zijn met een 'content'-id. Met een ID-selector kunt u dat specifieke element in een document targeten:
#contents { color: #333; }
Strikt genomen een 'combinator', want bij deze selector draait alles om de ruimte tussen twee andere. HTML is hiërarchisch, zoals uitgelegd in ons overzicht van de DOM . Met een descendant selector kan een element worden geïdentificeerd door zijn context binnen een ander element:
table b { font-weight: normal; }
Pseudo-selectors richten zich op klassen of elementen die niet expliciet bestaan, maar toch beschikbaar worden gesteld. Zie ze als speciale inhoudsbonussen:
p::first-line { text-transform: uppercase; }
Gebruik een komma om selectors in een lijst te combineren als u op elk van hen dezelfde set regels wilt toepassen. In plaats van:
th { padding: 1em; } td { padding: 1em; }
Je kan schrijven:
th, td { padding: 1em; }
Een stylesheet is een reeks regels die een selector gebruiken om een element te matchen, maar wat gebeurt er als meer dan één regel overeenkomt met een bepaald element? Het resulterende gedrag wordt bepaald door "specificiteit" die definieert welke regel wordt gebruikt in een geval zoals:
p.intro { color: black; } p { color: gray; }
In dergelijke gevallen wordt de regel die voorrang heeft, als volgt bepaald door zijn specificiteit:
Bij het berekenen van specificiteit wordt elk niveau alleen in aanmerking genomen als twee selectors dezelfde score hebben op het hogere niveau, dus "#contents" is specifieker dan "article.news p.author.special" omdat het eerste "wint" op ID-selectors.
De volgende herziening van CSS-selectors introduceerde kenmerkselectors, breidde pseudo-klassen en pseudo-elementen uit en voegde twee nieuwe combinators toe.
| Patroon | Wedstrijden |
|---|---|
* |
elk element |
E > F |
een F element kind van een E element |
E + F |
een F-element onmiddellijk voorafgegaan door een E-element |
| Kenmerkkiezers | |
E[foo] |
een E-element met een "foo" -attribuut |
E[foo="bar"] |
een E-element waarvan het attribuut "foo" precies "bar" is |
E[foo~="bar"] |
een E-element waarvan het attribuut "foo" een lijst is met door spaties gescheiden waarden, waarvan er één "bar" is |
E[foo|="en"] |
een E-element waarvan het attribuut "foo" een door koppeltekens gescheiden lijst met waarden heeft die beginnen met "en" |
| Pseudo-lessen | |
E:first-child |
een E-element, eerste kind van zijn ouder |
E:lang(fr) |
een element van type E in taal "fr" |
| Pseudo-elementen | |
E::before |
gegenereerde inhoud vóór de inhoud van een E-element |
E::after |
gegenereerde inhoud na de inhoud van een E-element |
De "*" komt overeen met elk element. Het is niet vaak zo handig, maar als u bijvoorbeeld standaardmarges wilt resetten, kunt u dit doen:
* { margin: 0; }
Met kenmerkselectors kunnen stijlen zeer specifiek worden getarget, gefilterd op het kenmerk van een element:
a[title] { text-decoration: underline dotted; }
Vergelijkbaar met de afstammeling combinator, maar deze komt alleen overeen met directe kinderen, niet met afstammelingen lager in de boom. Bijvoorbeeld, "ul > li" komt hier alleen overeen met de tekst "Sectie 1", en niet met "Sectie 1.1":
Section 1
Section 1.1Section 1.2h1 + p { font-weight: bold; }
Deze selector is vaak handig voor het controleren van marges of een inleidende alinea zonder een specifieke klasse. Deze selector komt alleen overeen met één element als het onmiddellijk op een ander volgt. In het voorbeeld komt alleen de eerste alinea hier overeen, niet de tweede:
Contents
some extra text
Introductory paragraph
Following paragraph
Merk op dat deze selector alleen elementen in overweging neemt - niet tekst - bij het beslissen wat de volgende broer of zus is.
Sommige CSS-eigenschappen erven hun waarde van een voorouderelement. In de praktijk betekent dit bijvoorbeeld dat het instellen van het lettertype van het element "body" betekent dat elke alinea, tabel, enz. ook datzelfde lettertype gebruikt.
Dit is natuurlijk precies wat je zou verwachten, maar denk eens aan een eigenschap die niet erft: 'marge' bijvoorbeeld. U wilt niet dat elke afzonderlijke alinea of een stukje vetgedrukte tekst dezelfde marge heeft als het hele document.
Gerelateerd: Eenvoudige CSS-codevoorbeelden die u in 10 minuten kunt leren
Een goede vuistregel is om elementen zo algemeen te targeten als zinvol is - richt u niet op elk afzonderlijk element wanneer een eenvoudige 'body'-selector voldoende is.
Er zijn veel meer pseudo-klassen toegevoegd in dit niveau, naast enkele attributenkiezers en een nieuwe combinator.
| Patroon | Wedstrijden |
|---|---|
E ~ F |
een F-element voorafgegaan door een E-element |
| Kenmerkkiezers | |
E[foo^="bar"] |
een E-element waarvan het attribuut "foo" begint met de tekenreeks "bar" |
E[foo$="bar"] |
een E-element waarvan het attribuut "foo" eindigt met de tekenreeks "bar" |
E[foo*="bar"] |
een E-element waarvan het attribuut "foo" de substring "bar" bevat |
| Pseudo-lessen | |
E:root |
een E-element, root van het document |
E:nth-child(n) |
een E-element, het n-de kind van zijn ouder |
E:nth-last-child(n) |
een E-element, het n-de kind van zijn ouder, geteld vanaf de laatste |
E:nth-of-type(n) |
een E-element, de n-de broer of zus van zijn type |
E:nth-last-of-type(n) |
een E-element, de n-de broer of zus van zijn type, geteld vanaf de laatste |
E:last-child |
een E-element, laatste kind van zijn ouder |
E:first-of-type |
een E-element, eerste broer of zus in zijn soort |
E:last-of-type |
een E-element, laatste broer of zus in zijn type |
E:only-child |
een E-element, enig kind van zijn ouder |
E:only-of-type |
een E-element, enige broer of zus in zijn type |
E:empty |
een E-element dat geen kinderen heeft (inclusief tekstknooppunten) |
E:target |
een E-element dat het doelwit is van de verwijzende URI |
E:enabled |
een gebruikersinterface-element E dat is ingeschakeld |
E:disabled |
een gebruikersinterface-element E dat is uitgeschakeld |
E:checked |
een gebruikersinterface-element E dat is aangevinkt |
E:not(s) |
een E-element dat niet overeenkomt met eenvoudige selector s |
U kunt elementen selecteren met een attribuut dat begint met een gegeven waarde: a[href^="https:"], eindigt met een gegeven waarde: img[src$=".gif"], of een waarde bevat: a[*="value"].
Aanvullende pseudo-klassen zijn onder meer “:last-child”, “:empty” (om een element zonder inhoud aan te passen), en “:checked” dat overeenkomt met een element zoals invoer via een selectievakje, maar alleen als het is aangevinkt.
Net als de aangrenzende broer/zus-combinatie van niveau 2, komt deze overeen met elke broer of zus die na de andere komt, niet alleen de volgende:
h1 ~ p { font-size: 110%; }
Nu weet je zo ongeveer alles wat er te weten valt over het selecteren van een deel van een webpagina met behulp van CSS. U bent nu klaar om uw pagina's op te maken met de grote verscheidenheid aan CSS-eigenschappen die alles dekken, van kleuren tot lay-out.
Hoewel u een grafische rekenmachine op uw computer kunt gebruiken, kan de Python-programmeertaalinterpreter ook dienst doen als bureaurekenmachine. Het is zo'n populaire hardloopgrap in de Python-gemeenschap dat het wordt genoemd in de officiële tutorial. Hier leest u hoe u Python als rekenmachine kunt gebruiken.
Als programmeur moet je uitdagingen aangaan om te overleven en wonderen te bouwen op het gebied van ontwikkeling of programmeren. Als u dus een geavanceerde programmeertaal wilt leren om uw carrièrevaardigheden te verbeteren, is Java een van de beste vooruitzichten die er zijn.
Het leren van een nieuwe programmeertaal zoals Python wordt moeiteloos als je een uitgebreid stappenplan hebt waarin wordt beschreven welke concepten je als beginner moet leren en hoe je verder kunt komen om de volgende mijlpaal te bereiken. Zelfs gevorderde programmeurs zouden hun basis regelmatig moeten opfrissen om een solide basis voor zichzelf op te bouwen.
Tegenwoordig is het gebruikelijk om een website of app te bouwen die de gebruikersinterface aanpast, afhankelijk van de browser of het apparaat. Er zijn twee benaderingen om dit doel te bereiken. De eerste omvat het maken van verschillende versies van uw website of app voor verschillende apparaten. Maar het is inefficiënt en kan leiden tot onvoorspelbare fouten.
Werken met getallen is een integraal onderdeel van programmeren. Elke programmeertaal biedt ondersteuning om getallen op veel verschillende manieren te manipuleren. In dit artikel leert u hoe u het totale aantal cijfers in een geheel getal kunt vinden met behulp van iteratieve, op logs gebaseerde en op tekenreeksen gebaseerde benaderingen.
SQL versus NoSQL: wat is de beste database voor uw volgende project?
Het insluiten van services van derden in uw WordPress-berichten is een opwindende manier om de interesse van een bezoeker te wekken. Ingesloten inhoud biedt ook visuele aanwijzingen die het scannen gemakkelijker maken. WordPress heeft het toevoegen van dit soort inhoud eenvoudig gemaakt.
Node.js is een JavaScript-runtimeomgeving waarmee u JavaScript buiten webbrowsers kunt uitvoeren, waardoor het een populaire keuze is voor het ontwikkelen van allerlei soorten toepassingen. Een deel van zijn populariteit is te danken aan de overvloed aan NPM-pakketten die er zijn om de ontwikkelaarservaring te vergemakkelijken.
Solidity is de programmeertaal die wordt gebruikt door slimme contracten op de Ethereum-blockchain. Het is een statisch getypeerde, objectgeoriënteerde programmeertaal.
GitHub-badges kunnen de leesbaarheid van een repository vergroten door gebruikers een snelle manier te bieden om de repository-statistieken vast te leggen. Badges kunnen worden ingesloten in uw README.md om het belang en de noodzaak van uw project aan andere ontwikkelaars duidelijk te maken. Als gevolg hiervan krijgen lezers een heel snel idee van de repository door de bijgevoegde badges te controleren.
Internationale feestdagen zijn een leuke manier om erkenning te geven aan sociale zaken, historische dagen en respectieve carrières. International Programmers' Day viert de rol die programmeurs spelen om het dagelijks leven te verbeteren. De beschaafde wereld waarin we leven is een product van het harde werk van programmeurs.
Of het nu gaat om een databasequery of resultaten van wiskundige bewerkingen, de Python-tekenreeksindelingsmethode biedt een meer dynamische en aantrekkelijke manier om resultaten aan een gebruiker te presenteren.
Eerder dit jaar bracht Microsoft de preview-versie van Visual Studio 2022 uit in de wilde programmeerwereld. Dit is goed nieuws! Het is een extreem populaire IDE, maar aan een opknapbeurt of misschien zelfs een revisie toe, gezien het tempo van de veranderingen in het DevOps-ecosysteem waarin het gedijt.
Softwarestatistieken zijn metingen die worden gebruikt om verschillende aspecten van uw software te kwantificeren. Deze aspecten kunnen variëren van de kosten, kwaliteit en efficiëntie van het ontwikkelteam.
Als je een Python-ontwikkelaar bent, kun je enorm profiteren van de reeks beschikbare frameworks. Terwijl sommige kaders het meest geschikt zijn voor grote ecosystemen, zijn andere gespecialiseerd in het dienen van specifieke ontwikkelingsdoelen. Lees verder om de basisfuncties, het gebruik en de verschillen tussen twee Python-frameworks te leren: Flask en CherryPy.
Veel programmeurs houden ervan om lastige wiskundige problemen op te lossen met behulp van code. Het helpt de geest te scherpen en het probleemoplossend vermogen te verbeteren. In dit artikel leer je hoe je de kleinste en grootste n-cijferige perfecte vierkanten en kubussen kunt vinden met Python, C++ en JavaScript. Elk voorbeeld bevat ook voorbeelduitvoer voor verschillende waarden.
Het if-statement is de drijvende kracht achter logisch programmeren. Als gevolg hiervan is een beter begrip van Pythons een belangrijke toevoeging aan je Python-programmeervaardigheden.
Technologie is zonder twijfel de industrie van de toekomst. Als je een van de miljoenen jonge volwassenen bent die op het punt staan om in de eerste fase van je carrière te duiken, vraag je je misschien af wat je moet doen als je niet van coderen houdt.
U kunt een real-life project in Python niet met succes voltooien zonder een virtuele omgeving. Tools zoals virtualenvwrapper en virtualenv zijn gebruikelijk voor het maken en beheren van virtuele omgevingen voor webontwikkeling, terwijl anaconda veel wordt gebruikt door datawetenschappers.
Als u van plan bent een geweldige webpagina-indeling te maken, moet u weten over marges, randen, opvulling en inhoud. Elk element in webdesign, of het nu een afbeelding of tekst is, gebruikt een kader met deze eigenschappen. Je kunt eenvoudig complexe lay-outs bouwen door te spelen met het doosmodel. In dit artikel zullen we het CSS Box-model ontleden en laten zien hoe u deze eigenschappen kunt gebruiken met praktische voorbeelden.
Hoewel u een grafische rekenmachine op uw computer kunt gebruiken, kan de Python-programmeertaalinterpreter ook dienst doen als bureaurekenmachine. Het is zo'n populaire hardloopgrap in de Python-gemeenschap dat het wordt genoemd in de officiële tutorial. Hier leest u hoe u Python als rekenmachine kunt gebruiken.
Als programmeur moet je uitdagingen aangaan om te overleven en wonderen te bouwen op het gebied van ontwikkeling of programmeren. Als u dus een geavanceerde programmeertaal wilt leren om uw carrièrevaardigheden te verbeteren, is Java een van de beste vooruitzichten die er zijn.
Het leren van een nieuwe programmeertaal zoals Python wordt moeiteloos als je een uitgebreid stappenplan hebt waarin wordt beschreven welke concepten je als beginner moet leren en hoe je verder kunt komen om de volgende mijlpaal te bereiken. Zelfs gevorderde programmeurs zouden hun basis regelmatig moeten opfrissen om een solide basis voor zichzelf op te bouwen.
Tegenwoordig is het gebruikelijk om een website of app te bouwen die de gebruikersinterface aanpast, afhankelijk van de browser of het apparaat. Er zijn twee benaderingen om dit doel te bereiken. De eerste omvat het maken van verschillende versies van uw website of app voor verschillende apparaten. Maar het is inefficiënt en kan leiden tot onvoorspelbare fouten.
Werken met getallen is een integraal onderdeel van programmeren. Elke programmeertaal biedt ondersteuning om getallen op veel verschillende manieren te manipuleren. In dit artikel leert u hoe u het totale aantal cijfers in een geheel getal kunt vinden met behulp van iteratieve, op logs gebaseerde en op tekenreeksen gebaseerde benaderingen.
Containers zijn zeer nuttig voor softwareontwikkeling, implementatie en beheer in een virtuele omgeving. Docker is handig in het containerisatieproces, maar het is niet het enige platform dat er is. Als u op zoek bent naar alternatieven voor Docker, hoeft u niet verder te zoeken. Deze lijst toont enkele veelzijdige en efficiënte Docker-alternatieven die u in uw volgende project kunt gebruiken.
SQL versus NoSQL: wat is de beste database voor uw volgende project?
Het insluiten van services van derden in uw WordPress-berichten is een opwindende manier om de interesse van een bezoeker te wekken. Ingesloten inhoud biedt ook visuele aanwijzingen die het scannen gemakkelijker maken. WordPress heeft het toevoegen van dit soort inhoud eenvoudig gemaakt.
Node.js is een JavaScript-runtimeomgeving waarmee u JavaScript buiten webbrowsers kunt uitvoeren, waardoor het een populaire keuze is voor het ontwikkelen van allerlei soorten toepassingen. Een deel van zijn populariteit is te danken aan de overvloed aan NPM-pakketten die er zijn om de ontwikkelaarservaring te vergemakkelijken.
Solidity is de programmeertaal die wordt gebruikt door slimme contracten op de Ethereum-blockchain. Het is een statisch getypeerde, objectgeoriënteerde programmeertaal.
