Ventanas.  virus  Cuadernos.  Internet.  oficina.  Utilidades.  Conductores



Convertir una letra minúscula a minúscula y la primera a mayúscula usando CSS (8)

No hay una opción de cláusula de límite en CSS. Otras respuestas que sugieren transformación de texto: mayúsculas son incorrectas porque esta configuración usa cada palabra por cada palabra .

Aquí brusco una forma de hacer esto si desea que la primera letra de cada elemento esté en mayúscula, pero eso definitivamente no está cerca de 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.

ESTE ES OTRO EJEMPLO DE ORACIÓN. Y ESTE ES OTRO, PERO SERÁ TOTALMENTE EN MINÚSCULAS.

Cómo convertir letras MAYÚSCULAS a minúsculas y la primera letra mayúscula para cada oración como a continuación solo con usando CSS?

De: ESTA ES UNA APLICACIÓN DE MUESTRA.

Para: Esta es una oración de muestra.

Actualización: cuando uso la transformación de texto: capize; El resultado sigue siendo el mismo.

No puedes hacerlo puramente con CSS. Hay un atributo de transformación de texto, pero solo acepta ninguno, mayúsculas, mayúsculas, minúsculas y herencia.

Es posible que desee buscar una solución JS o una solución del lado del servidor.

Si puede hacer que todos los caracteres estén en minúsculas en el servidor, entonces puede aplicar:

Transformación de texto: capitalizar

No creo que la transformación de texto funcione con letras mayúsculas como entrada.

Si desea usar para que no funcione, para o para el área de texto, debe usar Javascript

function capitaliseName() ( var str = document.getElementById("name").value; document.getElementById("name").value = str.charAt(0).toUpperCase() + str.slice(1); )

que debería funcionar bien para o

CSS te permite producir configuración flexible texto que se representa utilizando el lenguaje HMTL. Hoy veremos el efecto de la propiedad "text-transform", que permite cambiar el caso de la fuente. Esta opción es compatible con todos navegadores modernos y está incluido en la especificación de todas las versiones de CSS.

Objetivo

La propiedad "text-transform" puede tomar tres valores principales y dos adicionales. Por ejemplo, puede asignar mayúsculas a todo el texto seleccionado. O puede dar un comando opuesto a la propiedad anterior, donde todos los caracteres se convierten en minúsculas. Puede hacer una cita usando cualquier método conveniente para usted. Por ejemplo, usando estilos en línea. O puedes crear

Un archivo separado con una descripción de todas las propiedades. El método de asignación a utilizar depende de usted. "Text-transform" puede tomar los siguientes valores:

  • mayúsculas Pone todos los caracteres seleccionados en mayúsculas. En CSS, las mayúsculas son una ocurrencia común, ya que este valor ayuda a resolver muchas tareas complejas relacionadas con el texto.
  • minúsculas Esta propiedad es completamente opuesta al comando en mayúsculas.
  • capitalizar. Cambia el caso de la primera letra a mayúsculas. El resto de los personajes no cambiarán.
  • Ninguno. Le permite deshacer todos los valores asignados (requerido para predefinir una propiedad). Normalmente, este valor se establece de forma predeterminada.
  • Heredar. Hereda todas las propiedades del elemento padre. Tenga en cuenta que IE no admite esta propiedad.

Solicitud

Con CSS, las mayúsculas (o efectos similares) se configuran con un simple comando. Por lo tanto, no hay necesidad de cambiar o reescribir todo el texto. Si estamos hablando sobre un sitio de una página, entonces esta propiedad puede no ser útil. Pero cuando tiene un gran portal bajo su control, donde necesita corregir el caso de las letras en ciertos fragmentos, entonces la "transformación de texto" se convierte en el único medio efectivo. Por ejemplo, debe corregir la fuente en las etiquetas de título "h2". Para hacer esto, agregue la entrada: "h2 ( text-transform: uppercase; )", y luego todos los encabezados de segundo nivel estarán en mayúsculas.

Peculiaridades

Algunos pueden pensar que procesar manualmente el texto y cambiar la fuente usando la propiedad "text-transform" no hace ninguna diferencia. Pero no lo es. Si lo cambia manualmente a mayúsculas (mayúsculas), al copiar esta información de su sitio, los caracteres permanecerán sin cambios. Si usa el lenguaje CSS, entonces todo sucede de manera diferente. La propiedad "text-transform" solo cambia visualmente la fuente para los usuarios. Pero en realidad, los símbolos permanecen sin cambios. Esto sucede con todos los valores de esta propiedad. La información copiada (texto) tendrá el caso original, que se utiliza en código fuente paginas Esta es la única diferencia entre el procesamiento manual y el uso de comandos CSS.

No importa cuál quieras usar: minúsculas o mayúsculas, lo principal es no olvidar el propósito. Por ejemplo, si solo necesita cambios con fines decorativos, puede usar de manera segura la propiedad "text-transform". Bueno, si sabe que sus usuarios probablemente copiarán la información que publicó, entonces es mejor cambiar manualmente el caso de todo el texto. De hecho, a veces los lectores no notan tal sustitución de la fuente. Esto es especialmente crítico cuando se trata de documentos importantes e información similar.

El índice en relación con el texto es el desplazamiento de los caracteres en relación con la línea de base hacia arriba o hacia abajo. Dependiendo del valor positivo o negativo de la compensación, el índice se denomina índice superior o inferior, respectivamente. Se utilizan activamente en matemáticas, física, química y para denotar unidades de medida. HTML ofrece dos elementos para crear un índice: (del superíndice inglés) - superíndice y (del subíndice inglés) - subíndice. El texto colocado en uno de estos contenedores se indica con un tamaño más pequeño que el texto base y se mueve hacia arriba o hacia abajo en relación con él. El ejemplo 1 muestra intercambio los elementos y estilos especificados para cambiar la apariencia del texto.

Ejemplo 1: crear un superíndice y un subíndice

Superíndice y subíndice .formula ( tamaño de fuente: 1.4em; /* Tamaño del texto de la fórmula */ ) sup, sub ( estilo de fuente: cursiva; /* Cursiva */ color: rojo; /* Color del carácter rojo */ ) sub ( color: azul; /* Color de carácter azul */ )

Ecuación característica de la superficie de segundo grado

λ3 - I1λ2 + I2λ - I3 = 0

En el ejemplo, tanto el subíndice como el superíndice ocurren al mismo tiempo. Para cambiar el estilo de fuente del índice, se aplican estilos que definen un diseño único (Fig. 1).

Arroz. 1. La aparición de índices después de aplicar estilos.

Por lo general, puede negarse a usar ya favor de los estilos. Un análogo de estos elementos es la propiedad de alineación vertical, que hace que el texto se mueva verticalmente una distancia dada. En particular, el ejemplo 2 usa 0.8em como valor para sobrescrito y -0.5em para el inferior. Em es una unidad relativa igual al tamaño de la fuente actual. Por ejemplo, 0,5 em significa que el texto debe desplazarse la mitad del tamaño de la fuente.

Ejemplo 2: uso de estilos para administrar índices

Superíndice y subíndice .formula ( tamaño de fuente: 1.6em; /* Tamaño de texto */ estilo de fuente: cursiva; /* Cursiva */ ) .sup, .sub ( estilo de fuente: normal; /* Normal * / fuente- tamaño: 0.6em; /* Tamaño de índice */ color: rojo; /* Color de superíndice */ alineación vertical: 0.8em; /* Desplazar texto hacia arriba */ ) .sub ( color: azul; /* Subíndice de color */ vertical -align: -0.5em; /* Desplaza el texto hacia abajo */ )

Polinomio de grado n

f(x) = a0 + a1 x + ... + an-1 xn-1 + an xn

En el ejemplo, la fórmula en sí se muestra en un tamaño ampliado, los caracteres en superíndice se establecen en rojo y los inferiores en azul (Fig. 2).

En el último video tutorial, aprendimos cómo eliminar y agregar nueva información a nueva versión documento HTML, al informar esto los motores de búsqueda y resaltando visualmente para que los visitantes también puedan ver los cambios. Para esto, usamos las etiquetas del e ins.

En este video tutorial, continuamos con el tema del formato de texto en un documento HTML. Nos familiarizaremos con dos etiquetas HTML que indican el superíndice y el subíndice del texto.

La etiqueta sup HTML es el superíndice de texto en HTML.

La etiqueta HTML está diseñada para indicar el superíndice de texto en HTML. En algunos temas de sitios, esta etiqueta será simplemente indispensable. Por ejemplo, si tiene, o está planeando, un sitio relacionado con alguna fórmula, matemática o química. O, si hay un sitio de construcción, la etiqueta será muy útil y ayudará en el diseño de artículos, al escribir fórmulas o cualquier cantidad, por ejemplo, metros cuadrados en temas de construcción.

Pero si su sitio no pertenece a los temas enumerados, esto no significa que la etiqueta no sea útil. Basta con mostrar imaginación e ingenio y encontrarle un uso a este elemento.

La subetiqueta HTML es el subíndice de texto en HTML.

En cuanto a la etiqueta HTML, es lo opuesto a la etiqueta, y se encarga de especificar el subíndice del texto. El texto de subíndice se puede utilizar al escribir fórmulas o ecuaciones matemáticas. Pero además de esto, quizás puedas encontrar otros usos para la etiqueta.

La siguiente lección en video está dedicada a dos etiquetas más, que en algunas situaciones pueden ser simplemente insustituibles. Además, pueden no solo formatear el texto, por ejemplo, en un artículo, sino también al especificar información diversa en el sitio durante el diseño de la página. Una de las etiquetas se envuelve en HTML y la segunda dibuja una línea horizontal.

Etiquetas HTML y - Definición y uso de texto de subíndice y superíndice

La etiqueta define el texto del subíndice. El texto del subíndice tiene la mitad de la altura y aparece debajo de la línea de base. El texto de subíndice se puede usar al escribir fórmulas químicas, como H 2 O.

La etiqueta define el 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.

Compatibilidad con navegador

Las etiquetas y son compatibles con todos los principales navegadores.

Diferencias entre los atributos estándar de HTML y XHTML

La columna DTD indica en qué tipo de documento se permite el atributo DTD HTML 4.01/XHTML 1.0. S=Estricto, T=Transicional y F=Frameset.

Las etiquetas y admiten los siguientes atributos estándar:

Atributo Valor Descripción DTD
clase nombre de la clase Especifica el nombre de clase para un elemento. STF
directorio rtl
litros
Especifica la dirección del texto para el contenido de un elemento. STF
identificación identificador Especifica un identificador único para un elemento. STF
idioma Código de lenguaje Especifica el código de idioma para el contenido del elemento. STF
estilo definición_de_estilo Especifica un estilo en línea para un elemento. STF
título texto Indica Información adicional sobre el elemento STF
xml:idioma Código de lenguaje Especifica el código de idioma para el contenido de un elemento en documentos XHTML STF

Más información sobre Atributos Estándar.

Atributos de eventos

Las etiquetas y admiten los siguientes atributos de evento:

Atributo Valor Descripción DTD
al hacer clic guion Script para ejecutar con un clic del mouse STF
ondblclick guion Script para ejecutar con doble clic STF
en el mouse hacia abajo guion Script para ejecutar con un clic del mouse STF
onmovemove guion Script para ejecutar cuando el mouse se mueve STF
fuera del ratón guion Script que se ejecutará cuando el puntero del mouse abandone el elemento STF
el ratón por encima guion Script para ejecutar cuando el mouse se mueve sobre un elemento STF
en el mouse arriba guion Script para ejecutar cuando se suelta el botón del mouse STF
onkeydown guion Script para ejecutar al presionar una tecla STF
onkeypress guion Script para ejecutar cuando se presiona una tecla y luego se suelta STF
encendido-teclado guion Script para ejecutar cuando se suelta la tecla STF

Información adicional sobre

Si nota un error, seleccione un fragmento de texto y presione Ctrl + Enter
COMPARTIR: