CSS voor het maken van eyecatching-lijsten

• April 27, 2024

Lijsten zijn een geweldig webontwerpelement omdat ze door de eindgebruiker gemakkelijk kunnen worden gelezen. De meeste gebruikers willen snel antwoorden en zullen een website alleen in eerste instantie doorbladeren om te zien of deze hun vraag beantwoordt. Dit geldt met name als ze uw website binnenkomen via een zoekmachine.

Het gebruik van koptags en lijsten is een geweldige manier om mensen in staat te stellen eenvoudig de primaire inhoud van uw website te zien. Als ze vinden dat de lijsten en ondertitels interessant zijn, is de kans groter dat ze op uw site blijven staan. Dit leidt natuurlijk tot lagere "bounce" -percentages en helpt de geloofwaardigheid en rangorde van uw website in de zoekmachines te verbeteren. Alles wat de leesbaarheid verbetert en het voor de ogen gemakkelijker maakt om door te skimmen, komt altijd ten goede aan een website. Een geweldig ontwerp houdt altijd de leesbaarheid in gedachten.

CSS is een gemakkelijke en zeer effectieve manier om stijlvolle lijsten met aangepaste opsommingstekens (markeringen) te maken. U kunt verschillende vormen of eenvoudige aangepaste afbeeldingen opnemen die aansluiten op het logo, de kleuren of het thema van uw website. Op een spookwebsite maakte ik bijvoorbeeld een klein spookpictogram dat werd gebruikt in de navigatiebalk aan de zijkant en op ongeordende lijstitems op de hoofdpagina. Het was eenvoudig, maar heel schattig en verbonden met het thema van de site, waardoor die pagina-elementen opvielen.

Op andere momenten kunnen opsommingstekens afleiden van belangrijke inhoud in een lijst. In dat geval kan een lijststijleigenschap "none" worden gebruikt om de automatisch gegenereerde markeringen te verwijderen.

Lijststijleigenschappen

Gebruik de eigenschap list-style-type om het type markering te selecteren dat bij elk lijstitem verschijnt. Beschikbare waarden zijn schijf, cirkel, vierkant, decimaal, lager-romeins, hoger-roman, lager-Grieks, lager-latijn, hoger-latijn, lager-alpha, hoger-alpha en geen.

Om uw eigen afbeelding als een markering op te geven, gebruikt u de eigenschap list-style-image als volgt:

ul {list-style-image: url (imagename.jpg);
lijst-stijl-positie: buiten;
}

De URL is relatief ten opzichte van de stylesheet en moet verwijzen naar de map waar uw afbeelding zich bevindt. In dit geval bevindt de afbeelding zich in dezelfde map als het css- en html-bestand. Als u uw afbeeldingen in een afzonderlijke map plaatst, zou u dat ook opnemen: url (images / imagename.jpg)

Markerposities

U kunt ook de positie van de markeringen aanpassen. In het bovenstaande voorbeeld wordt de opsommingsteken weergegeven buiten het inhoudsgebied.
list-style-position: inside staat de opsommingsteken in het inhoudsgebied toe zodat deze de lijstinhoud raakt.

Stenografie techniek

Een andere snelle manier om een ​​lijst op te stellen met behulp van CSS is de stenoetechniek. Met deze methode worden alle lijsteigenschappen gespecificeerd in één enkele eigenschap:

ul
{
list-style: cirkel-url ("image.gif");
}

in de verkorte methode moeten alle waarden als volgt in een opgegeven volgorde worden weergegeven:

list-style-type
lijst-stijl-positie (binnen, buiten)
list-style-image

Het maakt niet uit of u een waarde overslaat, zolang de anderen in de juiste volgorde blijven.

Aangepaste lijsten zijn erg handig en CSS maakt ze gemakkelijk te bereiken. Eenvoudige details transformeren gemiddelde websites in best presterende websites.