CSS text-transform egenskap
- Föregående sida text-shadow
- Nästa sida text-underline-offset
Definition och användning
text-transform-egenskapen kontrollerar textens versalkapitalisering.
Beskrivning
Denna egenskap ändrar bokstavskapitaliseringen i elementet, oavsett hur texten är skriven i käll dokumentet. Om värdet är capitalize, måste vissa bokstäver vara stora, men hur man bestämmer vilka bokstäver som ska vara stora är inte definierat och beror på hur användaragenter identifierar olika "ord".
Se också:
CSS tutorial:CSS text
HTML DOM referenshandbok:textTransform-egenskapen
Exempel
Konvertera text i olika element:
h1 {text-transform:uppercase;} h2 {text-transform:capitalize;} p {text-transform:lowercase;}
Tips och kommentarer
Kommentar:Olika användaragenter kan använda olika metoder för att bestämma var ett ord börjar, och därmed bestämma vilka bokstäver som ska vara kapitaliserade. Till exempel kan texten "w3-school" visas på två sätt: "W3-school" och "W3-School". CSS anger inte vilket av dessa är korrekt, så båda är möjliga.
CSS-syntax
text-transform: none|capitalize|uppercase|lowercase|initial|inherit;
Egenskapsvärde
Värde | Beskrivning |
---|---|
ingen | Standard. Definierar standardtext med små och stora bokstäver. |
capitalize | Varje ord i texten börjar med en stor bokstav. |
uppercase | Definierar att det finns endast stora bokstäver. |
lowercase | Definierar att det inte finns några stora bokstäver, endast små bokstäver. |
inherit | Detaljerar att text-transform-egenskapen ska ärvas från föräldrelementet. |
Tekniska detaljer
Standardvärde: | ingen |
---|---|
Ärvnad: | ja |
Version: | CSS1 |
JavaScript-syntax: | object.style.textTransform="uppercase" |
Mer exempel
- Styra versalkapitalisering av bokstäver i texten
- Detta exempel visar hur du kan styra versalkapitalisering av bokstäver i texten.
Webbläsarstöd
Tal i tabellen noterar den första webbläsarens version som fullständigt stöder egenskapen.
Chrome | IE / Edge | Firefox | Safari | Opera |
---|---|---|---|---|
1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
- Föregående sida text-shadow
- Nästa sida text-underline-offset