Manual CSS - Primera Parte
12.11.06Vamos a empezar con una serie de tutoriales que se irán posteando regularmente en esta ocasión tocaremos el tema de las CSS(Hojas de Estilo) muy de moda hoy en día debido a su utilización en lo denominado Web 2.0
Bueno empezaremos por lo básico por tratarse de la primera entrega, que son los CSS?. Los CSS(Cascade Style Sheet o hojas de estilos en cascada) son un lenguaje diseñado para definir la presentación o estilo de una pagina HTML consiguiendo así administrar la parte de diseño y apariencia sin tener que modificar el contenido en una pagina web. Con este lenguaje se puede definir el color de texto, color de fondo, tamaño de fuente, bordes, margenes, entre otros.
Ventajas :
- Puedes separar la información de apariencia de la de contenido de la pagina
- Brinda presencia y estilo a la pagina
- Las hojas de estilo son fáciles de manejar y de poco peso
Desventajas
- Incompatibilidad en implementación de estándares entre navegadores(Acid2)
MÉTODOS DE IMPLEMENTACIÓN
Primera Forma: En la Sección HEAD: Esta forma se utiliza generalmente cuando se tiene un solo documento HTML
-
<html>
-
<head>
-
<title>
-
Primera Implementacion
-
</title>
-
<style type="text/css">
-
body{
-
background-color: #c0c0c0;
-
font-size:12px;
-
}
-
</style>
-
</head>
-
<body>
-
</body>
-
</html>
Segunda Forma: A través de un archivo .CSS local Esta es la forma mas utilizada, aqui se colocara el estilo que van a tener todas tus paginas que la referencien.
-
<html>
-
<head>
-
<title>
-
Segunda Implementación
-
</title>
-
<link rel="stylesheet" href="estilos/styles.css" type="text/css" />
-
</head>
-
<body>
-
</body>
-
</html>
Nota: "href" indica la ruta donde se encuentra del archivo y "style.css" es el nombre de archivo donde va a contener toda la informacion del estilo
Tercera Forma: A través de importación
-
<html>
-
<head>
-
<title>
-
Tercera Implementación
-
</title>
-
<style type="text/css">
-
@import url("http://www.inventa-design.com/styles/styles.css");
-
</style>
-
</head>
-
<body>
-
</body>
-
</html>
Cuarta Forma: En los objetos del documento Los estilos se pueden añadir a los diferentes elementos de la pagina como encabezados(h1), parrafos(p), enlaces(a), etc.
-
<html>
-
<head>
-
<title>
-
Cuarta Implementación
-
</title>
-
</head>
-
<body>
-
<h1 style="color:#990000;font-size:17px;text-decoration:underline;">
-
Estilo a Encabezado
-
</h1>
-
<p style="font-weight:bold;background-color:#c0c0c0;">
-
El siguiente texto muestra un estilo hecho a un parrafo
-
</p>
-
</body>
-
</html>
Nota: Todas las formas de implementación se pueden combinar entre si, por eso es necesario tratar de evitar la ambigüedad
SINTAXIS BÁSICA
-
body{
-
background:#c0c0c0;
-
}
La sintaxis de los CSS se compone de:
1. Selector: En el código anterior el selector vendría hacer "body". Los selectores son el nexo entre CSS y los elementos del html.
2. Propiedad: En este caso "background" seria una de las tantas propiedades que pudiera tener.
3. Valor: "#c0c0c0" es uno de los tantos valores que se le pueden dar a la propiedad background(fondo).Al terminar una instruccion debe acabar por ";".
TIPOS DE SELECTOR
Selector de Elementos HTML: Son los selectores que tienen el mismo nombre que los elementos html y por ende modifica las propiedades de dicho elemento.
-
body{
-
background-color:#333333;
-
}
-
/* el selector "body" afecta a todo el documento html */
-
a{
-
text-decoration:none;
-
}
-
/* el selector "a" afecta a todos los enlaces de la pagina */
-
p{
-
text-align:justify;
-
}
-
/* "p" afecta a todos los párrafos de la pagina y los justifica */
Selector ID Colocando el símbolo "#" antes del nombre del selector definimos un selector que funciona con el atributo "id" de los elementos html.
-
<html>
-
<head>
-
<title>Selector ID</title>
-
<style type="text/css">
-
#enlaces_1{
-
text-decoration:none;
-
font-weight:bold;
-
color:#000000;
-
}
-
</style>
-
</head>
-
<body>
-
<a href="#" id="enlaces_1">Visitar</a>
-
</body>
-
</html>
Selector de Clase Se da a través del atributo "class" de html para ello se coloca "." antes del nombre del selector
-
<html>
-
<head>
-
<title>Selector ID</title>
-
<style type="text/css">
-
.clase1{
-
font-size:11px;
-
font-weight:bold;
-
color:#000000;
-
border-style:groove;
-
}
-
</style>
-
</head>
-
<body>
-
<input class="clase1" name="texto" type="text">
-
</body>
-
</html>
Bueno es todo por el momento estaré colocando la segunda parte de acá a unos días, cualquier duda o corrección a través de los comentarios.
class inventablog
2 Comentarios
18.02.07 :: 11:42
Basico, pero aporte al fin. Seguios asi.
Gracias por compartir. De eso se trata.
Daniel.
www.macroweb.ws
diseño web españa
28.09.07 :: 14:58
nicotine valium vicodin marijuana
nicotine valium vicodin marijuana
Comentar