MANUALES
TUTORIAL CSS:
Introducción: Las hojas de estilo en cascada (CSS, acrónimo de Cascading Style Sheets) son una herramienta fantástica para añadir presentación a los sitios web.
Introducción: Las hojas de estilo en cascada (CSS, acrónimo de Cascading Style Sheets) son una herramienta fantástica para añadir presentación a los sitios web.
¿Qué software necesito?:
Evita, por favor, usar software tal como FrontPage, DreamWeaver o Word con este tutorial. Todo lo que necesitas es un editor de texto sencillo y gratuito.
Ej: Bloc de Notas- Windows.
Pico-Linux
Simple Text-Macintosh.
Lección 1:
¿Qué es CSS? : CSS es el acrónimo de Cascading Style Sheets (es decir, hojas de estilo en cascada).
USOS:
- Define la presentación de los documentos HTML.
- CSS abarca cuestiones relativas a fuentes, colores, márgenes, líneas, altura, anchura, imágenes de fondo, posicionamiento avanzado y muchos otros temas.
¿Qué diferencia hay entre CSS y HTML?
HTML se usa para estructurar el contenido; CSS se usa para formatear el contenido previamente estructurado.
¿Qué beneficios me ofrece CSS?
- control de la presentación de muchos documentos desde una única hoja de estilo;
- control más preciso de la presentación;
- aplicación de diferentes presentaciones a diferentes tipos de medios (pantalla, impresión, etc.);
- numerosas técnicas avanzadas y sofisticadas.
Lección 2:
¿CÓMO FUNCIONA CSS?
SINTAXIS BÁSICA DE CSS:
Digamos que queremos un bonito color rojo como fondo de nuestra página web:
Usando HTML podríamos haberlo conseguido así:
<body bgcolor="#FF0000">
Con CSS el mismo resultado puede lograrse así:
body {background-color: #FF0000;}
Aplicando CSS a un documento HTML:
Podemos aplicar CSS a un documento HTML de tres maneras diferentes.
Método 1: En línea (el atributo style)
Se usa el atributo de HTML
style. Si ampliamos el ejemplo anterior sobre el color de fondo rojo, CSS se puede aplicar así:<html><head><title>Ejemplo</title></head><body style="background-color: #FF0000;"><p>Esta es una página con fondo rojo</p></body></html>
Método 2: Interno (la etiqueta style)
Se usa la etiqueta HTML
<style>. Por ejemplo, así:<html><head><title>Ejemplo</title><style type="text/css">body {background-color: #FF0000;}</style></head><body><p>Esta es una página con fondo rojo</p></body></html>
Método 3: Externo (enlace a una hoja de estilo)
Enlazar con lo que se denomina hoja de estilo externa.
Una hoja de estilo externa es sencillamente un fichero de texto con la extensión .css. Como cualquier otro fichero, puedes colocar la hoja de estilo en el servidor web o en el disco duro.
Por ejemplo, digamos que tu hoja de estilo se llama style.css y está localizada en una carpeta que se llama style. Esta situación se puede ilustrar de la siguiente manera:
Crear un vínculo desde el documento HTML (por ejemplo, default.html) con la hoja de estilo (style.css). Dicho vínculo se puede crear con una sencilla línea de código HTML:
<link rel="stylesheet" type="text/css" href="style/style.css" />
La línea de código debe insertarse en la sección de encabezado del código HTML, es decir, entre la etiqueta
<head> y </head>. De esta manera:<html><head><title>Mi documento</title><link rel="stylesheet" type="text/css" href="style/style.css" /></head><body>...
Se pueden vincular varios documentos HTML con la misma hoja de estilo. En otras palabras, se puede usar un único fichero CSS para controlar la presentación de muchos documentos HTML.
Lección 3: Colores y Fondos
Color de primer plano: la propiedad 'color'.
La propiedad
color describe el color de primer plano de un elemento.
h1 {
color: #ff0000;
}
Los colores se pueden introducir como valores hexadecimales, como en el ejemplo anterior: #ff0000; o se pueden usar los nombres de los colores: "red" (rojo), o bien como valores rgb: (rgb(255,0,0)).
La propiedad 'background-color'
La propiedad
background-color describe el color de fondo de los elementos.
El elemento
<body> contiene todo el contenido de un documento HTML. Así pues, para cambiar el color de fondo de una página, la propiedad background-color debería aplicarse al elemento <body>.
También se pueden aplicar colores de fondo a los encabezados y al texto.
En el ejemplo que sigue se aplicarán diferentes colores a los elementos
<body> y <h1>.
body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Imágenes de fondo [background-image]
La propiedad CSS
background-image se usa para insertar una imagen de fondo.
Para insertar una imagen de fondo de una página web, aplica sencillamente la propiedad
background-image al elemento <body> y especifica la localización de la imagen.
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
}
h1 {
color: #990000;
background-color: #FC9804;
}
NOTA: También puedes hacer referencia a imágenes en otras carpetas usando url("../imagenes/butterfly.gif") o incluso imágenes de internet si indicas la dirección completa del fichero: url("http://www.html.net/butterfly.gif").
Repetir la imagen de fondo [background-repeat]
por defecto, la imagen se repite tanto en el eje horizontal como en el vertical para ocupar toda la pantalla. La propiedad
background-repeat controla este comportamiento.
La tabla siguiente resume los cuatro valores diferentes para la propiedad
background-repeat.Por ejemplo, para evitar que se repita un imagen de fondo, el código que tendríamos que usar sería el siguiente:
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Fijar la imagen de fondo [background-attachment]
La propiedad
background-attachment especifica si una imagen está fija o se desplaza con el elemento contenedor.
Imagen de fondo fija: no se moverá con el texto cuando el lector se desplace por la página
Imagen de fondo no fija: se desplazará con el texto de la página web.
Dos valores posibles para la propiedad
background-attachment. 
Por ejemplo, el siguiente código fijará la imagen de fondo.
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
h1 {
color: #990000;
background-color: #FC9804;
}Ubicación de la imagen de fondo [background-position]
Por defecto, una imagen de fondo se posiciona en la esquina superior izquierda de la pantalla.
La propiedad
background-position te permitirá cambiar este valor por defecto y posicionar la imagen de fondo en cualquier lugar de la pantalla que quieras.
Conjunto de coordenadas.
Por ejemplo, el valor '100px 200px' posiciona la imagen de fondo a 100 píxeles del margen izquierdo y a 200 píxeles del margen superior del la ventana del navegador.
Se pueden indicar como porcentajes del ancho de la pantalla, como unidades fijas (píxeles, centímetros, etc.) o puedes usar las palabras "top" (superior), "bottom" (inferior), "center" (centro), "left" (izquierda) y "right" (derecha).
El ejemplo de código siguiente posiciona la imagen de fondo en la esquina inferior derecha:
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
h1 {
color: #990000;
background-color: #FC9804;
}Combinación de propiedades [background]
Usando
background se puede lograr el mismo resultado con una única línea de código, es agrupar las diferentes propiedades para abreviar el código CSS, separadas por espacios en blanco:
background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
Si se omite alguna propiedad, de forma automática ésta se establecerá con su valor por defecto.
No hay comentarios:
Publicar un comentario