Cómo hacer todas las letras mayúsculas en CSS. Crear estilos CSS con letras mayúsculas utilizando pseudoelementos
Controla si el texto del elemento se convierte a mayúsculas o caracteres en mayúsculas. Cuando el valor es distinto de none, se cambiará el caso del texto fuente.
Breve información
Designaciones
| Descripción | Ejemplo | |
|---|---|---|
| <тип> | Indica el tipo de valor. | <размер> |
| A && B | Los valores deben generarse en el orden especificado. | <размер> && <цвет> |
| Un | B | Indica que es necesario seleccionar solo un valor de los propuestos (A o B). | normales | pequeñas capitalizaciones |
| Un || B | Cada valor se puede utilizar de forma independiente o junto con otros en cualquier orden. | ancho || contar |
| Valores de los grupos. | [ cultivo || cruz ] | |
| * | Repita cero o más veces. | [,<время>]* |
| + | Repita una o más veces. | <число>+ |
| ? | El tipo, palabra o grupo especificado es opcional. | ¿recuadro? |
| (A, B) | Repita al menos A, pero no más de B veces. | <радиус>{1,4} |
| # | Repita una o más veces separadas por comas. | <время># |
Valores
capitalizar El primer carácter de cada palabra de una oración se escribirá en mayúscula. Los símbolos restantes no cambian su apariencia. minúsculas Todos los caracteres del texto pasan a estar en minúsculas (minúsculas). mayúsculas Todos los caracteres del texto se convierten en mayúsculas (mayúsculas). none No cambia el caso de los caracteres.
Salvadera
Winnie the Pooh no siempre fue reacio a tomar un pequeño refrigerio, especialmente a las once de la mañana, porque a esa hora el desayuno ya había terminado y el almuerzo aún no había comenzado. Y, por supuesto, se alegró terriblemente de ver que el Conejo sacaba tazas y platos.
div (transformación de texto: capitalizar;)
Ejemplo
Monumento cultural de la Edad Media
Las tierras bajas del Amazonas abundan en el pequeño transporte de perros y gatos, y Hajos Bahía es famosa por sus vinos tintos.
El resultado de este ejemplo se muestra en la Fig. 1.
Arroz. 1. Aplicar la propiedad de transformación de texto
Modelo de objetos
Objeto.style.textTransform
Especificación
Cada especificación pasa por varias etapas de aprobación.
- Recomendación: la especificación ha sido aprobada por el W3C y se recomienda como estándar.
- Recomendación del candidato ( Posible recomendación) - el grupo responsable del estándar está satisfecho de que cumple sus objetivos, pero requiere ayuda de la comunidad de desarrollo para implementar el estándar.
- Recomendación propuesta Recomendación sugerida) - en esta etapa el documento se envía al Consejo Asesor del W3C para su aprobación final.
- Borrador de trabajo: una versión más madura de un borrador que ha sido discutido y modificado para revisión de la comunidad.
- Borrador del editor ( Borrador editorial) - una versión borrador del estándar después de que los editores del proyecto realizaron cambios.
- Borrador ( Borrador de especificación) - el primer borrador de la norma.
Una letra mayúscula, según la definición, es un elemento de texto que aumenta relativamente de tamaño. En casi todos los idiomas, una oración comienza con una letra mayúscula. Y diseñar el comienzo de un párrafo con una letra mayúscula destacada permite estructurar el texto y lo hace más fácil de percibir. Cuando se diseña una página de Internet, el texto se puede escribir de acuerdo con las preferencias del autor y las reglas del idioma ruso. También puede "automatizar" su diseño ingresando ciertos "comandos" en un archivo con extensión CSS (una hoja de estilo) o agregando una sección de estilo a su archivo html. CSS generalmente se estudia además de HTML para cambiar rápidamente algunos elementos de diseño en todo el texto a la vez.
Esto es especialmente cierto si el sitio tiene cientos de páginas y realizar cambios en cada una de ellas es un proceso que requiere mucha mano de obra.
Si aplica CSS, las letras mayúsculas al principio de cada párrafo pueden parecer especiales. Por ejemplo, el siguiente código, ingresado en HTML sin paréntesis, permite que el texto formateado con la etiqueta “p” haga que la letra mayúscula (primera letra) sea más grande (220 % del tamaño estándar), amarilla (el valor del color es amarillo) y escríbalo en una fuente diferente al resto del texto: Georgia vs. Batangche.
(<) style(>)
p: primera letra (familia de fuentes: Georgia; tamaño de fuente: 220%; color: amarillo;)
(<)/style(>)
Puede obtener hermosas letras mayúsculas creando su propia fuente en forma de imágenes: para cada letra hay una imagen separada, por ejemplo, en estilo ruso antiguo o gótico. Se pueden dibujar Luego, en los lugares requeridos, en lugar de la letra mayúscula, puede insertar el código sin paréntesis (<) img src=”ссылка на место, где лежит картинка”(>). Los atributos adicionales serán alto y ancho: el ancho y el alto de la imagen, que se pueden configurar en píxeles para una combinación armoniosa con el resto del texto. Ejemplo: (<) img src=”ссылка на место, где лежит картинка” heigh=12 px width=6px(>). Paréntesis alrededor< и >eliminamos.
Si no tiene la oportunidad de dibujar el alfabeto usted mismo, puede diseñar la letra mayúscula utilizando fuentes que están disponibles gratuitamente en Google (sección Fuentes) u otros motores y recursos de búsqueda. Para hacer esto, el código anterior debe formatearse de la siguiente manera:
(<) style(>)
p (familia de fuentes: batangche; tamaño de fuente: 93%;)
p: primera letra (familia de fuentes: Kelly+Slab; tamaño de fuente: 220%; color: azul;)
(<)/style(>)
(<)link href="http://fonts.googleapis.com/css?family=Kelly+Slab&subset=latin,cyrillic" rel="stylesheet" type="text/css" (>).
El servicio de Google le permite elegir uno u otro y proporciona enlaces listos para insertar en html o css. Llamamos su atención sobre el hecho de que es necesario seleccionar un grupo de fuentes: latina o cirílica, porque... Casi todas las fuentes latinas no funcionan al formatear texto en ruso. Actualmente, el motor de búsqueda ofrece alrededor de 40 tipos de forma gratuita.
Se puede aplicar estilo a una letra mayúscula o a su antípoda mayúscula utilizando la propiedad de transformación de texto CSS. Si establece el valor transformación de texto: ninguno en la hoja de estilo, el texto se verá tal como lo escribe. Para convertir todas las letras a minúsculas, debe establecer el valor de transformación de texto: minúsculas, separadas por dos puntos y para mayúsculas, mayúsculas. Establecer la propiedad en transformación de texto: capitalizar hará que cada palabra tenga una letra mayúscula al principio.
Hola lectores de este blog. Hoy hablaré sobre cómo puedes hacer todas las letras mayúsculas usando CSS. Por supuesto, para hacer esto, puede activar el bloqueo de mayúsculas y escribir el texto deseado, pero este es un método bastante primitivo. Pero, ¿qué sucede si necesita resaltar un párrafo separado en un artículo terminado?
Poner todas las letras en mayúscula en CSS
Hay una propiedad de transformación de texto para esto que, como habrás adivinado, transforma el texto. Tiene los siguientes valores:
- minúsculas: todo el texto se muestra en letras minúsculas
- mayúsculas: todas las palabras se muestran en mayúsculas (lo que necesitamos)
- capitalizar: la primera letra de cada palabra está en mayúscula
Eso es básicamente todo lo que necesitas saber. Todo lo que queda es descubrir cómo acceder al elemento deseado. Imaginemos este ejemplo: el quinto párrafo de un artículo debe escribirse en mayúsculas. ¿Y cómo se puede implementar esto?
¿Cómo llegar al elemento deseado?
Como sabes, un párrafo se crea utilizando una etiqueta html emparejada, cuyo contenido completo se convierte en un párrafo. Todo lo que queda es definir una nueva clase de estilo para ello:
Ahora tenemos la oportunidad de acceder a este párrafo concreto a través del lenguaje CSS sin afectar al resto. Puedes hacerlo así:
Letra mayúscula (transformación de texto: mayúscula;)
Este método es adecuado cuando necesita resaltar un fragmento de un artículo en particular. ¿Qué pasaría si todas las páginas tuvieran que tener cierto texto en letras mayúsculas? En este caso, es mejor colocar el bloque en un archivo de plantilla para no escribirlo cada vez.
O quizás necesites resaltar el segundo párrafo de cada artículo usando CSS en mayúsculas. Entonces otra opción te conviene. Busque el bloque donde aparece el artículo y acceda al segundo párrafo utilizando la pseudoclase nth-child. En este ejemplo, nuestro bloque con un artículo tiene la clase artículo.
Artículo p:nth-child(2)(Transformación de texto: mayúsculas)
Como puedes ver, existe una solución diferente para cada caso concreto. Lo más importante es recordar la propiedad de transformación de texto, que cambia el formato de las letras.
En general, no se recomienda mostrar el texto de esta manera, porque perjudica mucho su percepción, pero se pueden resaltar algunos fragmentos particularmente importantes.
Hoy analizamos la propiedad de transformación de texto. Suscríbete al blog para recibir nuevos artículos.
Buenos días, fanáticos de la creación de sitios. La publicación de hoy discutirá el tema del diseño de contenido de texto. Es por eso que aprenderá a configurar letras mayúsculas usando herramientas CSS, se familiarizará con varias opciones para crear una letra mayúscula y, por supuesto, podrá probar todo en la práctica. Bueno, ¡ahora pasemos a la parte divertida!
Transformemos el texto
Gracias a las hojas de estilo en cascada, puedes cambiar tanto el primer carácter de un bloque como todo el texto. Te diré cómo puedes hacer ambas cosas. Además, todas las herramientas mencionadas en este artículo son compatibles con tres niveles de lenguaje: css1, css2, css2.1 y css3.
Comenzaré con una propiedad interesante que modifica todo el contenido del texto en el archivo . Este transformación de texto.
El elemento nombrado puede convertir caracteres a mayúsculas, minúsculas y también establecer cada primer carácter de una palabra en mayúscula. Escribí más sobre los valores en la tabla.
Ahora, para reforzar el material teórico, veamos un ejemplo.
¡Atención!
!¡Mañana hay descuento en todos los productos cosméticos!
La promoción es válida en todas las sucursales ubicadas en tu ciudad.
Creando una letra capitular
Si no sabe qué significa el término "capítulo", ahora es el momento de averiguarlo, ya que está directamente relacionado con el tema actual.
Una letra mayúscula (o a veces dicen inicial) es la primera letra de un capítulo, que se diferencia del resto por su gran tamaño, color y, en algunos casos, incluso diseño de fuente. En la vida real, se puede encontrar un ejemplo de una carta de este tipo en manuscritos y libros antiguos.
Hay varias formas de crear una inicial. A menudo, el símbolo está resaltado con una etiqueta de lenguaje de marcado. y luego se prescriben ciertas propiedades en los estilos que lo modifican. Esta es una buena manera, pero esta publicación habla de mecanismos CSS (que, en mi opinión, son mucho más lógicos y convenientes de usar en este caso).
Para resolver este problema, puede utilizar una herramienta como.
Entonces, en este caso usamos:primera letra. Como todos los pseudoelementos, se asigna a un selector mediante dos puntos. Luego, según todas las reglas de las hojas de estilo, se indican las propiedades. Sin embargo, sólo puede aplicar propiedades relacionadas con la edición de fuentes, relleno, color, fondo, márgenes y bordes.
Propongo considerar un ejemplo específico. Al implementar el pequeño programa presentado, decidí hacer no solo una letra inicial de color, sino llenarla de flores. Para hacer esto, debe usar algunos trucos complicados: configurar el color de fuente en transparente y completar la letra con la imagen seleccionada.
Este párrafo contiene una frase con un contenido muy interesante.
Continuaremos la interesante historia en el siguiente párrafo.
El resultado resultante parece muy atractivo e inusual, lo cual es una solución ideal para.
Como puedes ver, este tema es muy simple. Puede utilizar fácilmente el código del programa que le he proporcionado para sus recursos web, modificándolo y personalizándolo para adaptarlo a su estilo.
Si el material presentado le resultó útil, suscríbase a las actualizaciones de mi blog y no olvide compartir los conocimientos adquiridos (y, por supuesto, el enlace a mi blog) con sus amigos. ¡Te deseo buena suerte!
¡Adiós!
Saludos cordiales, Roman Chueshov
Leer: 236 veces
Le permite cambiar el caso de las letras de texto.
El valor predeterminado se establece en none, lo que no tiene ningún efecto en el texto. El caso del texto sigue siendo el mismo. Los valores de mayúsculas y minúsculas convierten los caracteres a mayúsculas y minúsculas, respectivamente. Si especifica mayúsculas, solo se escribirán en mayúscula los primeros caracteres de cada palabra. Heredar hereda el valor del padre.
Ejemplo
h3 (transformación de texto: mayúsculas;) .minúsculas (transformación de texto: minúsculas;) .capitalize (transformación de texto: capitalización;)Este es el título. Tiene la propiedad de transformación de texto aplicada con el valor en mayúsculas. Todos los caracteres estarán en mayúsculas.
La propiedad de transformación de texto con el valor en minúsculas se aplica a este párrafo, lo que significa que todas las letras estarán en minúsculas.
Y a este último párrafo se le aplica la propiedad text-transform con la propiedad CAPITALIZE. Las primeras letras de cada palabra estarán en mayúscula, y sólo esas.