La propiedad de transformación de texto se utiliza para controlar las mayúsculas del texto.
Sintaxis:
text-transform: none|capitalize|uppercase|lowercase|initial|inherit;
Valores de propiedad:
- none: Tiene un valor por defecto. No tiene Mayúsculas.
Sintaxis:
text-transform: none;
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS text-transform Property
</title>
<style>
h1 {
color: green;
}
p.gfg {
text-transform: none;
}
</style>
</head>
<body>
<center>
<h1>GeeksForGeeks</h1>
<h2>text-transform: none:</h2>
<p class="gfg">GeeksforGeeks</p>
<p class="gfg">
It is a computer science portal for geeks.
</p>
</body>
</html>
- Producción:
- mayúscula: Se utiliza para convertir el primer carácter de cada palabra a mayúscula.
Sintaxis:
text-transform:capitalize;
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS text-transform Property
</title>
<style>
h1 {
color: green;
}
p.gfg {
text-transform: capitalize;
}
</style>
</head>
<body>
<center>
<h1>GeeksForGeeks</h1>
<h2>text-transform: capitalize:</h2>
<p class="gfg">GeeksforGeeks</p>
<p class="gfg">
It is a computer science portal for geeks.
</p>
</body>
</html>
- Producción:
- mayúsculas: Se utiliza para convertir o transformar todos los caracteres de cada palabra en mayúsculas.
Sintaxis:
text-transform:uppercase;
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS text-transform Property
</title>
<style>
h1 {
color: green;
}
p.gfg {
text-transform: uppercase;
}
</style>
</head>
<body>
<center>
<h1>GeeksForGeeks</h1>
<h2>text-transform: uppercase:</h2>
<p class="gfg">GeeksforGeeks</p>
<p class="gfg">
It is a computer science portal for geeks.
</p>
</body>
</html>
- Producción:
- minúsculas: Se utiliza para convertir o transformar todos los caracteres de cada palabra a minúsculas.
Sintaxis:
text-transform:lowercase;
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS text-transform Property
</title>
<style>
h1 {
color: green;
}
p.gfg {
text-transform: lowercase;
}
</style>
</head>
<body>
<center>
<h1>GeeksForGeeks</h1>
<h2>text-transform: lowercase:</h2>
<p class="gfg">GeeksforGeeks</p>
<p class="gfg">
It is a computer science portal for geeks.
</p>
</body>
</html>
- Producción:
- initial: establece la propiedad en su valor predeterminado.
Sintaxis:
text-transform:initial;
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS text-transform Property
</title>
<style>
h1 {
color: green;
}
p.gfg {
text-transform: initial;
}
</style>
</head>
<body>
<center>
<h1>GeeksForGeeks</h1>
<h2>text-transform: initial:</h2>
<p class="gfg">GeeksforGeeks</p>
<p class="gfg">
It is a computer science portal for geeks.
</p>
</body>
</html>
- Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad CSS Text-Transform se enumeran a continuación:
- Google Chrome 1.0 y superior
- Borde 12.0 y superior
- Internet Explorer 4.0 y superior
- Firefox 1.0 y superior
- Ópera 7.0 y superior
- Safari 1.0 y superior
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA