Warning: include(/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/includes/framework.php on line 2

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/includes/framework.php on line 2

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/libraries/phputf8/view.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/includes/framework.php on line 4

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/libraries/phputf8/view.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/includes/framework.php on line 4

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/administrator/manifests/packages/include.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/includes/framework.php on line 14

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/administrator/manifests/packages/include.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/includes/framework.php on line 14

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/templates/virtualnautaejemplo/classes/header.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/includes/framework.php on line 16

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/templates/virtualnautaejemplo/classes/header.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/includes/framework.php on line 16

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/libraries/phputf8/view.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/includes/framework.php on line 18

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/libraries/phputf8/view.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/includes/framework.php on line 18

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/components/com_search/views/object.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/libraries/import.php on line 6

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/components/com_search/views/object.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/libraries/import.php on line 6

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/administrator/language/en-GB/footer.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/libraries/import.php on line 8

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/administrator/language/en-GB/footer.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/libraries/import.php on line 8

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/libraries/import.php on line 10

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/libraries/import.php on line 10

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/libraries/import.php on line 12

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/libraries/import.php on line 12

Warning: session_start() [function.session-start]: Cannot send session cookie - headers already sent by (output started at /home/content/20/9214920/html/joomla/includes/framework.php:2) in /home/content/20/9214920/html/joomla/libraries/joomla/session/session.php on line 532

Warning: session_start() [function.session-start]: Cannot send session cache limiter - headers already sent (output started at /home/content/20/9214920/html/joomla/includes/framework.php:2) in /home/content/20/9214920/html/joomla/libraries/joomla/session/session.php on line 532
Textos en CSS Text - Virtualnauta.com - Tutorial CSS

CSS Textos

Transforma, decora y alínea los textos de tu sitio para hacerlos más claros para la lectura.


Los textos con CSS

Las propiedades de los textos nos permiten controlar la apariencia de los mismos.

Entre los ajustes que podemos aplicar a los textos, tenemos:

  1. La sangría
  2. El alineado
  3. La decoración
  4. Espacio entre letras
  5. Espacio entre palabras
  6. Mayúsculas y minúsculas
  7. Espacios en blando

Sangría de los textos - text-indent

La propiedad text-indent se utiliza para generar sangría en la primera línea de un texto.

Sintaxis

<head>
<style="type:text/css">
selector {text-indent: valor}
</style>
</head>

Los posibles valores para definir la sangría

longitud | %

Ejemplo

Vamos a ver como se comporta un texto con sangría.

Código
<head>
<style type="text/css">
p{text-indent:2cm}
</style>
</head>

<body>
<p>En la primera línea de este párrafo observamos una sangría de 2 centímetros de distancia del borde.</p>
</body>
Resultado

En la primera línea de este párrafo observamos una sangría de 2 centímetros de distancia del borde.


Alineado de los textos - text-align

La propiedad text-align se utiliza para alinear un texto a la derecha, izquierda o centro del bloque que lo contiene.

Sintaxis

<head>
<style="type:text/css">
selector {text-align: valor}
</style>
</head>

Los posibles valores para alinear los textos

left | right | center | justify

Ejemplo

Alineamos un texto a la derecha y otro en el centro.

Código
<head>
<style type="text/css">
p.der{text-align:right}
p.cen{text-align:center}
</style>
</head>

<body>
<p class="der">Texto a la derecha</p>
<p class="cen">Texto en el centro</p>
</body>
Resultado

Texto a la derecha

Texto en el centro


La decoración de los textos - text-decoration

La propiedad text-decoration se utiliza para subrayar, tachar, remarcar con una línea superior o parpadear un texto.

Sintaxis

<head>
<style="type:text/css">
selector {text-decoration: valor}
</style>
</head>

Los posibles valores para decorar los textos

none | underline | overline | line-through | blink

Ejemplo

Definimos un texto parpadeante y un enlace sin subrayar.

Código
<head>
<style type="text/css">
p.parpadeo{text-decoratio:blink}
a.sin_linea{text-decoration:none}
</style>
</head>

<body>
<p class="parpadeo">Texto parpadeando</p>
<a class="sin_linea" href="/www.virtualnauta.com">
Ir a la home de Virtualnauta</a>
</body>
Resultado

Texto parpadeando

Ir a la home de Virtualnauta

Separación entre letras - letter-spacing

La propiedad letter-spacing se utiliza para definir la distancia que queremos dejar entre letra y letra de un mismo texto.

Sintaxis

<head>
<style="type:text/css">
selector {letter-spacing: valor}
</style>
</head>

Los posibles valores para esta propiedad

normal | distancia

Ejemplo

Vamos definir una distancia entre letras de 5 píxeles.

Código
<head>
<style type="text/css">
p{letter-spacing:5px}
</style>
</head>

<body>
<p>La distancia entre letras es de 5 píxeles</p>
</body>
Resultado

La distancia entre letras es de 5 píxeles


Separación entre palabras - word-spacing

La propiedad word-spacing se utiliza para definir la distancia que queremos dejar entre palabras.

Sintaxis

<head>
<style="type:text/css">
selector {word-spacing: valor}
</style>
</head>

Los posibles valores para esta propiedad

normal | distancia

Ejemplo

Vamos definir una distancia entre palabras de 2 centímetros.

Código
<head>
<style type="text/css">
p{word-spacing:2cm}
</style>
</head>

<body>
<p>La distancia entre palabras es de 2 centímetros</p>
</body>
Resultado

La distancia entre palabras es de 2 centímetros


Transformar los textos a mayúsculas o minúsculas - text-transform

La propiedad text-transform se utiliza para convertir un texto a mayúsculas o minúsculas.

Sintaxis

<head>
<style="type:text/css">
selector {text-transform: valor}
</style>
</head>

Los posibles valores para convertir los textos

capitalize | uppercase | lowercase | none

Ejemplo

Vamos definir la primera letra de cada palabra en mayúsculas.

Código
<head>
<style type="text/css">
p{text-transform:capitalize}
</style>
</head>

<body>
<p>La primera letra de cada palabra se a convertido
a mayúsculas</p>
</body>
Resultado

La primera letra de cada palabra se a convertido a mayúsculas


Espacios en blanco - white-space

La propiedad white-space se utiliza para manipular el comportamiento de los espacios en blanco dentro de cada elemento.

Sintaxis

<head>
<style="type:text/css">
selector {white-space: valor}
</style>
</head>

Los posibles valores para esta propiedad

normal | pre | nowrap | pre-wrap | pre-line

Ejemplo

Vamos ver el comportamiento de los espacios en blanco dentro de un texto.

Código
<head>
<style type="text/css">
p.pre{white-space:pre-wrap}
p.normal{white-space:normal}
</style>
</head>

<body>
<p class="pre">Dejo varios espacios en
blanco entre palabra y palabra.</p>
<p class="normal">Aca     también    dejo     varios
    espacios     en    blanco     entre    palabra     y
    palabra     pero    los     comprime
a    uno     solo.</p>
</body>
Resultado

Dejo varios espacios en blanco entre palabra y palabra.

Aca también dejo varios espacios en blanco entre palabra y palabra pero los comprime a uno solo.


Propiedades de los textos

PropiedadDescripciónValoresDetallesEj.
text-indent Desplazamiento de la primera línea del texto. longitud Longitud Ejemplo de como desplazar la primera línea de un texto
% Porcentaje Ejemplode como desplazar la primera línea de un texto en porcentajes
text-align Alineamiento del texto. left Izquierda Ejemplo de como alinear un texto a la izquierda
right Derecha Ejemplo de como alinear un texto a la derecha
center Centro Ejemplo de como centrar un texto
justify Justificar Ejemplo de como alinear un texto con justify
text-decoration Efectos de subrayado, tachado, parpadeo. none Sin efectos Ejemplo de un texto sin efectos
underline Subrayado Ejemplo de un texto subrayado
overline Línea por encima Ejemplo de un texto con una línea por encima del mismo
line-through Tachado Ejemplo de un texto tachado
blink Parpadeo
Ejemplo de un texto parpadeante
text-transform Transformaciones del texto a mayúsculas/minúsculas. capitalize Convierte en mayúscula el primer carácter de cada palabra Ejemplo de como convertir a mayúscula la primer letra de cada palabra
uppercase Convierte en mayúscula todas las letras del elemento Ejemplo que convierte a mayúsculas todos los caracteres del texto
lowercase Convierte en minúscula todas las letras del elemento Ejemplo que convierte a minúsculas todos los caracteres del texto
none Neutraliza el valor heredado Ejemplo de text-transform con el valor none
letter-spacing Espacio entre caracteres. normal Normal Ejemplo comparativo de como dejar espacios en blanco entre letras
longitud Longitud Ejemplo comparativo de como dejar espacios en blanco entre letras
word-spacing Espacio entre palabras. normal Normal Ejemplo comparativo de como dejar espacios en blanco entre palabras
longitud Longitud Ejemplo comparativo de como dejar espacios en blanco entre palabras
white-space Comportamiento de los espacios dentro de los elementos. normal Normal Ejemplo de white-space y un salto de línea normal
pre Preformateado Ejemplo de white-space juto con el valor pre
nowrap Los cambios de línea solo ocurren con el elemento br Ejemplo de un texto no limitado por el tamaño de la caja
pre-wrap Ejemplo de white-space juto con el valor pre-wrap
pre-line Ejemplo de white-space juto con el valor pre-line
direction Sentido direccional de la escritura. ltr Izquierda a derecha Ejemplo comparativo entre la escritura de izq a der o de der a izq
rtl Derecha a izquierda Ejemplo comparativo entre la escritura de izq a der o de der a izq
unicode-bidi Sentido direccional de la escritura. normal Normal Ejemplo del uso de unicode-bidi y el valor normal
embed Abre un nivel adicional de incrustación con respecto al algoritmo bidireccional Ejemplo del uso de unicode-bidi y el valor embed
bidi-override Si el elemento es a nivel de línea o es un elemento a nivel de bloque, crea una sustitución Ejemplo del uso de unicode-bidi y el valor bidi-override


<<< Fondo - Background en CSS Fuentes - Fonts en CSS >>>

En la Web