CSS inicial

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, se requiere que el usuario preste atención a un texto específico según nuestro requisito. Para lograr este propósito, utilizamos la decoración y efectos de texto en la primera letra de la palabra del párrafo o encabezado. Esto ayuda a mantener el enfoque del usuario en el punto relevante. Esta selección se realiza a través del selector inicial CSS::, que es el pseudoelemento CSS.

Pseudoelemento CSS

Es la palabra clave agregada al selector que le permite decorar o diseñar la sección específica del elemento seleccionado. La sintaxis básica utilizada para este estilo se define a continuación:

12345

selector::pseudo elemento {propiedad de estilo: valor en % o px;}

El selector en este artículo representa la primera letra de la palabra. La propiedad de estilo también incluye las propiedades de borde, color, fuente, margen, decoración de texto, relleno y fondo. En esta guía, aplicamos las tres propiedades de estilo más importantes.

Estilo de fuente y color de la primera letra.

Primero aplicamos las dos propiedades en el estilo de la primera letra. Comenzando con la etiqueta HTML de apertura, declaramos el encabezado y luego abrimos la etiqueta de estilo. Dado que debemos aplicar cada efecto a la primera letra, es necesario mencionarlo en el momento del peinado. De lo contrario, todo el texto del párrafo se verá afectado. Por lo tanto, la «P» del párrafo se menciona junto con la declaración de la letra inicial. Se adopta el color verde y el tamaño de letra en porcentaje.

1234567

P :: inicial {tamaño de fuente: 250%; Color verde;}

Luego se cierra la parte de la cabeza. La etiqueta del cuerpo se complementa con la etiqueta alineada al centro. Es un ejemplo de estilo en línea. Dentro del cuerpo añadimos de nuevo un encabezado. El CSS en línea se aplica para aplicarle el color. Al final, se agrega el párrafo donde aplicamos el estilo. También podemos aplicar cualquier estilo a la primera letra del encabezado, como en el párrafo.

Código:

Guarde el código y ejecútelo 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 cambia. Este cambio de estilo es útil para desviar la atención del lector.

Producción:

Estilo de borde para la primera letra

La segunda forma de enfatizar la primera letra es aplicar una forma cuadrada o un borde alrededor de la primera letra del texto. Vamos a explicar cómo funciona. Esta vez usaremos las dos formas de aplicar estilo a la primera letra, aplicando un estilo al encabezado y el otro al párrafo. Dentro de la etiqueta de estilo, se declara el mismo valor inicial para el encabezado «h3». El estilo de borde se establece en sólido.

12345

H3 :: inicial {estilo de borde: sólido;}

Código:

De manera similar, en la primera letra del párrafo, aplicamos el estilo de borde como doble. También podemos usar un borde simple o punteado reemplazando el nombre del estilo del borde con la palabra «punteado». Dentro del cuerpo, se declaran un encabezado y un párrafo, ambos contienen el texto ficticio para mostrar los efectos que le aplicamos. Guarde el archivo del editor de texto y luego ejecútelo en el navegador predeterminado.

Producción:

Verá que la primera letra del encabezado es «T» y está diseñada con un borde sólido. También puede aplicar otros efectos al marco, como B. el color del borde, etc. Esto atrae más en comparación con todo el texto. El párrafo tiene la letra inicial «L» de «Lorem». Esto está diseñado por el borde doble.
Nota: Ambos efectos de borde se aplican a la primera letra de la primera palabra como mencionamos en CSS. Sin embargo, si se elimina la definición inicial, el borde se aplica a todo el texto, ya sea en el encabezado o en el párrafo.

Estilo de decoración de texto para 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 está influenciada por un estilo diferente de decoración de texto. La propiedad de decoración de texto CSS tiene varios aspectos; Seguimos con la línea de decoración de texto. Primero, mire la sección del cuerpo del código HTML. Se aplican dos encabezados simples. Entonces declaramos una lista simple. De los dos tipos de listas, aquí usamos una lista desordenada. El dia

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

  12345

  Shiza Ahsan

  Las tres listas están contenidas dentro de la etiqueta de

  declarado. Cada lista se cierra por separado y después de que se cierra la declaración de todas las listas

  aplicado. Cada lista se aplica con un nombre de ID. El estilo de la primera letra se aplica identificando cada ejemplo a medida que aplicamos los diferentes estilos a cada fila de la lista.

  HTML -Código:

  Cuando los ID se eliminan de la lista, se aplica un solo estilo a todas las filas de la lista. Ahora cierra la sección del cuerpo. Vaya a la sección de encabezado del cuerpo HTML. El color del encabezado se adopta dentro de la etiqueta de estilo. Es un efecto opcional solo para explicar cómo funciona. El estilo aplica todo el texto del cuerpo para alinearlo con el lado izquierdo de la página web.

  12345

  Ul li {margen superior: 15px;}

  Un efecto común que se aplica a todas las filas de la lista es un efecto de borde. Para mantener el espacio entre dos líneas en la lista, apliquemos este efecto. Después de eso, cada línea de la lista se aplicará en los diferentes estilos. Por ejemplo, en el ejemplo 1 id aplicamos el efecto de decoración de texto con un subrayado punteado a la primera letra.

  12345

  #ejemplo1 :: letra inicial {decoración del texto: guión bajo punteado;}

  De manera similar, el ejemplo 2 y el ejemplo 3 se aplican mediante la decoración de texto de una línea roja a lo largo de la letra. Mientras que la tercera línea de la lista tiene un efecto azul subrayado.

  Código CSS:

  Después de agregar todos los efectos, guarde el código y ejecutaremos el archivo. La primera letra «S» de la palabra «Shiza» tiene una línea de puntos debajo. La primera letra «S» de la segunda línea está tachada en rojo. Y la «Z» de Zaroon tiene una línea azul que la atraviesa.

  Producción:

  Conclusión

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