¿Qué propiedad se utiliza para crear un efecto de pequeña capitalización?

En este artículo, discutiremos la propiedad que se utiliza para crear el efecto de las versalitas.

La propiedad font-variant se utiliza para convertir todas las letras minúsculas en letras mayúsculas. Pero las letras mayúsculas convertidas parecen tener un tamaño de fuente demasiado pequeño que las letras mayúsculas originales. 

small-caps: Se utiliza para convertir todas las letras minúsculas en letras mayúsculas.

Sintaxis:

font-variant: small-caps;

Veamos algunos ejemplos para saber cómo funciona la propiedad de pequeña capitalización .

Ejemplo 1: en este ejemplo, agregaremos el efecto de mayúsculas pequeñas en la etiqueta <p>.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: green;
        }
        p.geeks {
            font-variant: small-caps;
        }
        .gfg {
            font-variant: small-caps;
        }
    </style>
</head>
<body>
    <center>
        <h1>GeeksForGeeks</h1>
        <h2>font-variant:small-caps;</h2>
        <p class="geeks">GeeksForGeeks.</p>
  
        <p class="gfg">
            It is a computer science
            portal for geeks.
        </p>
  
    </center>
</body>
</html>

Salida :

 

Ejemplo 2: En este ejemplo, agregaremos el efecto de mayúsculas pequeñas en la etiqueta <h4>.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: green;
        }
        h4.geeks {
            font-variant: small-caps;
        }
        .gfg {
            font-variant: small-caps;
        }
    </style>
</head>
<body>
    <center>
        <h1>GeeksForGeeks</h1>
        <h2>font-variant:small-caps;</h2>
        <p class="geeks">GeeksForGeeks.</p>
  
        <h4 class="gfg">
            It is a computer science
            portal for geeks.
        </h4>
    </center>
</body>
</html>

Producción:

 

Publicación traducida automáticamente

Artículo escrito por sravankumar8128 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *