Introducción
a
CSS
CSS es un
lenguaje de hojas de estilos creado para controlar el aspecto o presentación de
los documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma
de separar los contenidos y su presentación y es imprescindible para crear
páginas web complejas.
Funcionamiento
básico de CSS
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Ejemplo de estilos con
CSS</title>
<style
type="text/css">
h1 { color: red; font-family:
Arial; font-size: large; }
p { color: gray; font-family:
Verdana; font-size: medium; }
</style>
</head>
<body>
<h1>Titular de la página</h1>
<p>Un párrafo de texto no muy
largo.</p>
</body>
</html>
Definir CSS
en un archivo externo
En este
caso, todos los estilos CSS se incluyen en un archivo de tipo CSS que las
páginas
HTML enlazan
mediante la etiqueta <link>. Un archivo de tipo CSS no es más que un archivo
simple de texto cuya extensión es .css Se pueden crear todos los archivos CSS que
sean necesarios y cada página HTML puede enlazar tantos archivos CSS como necesite.
Si se
quieren incluir los estilos del ejemplo anterior en un archivo CSS externo, se
deben seguir los siguientes pasos:
1) Se crea
un archivo de texto y se le añade solamente el siguiente contenido: p { color:
black; font-family: Verdana; }
2) Se guarda
el archivo de texto con el nombre estilos.css Se debe poner especial atención a
que el archivo tenga extensión .css y no .txt
3) En la
página HTML se enlaza el archivo CSS externo mediante la etiqueta <link>:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<title>Ejemplo
de estilos CSS en un archivo externo</title>
<link rel="stylesheet" type="text/css"
href="/css/estilos.css" media="screen" />
</head>
<body>
<p>Un
párrafo de texto.</p>
</body>
</html>
Cuando el
navegador carga la página HTML anterior, antes de mostrar sus contenidos también
descarga los archivos CSS externos enlazados mediante la etiqueta <link>
y aplica los estilos a los contenidos de la página.
Normalmente,
la etiqueta <link> incluye cuatro atributos cuando se enlaza un archivo
CSS:
▪ rel: indica el tipo de
relación que tiene el recurso enlazado (en este caso, el archivo CSS) y la
página HTML. Para los archivos CSS, siempre se utiliza el valor
stylesheet
▪ type: indica el tipo de
recurso enlazado. Sus valores están estandarizados y para los archivos CSS su
valor siempre es text/css
▪ href: indica la URL del
archivo CSS que contiene los estilos. La URL indicada puede ser relativa o
absoluta y puede apuntar a un recurso interno o externo al sitio web.
▪ Media: indica el medio en el
que se van a aplicar los estilos del archivo CSS. Más adelante se explican en
detalle los medios CSS y su funcionamiento.
Anchura y
altura
La propiedad
CSS que controla la anchura de los elementos se denomina width.
La propiedad
width no admite valores negativos y los valores en porcentaje se calculan a partir
de la anchura de su elemento padre. El valor inherit indica que la anchura del elemento
se hereda de su elemento padre. El valor auto, que es el que se utiliza si no
se establece de forma explícita un valor a esta propiedad, indica que el
navegador debe calcular automáticamente la anchura del elemento, teniendo en
cuenta sus contenidos y el sitio disponible en la página.
El siguiente
ejemplo establece el valor de la anchura del elemento <div> lateral:
#lateral { width: 200px; }
<div id="lateral">
...
</div>
CSS define
otras dos propiedades relacionadas con la anchura de los elementos: min-width y
max-width, que se verán más adelante.
La propiedad
CSS que controla la altura de los elementos se denomina height.
Al igual que sucede con width, la
propiedad height no admite
valores negativos. Si se indica un porcentaje, se toma como referencia la
altura del elemento padre. Si el elemento padre no tiene una altura definida
explícitamente, se asigna el valor auto a la altura.
El valor inherit indica que
la altura del elemento se hereda de su elemento padre. El valor auto, que es el
que se utiliza si no se establece de forma explícita un valor a esta propiedad,
indica que el navegador debe calcular automáticamente la altura del elemento,
teniendo en cuenta sus contenidos y el sitio disponible en la página.
El siguiente ejemplo establece
el valor de la altura del elemento <div> de cabecera:
#cabecera { height: 60px; }
<div id="cabecera">
...
</div>
CSS define otras dos
propiedades relacionadas con la altura de los elementos:
min-height y max-height, que se
verán más adelante.
Podemos
definir varios elementos dentro de un CSS y una vez enlazado al documento HTML
y los podemos identificar de 2 formas en un elemento ya sea por “id” o por
“class” dependiendo de cómo lo hemos declarado en el archivo externo un pequeño
ejemplo es:
Para usarlo
como “id” en el documento HTML:
#cuerpo{
…
}
Para usarlo
como “class” en el documento HTML:
.cuerpo{
…
}
Esto es lo
más básico de un CSS y de ahí depende de uds como diseñar una página con hojas
de estilo.
No hay comentarios:
Publicar un comentario