Cómo superíndice y subíndice en CSS

Cómo superíndice y subíndice en CSS

Hay diferentes estilos de formato que podemos usar en nuestro sitio web. Algunos de ellos son cursivas, audaces, subrayados, Strikethrough, subíndice y más. Estos estilos de formato se implementan de acuerdo con los requisitos. Con la ayuda de estos estilos de formato, uno puede tener un documento más claro y claro para leer.

Este manual proporcionará una guía sobre:

  • ¿Qué es html "" Elemento?
  • Cómo formatear el texto como superíndice en CSS?
  • ¿Qué es html "" Elemento?
  • Cómo formatear el texto como subíndice en CSS?
  • Cuál es el "alinear vertical"Propiedad CSS?
  • Cómo formatear el texto con CSS?

Antes de apresurarnos a la sección CSS, veamos cómo HTML nos proporciona las etiquetas para subíndices y superíndices.

¿Qué es html "" Elemento?

El html "El elemento se utiliza para hacer de un texto dentro de él un SuperScript. El superíndice se muestra como un texto pequeño ligeramente por encima de la línea normal.

Cómo formatear el texto como superíndice en CSS?

En HTML, primero, agregue un nuevo elemento Div con el "fórmula" clase. Luego añade

elemento para incluir algunos encabezados. Después de eso, dos

Se incluyen elementos para especificar la fórmula. El texto que debe agregarse como superíndice se coloca dentro del ""Iniciar etiqueta y""End Tag de la siguiente manera:


Expresión algebraica


a2 - b 2 = (a + b) (a - b)


(A+B)2 = A2 + 2AB +B2


Estilo "Fórmula" Div

.Fórmula
Ancho: 80%;
Altura: 200px;
Color de fondo: #153462;
Color: Ghostwhite;
borde: 2px sólido RGB (44, 37, 37);
Shadow de caja: 1PX 1PX 5PX 4PX RGB (135, 130, 130);
relleno: 1px 20px;
margen: auto;
Font-Family: cursiva;

El ".fórmula"Se utiliza para acceder a la fórmula de la clase Div y aplicar las propiedades CSS alistadas:

  • "ancho"La propiedad establece el ancho del elemento.
  • "altura"La propiedad establece la altura del elemento.
  • "color de fondo"La propiedad aplica el color al fondo del elemento.
  • "colorLa propiedad se utiliza para configurar el color de fuente.
  • "bordeLa propiedad se utiliza para especificar el borde alrededor del elemento particular al especificar el estilo, el ancho y el color del borde.
  • "sombra de la caja"La propiedad ajusta la sombra alrededor de la caja. El valor se establece especificando múltiples valores para desplazamiento horizontal, desplazamiento vertical, efecto desenfoque, efecto de propagación y color de sombra.
  • "rellenoLa propiedad se utiliza para establecer el espacio alrededor del contenido de los elementos. El primer valor especifica el espacio en el fondo superior y el segundo valor indica espacio en la derecha izquierda del contenido.
  • "margen"Se establece la propiedad para agregar espacio alrededor del elemento. El valor "auto"Significa un espacio igual alrededor del elemento.
  • "Familia tipográficaLa propiedad se utiliza para especificar el estilo de fuente.

Elemento de estilo "P"

.Fórmula P
tamaño de fuente: 20px;

El tamaño de fuente del

elemento del div "fórmula"Se aplica con la propiedad"tamaño de fuente".

El código proporcionado anteriormente generará salida como se muestra en la imagen a continuación:

Hasta ahora, hemos discutido cómo hacer un texto superíndice en HTML, y ahora, la próxima sección demostrará cómo hacer texto de subíndice con un ejemplo práctico.

¿Qué es html "" Elemento?

El html "El elemento se utiliza para formatear el texto como subíndice. El subíndice se muestra como texto pequeño, ligeramente debajo de la línea normal.

Cómo formatear el texto como subíndice en CSS?

Aquí hay un código HTML que usa el HTML ""Elemento dentro del"

Fórmulas de logaritmo


registro aM = log an entonces m = n


registro a[m * n] = log aM + log anorte

Producción

¿Qué es la propiedad CSS "alineada vertical"??

El CSS "alinear verticalLa propiedad se utiliza para establecer la alineación de la vertical del elemento. Los siguientes son los valores asociados con esta propiedad:

  • sub
  • súper
  • de texto
  • base
  • fondo de texto

Para hacer el subíndice o superíndice de texto, el "sub" y "súperSe utilizan los valores.

Cómo formatear el texto con CSS?

En html, primero, agregue un nuevo nombre de elemento divir con el "expresión" clase. Entonces, coloque dos

elementos para especificar la fórmula que contiene un texto de subíndice y superíndice. La etiqueta que tiene diferentes ID se utilizan alrededor del texto para formatearse. Los elementos con ID "abajo"Están formateados como subíndices y los elementos que tienen ID"arriba"Están formateados como superíndices:


logid = "abajo"> a[m * n] = log id = "abajo"> am + log id = "abajo"> anorte




(a+b) id = "arriba"> 2 = ayuda = "arriba"> 2 + 2ab +bid = "arriba"> 2


Estilo "Expresión" Div

.expresión
Ancho: 80%;
Altura: 200px;
Margen: 1px Auto;
relleno: 1px 10px;
Color de fondo: RGB (243, 218, 75);
Border: 2px Solid Goldenrod;
tamaño de fuente: 18px;

Las siguientes son las propiedades que se aplican en el "expresión"Div:

  • "ancho"La propiedad establece el ancho del elemento.
  • "altura"La propiedad establece la altura del elemento.
  • "color de fondoLa propiedad se utiliza para aplicar el color al fondo del elemento.
  • "margen"La propiedad agrega espacio alrededor del elemento. El primer valor especifica el espacio en el fondo superior, y el segundo indica espacio en los lados izquierdo-derecha del elemento.
  • "rellenoLa propiedad se utiliza para establecer el espacio alrededor del contenido de los elementos. El primer valor define el espacio en el fondo superior y el segundo valor indica espacio en la izquierda derecha del contenido.
  • "bordeLa propiedad se utiliza para agregar el borde alrededor del elemento proporcionando el estilo, el ancho y el color del borde.
  • "tamaño de fuenteSe utiliza la propiedad para establecer el tamaño de fuente del elemento.

ID de estilo "abajo"

#abajo
Align vertical: sub;

El "#abajo"Señala el elemento con la identificación"abajo". Está diseñado con la propiedad "alinear vertical"Con el valor establecido como"sub".

Estilo ID de estilo "arriba"

#arriba
Align vertical: super;
tamaño de fuente: pequeño;

El "#arriba"Se utiliza para acceder al elemento con la identificación"arriba". Las propiedades aplicadas a esta ID se enumeran a continuación:

  • "alinear vertical"Propiedad con el valor establecido como"súper"El elemento de formato como super alineado.
  • "tamaño de fuente"Propiedad con un valor"pequeño"Establece el tamaño de fuente como pequeño.

Producción

Estas son las formas de superíndice y texto de subíndice en CSS.

Conclusión

Al diseñar cualquier aplicación, los desarrolladores deben tener en cuenta los estilos de formato de texto. Podemos hacer subíndices y superíndices utilizando el HTML "" y ""Etiquetas, respectivamente. En CSS, la propiedad vertical-align se utiliza para este propósito. Este artículo ha demostrado cómo subíndice y superíndice en HTML y CSS con la ayuda de un ejemplo práctico.