Una letra mayúscula, por definición, es un elemento de texto que está relativamente agrandado en tamaño.Casi todos los idiomas comienzan una oración con una letra mayúscula. Y el diseño del inicio del párrafo con mayúscula destacada permite estructurar el texto y facilita su percepción. Cuando se diseña una página web, el texto se puede escribir de acuerdo con las preferencias del autor y las reglas del idioma ruso. Además, su diseño se puede "automatizar" ingresando ciertos "comandos" en un archivo con la extensión css - una hoja de estilo - o complementar su archivo html sección de estilo. CSS generalmente se estudia adicionalmente con html para cambiar rápidamente algunos elementos de diseño a la vez en todo el texto.
Esto es especialmente cierto si el sitio tiene cientos de páginas y hacer cambios en cada una de ellas es un proceso que requiere mucho tiempo.
Si usa css, las letras mayúsculas al comienzo de cada párrafo pueden verse especiales. Por ejemplo, el código a continuación, 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, color amarillo- 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(>)
Se pueden obtener hermosas letras mayúsculas si crea su propia fuente en forma de imágenes, para cada letra cuadro separado, por ejemplo, en estilo ruso antiguo o gótico. Se pueden dibujar en Luego, en los lugares requeridos, en lugar de una letra mayúscula, puede insertar código sin paréntesis (<) img src=”ссылка на место, где лежит картинка”(>). Los atributos adicionales serán el alto y el ancho: el ancho y el alto de la imagen, que se pueden establecer en píxeles para armonizar con el resto del texto. Ejemplo: (<) img src=”ссылка на место, где лежит картинка” heigh=12 px width=6px(>). paréntesis alrededor< и >eliminar.
Si no tiene la oportunidad de dibujar el alfabeto usted mismo, la letra mayúscula se puede diseñar utilizando fuentes que están disponibles gratuitamente en Google (sección Fuentes) u otros motores de búsqueda y recursos. 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. En este momento El motor de búsqueda proporciona alrededor de 40 tipos de forma gratuita.
Se puede diseñar una letra mayúscula o su contraparte minúscula utilizando la propiedad de transformación de texto CSS. Si establece el valor de transformación de texto: ninguno en la hoja de estilo, el texto se verá de la forma en que lo escribió. Para convertir todas las letras a minúsculas, debe establecer la transformación de texto de valor: minúsculas a dos puntos y mayúsculas para mayúsculas. Establecer la propiedad en transformación de texto: capitalizar hará que cada palabra comience con una letra mayúscula.
Controla si el texto del elemento se convierte a caracteres en mayúsculas o minúsculas. Cuando el valor es distinto de none , se cambiará el caso del texto original.
| Descripción | Ejemplo | |
|---|---|---|
| <тип> | Especifica el tipo del valor. | <размер> |
| A&B | Los valores deben salir en el orden especificado. | <размер> && <цвет> |
| un | B | Indica que solo se debe seleccionar uno de los valores sugeridos (A o B). | normales | letras minúsculas |
| un || B | Cada valor se puede usar solo o en combinación con otros en cualquier orden. | ancho || contar |
| Valores de los grupos. | [ cultivo || cruz] | |
| * | Repetir 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. | <время># |
mayúscula El primer carácter de cada palabra en la oración se escribirá en mayúscula. Los personajes restantes no cambian su apariencia. minúsculas Todos los caracteres de texto se convierten en minúsculas (minúsculas). mayúsculas Todos los caracteres de texto se cambian a mayúsculas ( mayúscula). ninguno No cambia el caso de los caracteres.
Winnie the Pooh no siempre fue reacio a un pequeño refrigerio, especialmente a las once de la mañana, porque a esa hora hacía tiempo que el desayuno había terminado y la cena ni siquiera había pensado en comenzar. Y, por supuesto, se alegró mucho de ver que el Conejo sacó tazas y platos.
div (transformación de texto: capitalizar;)
Las tierras bajas amazónicas albergan una cantidad desmesurada de perros y gatos, y Hajos Baia es famosa por sus vinos tintos.
Resultado este ejemplo mostrado en la fig. 1.
Arroz. 1. Aplicar la propiedad de transformación de texto
Un objeto.style.textTransform
Cada especificación pasa por varias etapas de aprobación.
Buen día, frikis de la construcción de sitios. La publicación de hoy cubrirá el tema del diseño de contenido de texto. Es por eso que aprenderá cómo se configuran las letras mayúsculas css: familiarícese con varias opciones para crear una letra mayúscula y, por supuesto, puede probar todo en la práctica. Bueno, ¡ahora pasemos a lo más interesante!
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 opciones. Además, todas las herramientas mencionadas en este artículo son compatibles con tres niveles de idioma: css1, css2, css2.1 y css3.
Comenzaré con una propiedad interesante que modifica todo el contenido de 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 como una letra mayúscula. Escribí más sobre los valores en la tabla.
Ahora, para consolidar el material teórico, considere un ejemplo.
La promoción es válida en todas las sucursales ubicadas en tu ciudad.
Si no sabes qué significa el término “letra letra”, entonces es hora de averiguarlo, ya que está directamente relacionado con el tema actual.
La letra inicial (oa veces dicen la inicial) es la primera letra del capítulo, que se diferencia del resto en su gran tamaño, color y en algunos casos hasta en el diseño de la fuente. En la vida, un ejemplo de tal carta se puede encontrar en manuscritos y libros antiguos.
Hay varias formas de crear una inicial. A menudo, un carácter se resalta con una etiqueta de lenguaje de marcado y luego se prescriben ciertas propiedades en los estilos que la modifican. Esta es una buena manera, pero esta publicación habla de mecanismos css (que, en mi opinión, en este caso mucho más lógico y cómodo de usar).
Para resolver este problema, puede utilizar una herramienta como.
Entonces, en este caso: se usa la primera letra. Como todos los pseudoelementos, se agrega al selector con dos puntos. Después de todas las reglas de las hojas de estilo, se especifican las propiedades. Sin embargo, solo se pueden aplicar aquellas propiedades relacionadas con la edición de fuentes, relleno, color, fondo, márgenes y bordes.
Propongo considerar un ejemplo específico. Implementando el pequeño programa presentado, decidí hacer no solo una gorra de color, sino llenarla con colores. Para hacer esto, debe usar algunos trucos complicados para configurar el color de la fuente en transparente y llenar la letra con la imagen seleccionada.
Este párrafo contiene una oración muy interesante.
Continuemos la interesante historia en el siguiente párrafo.
El resultado obtenido se ve muy atractivo e inusual, por lo que es una solución ideal para.
Como puedes ver, este tema es muy simple. Puede usar fácilmente el código que he proporcionado para sus recursos web, modificándolo y ajustándolo para que se ajuste a su estilo.
Si el material presentado le resultó útil, suscríbase a las actualizaciones de mi blog y no olvide compartir sus conocimientos (y, por supuesto, un enlace a mi blog) con sus amigos. ¡Buena suerte!
¡Adiós!
Atentamente, Roman Chueshov
mayúsculas CSS ayudan a romper la monotonía del mismo tipo de diseño, cuyos textos se ven iguales de principio a fin.
Los cronistas utilizaron letras mayúsculas en manuscritos manuscritos, algunos de los cuales datan del siglo V. Las mayúsculas continuaron utilizándose desde el siglo VIII hasta el XV, cuando las imprentas permitieron llevar la imprenta a un nivel industrial. Tanto las letras mayúsculas manuscritas como las impresas se colocaron al principio del texto. A menudo, estaban decorados con un patrón decorativo que se ubicaba alrededor de la letra.
Las letras en relieve y en relieve todavía se utilizan en la actualidad. Se pueden encontrar en periódicos, revistas y libros, así como en la impresión digital. Las letras en relieve a veces se llaman alargadas. Se colocan al ras con la parte inferior del texto que les sigue. Las letras omitidas se colocan al mismo nivel que arriba texto, a veces en una capa detrás del cuerpo principal del contenido del texto, o el resto del texto los envuelve.
Las letras en relieve son mucho más fáciles de definir, ya que quedan al ras con el resto del texto y, por lo general, no es necesario cambiar el ajuste de los márgenes exteriores. Las letras omitidas requieren más sintonia FINA. Será más fácil para usted lidiar con esto si primero comprende cómo se manejan los caracteres elevados.
Los diseñadores que ya conocen CSS saben que deben crear una clase CSS separada para la primera letra mayúscula.
El código CSS para el elemento de párrafo y la clase que crea la carta se vería así:
p ( tamaño de fuente: 20 px; familia de fuentes: Georgia, "Times New Roman", Times, serif;) .myinitialcaps (tamaño de fuente: 48 px; familia de fuentes: Didot;)
Y el código HTML se verá así:
Lo que nos da:
¿Parece demasiado fácil? De hecho, tendrás que hacer ajustes dependiendo de las letras en relieve específicas, ya que cada letra mayúscula requiere un interletraje especial. Después de elegir una fuente para las letras en relieve y para el cuerpo del texto, debe crear clases separadas para cada letra en relieve. en la parte inferior CSS class.myinitialcapsi el margen de la derecha es negativo para reducir la distancia entre I y n.
Myinitialcapsi (tamaño de fuente: 48 px; familia de fuentes: Didot; margen derecho: -1 px;)
En este caso, hay un espacio adicional entre la "I" y la "n".
ncluir una nueva clase con un margen negativo lo acerca.
Dependiendo de la resolución de la pantalla en el ejemplo anterior, I y n pueden verse como si se hubieran fusionado. Esto se debe a las serifas al final de las letras. Por lo tanto, antes de elegir la opción final estilos css, prueba el sitio en varios dispositivos para ver cómo se ve el texto CSS en ellos.
Puede aumentar no solo las letras al principio del texto. Puede implementar otra clase para crear una versión más grande de las comillas que aparecerán junto a la letra. En nuestro caso, ni la clase de letra con un tamaño de 48 píxeles ni la clase de texto de 20 píxeles son adecuadas para comillas. Más bien, será algo intermedio: 30 píxeles. Bajamos las comillas 4 píxeles para alinearlas ópticamente con I :
Myinitialcapsq (tamaño de fuente: 30 px; familia de fuentes: Didot; float: izquierda; margen superior: 4 px;)
ncluir” una nueva clase con un margen negativo lo acerca.
Debe tener mucho cuidado al especificar cada una de las letras mayúsculas de CSS junto con las comillas para que su interletraje y alineación coincidan con el marcado circundante. Por ejemplo, la letra T deberá moverse hacia la izquierda, un poco más allá del borde del párrafo, para que su línea transversal encaje visualmente en el diseño. Deberá hacer lo mismo con letras redondas como C, G, O y Q. Este ejemplo utiliza tamaños de fuente 20, 30 y 48. Pero deberá ajustar los tamaños según las fuentes específicas que haya elegido. Así como los tamaños y resoluciones de las pantallas en las que se visualizará el sitio.
Con el pseudoelemento CSS, puede crear fácilmente una letra en relieve agregando ::primera letra al elemento de párrafo. Usar :primera letra ( con un colon) para navegadores heredados:
p ( tamaño de fuente: 1,2 em; familia de fuentes: Georgia, "Times New Roman", Times, serif; altura de línea: 2 em; relleno inferior: 1,2 em;) p::primera letra ( tamaño de fuente: 3.6em; transformación de texto: mayúsculas; familia de fuentes: "Monotype Bernard Condensed", serif; margen derecho: 0.03em;) .initialb (margen derecho:-0.1em;) .initialn (margen derecho:-0.15 em ;)
Un código HTML que contiene clases CSS que tienen en cuenta el interletraje de las letras N y B se verá así...
Una letra inicial, siendo la primera letra mayúscula.
Con un salto de línea, la siguiente línea no tiene límite inicial.
norte Observe en la fuente HTML cómo la primera letra, no una letra mayúscula en el HTML, se ajusta al tamaño de mayúscula inicial de 3,6 em. Listo, ¿eh?
B ut con un retorno duro y un nuevo párrafo comenzado, siempre se crea otro límite inicial. Puede que te estés preguntando ¿Cómo voy a dar cuenta de esto? ¿Se supone que debo tener un límite inicial al comienzo de un párrafo muy nuevo? Bueno, podrías. Pero, ¿quieres que se vea de esa manera? ¿Es absolutamente necesario que se vea de esa manera?
La primera letra mayúscula de un párrafo se convierte en una letra.
La primera letra después de un salto de línea no se escribirá en mayúscula.
O Tenga en cuenta que en código fuente En HTML, la primera letra no está en mayúscula, pero se convierte en un carácter de 3,6 em.
ACERCA DE Sin embargo, incluso después de un salto de línea forzado, siempre se crea una letra al comienzo de cada nuevo párrafo. Usted puede preguntarse: ¿Cómo puedo tener esto en cuenta? ¿Necesito agregar letras para todos estos casos? Bien tu puedes. ¿Pero es necesario?
Incluso con los beneficios que brindan los pseudoelementos, tuvimos que agregar una gran cantidad de código para definir clases separadas para manejar los problemas de interletraje y relleno. Pero este método convertirá la primera letra de cada nuevo párrafo en mayúsculas CSS. Para algunos, puede no ser adecuado, porque no es necesario convertir la primera letra de cada párrafo.
Agregar la pseudoclase :first-child ayuda a resolver el problema de la conversión innecesaria de las primeras letras:
p (tamaño de fuente: 1,2 em; familia de fuentes: Georgia, "Times New Roman", Times, serif; altura de línea: 2 em; relleno inferior: 0,5 em;) p: primer hijo:: primera letra ( tamaño de fuente: 3,6 em; transformación de texto: mayúsculas; familia de fuentes: "Monotype Bernard Condensed", serif; margen derecho: 0,03 em;)
Combinando este código con HTML:
La primera letra que se define como primer hijo es la única letra que se convierte en una letra capitular elevada en este método.
Dado que solo se convierte la letra definida como first-child, tenga en cuenta que este ejemplo difiere del anterior sin first-child. Además, no convertimos las primeras letras después del comienzo de un párrafo y después de un salto de línea forzado. Esto se ve más elegante que el aspecto del diseño cuando convertimos todas las primeras letras de los párrafos.
La ventaja de usar pseudoclases es la capacidad de manejar varios casos especiales. ¿Qué pasa con las desventajas? Hay muchas pseudoclases diferentes, y se pueden combinar de tantas maneras que pueden hacer que tu cabeza dé vueltas. Por ejemplo, las pseudoclases :first-child y :first-of-type pueden producir los mismos resultados. También puede aplicar una pseudoclase no solo a un párrafo, sino también a elementos sección ( tamaño de fuente: 1,2 em; familia de fuentes: Georgia, "Times New Roman", Times, serif; altura de línea: 3 em;) sección>p: primer hijo: primera letra ( tamaño de fuente: 4 em; transformación de texto: mayúsculas; familia de fuentes: Didot, serif; margen derecho: 5px;) Y junto con HTML: Al comienzo de la sección, la primera letra se establece en una letra mayúscula en relieve. Y un nuevo párrafo... Si tiene ganas de experimentar, puede explorar diferentes métodos además de :first-child y :first-of-type. Por ejemplo, como :nth-of-type o :nth-of-child , para ver cómo se pueden usar ciertos tipos de pseudoclase para el texto en mayúsculas de CSS. Ya sea que siga los principios descritos en este artículo o comience a profundizar, una vez que aprenda a trabajar con las pseudoclases CSS first-child , :first-of-type y :first-letter, podrá aplicar correctamente a elementos HTML. o en detalle sobre letras y HTML formato CSS
El capítulo contiene ejemplos formato de carta desde el área Marcado de hipertexto. En el menú de la izquierda encontrarás tutoriales HTML modernos y muy detallados. Te permitirán crear tu sitio desde cero mientras mira un poco más abajo. Puede ser interesante. Época sociedad de información La humanidad ha entrado en un nuevo período de su desarrollo, en el que la información y tecnologías de red jugar un papel sumamente importante. Vivimos en la era de la sociedad de la información, que se caracteriza por el rápido desarrollo de las tecnologías de la información y las telecomunicaciones. Con la llegada de la computadora e Internet, comenzaron cambios tremendos. La computadora e Internet están empujando a la sociedad a formular nuevas normas de comportamiento, reglas e ideales. Internet es para la nueva generación lo que la televisión fue para la generación anterior. Pero Red global mucho más funcional que la televisión, porque brinda la oportunidad de realizar compras, ventas, ofertas de comunicación y diversas formas de autoexpresión, como crear páginas y sitios web personales. Ejemplo de formato de carta: Formato de resultado: Un ejemplo de texto libre escrito en mayúsculas Un ejemplo de texto libre escrito en mayúsculas etiquetas - definir letras mayúsculas(Estas etiquetas no son compatibles con HTML 5). CSS estilo de código="text-transform:mayúsculas" - define letras mayúsculas.
En otras palabras, las letras mayúsculas se definen con usando CSS
atributos Ejemplo de formato de carta: Formato de resultado: Arbitrario texto HTML y espaciado de letras CSS de 2px Descripción de atributos y valores: CSS estilo de código="letra-espaciado:2px" - define Espaciado de letras CSS.
Busque ejemplos de formato similares en el menú de la izquierda. Gracias por su atención.. Por ejemplo, como se muestra en el ejemplo a continuación con letras en relieve en la fuente Didot. Observe cómo se ha agregado el atributo de margen a la derecha de A . De lo contrario, se “pegaría” con la letra s al principio de la sección:
Letras HTML: mayúsculas y minúsculas
Letras HTML y espaciado CSS entre ellas
Materiales temáticos:
Actualizado: 20/04/2021
103583
Si nota un error, seleccione un fragmento de texto y presione Ctrl + Enter
