Horario de cursos

Tutoriales avanzados de CSS

• Libro de texto de CSS
• Introducción a CSS
• Gramática básica de CSS
• Gramática avanzada de CSS
• Selector de derivación de CSS
• Selector de id de CSS
• Selector de clase de CSS
• Creación de CSS
• Fondo de CSS
• Texto de CSS
• Fuente de CSS
• Lista de CSS

Modelo de cuadro CSS

• Resumen del modelo de cuadro de CSS
• Margen interno de CSS
• Borde de CSS
• Margen externo de CSS
• Fusión de márgenes externos de CSS

Posicionamiento CSS

• Resumen de posicionamiento de CSS
• Posicionamiento relativo de CSS
• Posicionamiento absoluto de CSS
• Flotamiento de CSS

Selectores CSS

• Selector de elemento de CSS
• Agrupación de selectores de CSS
• Explicación detallada del selector de clase de CSS
• Explicación detallada del selector de id de CSS
• Explicación detallada del selector de atributo de CSS
• Selector de descendiente de CSS
• Selector de hijo de CSS
• Selector de hermano adyacente de CSS

Cursos optativos

Recomendaciones de cursos:

• Caja de herramientas de CodeW3C.com

Las propiedades de texto de CSS definen el aspecto del texto.

A través de las propiedades de texto, puede cambiar el color del texto, el espaciado de caracteres, alinear el texto, decorar el texto, indentar el texto, etc.

Textura de reflujo

Ajustar el renglón inicial de los párrafos en una página web, es un efecto de formato de texto muy utilizado.

CSS ofrece Propiedad text-indentEsta propiedad permite la indentación de texto de manera conveniente.

Al usar la propiedad text-indent, la primera línea de todos los elementos puede ser retraída una longitud dada, incluso si esa longitud es negativa.

El uso más común de esta propiedad es sangrar la primera línea de un párrafo, las siguientes reglas harán que todas las primeras líneas de los párrafos se sangren 5 em:

p {text-indent: 5em;}

nota:Generalmente, se puede aplicar text-indent a todos los elementos de bloques, pero no se puede aplicar esta propiedad a los elementos en línea, como las imágenes, etc. Sin embargo, si un elemento de bloque (como un párrafo) tiene una imagen en la primera línea, se desplazará con el resto del texto de esa línea.

Consejo:Si se desea 'sangrar' la primera línea de un elemento en línea, se puede crear este efecto mediante el margen izquierdo o el relleno externo.

Usar valores negativos

La propiedad text-indent también se puede establecer en valores negativos. Utilizando esta técnica, se pueden lograr muchos efectos interesantes, como la sangría 'colgante', es decir, la primera línea colgando en el lado izquierdo del resto del elemento:

p {text-indent: -5em;}

Sin embargo, hay que tener cuidado al establecer valores negativos para text-indent, ya que si se establece un valor negativo para un párrafo, algunos textos de la primera línea podrían sobrepasar el borde izquierdo de la ventana del navegador. Para evitar problemas de visualización, se recomienda establecer un margen externo o algún relleno adicional para el sangría negativo:

p {text-indent: -5em; padding-left: 5em;}

Usar porcentajes

La propiedad text-indent puede usar todas las unidades de longitud, incluidos los porcentajes.

Los porcentajes deben ser relativos al ancho del elemento padre de sangría. En otras palabras, si se establece un valor de sangría del 20%, la primera línea del elemento afectado se sangrará el 20% del ancho del elemento padre.

En el siguiente ejemplo, el valor de sangría es el 20% del elemento padre, es decir, 100 píxeles:

div {ancho: 500px;}
p {text-indent: 20%;}
<div>
<p>este es un párrafo</p>
</div>

heredar

La propiedad text-indent se puede heredar, considere las siguientes etiquetas:

div#outer {ancho: 500px;}
div#inner {text-indent: 10%;}
p {ancho: 200px;}
<div id="outer">
<div id="inner">alguno de texto. alguno de texto. alguno de texto.</div>
<p>este es un párrafo.</p>
</div>
</div>

Los párrafos marcados también se encogen 50 píxeles, porque este párrafo hereda el valor de sangría del elemento div con id 'inner'.

alineación horizontal

text-align Es una propiedad básica que afecta aLínea de textoManera de alinearse entre ellas. Sus primeros tres valores son bastante directos, pero los cuartos y quintos son un poco más complejos.

Los valores left, right y center causarán que el texto en el elemento se alinee a la izquierda, a la derecha y al centro respectivamente.

Los idiomas occidentales se leen de izquierda a derecha, por lo que el valor predeterminado de text-align es left. El texto se alinea en el borde izquierdo y el borde derecho es dentado (se llama texto de izquierda a derecha). Para idiomas como el hebreo y el árabe, text-align tiene el valor predeterminado de right, ya que estos idiomas se leen de derecha a izquierda. No es de extrañar que center centrará cada línea de texto en el elemento.

Consejo:Para centrar elementos de bloque o tablas, es necesario establecer adecuadamente los márgenes laterales externos en estos elementos.

text-align:center y <CENTER>

Puede que crea que text-align:center tiene el mismo efecto que el elemento <CENTER>, pero en realidad son muy diferentes.

<CENTER> No solo afecta al texto, sino que también centrará todo el elemento. text-align no controla el alineamiento del elemento, sino solo afecta su contenido. El elemento en sí no se mueve de un extremo a otro, solo se afecta el texto.

justify

El último atributo de alineación horizontal es justify.

En el texto alineado a dos lados, los extremos laterales de las líneas de texto se colocan en los bordes internos del elemento padre. Luego, se ajusta el espacio entre las palabras y las letras para que la longitud de cada línea sea exactamente igual. Tal vez ya haya notado que el texto alineado a dos lados es muy común en el campo de la impresión.

Es necesario tener en cuenta que es el agente de usuario (no CSS) el que determina cómo se estira el texto alineado a dos lados para llenar el espacio entre los bordes laterales del elemento padre. Para obtener más detalles, consulte Página de referencia de atributo CSS text-align.

Espacio entre palabras

Propiedad espacio-de-palabraSe puede cambiar el espacio estándar entre las palabras (palabras). Su valor predeterminado normal es igual al valor establecido en 0.

La propiedad espacio-de-palabra acepta un valor de longitud positivo o negativo. Si se proporciona un valor de longitud positivo, se aumentará el espacio entre las palabras. Al establecer un valor negativo para espacio-de-palabra, se lo acercará:

p.dispersion {espacio-de-palabra: 30px;}
p.tense {espacio-de-palabra: -0.5em;}
<p class="dispersion">
Este es un párrafo. El espacio entre palabras se aumentará.
</p>
<p class="tight">
Este es un párrafo. El espacio entre palabras se reducirá.
</p>

ejemplo TIY: aumentar o reducir el espaciado entre palabras (espaciado entre letras)

nota:Para entender más profundamente la definición de CSS para 'palabra' (word), visita página de referencia de propiedad word-spacing de CSS.

espaciado entre letras

propiedad letter-spacingLa diferencia con word-spacing radica en que letter-spacing modifica el espacio entre caracteres o letras.

Al igual que la propiedad word-spacing, los valores admisibles para letter-spacing incluyen todas las longitudes. La palabra clave predeterminada es normal (lo que es equivalente a letter-spacing:0). El valor de longitud ingresado aumentará o reducirá el espacio entre las letras en la cantidad especificada:

h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
<h1>This is header 1</h1>
<h4>This is header 4</h4>

ejemplo TIY: establecer el espaciado entre caracteres (espaciado entre letras)

transformación de caracteres

propiedad text-transformEl manejo de la capitalización del texto. Esta propiedad tiene 4 valores:

• none
• uppercase
• lowercase
• capitalize

El valor predeterminado none no realiza ninguna modificación en el texto, utilizando la capitalización original del documento de origen. Como su nombre indica, uppercase y lowercase convierten el texto en mayúsculas y minúsculas completas, respectivamente. Finalmente, capitalize capitaliza la primera letra de cada palabra.

Como propiedad, text-transform puede no ser muy importante, pero si decides de repente cambiar todos los elementos h1 a mayúsculas, esta propiedad es muy útil. No es necesario modificar individualmente el contenido de todos los elementos h1, simplemente usa text-transform para realizar esta modificación:

h1 {text-transform: uppercase}

El uso de text-transform tiene dos ventajas. Primero, solo se necesita escribir una regla simple para realizar esta modificación, sin modificar el elemento h1 en sí. En segundo lugar, si en el futuro decides volver a cambiar todas las capitalizaciones a su estado original, será más fácil realizar la modificación.

ejemplo TIY: controlar la capitalización de las letras en el texto

decoración de texto

a continuación, discutiremos propiedad text-decorationEs una propiedad muy interesante que ofrece muchos comportamientos muy interesantes.

text-decoration tiene 5 valores:

• none
• underline
• overline
• line-through
• blink

No es de extrañar que underline añada un subrayado al elemento, al igual que el elemento U en HTML. Overline actúa exactamente al revés, dibujando una sobrelineación en la parte superior del texto. El valor line-through dibuja una línea贯穿 en el medio del texto, equivalente a los elementos S y strike en HTML. Blink haría que el texto parpadee, al estilo del controvertido marcador blink soportado por Netscape.

El valor none cerrará todas las decoraciones aplicadas originalmente a un elemento. Normalmente, el texto sin decoración es el aspecto predeterminado, aunque no siempre es así. Por ejemplo, los enlaces tienen subrayado por defecto. Si deseas quitar el subrayado de los enlaces, puedes hacerlo con el siguiente CSS:

a {text-decoration: none;}

nota:Si se elimina explícitamente el subrayado del enlace con esta regla, la única diferencia visual entre el ancla y el texto normal sería el color (al menos es así por defecto, aunque no se puede garantizar que el color definitivamente tenga una diferencia).

También se pueden combinar varios decorados en una regla. Si deseas que todos los enlaces tengan tanto subrayado como sobrelineado, la regla sería la siguiente:

a:link a:visited {text-decoration: underline overline;}

Debido a esto, si dos decoraciones diferentes coinciden con el mismo elemento, el valor ganador reemplazará completamente al otro. Considera las siguientes reglas:

h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}

Para las reglas dadas, todos los elementos h2 con clase stricken tienen solo una decoración de línea贯穿, sin subrayado ni sobrelineado, porque El valor text-decoration reemplaza en lugar de acumularse.

Manejo de espacios en blanco

Propiedad white-spaceInfluye en la forma en que el agente de usuario maneja los espacios en blanco, las salidas de línea y los caracteres tabulador en el documento fuente.

Al usar esta propiedad, se puede influir en la forma en que el navegador maneja los espacios en blanco entre caracteres y entre líneas de texto. En cierta medida, el procesamiento predeterminado de XHTML ya ha completado el procesamiento de espacios en blanco: combinará todos los espacios en blanco en un solo espacio. Por lo tanto, dada la siguiente marca, cuando se muestra en un navegador web, entre las palabras solo se mostrará un espacio y se ignorarán las salidas de línea dentro del elemento:

<p>This     paragraph has    many
    espacios           en él.</p>

Este comportamiento predeterminado se puede establecer explícitamente con la siguiente declaración:

p {white-space: normal;}

Las reglas anteriores indican que el navegador debe procesar de manera común: desechar los caracteres de espacio en blanco adicionales. Si se proporciona este valor, los caracteres de retorno de carro (retorno de carro) se convertirán en espacios, y una secuencia de múltiples espacios en una línea también se convertirá en un espacio.

Ejemplo TIY: white-space: normal

Valor pre

Sin embargo, si se establece white-space en pre, el procesamiento de los caracteres de espacio en blanco en los elementos afectados por esta propiedad es diferente, y su comportamiento es similar al del elemento pre de XHTML; los caracteres de espacio en blanco no se ignoran.

Si el valor de la propiedad white-space es pre, el navegador prestará atención a los espacios adicionales, incluso a los retornos de carro. En este aspecto y solo en este, cualquier elemento puede equivaler a un elemento pre.

Ejemplo TIY: white-space: pre

nota:Después de pruebas, Internet Explorer 7 y versiones anteriores no admiten este valor, por lo que se recomienda usar navegadores no IE para ver el ejemplo anterior.

Valor nowrap

El valor opuesto es nowrap, que impide que el texto del elemento se salte de línea, a menos que se utilice un elemento br. El uso de nowrap en CSS es muy similar a usar <td nowrap> en HTML 4 para establecer una celda de tabla que no pueda saltar de línea, aunque el valor white-space se puede aplicar a cualquier elemento.

Ejemplo TIY: white-space: nowrap

Valores pre-wrap y pre-line

CSS2.1 introdujo los valores pre-wrap y pre-line, que no existían en versiones anteriores de CSS. El propósito de estos valores es permitir que los creadores controlen mejor el procesamiento de los caracteres de espacio en blanco.

Si el valor de white-space del elemento se establece en pre-wrap, los caracteres de espacio en blanco de la secuencia de texto se conservarán, pero las líneas de texto se cambiarán de manera normal. Si se establece este valor, también se conservarán los separadores de línea del texto fuente y los generados. pre-line es lo contrario de pre-wrap, y como en el texto normal, las secuencias de caracteres de espacio en blanco se combinan, pero se conservan los separadores de línea.

ejemplo TIY: white-space: pre-wrap

ejemplo TIY: white-space: pre-line

nota:Hemos probado los dos ejemplos anteriores en los navegadores IE7 y FireFox2.0, pero los resultados son que los valores pre-wrap y pre-line no han recibido un buen soporte.

resumen

La siguiente tabla resume el comportamiento de la propiedad white-space:

dirección del texto

Si estás leyendo un libro en inglés, lo leerás de izquierda a derecha, de arriba a abajo, eso es la dirección de flujo del inglés. Sin embargo, no todos los idiomas son así. Sabemos que el antiguo chino se lee de derecha a izquierda, por supuesto, también incluye el hebreo y el árabe, etc. CSS2 introdujo una propiedad para describir su direccionalidad.

propiedad directioninfluye en la dirección de escritura del texto de los elementos de bloque, la disposición de las columnas de las tablas, la dirección de llenado horizontal de los elementos que contienen contenido, y la posición de la última línea en los elementos alineados a ambos lados.

nota:Para los elementos en línea, solo cuando propiedad unicode-bidiLa propiedad direction se aplica cuando se establece a embed o bidi-override.

La propiedad direction tiene dos valores: ltr y rtl. En la mayoría de los casos, el valor predeterminado es ltr, que muestra texto de izquierda a derecha. Si se muestra texto de derecha a izquierda, se debe usar el valor rtl.

propiedades de texto de CSS

Caja de herramientas

Manual de referencia de CSS

Ejemplos de CSS

Pruebas de CSS

Tutoriales de CSS

Enlaces de patrocinadores