CSS text-transform eigenschap
- Vorige pagina tekst-shadow
- De volgende pagina text-underline-offset
Definitie en gebruik
De text-transform-eigenschap controleert het hoofdlettergebruik van de tekst.
Uitleg
Deze eigenschap verandert de hoofdlettergebruik van een element, ongeacht de hoofdlettergebruik van de tekst in de bron Document. Als de waarde capitalize is, moeten sommige letters hoofdletters zijn, maar het is niet duidelijk hoe je bepaalt welke letters hoofdletters moeten zijn, afhankelijk van hoe de gebruikersagent de verschillende "woorden" herkent.
Zie ook:
CSS handleiding:CSS tekst
HTML DOM referentiehandleiding:textTransform-eigenschap
Voorbeeld
Converteer tekst in verschillende elementen:
h1 {text-transform:uppercase;} h2 {text-transform:capitalize;} p {text-transform:lowercase;}
Tips en opmerkingen
Opmerking:Verschillende gebruikersagenten kunnen verschillende methoden gebruiken om te bepalen waar een woord begint, en daardoor te bepalen welke letters hoofdletters moeten zijn. Bijvoorbeeld, de tekst "w3-school" kan op twee manieren worden weergegeven: "W3-school" en "W3-School". CSS stelt geen eis over welke het juiste is, dus beide zijn mogelijk.
CSS syntaxis
text-transform: none|capitalize|uppercase|lowercase|initial|inherit;
Eigenschapswaarde
Waarde | Beschrijving |
---|---|
geen | Standaard. Definieert een standaard tekst met kleine en hoofdletters. |
capitalize | Elke woord in de tekst begint met een hoofdletter. |
uppercase | Definieert dat er alleen hoofdletters zijn. |
lowercase | Definieert dat er geen hoofdletters zijn, alleen kleine letters. |
inherit | Stelt dat de waarde van de text-transform-eigenschap van het ouder_element moet worden geërfd. |
Technische details
Standaardwaarde: | geen |
---|---|
Inheritantie: | ja |
Versie: | CSS1 |
JavaScript syntaxis: | object.style.textTransform="uppercase" |
Meer voorbeelden
- Controleer het hoofdlettergebruik van tekst
- Dit voorbeeld toont hoe je de hoofdlettergebruik van tekst kunt controleren.
Browserondersteuning
De cijfers in de tabel vermelden de eerste browserversie die deze eigenschap volledig ondersteunt.
Chrome | IE / Edge | Firefox | Safari | Opera |
---|---|---|---|---|
1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
- Vorige pagina tekst-shadow
- De volgende pagina text-underline-offset