Soort lijst bepalen met list-style-type

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 reactie

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

n deze online basiscursus  leer je de grondbeginselen van css (Cascading Style Sheets). 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.

Responsive design en -layout met css

CSS biedt met grid en flexbox een waanzinnig snelle, efficiënte en makkelijke manier om snel een responsive design te 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.

Tekst en afbeeldingen vormgeven met css

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.

Met behulp van de css eigenschap 'list-style-type' kun je voor ongenummerde lijsten het soort opsommingsteken opgeven,

en voor genummerde lijsten de wijze waarop je deze genummerd wilt zien.

Voor dit hoofdstuk maken we gebruik van de local root folder css-éénnuldrie-tien. Ga naar Bestand > Open map.

Zorg dat je de map css-éénnuldrie-tien. aanwijst en open daarna de bestanden index.html en main.css.

De lijsten in het html-element main tonen zich nu in corps tien

omdat ze alleen nog maar onder de algemene stijl vallen waarin we de fontgrootte terug hebben geschaald naar tien pixels.

Zodat het rekenen met rem makkelijker is.

Om lijsten van een eigen vormgeving te kunnen voorzien kun je elke lijst een eigen class-naam geven.

Zet de cursor in het html-element ol en typ class= tussen quotes de naam "ol-list".

En deze mag je zelf kiezen. En ik noem deze "ol-list".

En de ongenummerde lijst, de ul, die staat een regel naar beneden

Die noem ik "ul-list". Om beide lijsten dezelfde vormgeving te geven als de paragrafen,

breid ik de p-selector uit met , . ol -list , . ul-list.

Kijk nu hebben ze in ieder geval ook dezelfde vormgeving als de paragrafen .

Dan gaan we de lijsten voorzien van verdere eigen vormgeving met aparte stijlopdrachten.

Ik start met de selector voor de lijst met de class-naam ol-list.

Allereerst de list-style-type. Je ziet nu een opsomming in cijfers. Dat is decimal.

Decimal is namelijk de standaard instelling. Maar ik kan ook romeinse cijfers kiezen met lower-roman.

Dan krijg je romeinse undercast cijfers. Met upper-roman krijg ik romeinse kapitaalcijfers.

Deze worden meestal gebruikt omdat ze beter herkenbaar zijn. Dan kun je ook het alfabet gebruiken met upper-alpha

of de undercast variant met lower-alpha. Er bestaan ook nog nummeringsopties in andere talen,

als hebreeuws, georgisch en japans die je wellicht niet vaak zult gebruiken. Maar ze zijn er wel.

Voor de ongenummerde lijst maak ik nu ook een aparte selector aan met: . ul-list

Opnieuw de list-style-type: en je kijkt nu naar een stip,

En dat is de standaard weergave met een ongenummerde waarde van disc.

Dit kun je wijzigen in circle, dan krijg je een open rondje,

of in square dan krijg je een vierkantje.

Dit zijn de meest gebruikte waarden voor de ul en de ol.