IN DEZE HANDLEIDING:
Handleiding voor CSS Hoofdletters en Kleine letters
Het toevoegen van een CSS hoofdlettercode bespaart je tijd en moeite bij het handmatig transformeren van kleine letters naar hoofdletters. Het klinkt misschien ingewikkeld en te geavanceerd, maar het enige wat je hoeft te doen is CSS text-transform gebruiken. Hier is alles wat je moet weten over CSS hoofdletters en text-transform.
Tip Hoofletters kapitalen en onderkast in WordPress
Een tip voor hoofdletters, kapitalen en onderkast. Voordat je met CSS aan de slag gaat is het handig om eerst te kijken of je het niet in je WordPress thema kan aanpassen. Dit scheelt wat tijd en moeite. Zeker voor beginners. Met deze thema’s kun je het instellen, is mijn ervaring:
X WordPress thema review test gratis betaald Pro
Ik heb inmiddels tientallen WordPress websites, van groot tot klein, met dit thema gemaakt en…
Kalium WordPress thema review test Envato template
The7 WordPress thema review handleiding Envato template
Handleiding en tips voor The7 WordPress thema. Het The7 WordPress template is heel uitgebreid. Niet…
Enfold WordPress thema review test Envato template
Enfold WordPress thema één van de beste templates Niet voor niets is dit WordPress thema…
Flatsome WordPress thema review test Envato template
Het Flatsome WordPress thema is de laatste tijd enorm in opkomst. Veel potentieel en heel…
Divi wordpress thema page builder review en test
In deze handleiding en review leg ik uit hoe het Divi thema en de Divi…
Avada WordPress thema review test handleiding Builder
Avada Thema is al jarenlang het best verkopende WordPress thema op ThemeForest en dat is…
Kadence WordPress thema review voordelen nadelen
Het Kadence thema is een lichtgewicht WordPress thema gericht op gebruiksgemak en snelle laadtijden. Het…
Blocksy WordPress thema review Gutenberg speciaal
Wat is CSS tekst omzetten?
Je gebruikt de eigenschap CSS text-transform als je tekst in een HTML-element met hoofdletters wilt weergeven. In wezen geeft text-transform in CSS je de mogelijkheid om elke tekst te converteren naar:
- Kleine letters, onderkast
- Hoofdletters, bovenkast
- Beginkapitalen
Wat is de syntaxis voor tekstomzetting?
Meestal moet je het HTML-object definiëren waar de tekst die je wilt transformeren zich bevindt. Vervolgens zet je accolades. Binnen deze accolades plaats je de tekst-transform-eigenschap.
Als we bijvoorbeeld tekst in een HTML-paragraaf een hoofdletter willen geven, zou de syntaxis zijn:
p{
text-transform: capitalize;
}
x
p{
text-transform: none;
}
Zoals je kunt zien, bestaat de styling uit twee delen, gescheiden door een dubbele punt. De linkerkant vertegenwoordigt de eigenschap, terwijl het rechtergedeelte de waarde is. Het is ook de moeite waard om op te merken dat je de regel code moet afsluiten met een puntkomma.
Als eigenschap accepteert text-transform de volgende waarden.
text-transform: none|capitalize|uppercase|lowercase|initial|inherit;
Geen: Deze eigenschap zorgt ervoor dat je tekst niet transformeert naar een hoofdletter. Je kunt deze gebruiken om de oorspronkelijke hoofdletters van je tekst te behouden.
Kleine letters:
Zet alle tekstkarakters om in kleine letters.
Hoofdlettergebruik / Capitalize
Deze waarde transformeert de eerste letter van elk woord in de tekstselectie of objecten naar hoofdletters.
Alles hoofdletters
Alle tekens in de tekst worden hoofdletters. Dit kan vooral nuttig zijn bij het schrijven van pakkende koppen.
Gebruik van CSS eigenschap Tekstomzetting
- Text-transform geeft je de mogelijkheid om tekst dynamisch te transformeren door HTML-objectselectie.
- Hiermee kunnen eigennamen gemakkelijk een hoofdletter krijgen. Door text-transform te gebruiken, worden gebruikersnamen weergegeven als eigennamen.
- Voor blogberichten en kopteksten. Door “hoofdletters” toe te voegen in text-transform kun je ervoor zorgen dat blogposttitels in hoofdletters worden weergegeven.
- Verandering van tekst voorkomen. Je kunt ook de waarde ‘none’ doorgeven aan de text-transform eigenschap om te voorkomen dat je tekst wordt gemanipuleerd.
- Leestekens in zinnen en alinea’s zoals in blogberichten nieuwssites.