✅ Lijsten en menu's in CSS3 | Ontwikkeling 2025

Inhoudsopgave

Tot dynamische menu's maken voor onze webpagina's Het is tegenwoordig heel gewoon om in HTML5 te programmeren en het dan een persoonlijke look en feel te geven CSS3 dat het een taal is die is gebaseerd op stylesheets, dat wil zeggen, de code die de vorm, kleur en structuur aan onze pagina geeft, wordt in een apart bestand gecodeerd buiten de pagina zelf die we aan het schrijven zijn.

Allereerst gaan we kijken hoe je lijsten kunt maken, want een menu is tenslotte een lijst die is gestileerd om het zichtbaar eleganter te maken. Op deze manier zijn we in Html gestructureerd als een lijst met links en dan zetten we al een gepersonaliseerde uitstraling met CSS3.

Er zijn twee soorten lijsten, geordend en ongeordend. Als we een lijst gaan gebruiken om later een menu te configureren, zullen we hoogstwaarschijnlijk een ongeordende lijst gebruiken, maar we zullen de opties zien.

Ze zijn precies hetzelfde gemaakt, het enige verschil ligt in het gereserveerde woord, dat voor de bestelde zal zijn

De HTML-code is als volgt:


Eerste element
Tweede element
derde element


Eerste element
Tweede element
derde element

1. Eerste element
2. Tweede element
3. Derde element

Of precies hetzelfde zonder de ordinale eerste:

Eerste element
Tweede element
derde element

In HTML zijn er bepaalde pre-formaten wanneer we een lijst maken, dat wil zeggen, er is een bepaalde marge, letterkleur, opsommingsteken, opvulling, enz. die standaard verschijnt bij het maken van onze lijst. Het slechte is dat het er visueel niet erg goed uitziet, het goede is dat het dankzij CSS extreem eenvoudig is om het naar onze smaak te veranderen.

We gaan eerst kijken naar de verschillende soorten vignetten die we op onze menukaart kunnen plaatsen. Standaard wordt elk item in de lijst voorafgegaan door een zwarte cirkel. We kunnen echter vierkanten, lege cirkels of een afbeelding uit ons bestand plaatsen.

De code om het opsommingsteken in CSS3 te wijzigen is de volgende:

 #menu {lijst-stijl-type: vierkant;}

Om de marge te wijzigen met behulp van het voorbeeldmenu, is het zo eenvoudig als dit: code in CSS3:

 #menu {marge: 0px;}

 #menu {marge: 0px; opvulling: 2px; }

CSS3-code

 #menu {rand: 2px;}

Naast de dikte is rand een veld dat veel mogelijkheden heeft, we kunnen een stijl, een kleur, een verloop kiezen… en we gaan enkele opties bekijken.

Border-stijl
Beginnend met de randstijl, border-stijl, de meest gebruikte mogelijkheden zijn:

GeenWat dit doet, is de rand zelf verwijderen. Dit is de standaardoptie, dus normaal gesproken, wanneer we lijsten voor onze menu's maken, verschijnen er geen randen tenzij we dit specificeren.

StevigDit is de rand die het meest kan worden gebruikt. Het is een doorlopende rand, zwart van kleur.
VerborgenO verborgen is een andere optie waarin we geen randen visualiseren, omdat ze verborgen zijn. Voor programmeerdoeleinden bestaat het echter wel. Het wordt gebruikt om de randen af te bakenen met andere aangrenzende cellen of tabellen, zelfs als we geen dikke rand willen zien.
RidgeWe zullen deze rand plaatsen als we willen dat het zich onderscheidt van de rest. Zorgt ervoor dat de rand één niveau boven de rest op het scherm lijkt te zijn geplaatst.
BeginNet als de vorige is het een uitstekende rand, maar dit lijkt niet een niveau boven het oppervlak van het scherm te zijn dan wat het binnenin draagt.
GroefIn tegenstelling tot nok bij deze randstijl lijkt het element verzonken onder de rest.
inzetOp dezelfde manier als Groove lijkt deze rand niet verzonken, maar is deze eigenlijk een niveau lager dan de rest.
gestippeldMet deze stijl genereren we een rand gevormd door een stippellijn, standaard zwart en spaties.
DubbeleZoals het woord zelf zegt, is het een dubbele rand, gevormd door twee doorlopende zwarte lijnen gescheiden door een spatie.

gestreeptDit is een speciaal type rand dat lijkt op gestippeld, behalve dat de punten grotere lijnen worden, dat wil zeggen dat het een soort onderbroken lijn is.

Net als bij rand, kunnen we bij randstijl ervoor kiezen om de rand van één zijde, beide, de bovengrens, de ondergrens of alle te definiëren. Als we slechts één waarde schrijven, wordt deze op alle randen geplaatst, en als we twee opties schrijven in plaats van één, is de eerste voor de boven- en onderrand en de tweede voor de zijkanten.

Nu hebben we hiermee de rand, de grootte en de stijl gedefinieerd, maar het menu blijft erg eenvoudig en visueel niet erg mooi. We kunnen verticale menu's willen, omdat ze standaard worden gemaakt, maar als we willen dat ze horizontaal zijn, moeten we het trefwoord float toevoegen, zodat elk item in de lijst naast het volgende wordt geplaatst.

Ik leg dit in iets meer detail uit, elk element van de lijst dat we hebben gecodeerd met "li" heeft standaard het gedrag van een blokelement, dat wil zeggen dat het na plaatsing een regeleinde genereert en voorkomt dat een ander element wordt geplaatst aan zijn zijde. Als we elk element van onze lijst naast het vorige willen plaatsen, moeten we dit blokkeringsgedrag elimineren.

Hiervoor zou de code de volgende zijn:

 #menu {lijststijl: geen; marge: 0px; opvulling: 0; } #menu li {marge: 2px; opvulling: 2px; rand: 2px effen; zweven: links; }

horizontaal menu

Als we nu willen dat onze lijst als een menu fungeert en ons omleidt naar waar we willen, moeten we een link naar onze elementen toevoegen. Dit is heel eenvoudig. In onze code in de Html voegen we het volgende toe:


Eerste element
Tweede element
derde element

Ten slotte zullen we enkele van de opties voor het uiterlijk zien.

Tekst eigenschappen
BreedteAls we een vaste breedte willen plaatsen. Bijvoorbeeld breedte: 100 px;
Tekst-decoratieAls we willen dat de tekst van ons element op de een of andere manier wordt versierd. Er zijn veel mogelijkheden, maar enkele van de meest voorkomende zijn:

onderstrepen: als we willen dat alles onderstreept wordt
overschrijven: Idem als onderstrepen zet een regel in de hele tekst, maar deze keer in plaats van eronder.
knipperen: Maak tekst die schijnt, die met tussenpozen knippert als een lampje.
lijn door: We zullen deze optie schrijven als we willen dat onze tekst wordt doorgestreept.
geen: dit is een redundantie omdat de tekst standaard met deze waarde wordt geleverd, zonder enige versiering. Soms is het echter handig als we willen terugkeren naar de oorspronkelijke optie nadat we een effect hebben gebruikt met een hulpmiddel genaamd hover dat we hierna zullen zien.

Tekst uitlijnenHet is de richting waarin de inhoud van onze blokelementen zal worden gepubliceerd, wees voorzichtig, niet de tekst zelf, die we later zullen zien met de richtingseigenschap. De opties zijn heel eenvoudig: links als we willen dat het van links gaat, rechts als we willen dat het van rechts naar links gaat, centreren als we willen dat de tekst gecentreerd wordt en uitvullen als we willen dat de tekst wordt uitgevuld.

RichtingMet deze optie gaan we de richting van de tekst die we schrijven definiëren, in dit geval zijn er slechts twee opties:

ltr: dat is degene die standaard in browsers verschijnt, want behalve in sommige talen waarin het van rechts naar links wordt geschreven, is het gebruikelijk om van links naar rechts te schrijven, wat deze optie definieert.
rtl: het is de andere mogelijke directionaliteit van de tekst, van rechts naar links die we zullen gebruiken als we bijvoorbeeld Arabische teksten willen schrijven.

Tekst streepjeDat het afkomstig is van inspringing of tabulatie is een eigenschap die verantwoordelijk is voor het vaststellen van genoemd criterium in de eerste regel van onze blokelementen, en ook in tabellen. Er zijn drie opties:

meeteenheid
percentage
erven

Als we daarin percentage gebruiken, verwijzen we naar de breedte van het element waarin het zich bevindt.
Ook in al deze kunnen we positieve of negatieve cijfers gebruiken van elk van de meeteenheden die bestaan voor css3, pixels, ems …

Tekst-transformatieLaatste eigenschap gerelateerd aan de tekst die we zullen zien die te maken heeft met hoofdletters en kleine letters:

hoofdletters: bij deze optie wordt alleen de eerste letter van elk woord in hoofdletters weergegeven.
hoofdletters: toont alle tekst in hoofdletters.
kleine letters- Toont alle tekst in kleine letters.
geen: laat de tekst zoals deze is geschreven. Het is degene die standaard wordt geleverd.

woordspatiëringHoewel het de tekst niet direct behandelt, doet het dit op de ruimte die we tussen woorden laten. De waarden kunnen "normaal" of een geldige maat zijn. Als we een maat invoeren, wordt de waarde toegevoegd aan de normale maat die standaard wordt geleverd.

Nu gaan we met de eigenschappen van het lettertype.

Lettertype-eigenschappen
LettertypeDeze eigenschap is de meest complete van al die met betrekking tot het lettertype, en het heeft verschillende opties als het gaat om het gebruik ervan. Ten eerste kunt u beginnen met één, twee, drie of geen van de waarden voor "font-style", "font-variant" en "Font-weight".

Dan moeten we de lettergrootte plaatsen met "font-size" optioneel gevolgd door de spatiëring die wordt gegeven met "line-height" en altijd eindigend met het type lettertypefamilie "font-family". Ten slotte moet u een van de volgende waarden invoeren:

onderschrift- Voor knoppen of vervolgkeuzelijsten, dat wil zeggen voor besturingselementen en formuliervelden.
menu: als we vervolgkeuzemenu's of andere soorten menu's gaan configureren.
icoon: voor de teksten die onder de pictogrammen worden weergegeven.
berichten box- Voor dialoogvensters, of het nu gaat om pop-ups met fouten, pop-ups met informatie, enz.
status-baA: voor vensterstatusbalken.
klein bijschriftn - Voor kleine formuliervelden en besturingselementen.

In de font-eigenschap hebben we enkele andere opties gebruikt die we nog niet hebben gezien en die we hieronder zullen uitleggen:

LettertypeHiermee zullen we de . definiëren lettertype. De waarden die het kan hebben zijn "normaal", wat de standaard is, "cursief" als we willen dat onze brief cursief is, dat wil zeggen cursief; of "schuin" als we de schuine letter willen hebben, wat een soort cursief is waarbij alleen de karakters schuin staan en niet allemaal zoals in cursief.

Lettertype-variantWe zullen het gebruiken om de lettertype varianten en we hebben maar twee opties, de "normale" die standaard wordt geleverd, en de "small-caps"-variant, ook wel small caps genoemd, waardoor hoofdletters er even groot uitzien als kleine letters.

Lettertype dikteHet is een van de meest gebruikte eigenschappen sinds ermee we kunnen de dikte van de letters regelen (wees voorzichtig, het is niet hetzelfde als de grootte van elke letter die we later zullen zien). Numeriek gesproken heeft het 9 opties die de honderden zijn van 100 tot 900, dat wil zeggen 100, 200, 300, 400, 500, 600, 700, 800 en 900. Er zijn ook geschreven waarden, de "normale" die gelijk is aan 400 , "vet", wat overeenkomt met 700 en dat is wat we vet zouden noemen en dat merkwaardig genoeg niet in lettertypestijl verscheen, maar hier. Er zijn ook de waarden "bolder" of "lichter" en soms andere zoals "medium" of "heavy" die worden toegewezen aan numerieke waarden, afhankelijk van het aantal diktes dat het lettertype heeft.

LettertypegrootteMet deze eigenschap als wij regelen de lettergrootte. Er zijn vier waarden beschikbaar, "absolute-grootte", "relatieve-grootte", "percentage-eenheid" en "maateenheid". Er zijn nogal wat absolute en relatieve maateenheden gedefinieerd in CSS, zoals em, die het meest wordt gebruikt in deze eigenschap, ex, px,%, in, cm, mm, pt of pc. Naast deze maten zijn er enkele woorden die werken en kunnen worden gebruikt, zoals xx-small voor de kleinste, x-small, small, medium, large, x-large of xx-large voor de grootste. Deze zes woorden komen overeen met de grootte van de verschillende html-titeltags van

tot

en dit zijn absolute maten, dus ze zullen er altijd hetzelfde uitzien, ongeacht de browser- of schermresolutie. De woorden "kleiner" en "groter" kunnen ook worden gebruikt als relatieve afmetingen die afhankelijk zijn van de lettergrootte van het element dat het bevat.

LijnhoogteHet is al gedefinieerd in de teksteigenschappen.
LettertypefamilieVeelgebruikt pand dat wij stelt u in staat om het lettertype of lettertype te kiezen. Eerst zetten we de naam van het lettertype, of het lettertype, en optioneel kan het worden gevolgd door andere lettertypenamen voor het geval onze browser of systeem het eerste niet heeft of het niet ondersteunt. Er is geen standaardlettertype, omdat dit afhankelijk is van onze browser, hoewel een veelgebruikt lettertype "Times New Roman" is. Sommige generieke lettertypewaarden kunnen "serif" zijn waarbij sommige lettertypen zoals Times New Roman, Garamond, Georgia of Cambria zijn opgenomen; "Sans-serif" en zijn typen Verdana, Arial, Tahoma, Helvetica of Futura. "Monospace" en zijn voorbeelden Courier New of Monaco onder anderen. En "fantasie" met de Comic sans of Impact types. Natuurlijk zijn er nog veel meer lettertypes waar we uit kunnen kiezen.

LetterafstandHiermee kunnen we regel de spatie tussen letters, en het werkt precies hetzelfde als zijn woordafstand-analoog van teksteigenschappen, met de waarden "normaal" en een geldige maatstaf.

KleurEindelijk zullen we de . zien eigenschap van de kleur die we in onze tekst willen plaatsen. Standaard is het zwart. Er zijn verschillende manieren om de kleur te kiezen, een daarvan is door de 17 verschillende kleurwoorden die er zijn: aqua, zwart, rood, geel, blauw, fuchsia, groen, limoen, oranje, grijs, kastanjebruin, olijf, marine, paars , zilver, groenblauw en wit.

Een andere optie is om een kleur van RGB-percentage, dit is eenvoudigweg drie percentages specificeren die overeenkomen met de kleuren rood ®, groen (G) en blauw (B):

 kleur: rgb (22%, 76%, 14%); (De 3 percentages hoeven geen 100% te geven)

Een andere manier is door RGB decimaal die precies hetzelfde werkt als het percentage RGB, maar in plaats van drie waarden in procenten te zetten, worden ze als decimale waarden gezet: