Shorthand notation voor font-properties

uit de cursus Webdesign & Layout met css (2019)

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Geef een reactie of stel een vraag

Geef een antwoord

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Webdesign & Layout met css (2019)

perm_identity Belinda | video_library 58 video's | query_builder 03:28:15

Webdesign met CSS

Met css bepaal je de layout en de vormgeving van een webpagina. CSS schrijf je in een apart bestand dat je koppelt aan de html-pagina’s. Hiermee koppel je de inhoud los van de vormgeving en dat biedt heel veel voordelen. Dankzij externe css-stijlbladen zorg je voor een consistente vormgeving en opmaak voor de gehele website. Leer op welke manier je CSS kan verbinden aan webpagina’s en gebruik te maken van de juiste css-selectors.

CSS blijft in ontwikkeling

CSS biedt een groot aantal css-stijlopdrachten waarmee je onder andere teksten en afbeeldingen perfect kunt vormgeven. CSS is continu in beweging omdat hier elke dag aan ontwikkeld wordt. Het is dus een taak om altijd op de hoogte te blijven van de nieuwe mogelijkheden en de veranderingen. Maar de basis is de basis, en die leer je in deze cursus. Vanuit dit startpunt kun je jezelf blijven ontwikkelen in deze krachtige manier van het consistent vormgeven van je HTML-pagina’s.

Doelgroep van deze cursus

Wil jij zelf de vormgeving van html-pagina’s bepalen dan is deze cursus absoluut een must.

Wat ga je leren

In deze online basiscursus  leer je de grondbeginselen van css (Cascading Style Sheets). Waaronder hoe je met grid en flexbox op een waanzinnig snelle, efficiënte en makkelijke manier snel een responsive design kunt maken die zich automatisch op elk formaat beeldscherm perfect aanpast. In deze cursus leer je direct hoe je jouw website responsive maakt met mediaqueries. Klinkt misschien ingewikkeld maar je zult merken dat dit reuze meevalt. En daarnaast is het vaardig worden van responsive design een ‘must’ voor webdesigners.

Vereiste voorkennis en vaardigheden

Voor het volgen van deze cursus heb je kennis en ervaring nodig van het vervaardigen en structureren van html-pagina’s.

In deze video leer je hoe je de fonteigenschappen in een shorthand notation kunt zetten.

De font-property bestaat uit de volgende eigenschappen: Font-style waarmee je de italic letter kunt activeren

of via oblique de tekst schuin kan laten zetten door de computer. De font-variant small-caps,

waarmee je de tekst om kan zetten in kleinkapitalen. Voor font-weight kun je kiezen uit normal, bold, bolder of lighter.

Je kan ook kiezen uit de waarden honderd tot en met duizend, al gebruik je in de praktijk meestal honderd tot maximaal negenhonderd.

En sowieso moet voor het lettertype deze gewichten wel ontworpen zijn.

Dan heb je nog de font-size. Dat is de waarde die je kunt invoeren in een 'absolute waarde als bijvoorbeeld pixels of punten.

Maar meestal en liever gebruik je een 'relatieve' waarde als rem om te zorgen dat de tekst op elk apparaat goed leesbaar is.

Ook de interlinie kun je hier opgeven. Zoals je net in de vorige video hebt gezien koppel je de interlinie het liefst aan de corrpsgrootte.

Daarvoor gebruik je dan een getal of procenten. En als laatste dan de font-family.

Waar je liefst twee lettertypes voor opgeeft en als derde een generieke benaming voor het soort font.

Schreef is serif, schreefloos is sans-serif en monospace voor fonts waarin elk karakter even breed is.

De volgorde waarin je al deze font eigenschappen plaatst is heel belangrijk. Je begint met de font-style, dan de font-variant, font-weight.

dan de font-variant, font-weight. Dan de font-size en line-height.

Die worden direct achter elkaar aan geschreven, gescheiden door een slash (/). Als laatste bepaal je de font-family.

Tussen al deze waarden plaats je een spatie. Nu gebruik je in de opmaak van tekst natuurlijk niet altijd al deze font properties.

En dat is ook niet verplicht. De enige twee waarden die wel verplicht zijn, dat zijn de font-size en de font-family.

Anders kan je deze storthand notation niet gebruiken. Zorg dat je altijd een spatie typt tussen de waarden.

Behalve tussen de font-size en lineheight. En als je geen interlinie opgeeft moet je ook de slash (/) weglaten.

Ik activeer Brackets. Voor de paragrafen heb ik heel veel font-properties apart opgegeven.

Deze kan ik allemaal verwijderen en toepassen in één css-eigenschap, te weten font.

Als eerste geef je de font-style op. Eigenlijk kies je hier altijd voor italic.

Want het liefst wil je natuurlijk de schuin ontworpen letter. Als deze er niet is wordt automatisch de letter schuin gezet door de browser met oblique.

Dan een spatie en de font-variant voor het omzetten naar kleinkapitalen.

Het gewicht van de letter zet ik op vierhonderd. De corpsgrootte is één punt zes rem.

Omgerekend dus pixels. Dan gescheiden met een slash de interlinie.

Die baseer ik op de corpsgrootte met een getal één punt vijf. Dus anderhalf keer de corpsgrootte.

En als laatste de font-family Dat is de Heebo. mocht deze niet getoond kunnen worden dan de verdana

en als ook dat niet lukt mag de browser zelf een schreefloze uitkiezen met de generieke fontnaam, sans-serif.

Zie hoe de tekst nu volledig is opgemaakt met behulp van deze ene css-stijl.

Als je een opdracht wilt verwijderen dan kan dat gewoon.

Zolang deze volgorde maar wel in stand blijft van de overgebleven opdrachten.

Je mag de waarden niet door elkaar heen gaan husselen.