Het essentiële cheatsheet voor CSS3-eigenschappen
Advertentie Cascading Style Sheets of CSS bepalen het uiterlijk van het web zoals we het kennen. Terwijl HTML en JavaScript zich richten op de functionele kant van het web, houdt CSS zich bezig met de visuele aspecten ervan. Hulp nodig bij het navigeren door de wereld die CSS3 is? Download vandaag nog onze "Essentiële Cheatsheet CSS3-eigenschappen"!
Advertentie
Cascading Style Sheets of CSS bepalen het uiterlijk van het web zoals we het kennen. Terwijl HTML en JavaScript zich richten op de functionele kant van het web, houdt CSS zich bezig met de visuele aspecten ervan.
Hulp nodig bij het navigeren door de wereld die CSS3 is? Download vandaag nog onze "Essentiële Cheatsheet CSS3-eigenschappen"!Nadat je hebt geleerd hoe je statische webpagina's met HTML kunt bouwen, is het tijd om te ontdekken hoe je ze kunt stijlen en presenteerbaar kunt maken met CSS. En ons onderstaande cheatsheet voor CSS3-eigenschappen kan u daarbij helpen! Het behandelt de essentiële syntaxis waarover u moet weten in CSS3, de nieuwste versie van CSS.
Een praktische kennis van CSS helpt u om kleuren, lettertypen, randen, achtergronden, lay-outs en nog veel meer op webpagina's op een gestroomlijnde manier aan te passen. Bovendien komt het goed van pas bij het ontwerpen van web- en mobiele applicaties.
GRATIS DOWNLOAD: dit spiekbriefje is beschikbaar als downloadbare PDF van onze distributiepartner, TradePub. U moet een kort formulier invullen om het voor de eerste keer te openen. Download Essentiële Cheatsheet voor CSS3-eigenschappen.
Het essentiële cheatsheet voor CSS3-eigenschappen
| kortere weg | Actie |
|---|---|
| Achtergrond eigenschappen | |
| achtergrond | Definieert een verscheidenheid aan achtergrondeigenschappen binnen één aangifte. |
| background-attachment | Geeft aan of de achtergrondafbeelding vast is of met de webpagina schuift. |
| Achtergrond kleur | Definieert de achtergrondkleur van een element op de webpagina. |
| achtergrond afbeelding | Definieert de achtergrondafbeelding van een element. |
| background-clip | Specificeert hoe ver de achtergrondafbeeldingen of kleur zich uitstrekt voor een element. |
| background-oorsprong | Specificeert het positioneringsgebied van de achtergrondafbeeldingen. |
| background-position | Definieert de oorsprong van een achtergrondafbeelding. |
| achtergrond herhaling | Specificeert hoe de achtergrondafbeelding wordt betegeld. |
| background-size | Specificeert de grootte van de achtergrondafbeeldingen. |
| Rand eigenschappen | |
| grens | Stelt de randbreedte, stijl en kleur in voor alle vier de zijden van een element. |
| border-bottom | Stelt de breedte, stijl en kleur in voor de onderrand van een element. |
| border-bottom-color | Stelt de kleur van de onderste rand van een element in. |
| border-bottom-left-radius | Bepaalt de vorm van de linkeronderhoek van een element. |
| border-bottom-rechts-radius | Bepaalt de vorm van de rechteronderhoek van een element. |
| border-bottom-stijl | Stelt de stijl van de onderste rand van een element in. |
| border-bottom-width | Stelt de breedte van de onderste rand van een element in. |
| rand kleur | Stelt de kleur van de rand in op alle vier de zijden van een element. |
| border-image | Geeft aan hoe een afbeelding moet worden gebruikt in plaats van de randstijlen. |
| border-image-begin | Specificeert de hoeveelheid waarmee het grensbeeldgebied zich buiten het kader van de rand uitstrekt. |
| border-image-repeat | Specificeert hoe de randafbeelding wordt betegeld. |
| border-image-slice | Hiermee geeft u de binnenwaartse verschuivingen van de afbeeldingsrand op. |
| border-image-source | Hiermee geeft u de locatie op van de afbeelding die als rand moet worden gebruikt. |
| border-image-width | Specificeert de breedte van de afbeeldingsrand. |
| -Border links | Stelt de breedte, stijl en kleur in van de linkerrand van een element. |
| -Border left-color | Stelt de kleur in van de linkerrand van een element. |
| -Border left-style | Stelt de stijl van de linkerrand van een element in. |
| -Border left-width | Stelt de breedte van de linkerrand van een element in. |
| border-radius | Bepaalt de vorm van de randhoeken van een element. |
| border-rechts | Stelt de breedte, stijl en kleur in van de rechterrand van een element. |
| border-rechts-color | Stelt de kleur van de rechterrand van een element in. |
| border-right-style | Stelt de stijl van de rechterrand van een element in. |
| border-right-width | Stelt de breedte van de rechterrand van een element in. |
| border-style | Stelt de stijl van de rand in op alle vier de zijden van een element. |
| border-top | Stelt de breedte, stijl en kleur van de bovenrand van een element in. |
| border-top-color | Stelt de kleur van de bovenrand van een element in. |
| border-top-left-radius | Bepaalt de vorm van de linkerbovenhoek van een element. |
| border-top-right-radius | Bepaalt de vorm van de rechterbovenhoek van een element. |
| border-top-style | Stelt de stijl van de bovenrand van een element in. |
| border-top-width | Stelt de breedte van de bovenrand van een element in. |
| grensbreedte | Stelt de breedte van de rand in op alle vier de zijden van een element. |
| Kleureigenschappen | |
| kleur | Definieert en stelt de kleur in voor tekst. |
| ondoorzichtigheid | Definieert de transparantie van een element. |
| Dimensie eigenschappen | |
| hoogte | Bepaalt de hoogte van een element. |
| maximale hoogte | Bepaalt de maximale hoogte van een element. |
| Maximale wijdte | Bepaalt de maximale breedte van een element. |
| min-height | Bepaalt de minimale hoogte van een element. |
| min-width | Bepaalt de minimale breedte van een element. |
| breedte | Geef de breedte van een element op. |
| Gegenereerde inhoudseigenschappen | |
| inhoud | Voegt gegenereerde inhoud in. |
| citaten | Specificeert aanhalingstekens voor ingesloten offertes. |
| contra-reset | Maakt een of meer tellers of reset deze. |
| contra-increment | Verhoogt een of meer tellerwaarden. |
| Flexibele boxindeling | |
| uitlijnen-inhoud | Specificeert de uitlijning van artikelen van flexibele containers. |
| uitlijnen-items | Hiermee geeft u de standaarduitlijning voor items op. |
| uitlijnen-zelf | Specificeert de uitlijning voor geselecteerde items. |
| buigen | Specificeert de componenten met een flexibele lengte. |
| flex-basis | Specificeert de initiële hoofdgrootte van het flexitem. |
| flex-richting | Specificeert de richting van de flexibele items. |
| flex-flow | Een steno-eigenschap voor de flex-richting en de flex-wrap eigenschappen. |
| flex-grow | Geeft aan hoe het flexitem zal groeien ten opzichte van de andere items in de flexcontainer. |
| flex-krimpen | Geeft aan hoe het flexitem zal krimpen ten opzichte van de andere items in de flexcontainer. |
| flex-wrap | Geeft aan of de flexibele items al dan niet moeten worden ingepakt. |
| rechtvaardigen-inhoud | Geeft aan hoe flexitems worden uitgelijnd langs de hoofdas van de flexcontainer nadat flexibele lengtes en automatische marges zijn opgelost. |
| bestellen | Hiermee geeft u de volgorde op waarin een flexitem wordt weergegeven en opgemaakt in een flexcontainer. |
| Eigenschappen lettertype | |
| doopvont | Definieert een verscheidenheid aan lettertype-eigenschappen binnen één verklaring, zoals de letterstijl, lettertype-variant, lettergewicht, lettergrootte / lijnhoogte en de lettertypefamilie. |
| font-family | Definieert een lijst met lettertypen voor het element. |
| lettertypegrootte | Definieert de lettergrootte voor de tekst. |
| font-size-aan te passen | Behoudt de leesbaarheid van tekst wanneer het lettertype terugvalt. |
| font-stretch | Selecteert een normaal, gecondenseerd of uitgebreid gezicht uit een lettertype. |
| lettertype | Definieert de lettertypestijl voor de tekst. |
| tekenvariabele | Specificeert de lettertypevariant. |
| lettertype dikte | Specificeert het lettertype van de tekst. |
| Lijst eigenschappen | |
| list-style | Definieert de weergavestijl voor een lijst en lijstelementen. |
| list-style-image | Geeft de afbeelding aan die moet worden gebruikt als een lijstitemmarkering. |
| list-style-position | Specificeert de positie van de lijstitemmarkering. |
| list-style-type | Specificeert de markeringsstijl voor een lijstitem. |
| Marge-eigenschappen | |
| marge | Stelt de marge in op alle vier de zijden van het element. |
| margin-bottom | Stelt de ondermarge van het element in. |
| -Marge | Stelt de linkermarge van het element in. |
| margin-right | Stelt de rechtermarge van het element in. |
| margin-top | Stelt de bovenmarge van het element in. |
| Lay-outeigenschappen met meerdere kolommen | |
| column-count | Specificeert het aantal kolommen in een element met meerdere kolommen. |
| kolom-fill | Geeft aan hoe kolommen worden gevuld. |
| kolom-gap | Specificeert de kloof tussen de kolommen in een element met meerdere kolommen. |
| kolom-regel | Geeft een rechte lijn of "regel" aan die tussen elke kolom in een element met meerdere kolommen moet worden getekend. |
| kolom-rule-color | Hiermee geeft u de kleur op van de regels die tussen kolommen worden getekend in een lay-out met meerdere kolommen. |
| kolom-rule-stijl | Hiermee geeft u de stijl op van de regel die tussen de kolommen wordt getekend in een lay-out met meerdere kolommen. |
| kolom-rule-width | Specificeert de breedte van de regel die tussen de kolommen wordt getekend in een lay-out met meerdere kolommen. |
| kolom overspanningen | Geeft aan hoeveel kolommen een element overspant in een lay-out met meerdere kolommen. |
| kolombreedte | Specificeert de optimale breedte van de kolommen in een element met meerdere kolommen. |
| kolommen | Een steno-eigenschap voor het instellen van kolombreedte- en kolomtellingeigenschappen. |
| column-count | Specificeert het aantal kolommen in een element met meerdere kolommen. |
| Overzicht eigenschappen | |
| schets | Stelt de breedte, stijl en kleur in voor alle vier de zijden van de omtrek van een element. |
| outline-color | Stelt de kleur van de omtrek in. |
| outline-offset | Stel de ruimte tussen een omtrek en de rand van een element in. |
| outline-style | Stelt een stijl in voor een omtrek. |
| outline-width | Stelt de breedte van de omtrek in. |
| Opvullingseigenschappen | |
| vulling | Stelt de opvulling in op alle vier de zijden van het element. |
| padding-bottom | Hiermee stelt u de opvulling in op de onderkant van een element. |
| -Padding left | Hiermee stelt u de opvulling in aan de linkerkant van een element. |
| padding-rechts | Stelt de opvulling in aan de rechterkant van een element. |
| padding-top | Hiermee stelt u de opvulling in op de bovenkant van een element. |
| Afdrukeigenschappen | |
| page-break-after | Voegt een pagina-einde in na een element. |
| page-break-before | Voegt een pagina-einde in vóór een element. |
| page-break-inside | Voegt een pagina-einde in een element in. |
| Tabeleigenschappen | |
| border-collapse | Geeft aan of tabelcelranden zijn verbonden of gescheiden. |
| border-spacing | Stelt de afstand tussen de randen van aangrenzende tabelcellen in. |
| bijschrift-side | Specificeert de positie van het bijschrift van de tabel. |
| lege-cellen | Toont of verbergt randen en achtergronden van lege tabelcellen. |
| table-layout | Hiermee geeft u een algoritme voor de tabelindeling op. |
| border-collapse | Geeft aan of tabelcelranden zijn verbonden of gescheiden. |
| Teksteigenschappen | |
| richting | Bepaalt de tekstrichting / schrijfrichting. |
| tab-size | Specificeert de lengte van het tabteken. |
| text-align | Stelt de horizontale uitlijning van inline content in. |
| text-align-last | Geeft aan hoe de laatste regel van een blok of een regel vlak voor een geforceerde regeleinde wordt uitgelijnd wanneer tekstuitlijning gerechtvaardigd is. |
| text-decoration | Specificeert de decoratie die aan tekst is toegevoegd. |
| text-decoration-color | Specificeert de kleur van de tekst-decoratieregel. |
| text-decoration-lijn | Geeft aan wat voor soort lijndecoraties aan het element worden toegevoegd. |
| text-decoration-stijl | Hiermee geeft u de stijl op van de lijnen die zijn opgegeven door de eigenschap text-decoration-line |
| tekst streepje | Laat de eerste regel tekst inspringen. |
| text-rechtvaardigen | Geeft de rechtvaardigingsmethode aan die moet worden gebruikt wanneer de eigenschap text-align is ingesteld om te rechtvaardigen. |
| text-overflow | Hiermee geeft u op hoe de tekstinhoud wordt weergegeven wanneer de blokcontainers overlopen. |
| schaduw tekst | Past een of meer schaduwen toe op de tekstinhoud van een element. |
| text-transform | Transformeert het hoofdlettergebruik van de tekst. |
| lijnhoogte | Stelt de hoogte tussen tekstregels in. |
| vertical-align | Stelt de verticale positionering van een element in ten opzichte van de huidige tekstbasislijn. |
| letterafstand | Stelt de extra spatie tussen letters in. |
| word-spacing | Stelt de afstand tussen woorden in. |
| witte ruimte | Hiermee geeft u op hoe witruimte in het element wordt verwerkt. |
| word-break | Geeft aan hoe lijnen in woorden worden gebroken. |
| word-wrap | Geeft aan of woorden moeten worden afgebroken wanneer de inhoud de grenzen van de container overschrijdt. |
| Transformeer eigenschappen | |
| achtervlak-zichtbaarheid | Geeft aan of de "achterkant" van een getransformeerd element zichtbaar is wanneer deze tegenover de gebruiker staat. |
| perspectief | Bepaalt het perspectief van waaruit alle onderliggende elementen van het object worden bekeken. |
| perspectief oorsprong | Definieert de oorsprong (het verdwijnpunt voor de 3D-ruimte) voor de eigenschap perspectief. |
| transformeren | Past een 2D- of 3D-transformatie toe op een element. |
| transformatie-oorsprong | Bepaalt de oorsprong van transformatie voor een element. |
| transformeren-stijl | Geeft aan hoe geneste elementen worden weergegeven in 3D-ruimte. |
| Overgangseigenschappen | |
| overgang | Definieert de overgang tussen twee toestanden van een element. |
| transitie-delay | Specificeert wanneer het overgangseffect begint. |
| overgang duration | Specificeert het aantal seconden of milliseconden dat een overgangseffect nodig heeft om te voltooien. |
| transitie-objecten | Hiermee geeft u de namen op van de CSS-eigenschappen waarop een overgangseffect moet worden toegepast. |
| transitie-timing-functie | Specificeert de snelheidscurve van het overgangseffect. |
| Visuele opmaakeigenschappen | |
| tonen | Geeft aan hoe een element op het scherm wordt weergegeven. |
| positie | Specificeert hoe een element wordt gepositioneerd. |
| top | Specificeert de locatie van de bovenrand van het gepositioneerde element. |
| Rechtsaf | Specificeert de locatie van de rechterrand van het gepositioneerde element. |
| bodem | Specificeert de locatie van de onderrand van het gepositioneerde element. |
| links | Specificeert de locatie van de linkerrand van het gepositioneerde element. |
| vlotter | Geeft aan of een vak moet zweven. |
| Doorzichtig | Specificeert de plaatsing van een element ten opzichte van zwevende elementen. |
| z-index | Specificeert een gelaagdheid of stapelvolgorde voor gepositioneerde elementen. |
| overloop | Specificeert de behandeling van inhoud die het vak van het element overloopt. |
| overflow-x | Geeft aan hoe de inhoud moet worden beheerd wanneer deze over de breedte van het inhoudsgebied van het element loopt. |
| overflow-y | Geeft aan hoe de inhoud moet worden beheerd wanneer deze de hoogte van het inhoudsgebied van het element overschrijdt. |
| verkleinen | Geeft aan of een element door de gebruiker kan worden aangepast. |
| klem | Definieert het knipgebied. |
| zichtbaarheid | Geeft aan of een element zichtbaar is of niet. |
| cursor | Specificeert het type cursor. |
| box-shadow | Past een of meer slagschaduwen toe op het vak van het element. |
| box-sizing | Wijzigt het standaard CSS-boxmodel. |
| Animatie-eigenschappen | |
| animatie | Specificeert het gedrag van alle animaties. |
| animatie-delay | Geeft aan wanneer de animatie met vertraging begint. |
| animatie-richting | Geeft aan of de animatie vooruit, achteruit of in afwisselende cycli moet worden afgespeeld. |
| animatie-duur | Specificeert het aantal seconden of milliseconden dat een animatie nodig heeft om een cyclus te voltooien. |
| animatie-fill-mode | Geeft aan hoe een CSS-animatie stijlen op het doel moet toepassen voordat en nadat het wordt uitgevoerd. |
| animatie-iteratie-count | Geeft het aantal keren aan dat een animatiecyclus moet worden afgespeeld voordat deze stopt. |
| animatie-naam | Hiermee geeft u de naam op van door @keyframes gedefinieerde animaties die op het geselecteerde element moeten worden toegepast. |
| animatie-play-state | Geeft aan of de animatie actief of onderbroken is. |
| animatie-timing-functie | Geeft aan hoe een CSS-animatie gedurende de cyclus moet verlopen. |
Ga verder dan de basisprincipes van CSS
Als je de bouwstenen van CSS onder de knie hebt, raden we je aan je CSS-vaardigheden te upgraden Kick-Start Your CSS Projects met dit GRATIS eBook! Begin uw CSS-projecten met dit GRATIS eBook! Dit gratis ebook biedt een groot aantal op CSS gebaseerde voorbeelden die u helpen bij het opstarten van uw eigen webprojecten. Lees meer en leer JavaScript Wat is JavaScript en hoe werkt het? Wat is JavaScript en hoe werkt het? Wat is Javascript? Het is een programmeertaal die wordt gebruikt om webpagina's te verbeteren. Het omvat het dynamisch bijwerken van webpagina's, gebruikersinterfaces en meer. Laten we eens kijken waar Javascript om draait. Lees meer om uw webpagina's naar een nieuw niveau van verbluffend te brengen.
Image Credit: Nick Karvounis op Unsplash
Ontdek meer over: Cheat Sheet, CSS, Web Design.
