Etiquetas HTML y - Texto en subíndice y superíndice
Definición y uso
Etiqueta define el texto de subíndice. El subíndice tiene la mitad de la altura y aparece debajo de la línea de base. El subíndice se puede utilizar al escribir fórmulas químicas como H 2 O.
Etiqueta define texto en superíndice. El texto en superíndice tiene la mitad de la altura y aparece por encima de la línea de base. El texto en superíndice se puede utilizar al escribir notas al pie como WWW.
Soporte del navegador
Etiquetas y compatible con todos los principales navegadores.
Diferencias entre HTML y XHTML
Atributos estándar
Columna DTD especifica en qué tipo de documento DTD HTML 4.01 / XHTML 1.0 se permite el atributo. S \u003d estricto, T \u003d transicional y F \u003d conjunto de marcos.
Etiquetas y admite los siguientes atributos estándar:
| Atributo | Valor | Descripción | DTD |
|---|---|---|---|
| clase | nombre de la clase | Especifica el nombre de la clase de un elemento. | STF |
| dir | rtl ltr |
Especifica la dirección del texto del contenido de un elemento. | STF |
| carné de identidad | identificador | Especifica un identificador único para un artículo. | STF |
| lang | código de lenguaje | Especifica el código de idioma para el contenido de un elemento. | STF |
| estilo | style_definition | Especifica un estilo en línea para un elemento | STF |
| título | texto | Especifica información adicional sobre un artículo. | STF |
| xml: lang | código de lenguaje | Define el código de idioma para el contenido del elemento en documentos XHTML | STF |
Más información sobre atributos estándar.
Atributos de eventos
Etiquetas y admite los siguientes atributos de eventos:
| Atributo | Valor | Descripción | DTD |
|---|---|---|---|
| al hacer clic | guión | Secuencia de comandos con clic del mouse | STF |
| ondblclick | guión | Secuencia de comandos de doble clic | STF |
| onmousedown | guión | Script para ejecutar al hacer clic con el mouse | STF |
| onmousemove | guión | Script para ejecutar cuando se mueve el puntero del mouse | STF |
| onmouseout | guión | Secuencia de comandos que se ejecutará cuando el mouse se mueva fuera del elemento | STF |
| el ratón por encima | guión | Script para ejecutar cuando el mouse se mueve sobre un elemento | STF |
| onmouseup | guión | Script para ejecutar cuando se suelta el botón del mouse | STF |
| onkeydown | guión | Script para ejecutar cuando se presiona una tecla | STF |
| onkeypress | guión | Script para ejecutar cuando se presiona una tecla y luego se suelta | STF |
| onkeyup | guión | Script que se ejecutará cuando se suelte una tecla | STF |
Información adicional sobre
Desde hace algunas lecciones, nos hemos estado acostumbrando a formatear texto con CSS, y esta vez estamos aprendiendo a cambiar el caso del texto. En este sentido, las hojas de estilo en cascada nos abren amplias oportunidades, o más precisamente, podemos:
- Muestra todo el texto en mayúsculas;
- Seleccione todo el texto en minúsculas;
- Haga que la primera letra de cada palabra comience con mayúsculas.
"Todo esto está bien, por supuesto, pero ¿cuándo podría necesitarlo?" - usted pregunta. Imagine una situación en la que desea mostrar todos los elementos del menú en mayúsculas. Para hacer esto, no es necesario que los escriba, incluida la tecla Bloq Mayús, o mientras mantiene presionada la tecla Mayús. Será suficiente configurar todos los elementos de la lista para que se muestren en mayúsculas creando una regla correspondiente en el archivo CSS. Y esta es solo una de las muchas situaciones posibles.
La propiedad text-transform
Controlaremos el caso del texto usando la propiedad text-transform. Tiene 4 valores principales: mayúsculas (letras mayúsculas), minúsculas (letras minúsculas), mayúsculas (mayúsculas para cada primera letra de la palabra, el resto de los valores no cambian), ninguno (no se aplica formato). A primera vista, todo esto puede parecerle muy complicado.
Lo principal es no entrar en pánico ... Pero en la práctica, todo es bastante sencillo, como verá ahora. La clave es elegir el selector correcto, porque los valores de la propiedad text-transform se heredan.
Resaltado en mayúsculas
Lo primero que sugiero es poner en mayúscula todo el texto, para lo cual creamos la siguiente regla CSS:
Cuerpo (transformación de texto: mayúsculas;)
En principio, nada complicado, solo usamos el valor en mayúsculas. Como dicen, todo es intuitivo. Así es como se ve en la vida real:
Todo con mayúscula ... Minúsculas: se aplica a todos
En el siguiente paso, apliquemos letras minúsculas en todas partes, para lo cual escribimos lo siguiente:
Cuerpo (transformación de texto: minúsculas;)
Como habrás adivinado, los dos significados que acabamos de conocer son algo antónimos. Y en la siguiente ilustración, puede ver el resultado de la propiedad recién creada.
Página web con minúsculas habilitadas En mayúscula la primera letra de cada palabra
Para hacer esto, solo necesitamos usar el valor correspondiente:
Cuerpo (text-transform: capitalize;)
No sé con qué frecuencia usará una regla de CSS de este tipo, pero no le hará daño conocer esta posibilidad, especialmente cuando resuelva problemas no triviales. El resultado se puede ver en la siguiente imagen.
Se aplicó el texto después de usar mayúsculas Finalmente, echemos un vistazo rápido al último valor, ninguno. Como dije, se puede usar para revertir la herencia de un padre. Por ejemplo, imagina que tenemos todas las reglas anteriores en vigor, y para los párrafos debemos cancelarlas, para ello escribimos lo siguiente:
P (transformación de texto: ninguna;)
Me atrevo a asumir que lo entiendes todo, si no, haz tus preguntas en los comentarios. Y eso es todo para mí. Espero que hayas encontrado útil este tutorial de CSS. Si es verdad:
- Vuelva a publicar este artículo en las redes sociales para que más personas puedan beneficiarse de él;
- Suscríbete a mi newsletter para no perderte publicaciones de blog útiles e interesantes.
En esto no te estoy diciendo adiós. ¡Gracias por su atención y nos vemos en las siguientes publicaciones!
Convierta la letra minúscula a minúscula y la primera mayúscula usando CSS (8)
No hay una opción de sugerencia de límite en CSS. Otras respuestas que sugieren text-transform: capitalize no son correctas ya que este parámetro usa cada palabra por cada palabra .
aquí grosero la forma de hacerlo si quieres la primera letra de cada elemento era en mayúsculas, pero definitivamente no se acerca a los límites reales:
P (transformación de texto: minúsculas;) p: primera letra (transformación de texto: mayúsculas;)
ESTA ES UNA ORACIÓN DE EJEMPLO.
ESTA ES OTRA ORACIÓN DE EJEMPLO. Y ESTO ES OTRO, PERO SERÁ TOTALMENTE MÁS BAJO.
¿Cómo puedo convertir la letra MAYÚSCULA a minúscula y la primera letra mayúscula de cada oración como se muestra a continuación usando solo CSS?
Desde: ESTA ES UNA APLICACIÓN DE EJEMPLO.
A: Esta es una sugerencia aproximada.
Actualizar: cuando uso text-transform: capize; El resultado sigue siendo el mismo.
No puede hacer esto únicamente con CSS. Hay un atributo de transformación de texto, pero solo no acepta ninguno, escribe mayúsculas, mayúsculas, minúsculas y hereda.
Es posible que desee buscar una solución JS o una solución del lado del servidor.
Si puede poner todos los caracteres en minúsculas en el servidor, entonces puede aplicar:
Transformación de texto: capitalizar
No creo que la conversión de texto funcione con letras mayúsculas como entrada.
Si quieres usar para no funcionará, por o área de texto necesita usar Javascript
que debería funcionar bien para o