Propiedad CSS initial-letter
Use initial-letter CSS property which allows to select the first letter and specify the number of lines it should occupy. Learn about property values and see examples.
La propiedad initial-letter especifica el tamaño de la primera letra y el número de líneas que desciende y asciende.
Esta propiedad aparece en periódicos donde la primera letra es más grande que el resto del contenido.
Esta propiedad acepta la palabra clave normal o dos valores <integer> separados por un espacio.
info
No se permiten valores negativos.
info
Compatible con todos los navegadores modernos.
| Valor inicial | normal |
|---|---|
| Se aplica a | Pseudo-elementos ::first-letter y el primer hijo de nivel en línea de un contenedor de bloque. |
| Heredable | No. |
| Animable | No. |
| Versión | CSS3 |
| Sintaxis DOM | element.style.initialLetter = "2 1"; |
Sintaxis
Sintaxis CSS de initial-letter
initial-letter: normal | <integer> <integer>;Ejemplo de la propiedad initial-letter:
Ejemplo de código CSS de initial-letter
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
font-family: 'Slabo 27px';
font-size: 1.5em;
line-height: 1.5;
padding: 40px 0;
}
article {
width: 80%;
}
.example::first-letter {
-webkit-initial-letter: 2 1;
initial-letter: 2 1;
color: #8ebf42;
font-weight: bold;
margin-right: .60em;
}
</style>
</head>
<body>
<article class="example">
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</article>
</body>
</html>Resultado
Valores
| Valor | Descripción |
|---|---|
normal | Sin efecto initial-letter. Este es el valor predeterminado. |
<integer> <integer> | El primer valor especifica cuántas líneas desciende la letra. El segundo valor especifica cuántas líneas asciende. |
initial | Establece la propiedad en su valor predeterminado. |
inherit | Hereda la propiedad de su elemento padre. |
Práctica
Práctica
¿Cuál es el propósito de la propiedad CSS 'initial-letter'?