Una pequeña introducción a las hojas de estilo en cascada (CSS).
"CSS" viene a ser el acrónimo de "Cascade Style Sheet" que significa "Hojas de estilo en cascada" pero el nombre no nos dice o demasiado, o demasiado poco. Asi que vamos a explicar un poco mejor que son las hojas de estilo y para que sirven:
Las hojas de estilo nos permiten manejar la presentación de los textos ingresados por el (X)html ya que el (X)html es un lenguaje de marcas aprovecharemos el nombre de estas marcas para darle a cada una caracteristicas especiales y siendo el caso que querramos ser más específicos, le daremos un "id" o una "clase" a la marca que queramos modificar (Esto lo hablaremos màs adelante).
Las hojas de estilo están compuestas de "reglas", la estructura básica de una regla es la siguiente:
h1 {color:#fff; font-size:16px;}Donde "h1", es el selector.
Y "color:#fff;", es la declaración.
Podemos incluir estilos ala página de tres maneras distintas:
Incluirla directamente en los tags HTML
Podemos incluir los estilos en los tags HTML directamente, pero esto hace que perdamos el sentido para el que fueron creados los estilos, dado que mezclamos presentación con estructura.
Un ejemplo de eso sería esto:
<div id="nombre" style="color:#fff; font-weight:bold;">
Como se vé, solo se debe poner un atributo llamado "style" y especificar las reglas al elemento.
Poner las reglas CSS en el "head" del documento
Podemos incluir las reglas CSS en la cabecera de la página, esto lo haríamos entre las etiquetas <style> y </style>
Un ejemplo de esto sería:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Estilos</title>
<style>
body{width:100%;
height:100%;
color:#3b3b3b;
font-family:helvetica;}
</style>
</head>
El problema de este método es que esto amarraría casa página a su propia hoja de estilos, lo que significa que hacer actualizaciones o modificaciones podría ser engorroso, ya que tendríamos que hacerlos de pàgina en pàgina.
Llamar externamente a las hojas de estilo
Es lo más recomendable de hacer, llamar a una hoja de estilo externa, que controle la presentación de todas las páginas que vayamos a administrar en ese dominio.
La forma de llamar sería la siguiente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Estilos</title> <link rel="stylesheet" href="tu_estilo.css" type="text/css" /></head>
Esto, a la hora de actualizar o corregir nos ahorrará muchísimo trabajo, puesto que podremos hacer cambios en una sola hoja de estilos que se verán reflejados en todas las páginas que se manejen con la misma CSS.
¿Cómodo verdad?
Tags, Ids, Clases, pseudoclases... Waaaaaaaaaa!!!!!
Aunque suene un poco confuso, es más sencillo de lo que aparenta en un principio. Pongamonos en este caso:
<a href="acualquierparte.html" id="link" class="link">Donde: "a" es el Tag. "id" es el Id o nombre. "class" es la clase.
Y para su uso en CSS podremos usarlos de la sgte Manera:
a{ color:#fff; }
Podemos usar el Tag, para indicar que TODOS los elementos <p> van a ser de color blanco.
#link{ color:#fff; }
Aqui estamos usando el Id para identificar el Link, usamos un Id cuando queremos distinguir solamente uno de los elementos que comparten el mismo tag, dos elementos no pueden llevar el mismo Id.
a.link{ color:#fff; }
Y aqui usamos la Clase para darle los estilos. Las clases se le dan a grupos de tags, para diferenciarlos del resto, algo como el Id pero para más de un elemento.
a.link:hover{ color:#000; }
En este último ejemplo hacemos uso de una Pseudoclase que es "Hover", esta pseudoclase nos indica un estado del link, "Hover" nos indica que el mouse está sobre el elemento, es decir, cuando el mouse esté sobre el link el color pasará de blanco a negro.
¿Màs? dentro de poco.
Esta ha sido una pequeña introducción a las Hojas de estilo, iremos creando a partir de aqui, un manual de CSS que iré desarrollando a través de una serie de manuales y también haré tutoriales sobre como hacer maquetación y algunos trucos del CSS.
Artículos Relacionados
-
- Efecto sencillo de Fade con Javascript.
- Introducción corta a las CSS.
- Hermoso wallpaper de burbujas en photoshop.
¿Qué opinas respecto a esto?
Comentar es alentar al que escribe un artículo a seguir adelante, ya que es una manera de demostrar que la lectura es apreciada, además te permite hacerme llegar sugerencias sobre próximos temas o sobre algún evento que deba postear.
Saludos y Hasta el próximo post.
No seas tímido deja un comentario!! (Click aqui).
Ir Arriba
Luis Velito dijo: Comenzamos bien con esto, estoy ansioso por ver los resultados de nuestros esfuerzos.
Seguramente lo haremos bien!!.
If you would like to receive further information or arrange an interview please contact travel.; health insurance dar; auto insurance >:); car insurance uyyb; car insurance gtbdis; car insurance hdu;
¿Quién escribe esto?
Soy Luis Velito. Un Web Designer que intenta combinar el diseño con el desarrollo. Los invito a acompañarme en este camino en pos del equilibrio.
Información de Contacto
- Nombre: José Luis Velito Ruiz
- Nick: Dalvenjha
- Teléfono: 351-9796
- e-mail: l.dalvenjha@hotmail.com
- Lima, Diciembre del 2008.
Categorías
Post Recientes
- Wallpaper de Burbujas en photoshop
Tutorial para Photoshop sobre un wallpaper de burbujas, traido desde la Web de Fabio Sasso
Secciones: Photoshop, Tutoriales.
- Manual de Introducción al CSS
Especificaciones para comenzar el uso de CSS, su importancia y sus usos.
Secciones: CSS, Tutoriales.
- Jugando con el Fade en Javascript
Vamos a crear nuestro primer tutorial, este tratará de Javascript, es un efecto muy básico de aparición, desaparición de un div.
Secciones: Js, Tutoriales, Experimentos.
NLG Design no se hace responsable por las opiniones vertidas en este blog, es más, se DISTANCIA TO-TAL-MEN-TE de las opiniones aqui vertidas, en contra de Microsoft, internet explorer y otros productos por considerarlas DEMASIADO SUAVES.
