Primera carta de CSS

Una hoja de estilo en cascada juega un papel importante en la decoración de la primera letra de la palabra en html. A veces, necesitamos que el usuario preste atención a un texto específico, de acuerdo con nuestro requisito. Para lograr este propósito, utilizamos la decoración del texto y los efectos en la primera letra de la palabra del párrafo o el encabezado. Esto ayuda a desviar el enfoque del usuario en el punto relevante. Esta selección se realiza a través del selector CSS :: Primera letra que es el pseudo-elemento CSS.

Pseudo-elemento CSS

Es la palabra clave que se agrega al selector que le permite decorar o peinar la sección particular del elemento seleccionado. La sintaxis básica utilizada para este estilo se define en lo siguiente:

El selector de este artículo representa la primera letra de la palabra. La propiedad de estilo incluye la propiedad del borde, el color, la fuente, el margen, la decoración de texto, el relleno y la propiedad de fondo también. Aplicamos las tres propiedades de estilo principal en esta guía.

Fuente y estilo de color en la primera letra

Primero, aplicamos las dos propiedades en el primer estilo de letra. Comenzando con la etiqueta de apertura HTML, declaramos la cabeza y luego abrimos la etiqueta de estilo. Como necesitamos aplicar cualquier efecto en la primera carta, es necesario mencionarlo en el momento del estilo. De lo contrario, todo el texto del párrafo se verá afectado. Entonces, la "P" para el párrafo se menciona junto con la primera declaración de letra. Se aplican el color verde y el tamaño de fuente en el porcentaje.

Después de eso, la sección de la cabeza está cerrada. La etiqueta del cuerpo es complementada por la etiqueta alineada en el centro. Es un ejemplo de estilo en línea. Dentro del cuerpo, agregamos un encabezado nuevamente. El CSS en línea se aplica para aplicarle el color. Al final, el párrafo se agrega donde aplicamos el estilo. También podemos aplicar cualquier estilo a la primera letra del encabezado como en el párrafo.

Código:

Guardar el código y ejecutarlo en el navegador. Verá la página web resultante donde la primera letra del párrafo es más grande en comparación con el resto del texto y su color se cambia. Este cambio de estilo es útil para desviar el enfoque del lector.

Producción:

Estilo de borde en la primera letra

La segunda forma de hacer que la primera letra sea prominente es aplicar una forma cuadrada o un borde alrededor de la primera letra del texto. Vamos a elaborar cómo funciona.

Esta vez, tomamos las dos formas de diseñar la primera letra aplicando un estilo en el encabezado y el otro al párrafo. Dentro de la etiqueta de estilo, el mismo valor de primera letra se declara al encabezado "H3". El estilo de borde está configurado como "sólido".

Código:

Del mismo modo, en la primera letra del párrafo, aplicamos el estilo de borde como doble. También podemos aplicar un borde simple o el punteado reemplazando el nombre de estilo fronterizo con la palabra "punteada". Dentro del cuerpo, se declaran un encabezado y un párrafo, ambos que contienen el texto ficticio para mostrar los efectos que aplicamos sobre ellos. Guardar el archivo del editor de texto y luego ejecutarlo en el navegador predeterminado.

Producción:

Verá que en el encabezado, la primera letra es "t 'y está diseñada con un borde sólido. También puede aplicar más efectos en el borde, como el color del borde, etc. Esto atraerá más en comparación con todo el texto. El párrafo tiene la primera letra "L" de "Lorem". Esto está diseñado por el doble borde.

Nota: Ambos efectos del borde se aplican en la primera letra de la primera palabra como mencionamos en CSS. Pero si se elimina la definición de la primera letra, el borde se aplicará al texto completo, ya sea en el encabezado o en el párrafo.

Estilo de decoración de texto en la primera letra

La primera letra del texto también se puede diseñar decorando el texto. Esta vez, usamos la primera letra de la lista. Cada lista se verá afectada por un estilo diferente de la decoración del texto. La propiedad de decoración de texto de CSS tiene varios aspectos; Iremos con la línea de decoración de texto.

Primero, considere la sección del cuerpo del código HTML. Se aplican dos encabezados simples. Ater eso, declaramos una lista simple. De los dos tipos de listas, utilizamos una lista desordenada aquí. El

la etiqueta se declara. Dentro de las etiquetas de la lista desordenada, declaramos las listas con la etiqueta
• .

  1 2 3 4 5

  Shiza Ahsan

  Las tres listas se declaran dentro de la etiqueta de

  . Cada lista está cerrada por separado y después de la declaración de todas las listas,
  Está aplicado. Cada lista se aplica con un nombre de identificación. El estilo de la primera letra se aplica identificando cada ejemplo a medida que aplicamos los diferentes estilos para cada línea en la lista.

  Código HTML:

  Si se eliminan los ID de la lista, entonces se aplica un solo estilo a todas las líneas en la lista. Ahora, cierre la sección del cuerpo. Ve hacia la sección de la cabeza del cuerpo HTML.

  Dentro de la etiqueta de estilo, se aplica el color del encabezado. Es un efecto opcional solo para explicar el trabajo. El estilo se aplica todo el cuerpo para alinearse en el lado izquierdo de la página web.

  1 2 3 4 5

  Ul li Margen-top: 15px;

  Un efecto común que se aplica a todas las líneas en la lista es un efecto de margen. Para mantener la distancia entre dos líneas en la lista, aplicamos este efecto. Después de eso, cada línea en la lista se aplica en los diferentes estilos. Por ejemplo, en Ejemplo1 ID, aplicamos el efecto de la decoración del texto con un subrayado salpicado en la primera letra.

  1 2 3 4 5

  #Ejemplo1 :: Primera letra Decoración de texto: subrayado punteado;

  Del mismo modo, el ejemplo2 y el ejemplo3 se aplican mediante la decoración del texto de una línea roja a través de la letra. Mientras que la tercera línea en la lista tiene un efecto azul sobreline.

  Código CSS:

  Después de agregar todos los efectos, guarde el código y ejecutamos el archivo. La primera letra "s" de la palabra 'shiza "tiene una línea punteada debajo. La primera letra "s" de la segunda línea tiene una línea roja a través de ella. Y la "z" de Zaroon contiene una línea azul que pasa sobre ella.

  Producción:

  Conclusión

  La primera letra del texto de CSS en HTML juega un papel importante en la desviación de la atención del usuario. En este artículo, damos brevemente la introducción básica al selector de la primera letra que es un elemento de la propiedad pseudo CSS. Este estilo de propiedad tiene varias categorías. Podemos aplicar cada uno para resaltar la primera letra. Las tres propiedades que se aplican son la fuente más el efecto de color, el efecto del borde y la propiedad de decoración de texto que tiene diferentes estilos y colores de líneas que pasan por debajo o a través de las primeras letras.