Introducción - Tutorial CSS gratuito
Las hojas de estilo en cascada (CSS, acrónimo de Cascading StyleSheets) son una herramienta fantástica para añadir presentación a los sitios web. Pueden ahorrarte mucho tiempo y te permitirán diseñar sitios web de un modo totalmente nuevo. CSS es imprescindible para todos aquellos que trabajen en el campo del diseño web.
El presente tutorial te iniciará en el uso de CSS en solo unas horas. Es fácil de entender y te enseñará todo tipo de técnicas sofisticadas.
Aprender CSS es divertido. Según vayas avanzando en el contenido del tutorial, recuerda dedicar el tiempo suficiente para experimentar con lo que hayas aprendido en cada lección.
Para usar CSS es necesario tener una experiencia básica en HTML.. Si no estás familiarizado con HTML, empieza, por favor, con antes de adentrarte en CSS.
¿Qué software necesito?
Evita, por favor, usar software tal como FrontPage, DreamWeaver o Word con este tutorial. Este tipo de software tan sofisticado no te ayudará a aprender CSS; más bien, te limitará y reducirá de modo significativo tu curva de aprendizaje.
Todo lo que necesitas es un editor de texto sencillo y gratuito.
Por ejemplo, Microsoft Windows incorpora un programa que se llama Bloc de notas. Se localiza normalmente en el menú de Inicio, sección Todos los programas dentro de la carpeta Accesorios. Si no es éste, puedes usar un editor de texto parecido, por ejemplo, Pico para Linux o Simple Text para Macintosh.
Este tipo de editores de texto sencillos son ideales para aprender HTML y CSS puesto que no afectan o cambian el código que vas tecleando. De esto modo, los éxitos y errores sólo se te podrán atribuir a ti... y no al software.
Puedes usar cualquier navegador con este tutorial. Te animamos a que mantegas siempre actualizado tu navegador y uses la versión más reciente.
Un navegador y un sencillo editor de texto es todo lo que necesitas.
¡Nos ponemos en marcha!
Lección 1: ¿Qué es CSS?
Puede que ya hayas oído hablar de CSS sin saber realmente qué es. En esta lección aprenderás más cosas sobre CSS y qué puede hacer por ti.
CSS es el acrónicmo de CascadingStyle Sheets (es decir, hojas de estilo en cascada).
¿Qué puedo hacer con CSS?
CSS es un lenguaje de estilo que define la presentación de los documentos HTML. Por ejemplo, CSS abarca cuestiones relativas a fuentes, colores, márgenes, líneas, altura, anchura, imágenes de fondo, posicionamiento avanzado y muchos otros temas. ¡Espera unos segundos y ya verás!
Es posible usar HTML, o incluso abusar del mismo, para añadir formato a los sitios web. Sin embargo, CSS ofrece más opciones y es más preciso y sofisticado. CSS está soportado por todos los navegadores hoy día.
Después de unas cuantas lecciones de este tutorial serás capaz de crear tus propias hojas de estilo usando CSS para dar a tu sitio web un aspecto nuevo y genial.
¿Qué diferencia hay entre CSS y HTML?
HTML se usa para estructurar el contenido; CSS se usa para formatear el contenido previamente estructurado.
Vale, suena un poco técnico y confuso... pero sigue leyendo; pronto todo tendrá sentido.
Allá en los buenos tiempos en que Madonna era una "Virgen" y un tipo llamado Tim Berners Lee inventó el World Wide Web, el lenguaje HTML sólo se usaba para añadir estructura al texto. Los autores podían marcar sus textos diciendo "esto en un título" o "esto es un párrafo", usando las etiquetas HTML
<h1>
y
<p>
, respectivamente.
A medida que la Web fue ganando popularidad, los diseñadores empezaron a buscar posibilidades para añadir formato a los documentos en línea. Para satisfacer esta reclamación, los fabricantes de los navegadores (en ese momento, Netscape y Microsoft) inventaron nuevas etiquetas HTML, entre las que se encontraban, por ejemplo,
<font>
, que se diferenciaba de las etiquetas originales HTML en que definían el formato... y no la estructura.
Esto también llevó a una situación en la que las etiquetas estructurales originales, por ejemplo, <table>, se usaban cada vez más de manera incorrecta para dar formato a las páginas en vez de para añadir estructura al texto. Muchas nuevas etiquetas que añadían formato, por ejemplo, <blink>, sólo las soportaban un tipo determinado de navegador. "Necesitas el navegador X para visualizar esta página" se convirtió en una declaración de descargo común en los sitios web.
CSS se inventó para remediar esta situación, proporcionando a los diseñadores web con sofisticadas oportunidades de presentación soportadas por todos los navegadores. Al mismo tiempo, la separación de la presentación de los documentos del contenido de los mismos, hace que el mantenimiento del sitio sea mucho más fácil.
¿Qué beneficios me ofrece CSS?
CSS fue toda una revolución en el mundo del diseño web. Entre los beneficios concretos de CSS encontramos:
control de la presentación de muchos documentos desde una única hoja de estilo;control más preciso de la presentación;aplicación de diferentes presentaciones a diferentes tipos de medios (pantalla, impresión, etc.);numerosas técnicas avanzadas y sofisticadas.En la examinaremos con más detenimiento cómo funciona realmente CSS y cómo puedes iniciarte en su uso.
Lección 2: ¿Cómo funciona CSS?
En esta lección aprenderás a crear tu primera hoja de estilo; conocerás el modelo básico de CSS y qué código es necesario para usar CSS en un documento HTML.
Muchas de las propiedades que se usan en las hojas de estilo en cascada (CSS) son parecidas a las de HTML. Así pues, si estás acostumbrado a usar HTML para cuestiones de presentación, lo más probable es que reconozcas gran parte del código usado. Examinemos un ejemplo concreto.
La sintaxis básica de CSS
Digamos que queremos un bonito color rojo como fondo de nuestra página web:
Usando HTML podríamos haberlo conseguido así:
[code]<body bgcolor="#FF0000">
Con CSS el mismo resultado puede lograrse así:
[code][b]body {background-color: #FF0000;}[/b]
Como verás, el código usado es más o menos idéntico para HTML y CSS. El ejemplo anterior te muestra además el modelo CSS fundamental:
Pero ¿dónde se sitúa el código CSS? Eso, precisamente, es lo que vamos a estudiar ahora mismo.
Aplicando CSS a un documento HTML
Podemos aplicar CSS a un documento HTML de tres maneras diferentes. Todos estos métodos se explican a continuación. Te recomendamos que te centres en el tercero, es decir, el externo.
Método 1: En línea (el atributo
style
)
Un modo de aplicar CSS a HTML es usando el atributo de HTML
style
. Si ampliamos el ejemplo anterior sobre el color de fondo rojo, CSS se puede aplicar así:
[code]<html>
<head>
<title>Ejemplo</title>
</head>
[b]<body style=background-color:#FF0000;>[/b]
<p>Esta es una página con fondo rojo</p>
</body>
</html>
Método 2: Interno (la etiqueta
style
)
Otra forma es incluir el código CSS usando la etiqueta HTML
<style>
. Por ejemplo, así:
[code]<html>
<head>
<title>Ejemplo</title>
[b]<style type="text/css">[/b]
[b]body {background-color: #FF0000;}[/b]
[b]</style>[/b]
</head>
<body>
<p>Esta es una página con fondo rojo</p>
</body>
</html>
Método 3: Externo (enlace a una hoja de estilo)
El método recomendado es enlazar con lo que se denomina hoja de estilo externa. A lo largo de este tutorial usaremos este método en todos nuestros ejemplos.
Una hoja de estilo externa es sencillamente un fichero de texto con la extensión .css. Como cualquier otro fichero, puedes colocar la hoja de estilo en el servidor web o en el disco duro.
Por ejemplo, digamos que tu hoja de estilo se llama style.css y está localizada en una carpeta que se llama style. Esta situación se puede ilustrar de la siguiente manera:
El truco consiste en crear un vínculo desde el documento HTML (por ejemplo, default.htm) con la hoja de estilo (style.css). Dicho vínculo se puede crear con una sencilla línea de código HTML:
[code]<link rel="stylesheet" type="text/css" [b]href="style/style.css"[/b] />
Fíjate cómo la ruta a nuestra hoja de estilo aparece indicada por medio del atributo
href
.
La línea de código debe insertarse en la sección de encabezado del código HTML, es decir, entre la etiqueta
<head>
y
</head>
. De esta manera:
[code]<html>
<head>
<title>Mi documento</title>
[b]<link rel="stylesheet" type="text/css" href="style/style.css" />[/b]
</head>
<body>
...Este vínculo indica al navegador que debería usar la presentación del fichero CSS al mostrar el fichero HTML. Lo realmente bueno de este método es que se pueden vincular varios documentos HTML con la misma hoja de estilo. En otras palabras, se puede usar un único fichero CSS para controlar la presentación del muchos documentos HTML.
Esta técnica puede ahorrarte mucho trabajo. Si quisieras cambiar, por ejemplo, el color de fondo de un sitio web compuesto por 100 páginas, un hoja de estilo puede ahorrarte el tener que cambiar de forma manual los 100 documentos HTML. Con CSS, el cambio se puede llevar a cabo en unos segundos modificando parte del código de la hoja de estilo principal.
Vamos a llevar a la práctica lo que acabamos de aprender.
Pruébalo tú mismo
Abre el Bloc de notas (o el editor de texto que utilices) y crea dos ficheros - un fichero HTML y un fichero CSS - con el siguiente contenido:
Fichero default.htm
[code]<html>
<head>
<title>Mi documento</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Mi primera hoja de estilo</h1>
</body>
</html>
Fichero style.css
[code]body {
background-color: #FF0000;
}
Ahora coloca los dos ficheros en la misma carpeta. Recuerda grabar los ficheros con las extensiones correctas (".htm" y ".css", respectivamente).
Abre el fichero default.htm con el navegador y observa que la página tiene un color de fondo rojo. ¡Enhorabuena! ¡Acabas de crear tu primera hoja de estilo!
Y ahora sin parar pasa a la en la que examinaremos algunas de la propiedades de CSS.
Lección 3: Colores y fondos
En esta lección aprenderás a aplicar colores y colores de fondo a tus sitios web. Examinaremos también métodos avanzados para posicionar y controlar imágenes de fondo. Se explicarán las siguientes propiedades CSS:
Color de primer plano: la propiedad 'color'
La propiedad
color
describe el color de primer plano de un elemento.
Por ejemplo, imagina que queremos que todos los títulos de un documento aparezcan con color rojo oscuro. Todos los títulos están marcados con el elemento
<h1>
. El código siguiente establece el color de los elementos
<h1>
como rojo.
[code]h1 {[b]color: #ff0000;[/b]}
Los colores se pueden introducir como valores hexadecimales, como en el ejemplo anterior: #ff0000; o se pueden usar los nombres de los colores: "red" (rojo), o bien como valores rgb: (rgb(255,0,0)).
La propiedad 'background-color'
La propiedad
background-color
describe el color de fondo de los elementos.
El elemento
<body>
contiene todo el contenido de un documento HTML. Así pues, para cambiar el color de fondo de una página, la propiedad
background-color
debería aplicarse al elemento
<body>
.
También se pueden aplicar colores de fondo a otros elementos, entre ellos, a los encabezados y al texto. En el ejemplo que sigue se aplicarán diferentes colores a los elementos
<body>
y
<h1>
.
[code]body {[b]background-color: #FFCC66;[/b]}h1 {color: #990000;[b]background-color: #FC9804;[/b]}
Fíjate cómo hemos aplicado dos propiedades a
<h1>
separándolas por medio de un punto y coma.
Imágenes de fondo [background-image]
La propiedad CSS
background-image
se usa para insertar una imagen de fondo.
Para el ejemplo de la imagen de fondo, vamos a usar la mariposa que ves más abajo. Puedes descargar la imagen para usarla en tu propio ordenador (haz clic con el botón derecho sobre la imagen y elige "guardar imagen como...", o bien puedes usar cualquier otra imagen.
Para insertar la imagen de la mariposa como imagen de fondo de una página web, aplica sencillamente la propiedad
background-image
al elemento
<body>
y especifica la localización de la imagen.
[code]body {background-color: #FFCC66;[b]background-image: url("butterfly.gif");[/b]}h1 {color: #990000;background-color: #FC9804;}
NOTA: Fíjate cómo hemos especificado la localización de la imagen: url("butterfly.gif". Esto significa que la imagen está en la misma carpeta que la hoja de estilo. También puedes hacer referencia a imágenes en otras carpetas usando url("../imagenes/butterfly.gif" o incluso imágenes de internet si indicas la dirección completa del fichero: url("http://www.html.net/butterfly.gif".
Repetir la imagen de fondo [background-repeat]
En el ejemplo anterior, ¿te fijaste en que, por defecto, la mariposa se repetía tanto en el eje horizontal como en el vertical para ocupar toda la pantalla? La propiedad
background-repeat
controla este comportamiento.
La tabla siguiente resume los cuatro valores diferentes para la propiedad
background-repeat
.
ValorDescripciónEjemplo
Background-repeat: repeat-x
La imagen se repite en el eje horizontal
background-repeat: repeat-y
La imagen se repite en el eje vertical
background-repeat: repeat
La imagen se repite en el eje horizontal y vertical
background-repeat: no-repeat
La imagen no se repitePor ejemplo, para evitar que se repita un imagen de fondo, el código que tendríamos que usar sería el siguiente:
[code]body {background-color: #FFCC66;background-image: url("butterfly.gif");[b]background-repeat: no-repeat;[/b]}h1 {color: #990000;background-color: #FC9804;}
Fijar la imagen de fondo [background-attachment]
La propiedad
background-attachment
especifica si una imagen está fija o se desplaza con el elemento contenedor.
Una imagen de fondo fija no se moverá con el texto cuando el lector se desplace por la página, mientras que una imagen de fondo no fija se desplazará con el texto de la página web.
La tabla siguiente resume los dos valores posibles para la propiedad
background-attachment
. Haz clic en los ejemplos para ver la diferencia entre la imagen fija y la imagen que se desplaza.
ValorDescripciónEjemplo
Background-attachment: scroll
La imagen se desplaza con la página - no está fija
Background-attachment: fixed
La imagen está fijaPor ejemplo, el siguiente código fijará la imagen de fondo.
[code]body {background-color: #FFCC66;background-image: url("butterfly.gif");background-repeat: no-repeat;[b]background-attachment: fixed;[/b]}h1 {color: #990000;background-color: #FC9804;}
Ubicación de la imagen de fondo [background-position]
Por defecto, una imagen de fondo se posiciona en la esquina superior izquierda de la pantalla. La propiedad
background-position
te permitirá cambiar este valor por defecto y posicionar la imagen de fondo en cualquier lugar de la pantalla que quieras.
Hay muchas formas diferentes de establecer los valores de la propiedad
background-position
. Sin embargo, todas ellas se formatean como un conjunto de coordenadas. Por ejemplo, el valor '100px 200px' posiciona la imagen de fondo a 100 píxeles del margen izquierdo y a 200 píxeles del margen superior del la ventana del navegador.
Las coordenadas se pueden indicar como porcentajes del ancho de la pantalla, como unidades fijas (píxeles, centímetros, etc.) o puedes usar las palabras "top" (superior), "bottom" (inferior), "center" (centro), "left" (izquierda) y "right" (derecha). El modelo siguiente ilustra cómo funciona el sistema:
La tabla siguiente proporciona varios ejemplos.
ValorDescripciónEjemplo
background-position: 2cm 2cm
La imagen se posiciona a 2 cm del margen izquierdo y a 2 cm del margen superior de la página
background-position: 50% 25%
La imagen se posiciona en el centro de la página y un 25 % del margen superior de la misma
background-position: top right
La imagen se posiciona en la esquina superior derecha de la páginaEl ejemplo de código siguiente posiciona la imagen de fondo en la esquina inferior derecha:
[code]body {background-color: #FFCC66;background-image: url("butterfly.gif");background-repeat: no-repeat;background-attachment: fixed;[b]background-position: right bottom;[/b]}h1 {color: #990000;background-color: #FC9804;}
Combinación de propiedades
La propiedad
background
es una forma abreviada de todas las propiedades de fondo listadas a lo largo de esta lección.
Con la propiedad
background
se pueden comprimir varias propiedades, y así escribir una hoja de estilo de forma más abreviada, lo que facilitará su lectura.
Por ejemplo, observa estas cinco líneas de código:
[code]background-color: #FFCC66;background-image: url("butterfly.gif");background-repeat: no-repeat;background-attachment: fixed;background-position: right bottom;
Usando
background
se puede lograr el mismo resultado con una única línea de código:
[code]background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
El orden en que deben aparecer las propiedades individuales es el siguiente:
[background-color]
|
[background-image]
|
[background-repeat]
|
[background-attachment]
|
[background-position]
Si se omite alguna propiedad, de forma automática ésta se establecerá con su valor por defecto. Por ejemplo, si se omiten las propiedades
background-attachment
y
background-position
del ejemplo anterior, quedando el código de la siguiente manera:
[code]background: #FFCC66 url("butterfly.gif") no-repeat;
Estas dos propiedades que no se especifican se establecerían, sin más, con sus valores por defecto, que, como ya sabes, son
scroll
y
top left
.
Lección 4: Fuentes
En esta lección aprenderás nociones sobre fuentes y cómo se aplican usando CSS. También veremos cómo solucionar el tema de que las fuentes específicas elegidas para un sitio web sólo se pueden ver si están instaladas en el PC desde el que se accede a dicho sitio web. Se describirán las siguientes propiedades CSS:
Familia de fuentes [font-family]
La propiedad
font-family
se usa para establecer una lista ordenada de fuentes que se usarán para mostrar un elemento determinado o una página web. Si la primera fuente de la lista no está instalada en el ordenador desde el que se accede al sitio, se seguirá probando con la siguiente fuente hasta encontrar una fuente apropiada.
Para clasificar las fuentes se usan dos tipos de nombres: nombres de una familia y familias genéricas. Estos dos términos se explican a continuación.
La diferencia se puede ilustrar así:
Al listar fuentes para el sitio web, por supuesto se empieza por la preferida, seguida ésta de algunas fuentes alternativas. Se recomienda completar la lista con una familia de fuentes genérica. Así, al menos, la página se mostrará usando una fuente de la misma familia si ninguna de las especificadas están disponibles.
Un ejemplo de lista de fuentes por orden de prioridad podría tener este aspecto:
[code]h1 {font-family:arial, verdana, sans-serif;}h2 {font-family:#"Times New Roman", serif;}
Los encabezados marcados con la etiqueta
<h1>
se mostrarán usando la fuente "Arial". Si esta fuente no está instalada en el ordenador de usuario, se usará en su lugar la fuente "Verdana". Si ambas fuentes no están disponibles, se usará una fuente de la familia sans-serif para mostrar los encabezados.
Fíjate cómo el nombre de fuente "Times New Roman" contiene espacios y, por lo tanto, se lista usando comillas.
Estilo de la fuente [font-style]
La propiedad
font-style
define la fuente elegida bien con el valor normal, el valoritalic o el valor oblique. En el ejemplo que sigue, todos los encabezados marcados con
<h2>
aparecerán en cursiva.
[code]h1 {font-family:arial, verdana, sans-serif;}h2 {font-family:#"Times New Roman", serif; [b]font-style: italic;[/b]}
Variante de fuente [font-variant]
La propiedad
font-variant
se usa para elegir entre las variantes normal o small-caps (versalita) de una fuente. La fuente a la que se aplica el valorsmall-caps es una fuente que usa letras en mayúscula inicial más pequeñas, en vez de letras en minúscula. ¿Confuso? Veamos los ejemplos siguientes:
Si la propiedad
font-variant
se establece con el valor small-caps y no hay disponible una fuente en versalita, el navegador probablemente mostrará el texto en mayúscula.
[code]h1 {font-variant: small-caps;}h2 {font-variant: normal;}
Peso de la fuente [font-weight]
La propiedad
font-weight
describe qué intensidad o "peso" en negrita debería tener la fuente. Toda fuente puede tener los valores normal o bold. Algunos navegadores soportan, incluso, el uso de números entre 100 y 900 (de cien en cien) para describir el peso de dicha fuente.
[code]p {font-family:arial, verdana, sans-serif;}td {font-family:arial, verdana, sans-serif; [b]font-weight: bold;[/b]}
Tamaño de la fuente [font-size]
El tamaño de la fuente se establece por medio de la propiedad
font-size
.
A la hora de describir el tamaño de las fuentes, existen muchas unidades diferentes (por ejemplo, píxeles y porcentajes) entre las que elegir. En este tutorial nos centraremos en las unidades más comunes y adecuadas. Como ejemplo, podemos incluir:
[code]h1 {font-size: [b]30px[/b];}h2 {font-size: [b]12pt[/b];}h3 {font-size: [b]120%[/b];}p {font-size: [b]1em;[/b]}
Existe una diferencia clave entre las cuatro unidades anteriores. Las unidades 'px' y 'pt' establecen el tamaño de la fuente de forma absoluta, mientras que '%' y 'em' permiten al usuario ajustar el tamaño de la misma según considere oportuno. Muchos usuarios son discapacitados, mayores o sufren de disminuación visual, o disponen de un monitor de mala calidad.Para que tu sitio web sea accesible para todo el mundo, deberías usar unidades ajustables como, por ejemplo, '%' o 'em'.
En la imagen que sigue puedes ver cómo ajustar el tamaño del texto en Mozilla Firefox e Internet Explorer. Pruébalo; es una buena característica, ¿no crees?
Combinación de propiedades
Si usamos la propiedad abreviada
font
es posible incluir todas las propiedades diferentes relativas a fuentes en una única propiedad.
Por ejemplo, imagina estas cuatro líneas de código que usamos para describir las propiedades de fuente para la etiqueta
<p>
:
[code]p {[b]font-style: italic;font-weight: bold;font-size: 30px;font-family:arial, sans-serif;[/b]}
Usando la propiedad abreviada, el código se puede simplicar así:
[code]p {[b]font: italic bold 30px arial, sans-serif;[/b]}
El orden de los valores para la propiedad
font
es:
font-style
|
font-variant
|
font-weight
|
font-size
|
font-family
Lección 5: Texto
Formatear y añadir estilo al texto es un tema clave para cualquier diseñador web. En esta lección presentaremos las increíbles oportunidades que ofrece CSS a la hora de añadir presentación al texto. Describiremos las siguientes propiedades:
Sangría del texto [text-indent]
La propiedad
text-indent
permite añadir un toque de elegancia a los párrafos de texto al aplicar sangría a la primera línea de dicho párrafo. En el ejemplo siguiente se ha aplicado una sangía de 30px a todos los párrafos de texto marcados con la etiqueta
<p>
:
[code]p {text-indent: 30px;}
Ver ejemplo
Alineación del texto [text-align]
La propiedad CSS
text-align
es el equivalente al atributo
align
usado en versiones anteriores de HTML. Los valores posibles de esta propiedad son: left(texto alineado a la izquierda), right (texto alineado a la derecha) o center (texto con alineación centrada). Además, el valor justify(alineación justificada) alargará cada línea de forma que los márgenes izquierdo y derecho estén justificados. Esta tipo de presentación la habrás visto, por ejemplo, en periódicos y revistas.
En el ejemplo que sigue, el texto de los encabezados de la tabla,
<th>
, se ha alineado a la derecha, mientras que los datos de la tabla,
<td>
, aparecen centrados. Además, los párrafos de texto normales están justificados:
[code]th {text-align: [b]right;[/b]}td {text-align: [b]center;[/b]}p {text-align: [b]justify;[/b]}
Ver ejemplo
Decoración del texto [text-decoration]
La propiedad
text-decoration
permite añadir diferentes "decoraciones" o "efectos" al texto. Por ejemplo, se puede subrayar el texto, tacharlo o ponerle un subrayado superior. En el ejemplo siguiente, el elemento
<h1>
aparecerá subrayado, el elemento
<h2>
aparecerá con un subrayado por encima del texto y el elemento
<h3>
tendrá el texto tachado.
[code]h1 {text-decoration: [b]underline[/b];}h2 {text-decoration: [b]overline[/b];}h3 {text-decoration: [b]line-through[/b];}
Ver ejemplo
Espaciado entre caracteres [letter-spacing]
El espaciado entre los caracteres de texto se puede especificar usando la propiedad
letter-spacing
. El valor de esta propiedad corresponde, sencillamente, al ancho deseado. Por ejemplo, si queremos un espaciado de 3px entre los caracteres de un párrafo de texto
<p>
y6px entre los caracteres de los encabezados
<h1>
, usaríamos el siguiente código:
[code]h1 {letter-spacing: [b]6px;[/b]}p {letter-spacing: [b]3px;[/b]}
Ver ejemplo
Transformación del texto [text-transform]
La propiedad
text-transform
controla la escritura en mayúsculas de un texto. Puedes elegir entre los valorescapitalize, uppercase olowercase, sin importar cómo aparece el texto original en el código HTML.
Un ejemplo podría ser la palabra "título" que se puede presentar al usuario como "TÍTULO" o "Título". A continuación ofrecemos una explicación de los valores de la propiedad
text-transform
mencionados en el párrafo anterior:
capitalizePone en mayúscula la primera letra de cada palabra. Por ejemplo, "john doe" aparecerá como "John Doe".uppercaseConvierte todas las letras a mayúscula. Por ejemplo, "john doe" aparecerá como "JOHN DOE".lowercaseConvierte todas las letras a minúscula. Por ejemplo, "JOHN DOE" aparecerá como "john doe". noneNo se realiza transformación alguna; el texto se presenta tal como aparece en el cógido HTML.Como ejemplo, usaremos una lista de nombres. Todos los nombres están marcados con la etiqueta
<li>
(de "list element", es decir, elemento de lista). Supongamos que queremos que las iniciales de los nombres aparezcan en mayúscula y los títulos con todos los caracteres en mayúscula.
Échale un vistazo al código fuente del ejemplo y verás que el texto aparece realmente en minúscula.
[code]h1 {text-transform: [b]uppercase;[/b]}li {text-transform: [b]capitalize;[/b]}
Ver ejemplo
Lección 6: Enlaces
Ya puedes aplicar lo que aprendiste en las lecciones anteriores a los enlaces (es decir, cambiar colores, fuentes, subrayado, etc.). La novedad respecto a los enlaces es que CSS te permite definir estas propiedades de forma diferente dependiendo del estado del mismo, es decir, si el enlace se ha visitado, no se ha visitado, si es el enlace activo o si el cursor está sobre dicho enlace. Esto permite añadir efectos divertidos y útiles a tu sitio web. Para controlar estos efectos se usan lo que se ha denominado como pseudo-clases.
¿Qué es una pseudo-clase?
Una pseudo-clase te permite tener en cuenta diferentes condiciones o eventos al definir una propiedad para una etiqueta HTML.
Veamos un ejemplo. Como ya sabes, los enlaces se especifican en HTML con la etiqueta
<a>
. Por lo tanto, podemos usar
a
como selector en CSS:
[code]a {color: blue;}
Todo enlace tiene diferentes estados. Por ejemplo, visitado o no visitado. Puedes usar una pseudo-clase para asignar diferentes estilos a los enlaces visitados y no visitados.
[code][b]a:link[/b] {color: blue;}[b]a:visited[/b] {color: red;}
Usa
a:link
y
a:visited
para enlaces visitados y no visitados, respectivamente. A los enlaces activos se les aplica la pseudo-clase
a:active
, y
a:hover
cuando el cursor se coloca o pasa sobre el enlace.
Vamos a repasar ahora cada una de las cuatro pseudo-clases con ejemplos y más explicaciones.
Pseudo-clase
a:link
La pseudo clase
:link
se usa para enlaces que dirigen a páginas que el usuario no ha visitado.
En el ejemplo de código que sigue, los enlaces no visitados tendrán un color azul claro.
[code][b]a:link[/b] {color: #6699CC;}
Ver ejemplo
Pseudo-clase
a:visited
La pseudo clase
:visited
se usa para enlaces que dirigen a páginas que el usuario ya ha visitado. Por ejemplo, el código siguiente hará que todos los enlaces visitados sean de color púrpura oscuro:
[code][b]a:visited[/b] {color: #660099;}
Ver ejemplo
Pseudo-clase
a:active
:
La pseudo clase
:active
se usa para enlaces que están activos.
El código de este ejemplo hace que el color de fondo para los enlaces activos sea amarillo:
[code][b]a:active[/b] {background-color: #FFFF00;}
Ver ejemplo
Pseudo-clase
a:hover
La pseudo clase
a:hover
se usa cuando el puntero del ratón pasa por encima de un enlace.
Esta pseudo-clase se puede usar para crear efectos interesantes. Por ejemplo, si queremos que nuestros enlaces sean de color naranja y estén en cursiva cuando el cursor pase sobre ellos, el código CSS que utilizaremos será el siguiente:
[code][b]a:hover[/b] {color: orange;font-style: italic;}
Ver ejemplo
Ejemplo 1: Efecto cuando el cursor está encima de un enlace
Es bastante popular crear diferentes efectos cuando el cursor está encima de un enlace. Por lo tanto, examinaremos unos cuantos ejemplos más relacionados con la pseudo-clase
:hover
.
Example 1a: Espaciado entre letras
Como recordarás de la , el espaciado entre los caracteres se puede ajustar usando la propiedad
letter-spacing
. Esta propiedad se puede aplicar a los enlaces para crear un efecto especial:
[code][b]a:hover[/b] {letter-spacing: 10px;font-weight:bold;color:red;}
Ver ejemplo
Ejemplo 1b: MAYÚSCULAS y minúsculas
En la examinamos la propiedad
text-transform
, que sirve para intercambiar entre letras en mayúscula y minúscula. Esto se puede usar también para crear un determinado efecto en los enlaces:
[code][b]a:hover[/b] {text-transform: uppercase;font-weight:bold;color:blue;background-color:yellow;}
Ver ejemplo
Estos dos ejemplos dan una idea sobre las posibilidades casi infinitas al combinar diferentes propiedades. Ya puedes ir creando tus propios efectos... ¡inténtalo!
Ejemplo 2: Quitar el subrayado de los enlaces
Una pregunta muy recurrente es: ¿cómo quito el subrayado de los enlaces?
Deberías considerar cuidadosamente la necesidad de quitar el subrayado, pues esto podría disminuir la usabilidad de tu sitio web de forma significativa. La gente está acostumbrada al subrayado azul de los enlaces en las páginas web y saben que pueden hacer clic en ellos. ¡Incluso mi abuelita lo sabe! Si cambias el subrayado y el color de los enalces, existe una buena posibilidad de que los usuarios se confundan y, por lo tanto, no saquen todo el provecho al contenido de tu sitio web.
Dicho esto, es muy sencillo quitar el subrayado de los enlaces. Como recordarás de la , la propiedad
text-decoration
se puede usar para determinar si el texto aparece subrayado o no. Para quitar el subrayado, establece el valor de
text-decoration
a
none
.
[code]a {[b]text-decoration:none;[/b]}
De forma alternativa, puedes establecer la propiedad
text-decoration
junto con otras propiedades para las cuatro pseudo clases.
[code]a:link {color: blue;[b]text-decoration:none;[/b]}a:visited {color: purple;[b]text-decoration:none;[/b]}a:active {background-color: yellow;[b]text-decoration:none;[/b]}a:hover {color:red;[b]text-decoration:none;[/b]}
Ver ejemplo
Lección 7: Identificación y agrupación de elementos (class e id)
A veces querrás aplicar un estilo especial a un elemento concreto o a un grupo concreto de elementos. En esta lección examinaremos cómo usar los atributos
class
e
id
para especificar propiedades para los elementos seleccionados.
¿Como se puede dar color a un título concreto de forma diferente a los otros títulos de tu sitio web? ¿Cómo se pueden agrupar los enlaces en diferentes categorías y dar a cada categoría un estilo especial? Estas dos preguntas son un ejemplo de las preguntas a las que daremos respuesta en esta lección.
Agrupación de elementos con el atributo
class
Digamos que tenemos dos listas de enlaces con los diferentes tipos de uva usados para el vino tinto y el blanco. El código HTML sería el siguiente:
[code]<p>Uvas para el vino blanco:</p><ul><li><a href="ri.htm">Riesling</a></li><li><a href="ch.htm">Chardonnay</a></li><li><a href="pb.htm">Pinot Blanc</a></li></ul><p>Uvas para el vino tinto:</p><ul><li><a href="cs.htm">Cabernet Sauvignon</a></li><li><a href="me.htm">Merlot</a></li><li><a href="pn.htm">Pinot Noir</a></li></ul>
Así pues, queremos que los enlaces relativos al vino blanco sean amarillos, los enlaces relacionados con el vino tinto sean rojos, y el resto de enlaces de la página web sigan siendo azules.
Para lograr esto, dividiremos los enlaces en dos categorías. Esto se hace asignando una clase para cada tipo de enlace, usando el atributo
class
.
Intentemos especificar algunas clases en el ejemplo anterior:
[code]<p>Uvas para el vino blanco:</p><ul><li><a href="ri.htm" [b]class="whitewine"[/b]>Riesling</a></li><li><a href="ch.htm" [b]class="whitewine"[/b]>Chardonnay</a></li><li><a href="pb.htm" [b]class="whitewine"[/b]>Pinot Blanc</a></li></ul><p>Uvas para el vino tinto:</p><ul><li><a href="cs.htm" [b]class="redwine"[/b]>Cabernet Sauvignon</a></li><li><a href="me.htm" [b]class="redwine"[/b]>Merlot</a></li><li><a href="pn.htm" [b]class="redwine"[/b]>Pinot Noir</a></li></ul>
A partir de aquí, podemos definir propiedades especiales para los enlaces que hacen referencia al vino tinto y al vino blanco, respectivamente.
[code]a {color: blue;}a.[b]whitewine[/b] {color: #FFBB00;}a.[b]redwine[/b] {color: #800000;}
Como se muestra en el ejemplo, se pueden definir las propiedades para los elementos que pertenecen a una clase unsando.nombredelaclase en la hoja de estilo del documento.
Identificación de un elemento usando el atributo
id
Además de agrupar elementos, podrías necesitar identificar un elemento único. Esto se hace con el atributo
id
.
Lo que hace especial al atributo
id
es que no pueden existir dos elementos dentro del mismo documento con el mismo
id
. Cada
id
tiene que ser único. En cualquier otro caso, se debería usar el atributo
class
en su lugar. Ahora, examinemos un ejemplo de un posible uso del atributo
id
:
[code]<h1>Capítulo 1</h1>...<h2>Capítulo 1.1</h2>...<h2>Capítulo 1.2</h2>...<h1>Capítulo 2</h1>...<h2>Capítulo 2.1</h2>...<h3>Capítulo 2.1.2</h3>...
El código anterior podría hacer referencia a encabezados de cualquier documento dividido en capítulos y párrafos. Sería normal asignar un
id
a cada capítulo de la siguiente manera:
[code]<h1 [b]id="c1"[/b]>Capítulo 1</h1>...<h2 [b]id="c1-1"[/b]>Capítulo 1.1</h2>...<h2 [b]id="c1-2"[/b]>Capítulo 1.2</h2>...<h1 [b]id="c2"[/b]>Capítulo 2</h1>...<h2 [b]id="c2-1"[/b]>Capítulo 2.1</h2>...<h3 [b]id="c2-1-2"[/b]>Capítulo 2.1.2</h3>...
Digamos que el título del capítulo 1.2 tiene que estar en rojo. Usando el código CSS necesario, se podría hacer así:
[code][b]#c1-2[/b] {color: red;}
Como se muestra en el ejemplo anterior, se pueden definir las propiedades de un elemento específico usando
#nombredelidentificador
en la hoja de estilo del documento.
Lección 8: Agrupación de elementos (span y div)
Los elementos <span> y <div> se usan para agrupar y estructurar un documento, y se usarán, a menudo, junto con los atributos
class
e
id
.
En esta lección revisaremos el uso de los elementos <span> y <div>, ya que estos dos elementos de HTML son, precisamente, de importancia clave en lo que se refiere a CSS.
Agrupación con <span>
El elemento <span> es lo que se podría denominar un elemento neutro que no añade nada al documento en sí. Pero con CSS <span> se puede usar para añadir características visuales distintivas a partes específicas de texto en los documentos.
Un ejemplo de esto podría ser esta cita de Benjamin Franklin:
[code]<p>El que pronto se acuesta y pronto se levanta,
es hombre saludable, rico y sabio.</p>
Digamos que queremos que lo que el señor Franklin considera como las ventajas de no pasarse todo el día durmiendo, aparezca enfatizado en rojo. Para este fin, podemos marcar dichas ventajas con el elemento
<span>
. A cada elemento
span
se le añade el atributo
class
, que podemos definir así en nuestra hoja de estilo:
[code]<p>El que pronto se acuesta y pronto se levanta,
es hombre [b]<span class="ventaja">saludable</span>[/b],
[b]<span class="ventaja">rico</span>[/b]
y [b]<span class="ventaja">sabio</span>[/b].</p>
El código CSS necesario para producir este efecto es el siguiente:
[code][b]span.benefit[/b] {color:red;}
Ver ejemplo
Por supuesto, se puede usar también el atributo
id
para añadir estilo a los elementos definidos con
<span>
. Pero recuerda que tendrás que aplicar siempre un atributo
id
único para cada uno de los tres elementos
<span>
, tal como aprendimos en la lección anterior.
Agrupación con el elemento <div>
Mientras que
<span>
se usa dentro de un elemento a nivel de bloque como vimos en el ejemplo anterior,
<div>
se usa para agrupar uno o más elementos a nivel de bloque.
Aparte de esta diferencia, la agrupación con
<div>
funciona más o menos igual. Veamos un ejemplo con dos listas de presidentes de los EE.UU., divididas según su filiación política.
[code][b]<div id="democrats">[/b]<ul><li>Franklin D. Roosevelt</li><li>Harry S. Truman</li><li>John F. Kennedy</li><li>Lyndon B. Johnson</li><li>Jimmy Carter</li><li>Bill Clinton</li></ul></div>[b]<div id="republicans">[/b]<ul><li>Dwight D. Eisenhower</li><li>Richard Nixon</li><li>Gerald Ford</li><li>Ronald Reagan</li><li>George Bush</li><li>George W. Bush</li></ul></div>
En nuestra hoja de estilo podemos utilizar la agrupación del mismo modo que antes:
[code][b]#democrats[/b] {background:blue;}[b]#republicans[/b] {background:red;}
Ver ejemplo
En los ejemplos anteriores, sólo hemos usado
<div>
y
<span>
con cosas muy sencillas como, por ejemplo, texto y colores de fondo. Ambos elementos tienen el potencial para realizar cosas más avanzadas. Sin embargo, esto no se presentará en esta lección; lo veremos más adelante a lo largo del tutorial.
Muchos Code
------------
Bueno aca termina la primera parte de este tutorial de CSS , esten atentos que ya va a salir la parte 2 Un Saludo