Adobe Tutorials | Web Resources | mgloob: CSS | Desde cero | Parte1
0

CSS | Desde cero | Parte1

   Category ,

Para todo diseñador web es indispensable el conocimiento del lenguaje CSS, y gracias a estos tutoriales aprenderemos a programarlos desde cero. Antes de empezar debemos saber lo básico del CSS o también llamadas "Hojas de Estilo". Este es un un lenguaje complementario del HTML [HyperText Markup Language], que funciona basicamente para cambiar la apariencia de la página. Existen dos maneras de colocar este codigo en el HTML [Al menos son las unicas que conozco]. La primera es importando una hoja de estilo creada aparte utilizando: 

<style type="text/css">
@import url("Direccion_del_CSS");
</style>
Con este código estamos importando una Hoja de estilos de una carpeta determinada. Y la segunda manera no es muy distinta
<style type="text/css">
Aqui_escribir_el_codigo
</style>
La diferencia es que en la primera situación estamos creando una Hoja de Estilos en otro documento con extensión ".css", con lo que conseguiremos una programación mas ordenada que con la segunda manera, ya que nos llenaremos toda la hoja de códigos. Por el momento vamos a utilizar pocos códigos, así que usaré la segunda forma.

Ahora que hemos aprendido a insertar una hoja de estilos, vamos a modificar nuestra página. Podemos trabajar con Dreamweaver o directamente desde el Bloc de Notas.

Lo primero que debemos tener es un documento HTML en el cual crearemos nuestra Hoja de Estilos.

<html>
<head><title>Demo | CSS</title>
<style type="text/css";

</style>
</head>
<body>
</body>
</html>
Ahora que hemos compuesto nuestra Hoja de Estilos, haremos nuestra primera modificación, cambiando el color de fondo de la página, a negro. 
<html>
<head><title>Demo | CSS</title>
<style type="text/css";
body{
background:#000000;
}
</style>
</head>
<body>
</body>
</html>
Lo siguiente que haremos sera cambiar la fuente de cualquier texto que escribamos en la página. Esto, para evitarnos estar cambiando la fuente a cada rato, también cambiaremos el color del texto [No incluye vínculos]. 
<html>
<head><title>Demo | CSS</title>
<style type="text/css";
body{
background:#000000;
font-family:"Times New Roman",Georgia,Serif;
color:#CCC;
}
</style>
</head>
<body>
</body>
</html>
Hasta ahora hemos conseguido una mejor apariencia para nuestra web, claro que ustedes pueden agregar su estilo propio. Lo siguiente que haremos sera cambiar todos los vínculos y quitarle ese molesto "underline" que llevan todos. 
<html>
<head><title>Demo | CSS</title>
<style type="text/css";
body{
background:#000000;
font-family:"Times New Roman",Georgia,Serif;
color:#CCC;
}
a{
color:#AEB404;
text-decoration:none;
}
a:hover{
color:#CCC;
}
</style>
</head>
<body>
</body>
</html>
Agregando: 
a{
color:#AEB404;
text-decoration:none;
}
cambiamos los vínculos inactivos, y agregando: 
a:hover{
color:#CCC;
}
Cambiamos el estilo del vínculo al pasar el cursor sobre él. Por el momento vamos a quedar aquí, para que puedan experimentar con esto y crear distintos estilos. Pueden descargar los archivos adjuntos abajo.

Post comment