CSS
CSS, es una
tecnología que nos permite crear páginas web de una manera más exacta. Gracias
a las CSS somos mucho más dueños de los resultados finales de la página,
pudiendo hacer muchas cosas que no se podía hacer utilizando solamente HTML,
como incluir márgenes, tipos de letra, fondos, colores...
CSS son las siglas de Cascading Style Sheets, en español Hojas de estilo en Cascada. En este reportaje vamos a ver algunos de los efectos que se pueden crear con las CSS sin necesidad de conocer la tecnología entera.
CSS son las siglas de Cascading Style Sheets, en español Hojas de estilo en Cascada. En este reportaje vamos a ver algunos de los efectos que se pueden crear con las CSS sin necesidad de conocer la tecnología entera.
Para empezar
Las Hojas de Estilo en Cascada se escriben dentro del código HTML de la página web, solo en casos avanzados se pueden escribir en un archivo a parte y enlazar la página con ese archivo. En un principio vamos a utilizar la manera más directa de aplicar estilos a los elementos de la página, mas adelante veremos la declaración en archivos externos. Para ello, y esto es la primera lección de este artículo, vamos a conocer un nuevo atributo que se puede utilizar en casi todas las etiquetas HTML: style.
Las Hojas de Estilo en Cascada se escriben dentro del código HTML de la página web, solo en casos avanzados se pueden escribir en un archivo a parte y enlazar la página con ese archivo. En un principio vamos a utilizar la manera más directa de aplicar estilos a los elementos de la página, mas adelante veremos la declaración en archivos externos. Para ello, y esto es la primera lección de este artículo, vamos a conocer un nuevo atributo que se puede utilizar en casi todas las etiquetas HTML: style.
Ejemplo:
<p style="color:green;font-weight:bold">El párrafo saldrá con color verde y en negrita</p>
Dentro del atributo style se deben indicar los atributos de estilos CSS separados por punto y coma (;). Durante este artículo vamos a conocer muchos atributos de CSS, los dos primeros que hemos visto aquí son:
Color: indica el color del contenido la etiqueta donde estemos utilizándolo, generalmente indica el color del texto.
Font-weight: indica el grosor del texto. Bold sirve para poner en negrita.
|
Color en los enlaces
|
Con HTML
definimos el color de los enlaces en la etiqueta <body>, con lo atributos
link, vlink y alink. Esto nos permite cambiar el color de los enlaces para todo
el documento, pero ¿Y si queremos cambiar el color de un enlace en concreto,
para que tenga otro color que el definido en la etiqueta <body>?
Para hacer
esto utilizaremos el atributo style dentro del enlace:
<a
href="mienlace.html" style="color:red">
Así saldrá
el enlace en color rojo, independientemente de lo definido para todo el
documento.
|
Espaciado entre líneas
|
Con CSS
podemos definir el espacio que hay entre cada línea del documento, utilizando
el atributo line-height. Por ejemplo, podemos definir que para todo un párrafo
el espacio entre cada una de sus líneas sea 25 pixels:
<p style="line-height: 25px;">
Un párrafo
normal en el que cada una de las líneas está separada 25 pixels de la otra. Hay
que poner suficiente texto como para que se vean 2 líneas, así saldrán
separadas
</p>
|
Espaciado entre caracteres
|
Se puede
definir también el espacio entre cada carácter. Esto se hace con el atributo de
CSS letter-spacing. Veamos un ejemplo:
<p
style="letter-spacing:12cm">
Este párrafo
tiene las letras espaciadas por 1 centímetro.
</p>
Este
atributo, al igual que ocurre con muchos otros de CSS, no está soportado por
todos los navegadores. En concreto Netscape, en su versión 4 todavía no lo
incluye.
|
Enlaces sin subrayado
|
Uno de los
efectos más significativos y fáciles de realizar con CSS es eliminar el
subrayado de los enlaces de una página web. Existe un atributo que sirve para
definir la decoración de un texto, si está subrayado, tachado, o si no tiene
ninguna de estas "decoraciones". Es el atributo text-decoration, en
este caso indicaremos en un enlace que no queremos decoración:
<a href="mipagina.html"
style="text-decoration:none">
|
Incluir estilos para todo un sitio web
|
Una de las
características más potentes de la programación con hojas de estilo consiste en
definir los estilos de todo un sitio web. Esto se consigue creando un archivo
donde tan sólo colocamos las declaraciones de estilos de la página y enlazando
todas las páginas del sitio con ese archivo. De este modo, todas las páginas
comparten una misma declaración de estilos y, por tanto, si la cambiamos,
cambiarán todas las páginas.
Veamos ahora
todo el proceso para incluir estilos con un fichero externo.
Creamos
el fichero con la declaración de estilos
Es un
fichero de texto normal, que puede tener cualquier extensión, aunque le podemos
asignar la extensión .css para aclararnos qué tipo de archivo es. El texto que
debemos incluir debe ser escrito exclusivamente en sintaxis CSS, es un poco
distinta que la sintaxis que utilizamos dentro del atributo style. Sería
erróneo incluir código HTML en este archivo: etiquetas y demás. Podemos ver un
ejemplo a continuación.
P {
font-size :
12pt;
font-family : arial,helvetica;
font-weight : normal;
}
H1 {
font-size : 36pt;
font-family : verdana,arial;
text-decoration : underline;
text-align : center;
background-color
: Teal;
}
BODY {
background-color
: #006600;
font-family
: arial;
color :
White;
}
Enlazamos la página web con la hoja de estilos
Para ello
vamos a colocar la etiqueta <LINK> con los atributos
- rel="STYLESHEET" indicando que el enlace es con una hoja de estilo.
- type="text/css" porque el archivo es de texto, en sintaxis CSS.
- href="estilos.css" indica el nombre del fichero fuente de los estilos.
Veamos una
página web entera que enlaza con la declaración de estilos anterior:
<html>
<head>
<link rel="STYLESHEET" type="text/css"
href="estilos.css">
<title>Página
que lee estilos</title>
</head>
<body>
<h1>Página
que lee estilos</h1>
<p>
Esta página
tiene en la cabecera la etiqueta necesaria para enlazar con la hoja de estilos.
Es muy fácil.
</p>
</body>
</html>
http://www.desarrolloweb.com/articulos/26.php
