Hola queridos lectores del sitio del blog. En este artículo, continuamos explorando los conceptos básicos del estilo CSS y echamos un vistazo a las propiedades de alineación vertical, alineación de texto, sangría de texto y algunas otras para aplicar estilo al texto html.
Alinear texto con CSS
Comencemos con los atributos de estilo que controlan la representación del texto en elementos de bloque. Comencemos con la propiedad text-align, que en realidad es un reemplazo del atributo align (usado para alinear el contenido de elementos html como p párrafos).
Propiedad de estilo texto alineado pregunta alineación de texto horizontaly tiene solo cuatro valores posibles:
Los valores disponibles para esta regla determinan la alineación, respectivamente: izquierda - a la izquierda, derecha - a la derecha, centro - al centro y justificar - al ancho de la página (tanto a la izquierda como a la derecha aumentando la distancia entre palabras). Por ejemplo, el texto de este artículo se alinea con el ancho de la página (si nota que tiene bordes uniformes tanto a la izquierda como a la derecha) usando la regla text-align: justify.
De forma predeterminada, la alineación horizontal está alineada a la izquierda, por lo que no es necesario especificar específicamente text-align: left si no se ha especificado ninguna otra alineación en los elementos principales.
Ejemplos de uso de la propiedad:
Siguiente propiedad CSS ident de texto pregunta sangría para la línea roja, por ejemplo, para el texto de la etiqueta de párrafo p. Esta regla, como la alineación de texto, solo se aplica a los elementos del bloque. Sintaxis:
Aquí se permiten valores de sangría absolutos y relativos. Los valores absolutos (px - píxeles, em, ex, etc.) se pueden especificar con un signo más o menos. El valor relativo se suele dar como porcentaje (%). El valor relativo se calcula a partir del ancho del área de texto. Entonces, la regla css text-indent: 50% establecerá la línea roja igual a la mitad de la longitud de esta línea. De forma predeterminada, la sangría de la "línea roja" es cero. Ejemplo:
A continuación, veamos la alineación vertical: la propiedad alineación vertical... Esta propiedad ya es aplicable para todos los elementos html y para casi todos los medios la alineación de elementos en línea con el texto en relación con su línea de base. A excepción de las etiquetas de tabla td y th, en las que todo el contenido se alineará verticalmente. Sintaxis:
Consideremos cada valor con más detalle:
- línea de base: alineación de un fragmento de texto con la línea de base del elemento principal. Este es el predeterminado;
- sub - un fragmento de texto se muestra como un subíndice o subíndice para el elemento principal;
- super - un fragmento de texto se muestra como superíndice o superíndice para el elemento principal;
- top: alinea un fragmento de texto con la parte superior del elemento principal;
- text-top: alinea el fragmento con el borde superior del texto del elemento principal;
- medio: alinea el centro del fragmento de texto con el centro del elemento principal;
- bottom: alinea un fragmento de texto con la parte inferior del elemento principal;
- text-bottom: alineación del fragmento con el borde inferior del texto del elemento principal;
La siguiente figura muestra el comportamiento de los fragmentos de prueba con diferentes valores de la propiedad de alineación vertical en Internet Explorer 11:
Además de los valores anteriores, puede especificar valores numéricos. Por ejemplo, la regla CSS vertical-align: 0 significaría lo mismo que escribir vertical-align: baseline. Y la regla de alineación vertical: 10px moverá el texto hacia arriba 10 píxeles desde la línea de base. Para mover el texto hacia abajo, el valor debe especificarse con un signo menos.
El desplazamiento también se puede especificar en unidades relativas, como em y ex, o como un porcentaje.
Para alinear verticalmente el contenido de las celdas de la tabla en alineación vertical, use los siguientes valores:
- top: para alinear el contenido con la parte superior de la celda;
- parte inferior: para alinear el contenido con la parte inferior de la celda;
- medio - para alinear con el centro de la celda (usado por defecto).
Para lograr el resultado deseado, generalmente debe experimentar con diferentes valores para la propiedad de estilo de alineación vertical. Numerosos valores posibles dan resultados demasiado diferentes en diferentes casos.
Opciones de espacio en blanco y ajuste de palabras para controlar los saltos de línea
El siguiente en la línea es el parámetro de espacio en blanco, que es responsable de mostrar los caracteres de espacio en blanco en la página html.
Como sabemos, de forma predeterminada, el navegador concatena todos los caracteres de espacios en blanco consecutivos: espacios, saltos de línea y tabulaciones, en un solo espacio. Una excepción etiqueta previa, el texto colocado en él se muestra tal cual, con todos los espacios.
La propiedad de espacio en blanco tiene la siguiente sintaxis:
Está claro que el valor normal se usa por defecto y deja todo como se describió anteriormente, todos los espacios consecutivos se combinan en uno y los saltos de línea se configuran automáticamente.
Usar el valor "pre" será lo mismo que usar la etiqueta "pre". El navegador representará la página, incluidos los espacios y guiones adicionales, según lo haya agregado el desarrollador. Si una línea de texto es demasiado larga, se agregará una barra de desplazamiento horizontal.
El valor de nowrap evita que el navegador ajuste las líneas y el texto se muestra en una línea. La única cosa, agregar la etiqueta "br" le permitirá ajustar el texto en una nueva línea.
El valor de ajuste previo conserva todas las secuencias de espacios y saltos de línea, pero si la línea no encaja en el área especificada, el navegador ajusta automáticamente el texto en una nueva línea.
Bueno, el valor de prelínea convierte los espacios en un espacio, los avances de línea se guardan y el navegador puede romper líneas que son demasiado largas para evitar el desplazamiento horizontal.
Ejemplo de uso:
A continuación, considere parámetro de ajuste de palabra, que le dirá si debe ajustar o no palabras largas que no encajan en el área dada. Esta propiedad no se usa con frecuencia, pero a veces no puede prescindir de ella:
ajuste de palabra: normal | salto de palabra
El valor normal le dice al navegador que el texto solo se puede dividir en espacios, y este es el comportamiento normal del navegador. Y el valor de la palabra de ruptura permite al navegador insertar saltos de línea dentro de las palabras. Ejemplo:
Parámetros de sombra de texto: propiedad de sombra de texto
Para los fanáticos de varios adornos en el estándar CSS3, se hizo posible establecer una sombra para el texto. El uso adecuado de la propiedad text-shadow puede animar visiblemente una página web. Sintaxis:
El valor none cancela el sombreado del texto y se establece de forma predeterminada.
Color de sombra se establece en cualquier formato CSS disponible y es un parámetro opcional. Por defecto, el color de la sombra es el mismo que el del texto.
Desplazamiento horizontal de la sombra se puede especificar en cualquier unidad de medida compatible con CSS. Un valor positivo colocará la sombra a la derecha del texto y un valor negativo a la izquierda. Un valor de cero colocará la sombra directamente debajo del texto y solo es significativo si la sombra está borrosa.
Desplazamiento vertical de la sombra también se puede configurar en cualquier unidad de medida compatible con CSS. Un valor positivo moverá la sombra debajo del texto; un valor negativo la moverá arriba. Un valor de cero colocará la sombra directamente debajo del texto.
En cualquier unidad de medida, y radio de desenfoque de sombra... Cuanto mayor sea el valor, más ancha se vuelve la sombra y más se suaviza. Si no se establece este parámetro, se supone que el valor de desenfoque es cero. Dado que el algoritmo anti-aliasing suele ser diferente para diferentes navegadores, la apariencia de la sombra puede diferir ligeramente según el navegador.
Módulo Texto CSS describe las funciones CSS que controlan la traducción del texto fuente en texto formateado y ajuste de línea. Varias propiedades de CSS proporcionan control sobre la conversión de mayúsculas y minúsculas, el manejo de espacios en blanco, el texto y las reglas de ajuste y ajuste de líneas, la alineación, el espaciado y la sangría.
La unidad básica de texto es un símbolo. Sin embargo, dado que los sistemas de escritura no siempre son tan simples como el alfabeto inglés convencional, lo que realmente es un símbolo depende del contexto en el que se usa el término. Por ejemplo, en el sistema de escritura coreano, cada representación cuadrada de una sílaba (por ejemplo, 한 \u003d han) puede considerarse un símbolo. Sin embargo, un símbolo cuadrado consta de varias letras, cada una de las cuales representa un fonema (por ejemplo, ㅎ \u003d h, ㅏ \u003d a, ㄴ \u003d n), y cada una de ellas también puede considerarse un símbolo.
1. Transformar texto: la propiedad de transformación de texto
La propiedad text-transform aplicará estilo al texto. No afecta el contenido subyacente y no debería afectar el contenido de una operación de copiar y pegar texto sin formato.
La propiedad se hereda.
Sintaxis
Transformación de texto: ninguna; text-transform: capitalizar; transformación de texto: mayúsculas; transformación de texto: minúsculas; text-transform: heredar; transformación de texto: inicial;
2. Manejo de espacios y saltos de línea: la propiedad de espacio en blanco
La propiedad de espacio en blanco maneja espacios entre palabras y saltos de línea dentro de un elemento.
La propiedad se hereda.
espacio en blanco | |
---|---|
Valores: | |
normal | Valor por defecto. Solo se inserta un espacio entre palabras, los espacios adicionales se descartan. El texto se ajusta solo si es necesario. |
Nowrap | Evita los saltos de línea excepto cuando se aplica . |
pre | Los espacios en el texto no se ignoran, el navegador muestra espacios adicionales y saltos de línea. |
preenvolver | Conserva espacios en el texto haciendo saltos de línea cuando sea necesario. |
prelínea | Elimina espacios adicionales excepto en casos . |
espacios de descanso | El comportamiento es idéntico al pre-ajuste, excepto que: cualquier secuencia de espacios en blanco no removibles siempre ocupa espacio, incluso al final de una línea; El salto de línea existe después de cada espacio no removible, incluso entre espacios. |
inicial | |
heredar |
Sintaxis
Espacio en blanco: normal; espacio en blanco: nowrap; espacio en blanco: pre; espacio en blanco: preenvío; espacio en blanco: prelínea; espacio en blanco: espacios de descanso; espacio en blanco: heredar; espacio en blanco: inicial;
3. Configuración de pestañas: la propiedad de tamaño de pestaña
La propiedad tab-size se usa para cambiar la cantidad de sangría obtenida con la tecla Tab. Los valores de propiedad se ignoran cuando se establece uno de los tres valores de prelínea, normal o nowrap de la propiedad de espacio en blanco.
Solo funciona para elementos
La propiedad se hereda.
Sintaxis
Tamaño de pestaña: 0; tamaño de pestaña: 10px; tab-size: heredar; tab-size: inicial;
4. Saltos de línea y límites de palabras
Cuando el contenido de nivel de línea se divide en líneas, se divide en bloques lineales. Esta división se llama salto de línea.
Cuando una línea se rompe debido a controles de salto de línea explícitos, como nueva línea o etiqueta
, el inicio o el final de un bloque es un salto de línea forzado.
Si una línea se rompe debido al ajuste de contenido cuando el navegador crea saltos de línea opcionales para ajustarse al contenido, se trata de un ajuste suave.
4.1. Reglas de ruptura de letras: la propiedad de ruptura de palabras
La propiedad de ruptura de palabras determina las posibilidades de ajuste suave entre letras, es decir, cuando está permitido dividir líneas de texto. En particular, controla si existe separación suave entre letras y / o números tipográficos adyacentes. Esto no afecta las reglas que gobiernan la división suave creada por espacios.
La propiedad se hereda.
Sintaxis
Salto de palabras: normal; word-break: romper todo; salto de palabra: guardar-todo; salto de palabra: heredar; salto de palabra: inicial;
4.2. Salto de línea: salto de línea
La propiedad de salto de línea define las reglas para el ajuste de línea aplicado dentro de un elemento, específicamente cómo el ajuste interactúa con los signos de puntuación y los símbolos.
La propiedad se hereda.
salto de línea | |
---|---|
Valores: | |
auto | El navegador define un conjunto de restricciones de salto de línea para usar, que puede variar según la longitud de la línea, como el uso de un conjunto menos estricto de reglas de salto de línea para líneas cortas. Valor por defecto. |
suelto | Divide el texto utilizando el conjunto de reglas de ajuste de línea menos restrictivo. Normalmente se utiliza para líneas cortas, como en periódicos. |
normal | Divide el texto utilizando el conjunto más común de reglas de ajuste de línea. |
estricto | Divide el texto utilizando un conjunto estricto de reglas de salto de línea. |
inicial | Establece el valor de la propiedad en su valor predeterminado. |
heredar | Hereda el valor de la propiedad del elemento padre. |
Sintaxis
Salto de línea: automático; salto de línea: suelto; salto de línea: normal; salto de línea: estricto; salto de línea: heredar; salto de línea: inicial;
4.3. Guiones: la propiedad de los guiones
La propiedad de guiones determina si se permite que los guiones creen capacidades de división suave dentro de una línea de texto.
La separación de palabras es una separación controlada de palabras, en la que normalmente no se permite que las palabras se separen para mejorar el diseño de los párrafos. Como regla general, la división de palabras ocurre a lo largo de límites silábicos o morfemicos y con una indicación visual de separación (generalmente insertando un guión, -). En algunos casos, la separación de palabras también puede cambiar la ortografía de una palabra. En cualquier caso, el ajuste de palabras es solo un efecto de representación: no debería afectar el contenido del documento, la selección de texto o la búsqueda.
CSS Text Level 3 no define reglas precisas de separación por sílabas, por lo que se recomienda que elija puntos de separación que sean apropiados para su idioma.
La propiedad se hereda.
guiones | |
---|---|
Valores: | |
ninguna | Las palabras no están divididas con guiones, incluso si los caracteres dentro de la palabra definen explícitamente la división. |
manual | Las palabras están divididas con guiones solo en aquellos lugares donde hay caracteres dentro de la palabra que indican claramente la posibilidad de división de palabras (carácter especial -). Valor por defecto. |
auto | Las palabras se pueden dividir en capacidades de separación de sílabas, según lo determine automáticamente el recurso de separación de sílabas apropiado para el idioma, además de las indicadas explícitamente por un guión con guión. Debe configurar el idioma de su contenido (por ejemplo, utilizando el atributo lang HTML o el encabezado HTTP Content-Language) para obtener un ajuste automático adecuado de las palabras. |
inicial | Establece el valor de la propiedad en su valor predeterminado. |
heredar | Hereda el valor de la propiedad del elemento padre. |
Sintaxis
Guiones: ninguno; guiones: manual; guiones: auto; guiones: heredar; guiones: inicial;
4.4. Desbordamiento del bloque de envoltura: propiedad overflow-wrap / word-wrap
La propiedad overflow-wrap (o su nombre obsoleto word-wrap) especifica si una línea que no se rompe puede romperse en puntos no resueltos para evitar que se desborde un cuadro de línea. Funciona cuando la propiedad de espacio en blanco permite el ajuste.
La propiedad se hereda.
overflow-wrap, ajuste de palabras | |
---|---|
Valores: | |
normal | Las líneas que no se rompen solo se pueden romper en los puntos permitidos. Valor por defecto. |
palabra de ruptura | |
en cualquier sitio | Una secuencia contigua de caracteres se puede dividir en un punto arbitrario si no hay otros puntos de ruptura aceptables en la línea. Afecta solo a la presentación visual, sin afectar el texto original. No se agrega ningún guión en el salto de línea. Las opciones de envoltura blanda proporcionadas en cualquier lugar se consideran al calcular sus propios tamaños mínimos de contenido. |
inicial | Establece el valor de la propiedad en su valor predeterminado. |
heredar | Hereda el valor de la propiedad del elemento padre. |
Sintaxis
Envoltura de desbordamiento: normal; overflow-wrap: palabra de ruptura; overflow-wrap: en cualquier lugar; overflow-wrap: heredar; overflow-wrap: inicial;
5. Alinear y justificar líneas
La alineación y alineación de las líneas controla cómo se distribuye el contenido en línea en un cuadro de línea.
5.1. Una nota breve para alinear texto: la propiedad text-align
Un bloque de texto es una colección de bloques lineales. La propiedad text-align especifica las propiedades text-align-all y text-align-last y describe cómo se alinean los cuadros de nivel de línea en cada cuadro de línea con respecto a los lados inicial y final del cuadro de línea. Los valores distintos de justify-all o match-parent se asignan a text-align-all y se restablecen a text-align-last en auto.
La propiedad se hereda.
texto alineado | |
---|---|
Valores: | |
comienzo | El contenido de nivel de línea se alinea con el borde inicial del cuadro de línea. Valor por defecto. |
final | El contenido de nivel de línea se alinea con el borde final del cuadro de línea. |
izquierda | El contenido de nivel de línea se alinea a la izquierda de la línea del cuadro de línea. En los sistemas de escritura vertical, será la parte superior o inferior física, según la orientación del texto. |
Derecha | El contenido de nivel de línea está alineado a la derecha en el cuadro de línea del cuadro de línea. En los sistemas de escritura vertical, será la parte superior o inferior física, según la orientación del texto. |
centrar | El contenido de nivel de línea se centra dentro del cuadro de línea. |
justificar | El texto se alinea con el ancho del cuadro en línea para llenar con precisión el cuadro de línea, acurrucándose en los bordes izquierdo y derecho del elemento principal. A menos que se especifique lo contrario en text-align-last, la última línea antes de una ruptura forzada o el final de un bloque se alinea al principio. Los espacios entre palabras y letras se distribuyen de modo que la longitud de todas las líneas sea igual. Diferentes navegadores pueden aumentar tanto el espacio entre palabras como el espacio entre letras. |
justificar todo | Establece text-align-all y text-align-last para justificar, alineando también la última línea. |
padre-pareja | El valor se comporta de la misma forma que heredar, excepto que el valor inicial o final heredado se interpreta en relación con el valor de dirección (o el bloque contenedor original si no hay un padre) y da como resultado el valor calculado de izquierda o derecha. |
heredar | Hereda el valor de la propiedad del elemento padre. |
Sintaxis
Text-align: inicio; alineación de texto: fin; alineación de texto: izquierda; alineación de texto: derecha; alineación de texto: centro; alinear texto: justificar; alinear texto: justificar todo; alineación de texto: parental coincidente; alinear texto: heredar;
5.2. Alineación de texto predeterminada: propiedad text-align-all
La propiedad text-align-all es una versión abreviada de la propiedad text-align que determina la alineación de todas las líneas de contenido en el contenedor de bloques, excepto las últimas líneas, que son reemplazadas por text-align-last. Acepta los valores start, end, left, right, center, justify y match-parent.
La propiedad se hereda.
Sintaxis
Text-align-all: inicio; alinear-texto-todo: fin; alinear-texto-todo: izquierda; alinear-texto-todo: derecha; alinear-texto-todo: centro; alinear-texto-todo: justificar; text-align-all: match-parent; text-align-all: heredar;
5.3. Alinear la última línea: la propiedad text-align-last
La propiedad text-align-last describe cómo se alinea la última línea de un bloque o línea inmediatamente antes de un salto de línea forzado.
Si se establece en auto, el contenido de la línea correspondiente se alinea con text-align-all, a menos que se establezca justify para text-align-all, en cuyo caso se alinea con el inicio del bloque. Todos los demás valores se interpretan como se describe para text-align.
Los valores son auto, start, end, left, right, center, justify y match-parent.
La propiedad se hereda.
Sintaxis
Text-align-last: auto; text-align-last: inicio; text-align-last: end; text-align-last: left; text-align-last: right; text-align-last: center; text-align-last: justificar; text-align-last: match-parent;
6. Brechas
CSS le permite controlar el espaciado entre palabras y caracteres tipográficos utilizando las propiedades de espaciado entre palabras y espaciado entre letras.
6.1. Espaciado entre palabras: la propiedad de espaciado entre palabras
La propiedad de espaciado de palabras especifica un espaciado adicional entre palabras.
Establece el espacio entre palabras. Se pueden utilizar valores positivos y negativos. Con un significado negativo, las palabras pueden superponerse.
El valor del espaciado entre palabras se ve afectado por el valor de la propiedad text-align cuando el texto está justificado.
La propiedad se hereda.
Sintaxis
Espaciado entre palabras: normal; espaciado entre palabras: 1px; espaciado entre palabras: 0.2em; espaciado entre palabras: 50%; espaciado de palabras: heredar; espaciado entre palabras: inicial;
6.2. Seguimiento: la propiedad de espaciado entre letras
La propiedad de espaciado entre letras especifica el espaciado adicional, o seguimiento, entre caracteres tipográficos adyacentes. El espaciado entre letras es complementario y el espaciado entre palabras. Los agentes de usuario pueden aumentar o disminuir aún más el espacio entre las unidades de caracteres tipográficos para alinear el texto, según las reglas de alineación vigentes.
La propiedad se hereda.
Sintaxis
Espaciado entre letras: normal; espaciado entre letras: 0.1em; espaciado entre letras: 2px; espaciado entre letras: heredar; espaciado entre letras: inicial;
7. Sangría de la primera línea: propiedad de sangría de texto
La propiedad text-indent especifica la sangría aplicada a las líneas de contenido en línea en un bloque. El relleno se trata como un margen aplicado al borde inicial del cuadro de línea.
Si hay una imagen en la primera línea de un elemento de bloque, se moverá junto con el resto del texto.
La propiedad se hereda.
Sintaxis
Sangría de texto: 5 mm; sangría de texto: 20px; sangría de texto: 5%; sangría de texto: 2em por línea; sangría de texto: 2em colgante; sangría de texto: heredar; sangría de texto: inicial;
Establece la alineación de la última línea de un bloque de texto.
información breve
Designaciones
Descripción | Ejemplo | |
---|---|---|
<тип> | Indica el tipo de valor. | <размер> |
A && B | Los valores deben mostrarse en el orden indicado. | <размер> && <цвет> |
A | si | Indica que solo se debe seleccionar uno de los valores sugeridos (A o B). | normal | letras minúsculas |
A || si | Cada valor se puede utilizar solo o junto con otros en cualquier orden. | ancho || contar |
Valores de grupos. | [cultivo || cruzar] | |
* | 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. | <время># |
Los valores
auto Coincide con la alineación especificada por la propiedad text-align, excepto por el valor de justificación. Para ello, la alineación será como empezar. inicio La línea se alinea con el borde de inicio del bloque, que puede variar según la dirección del texto (de izquierda a derecha o de derecha a izquierda). fin La línea está alineada con el borde final del bloque, está determinada por la dirección del texto. left La línea está alineada a la izquierda. right La línea está alineada a la derecha. centro La línea está centrada. justificar La cadena está justificada. Si solo hay una palabra en la última línea, se justificará a la izquierda.
La influencia de diferentes valores en la posición del texto se muestra en la tabla. 1.
Valor | Alineación | Tipo de texto |
---|---|---|
izquierda | Alineado a la izquierda | |
Derecha | Borde derecho | |
centrar | Centrar | |
justificar | Por ancho |
Salvadera
Winnie the Pooh no siempre fue reacio a un pequeño refrigerio, especialmente a las once de la mañana, porque a esa hora el desayuno había terminado hacía mucho tiempo y la cena ni siquiera había pensado en comenzar. Y, por supuesto, estaba tremendamente feliz de ver a Conejo sacando tazas y platos.
div (text-align-last: start;)
Ejemplo
Modelo de objeto
Un objeto.style.textAlignLast
Nota
Internet Explorer y Edge no admiten valores de inicio y finalización.
La versión 49 de Firefox admite la propiedad -moz-text-align-last.
Especificación
Cada especificación pasa por varias etapas de aprobación.
- Recomendación: esta especificación está respaldada por el W3C y se recomienda como estándar.
- Recomendación candidata ( Posible recomendación) - el grupo responsable del estándar está satisfecho ya que encaja con sus objetivos, pero se requiere la ayuda de la comunidad de desarrolladores para implementar el estándar.
- Recomendación propuesta ( Recomendación sugerida) - En este punto, el documento se envía al Consejo Asesor del W3C para su aprobación final.
- Borrador de trabajo: una versión más madura del borrador, después de la discusión y revisión para revisión de la comunidad.
- Borrador del editor ( Borrador editorial): una versión preliminar del estándar después de la edición por parte de los editores del proyecto.
- Sequía ( Proyecto de especificación) es el primer borrador de la norma.
Etiquetas HTML que definen la alineación del texto, sangría
Texto justificado utilizado en tipografía
El siguiente ejemplo muestra cómo alinear texto a ancho páginas:
alinear \u003d "izquierda" | alinear \u003d "derecha" |
---|---|
El número de trabajadores empleados en el sector servicios y la difusión de información crece día a día. Si la granja y la fábrica fueron los símbolos de los siglos pasados, entonces el símbolo del presente siglo XXI es una oficina equipada con computadoras que tienen acceso al flujo de información. |
|
alinear \u003d "justificar" | alinear \u003d "centro" |
El número de trabajadores empleados en el sector servicios y la difusión de información crece día a día. Si la granja y la fábrica fueron los símbolos de los siglos pasados, entonces el símbolo del presente siglo XXI es una oficina equipada con computadoras que tienen acceso al flujo de información. |
El número de trabajadores empleados en el sector servicios y la difusión de información crece día a día. Si la granja y la fábrica fueron los símbolos de los siglos pasados, entonces el símbolo del presente siglo XXI es una oficina equipada con computadoras que tienen acceso al flujo de información. |
El valor justificado asegura uniformidad alinear texto a derecha e izquierda, es decir de ancho... Este método se usa ampliamente en la impresión.
Alinear texto en el centro y ancho de HTML
Centro de alineación de texto en HTML, texto a la derecha:
Resultado:
Atributos y valores
- align \u003d "left" - define alinear texto a la izquierda (defecto).
- alinear \u003d "centro" - alinea el texto al centro.
- alinear \u003d "derecha" - alinea el texto a la derecha.
Alineación | Sangría de texto HTML
Texto HTML y su sangría a la izquierda de la página
Nosotros produciremos sangría de texto a la izquierda de dos formas:
Resultado:
Ver en una nueva ventana.
Hola queridos lectores del sitio del blog. Hoy continuamos estudiando y tenemos a continuación las propiedades text-decoration, vertical-align, text-align, text-indent y varias otras, que ayudan a diseñar la apariencia de los textos en código Html.
En el último artículo, analizamos las propiedades destinadas a personalizar la apariencia de las fuentes cuando.
Bueno, e incluso antes, examinamos todos los tipos en detalle, aprendimos cómo se pueden agrupar y qué prioridades establece el navegador al interpretarlos. Es cierto que todo esto se dividió en varios artículos, por lo que para no confundirse, le aconsejo que estudie los materiales en el orden indicado.
Decoración de texto, alineación de texto, sangría de texto en CSS
¿Cómo trabajar con texto en CSS? Es lógico suponer que existen reglas especialmente diseñadas para este propósito. Comencemos con text-align, que en realidad es un reemplazo del atributo align (se usó para alinear contenido como P párrafos o encabezados).
Tiene solo cuatro posibles significados:
El significado sigue siendo el mismo que antes. Texto alineado Es la alineación horizontal de líneas. Esta regla se aplica solo a los elementos de bloque (párrafos, títulos, etc.), es decir, aquellas etiquetas en las que pueden aparecer varias líneas. Porque Dado que solo puede haber elementos en línea de una fila, no tiene sentido usar text-align en ellos.
Está claro que los valores de esta regla significan alineación, respectivamente: a la izquierda (izquierda), a la derecha (derecha), al centro (centro) y al ancho de la página (Justificar - simultáneamente a la izquierda y a la derecha aumentando la distancia entre palabras) ... No hace falta decir que el valor Justificar debe usarse para elementos con al menos varias líneas de texto, de lo contrario no habrá ningún efecto visible de esto.
Por ejemplo, justifiqué el párrafo anterior en ancho (puede ver que tiene bordes uniformes tanto a la izquierda como a la derecha) usando:
Alinear texto: justificar;
De forma predeterminada, el texto se alinea horizontalmente a la izquierda, es decir, no es necesario que escriba text-align: left específicamente, a menos que, por supuesto, haya especificado previamente una alineación diferente. Por cierto, alineé este párrafo en el centro (centro) nuevamente para un ejemplo visual, pero aquí, creo, todo está claro.
Siguiente regla CSS guion de texto le permite establecer una línea roja, por ejemplo, para el texto en una etiqueta de párrafo P. La sangría de la línea roja se puede establecer especificando un valor (tanto con un signo más como con un signo menos, usando) o usando porcentajes:
¿A partir de qué se calculan los porcentajes en text-indent? Desde el ancho del área que se reserva para el texto. Aquellos. Sangría de texto de la regla CSS: 50% hará que la línea roja sea igual a la mitad de la longitud de esta misma línea. Bueno, este párrafo es solo un ejemplo de tal regla.
O puede, por ejemplo, establecer un valor negativo para la línea roja en text-indent, y luego obtendremos algo como lo que ve en este párrafo. Para lograr esto, escribí la siguiente regla CSS para la etiqueta de párrafo P:
Sangría de texto: -1em;
Bueno, un uso común de text-indent (para establecer una línea roja estándar) podría verse así: text-indent: 40px; (aplicado a este párrafo por cierto). Esta regla, como la alineación de texto discutida anteriormente, se aplica solo a elementos de bloque, es decir donde pueden aparecer varias líneas (párrafos, títulos, etc.).
Así que ahora pasemos a decoración de texto (diseño usando una línea horizontal), que ya se aplica a todos los elementos Html (tanto en línea como en bloque).
Puede tener solo cuatro significados:
Aquellos. se puede usar con decoración de texto: overline, line-through o underline, well, o use none en absoluto. Algunos elementos Html ya tienen una línea horizontal por defecto, por ejemplo (están subrayados por defecto).
Por lo tanto, resaltar algo más con subrayado (a excepción de los hipervínculos) no es bueno, porque en la mente subconsciente de los usuarios está escrito que una vez que está subrayado (y también resaltado en color), significa que puede hacer clic en este para ir. Pero al resaltar el texto ordinario con subrayado, está engañando al usuario y la consiguiente decepción con su recurso (pensó, pero resultó que ...).
Un matiz en el uso de la regla de decoración de texto Css es que puede escribir tres (o dos) valores a la vez para cualquier elemento Html (sin omitir ninguno) y, como resultado, obtendrá fragmento de texto sobre subrayado-subrayado-tachado (suena bien y se ve, ¿no?):
Decoración de texto: subrayado sobre líneas pasantes;
Los valores para la decoración del texto (si desea utilizar varios de ellos a la vez) deben escribirse separados por carácter de espacio.
Alineación vertical: alineación vertical
A continuación, tenemos la alineación vertical: alineación vertical. Para casi todos los elementos del código HTML, significa la alineación de los elementos en línea con el texto en relación con su línea de base. Es cierto que para esto significa un poco diferente: todo el contenido que se encuentra en estas celdas estará alineado verticalmente.
Para Css, la regla de alineación vertical puede usar los siguientes valores:
Las líneas se alinean con la línea base de forma predeterminada. Mira, apliqué a este fragmento de texto aumentar la fuente y estas dos piezas están alineadas con la línea base (inferior). Y la alineación vertical con alineación vertical está destinada precisamente a cambiar la forma en que se alinean las líneas.
Por ejemplo, si escribo vertical-align: baseline para el mismo texto ampliado, no se producirán cambios, ya que el valor de referencia se utiliza para esta regla CSS predeterminada.
Por cierto, los números también se pueden usar como valores para él, y la inscripción vertical-align: 0 significará lo mismo que vertical-align: baseline, es decir, el valor de referencia es igual a cero. Por lo tanto, si queremos indicar algún cambio en la alineación vertical, este cambio se indicará en relación con la línea de base (o cero).
Puedes escribir así:
Alineación vertical: 10px;
Y obtenemos desplazamiento del fragmento con la fuente ampliada hacia arriba 10 píxeles desde la línea de base. Si escribimos un valor negativo:
Alineación vertical: -10px;
Obtenemos moviendo el fragmento hacia abajo en relación con la línea de base. Los ejemplos muestran que debido al desplazamiento, la altura de la línea ha aumentado para que el texto encaje en ella sin chocar con la línea adyacente. El cambio también se puede configurar en Em y Ex, bueno, y como un porcentaje, que se contará a partir de la altura de línea de este elemento (recuerde que en el último artículo aprendimos cómo configurarlo usando).
Para alinear verticalmente el contenido de las celdas de la tabla en alineación vertical, debe usar los valores Superior e Inferior para alinear el contenido con la parte superior e inferior de la celda, respectivamente (bueno, el medio en una celda de la tabla se usa como el valor de alineación vertical predeterminado).
Y para los elementos de fuente, puede usar text-top, text-bottom, middle. Apliquemos, por ejemplo, a este fragmento de texto valor:
Alineación vertical: medio;
¿Qué pasó como resultado? La línea media del fragmento agrandado se alinea con la línea de base del texto normal, es decir, tenemos una alineación vertical de la línea central. Para la parte superior del texto y la parte inferior del texto, todo será igual. Esto es text-top y también text-bottom.
Los valores de CSS de la subpropiedad y superpropiedad de alineación vertical corresponden al subíndice y superíndice, que se llevaron a cabo en HTML puro (antes de usar las propiedades de CSS para el diseño visual).
Transformación de texto, espaciado entre letras, espaciado entre palabras y espacios en blanco
Ninguno se usa por defecto y significa que los caracteres en el texto no cambiarán de ninguna manera - como están escritos en HTML, serán mostrados. El valor de mayúsculas para la transformación de texto transformará todas las letras del fragmento en mayúsculas ( se muestra un ejemplo en esta oracióndonde se utilizó la regla text-transform: mayúsculas y las letras se escribieron originalmente en minúsculas).
El valor en minúsculas para la regla de transformación de texto Css le permitirá transformar todos los caracteres del fragmento a minúsculas, bueno, y el valor en mayúsculas hará que todas las primeras letras de la palabra sean mayúsculas ( ejemplo en esta oración - text-transform: capitalizar). Aquellos. al usar la transformación de texto, puede hacer cualquier cosa con texto sin formato y luego volver a colocar todo fácilmente.
Por lo tanto, si, por ejemplo, tiene la tarea de hacer que todos los encabezados estén escritos solo en mayúsculas, entonces escríbalos en Html normalmente, y conviértalos en mayúsculas en CSS usando text-transform: mayúsculas. Luego, si decide volver a cambiar algo, entonces es suficiente hacer solo un pequeño cambio en los estilos, y no en el contenido de los 100.500 títulos de su sitio.
De forma predeterminada, tanto el espaciado entre letras como el espaciado entre palabras se establecen en Normal, o esto es lo mismo que cero (es decir, la distancia entre caracteres y palabras no cambia de ninguna manera). La magnitud del cambio en la distancia en estas reglas se puede indicar solo en píxeles, ya sea Em o Ex, pero no en porcentaje.
Sin embargo, puede utilizar valores tanto positivos (escasez de caracteres o palabras) como negativos (convergencia de caracteres o palabras). Por ejemplo, puedes "Así para esparcir los caracteres en esta frase" usando la siguiente regla de CSS:
Espaciado entre letras: 0.4em;
O tu puedes "Así para unir a los personajes en esta frase" mediante:
Espaciado entre letras: -1px;
Lo mismo puede decirse del espaciado entre palabras con la única diferencia de que la distancia cambiará entre palabras, como, por ejemplo, en esta frase, usando esta construcción CSS:
Espaciado entre palabras: 4em;
De manera similar, se pueden usar valores negativos en el espaciado de palabras para disminuir la distancia entre palabras.
Bueno, y la última regla Css de hoy, que le permite aplicar estilo al texto de cierta manera en el código Html, es espacio en blanco... Es responsable de mostrar los caracteres de espacio en blanco en una página web, lo que tuvo lugar al escribir código Html.
Como recordará del artículo sobre, el navegador, al analizar el código, combina todos los espacios, saltos de línea y pestañas en un solo espacio, y realiza saltos de línea en la página web exactamente por los espacios en blanco que tuvieron lugar en el código.
Entonces, el espacio en blanco puede tomar uno de tres valores:
Está claro que el valor predeterminado es Normal y, en este caso, todo se muestra como describí anteriormente. Pero al usar el valor Pre, obtenemos una analogía completa con el uso, es decir, en la página web, el texto se mostrará con todos esos espacios en blanco adicionales que se produjeron al escribir el código, y el navegador no podrá realizar transferencias sobre ellos.
Bueno, y el significado nowrap simplemente evitará que el navegador se ajuste a los espacios en blanco que encuentra dentro de un espacio en blanco: nowrap fragmento de CSS. También puede probar cómo funciona todo creando un archivo Html simple e incluyendo cualquier fragmento de texto en dichas etiquetas:
¡Buena suerte para ti! Nos vemos pronto en las páginas del sitio del blog
Tú podrías estar interesado
Estilo de lista (tipo, imagen, posición): reglas CSS para personalizar la apariencia de listas en código Html
Posicionamiento con índice Z y regla de cursor CSS para cambiar el cursor del mouse
Relleno, margen y borde: establecemos márgenes internos y externos en CSS, así como bordes para todos los lados (superior, inferior, izquierda, derecha)
Para qué sirve CSS, cómo conectar hojas de estilo en cascada a un documento Html y los conceptos básicos de la sintaxis de este lenguaje
Flotar y borrar en CSS - herramientas de diseño de bloques
CSS: qué es, cómo se vinculan las hojas de estilo en cascada al código html usando Estilo y Enlace
Unidades de dimensión (píxeles, Em y Ex) y herencia de reglas CSS
Selectores de etiquetas, clases, Id y genéricos, así como selectores de atributos en CSS moderno
Posición (absoluta, relativa y fija): formas de posicionar elementos Html en CSS (reglas izquierda, derecha, superior e inferior)
Fondo en CSS (color, posición, imagen, repetición, archivo adjunto): todo para configurar el color de fondo o la imagen de fondo de los elementos Html