CSS - Sesion 007

Diseo Web - CSS
DISEO WEB CSS

Sesin - 006
Prof. Johann Bedoya Brandacher
Sesin [6] - Pgina [1]
Diseo Web - CSS
HOJAS DE ESTILO EN CSS Qu es CSS?

CSS es un lenguaje de estilo que define la presentacin de los documentos HTML. Por ejemplo, CSS abarca cuestiones relativas a fuentes, colores, mrgenes, lneas, altura, anchura, imgenes de fondo, posicionamiento avanzado y muchos otros temas. Espera unos segundos y ya vers! Es posible usar HTML, o incluso abusar del mismo, para aadir formato a los sitios web. Sin embargo, CSS ofrece ms opciones y es ms preciso y sofisticado. CSS est soportado por todos los navegadores hoy da. Las hojas de estilo usando CSS dara a tu sitio web un aspecto nuevo y genial El modo de funcionamiento de las CSS consiste en definir, mediante una sintaxis especial, la forma de presentacin que le aplicaremos a:

Un web entera, de modo que se puede definir la forma de todo el web de una sola vez. Un documento HTML o pgina, se puede definir la forma, en un pequeo trozo de cdigo en la cabecera, a toda la pgina. Una porcin del documento, aplicando estilos visibles en un trozo de la pgina. Una etiqueta en concreto, llegando incluso a poder definir varios estilos diferentes para una sola etiqueta. Esto es muy importante ya que ofrece potencia en nuestra programacin. Podemos definir, por ejemplo, varios tipos de prrafos: en rojo, en azul, con mrgenes, sin ellos...
La potencia de la tecnologa salta a la vista. Pero no solo se queda aqu, ya que adems esta sintaxis CSS permite aplicar al documento formato de modo mucho ms exacto. Si antes el HTML se nos quedaba corto para maquetar las pginas y tenamos que utilizar trucos para conseguir nuestros efectos, ahora tenemos muchas ms herramientas que nos permiten definir esta forma:

Podemos definir la distancia entre lneas del documento. Podemos colocar elementos en la pgina con mayor precisin, y sin lugar a errores. Y mucho ms, como definir la visibilidad de los elementos, mrgenes, subrayados, tachados...
Y seguimos mostrando las ventajas, ya que si con el HTML tan slo podamos definir atributos en las pginas con pixeles y porcentajes, ahora podemos definir utilizando muchas ms unidades como:

Pixels (px) y porcentaje (%), como antes. Pulgadas (in) Puntos (pt) Centmetros (cm)
Cmo funciona CSS?

La sintaxis bsica de CSS Digamos que queremos un bonito color rojo como fondo de nuestra pgina web: Usando HTML podramos haberlo conseguido as:
<body bgcolor="#FF0000">
Diseo Web - CSS Con CSS el mismo resultado puede lograrse as:
body {background-color: #FF0000;}
Como vers, el cdigo usado es ms o menos idntico para HTML y CSS. El ejemplo anterior te muestra adems el modelo CSS fundamental:
Pero dnde se sita el cdigo CSS? Eso, precisamente, es lo que vamos a estudiar ahora mismo.
Aplicando CSS a un documento HTML

Podemos aplicar CSS a un documento HTML de tres maneras diferentes. Todos estos mtodos se explican a continuacin. Te recomendamos que te centres en el tercero, es decir, el externo. Mtodo 1: En lnea (el atributo style) Un modo de aplicar CSS a HTML es usando 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 pgina con fondo rojo</p> </body> </html>
Mtodo 2: Interno (la etiqueta style) Otra forma es incluir el cdigo CSS usando 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 pgina con fondo rojo</p> </body> </html>
Mtodo 3: Externo (enlace a una hoja de estilo) El mtodo recomendado es enlazar con lo que se denomina hoja de estilo externa. A lo largo del curso usaremos este mtodo en todos nuestros ejemplos.
Diseo Web - CSS Una hoja de estilo externa es sencillamente un fichero de texto con la extensin .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 situacin se puede ilustrar de la siguiente manera:
El truco consiste en crear un vnculo desde el documento HTML (por ejemplo, default.htm) con la hoja de estilo (style.css). Dicho vnculo se puede crear con una sencilla lnea de cdigo HTML:
<link rel="stylesheet" type="text/css" href="style/style.css" />
Fjate cmo la ruta a nuestra hoja de estilo aparece indicada por medio del atributo href. La lnea de cdigo debe insertarse en la seccin de encabezado del cdigo 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> ...
Este vnculo indica al navegador que debera usar la presentacin del fichero CSS al mostrar el fichero HTML. Lo realmente bueno de este mtodo es que 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 presentacin de muchos documentos HTML.
Esta tcnica puede ahorrarte mucho trabajo. Si quisieras cambiar, por ejemplo, el color de fondo de un sitio web compuesto por 100 pginas, un hoja de estilo puede ahorrarte el tener que cambiar de
Diseo Web - CSS forma manual los 100 documentos HTML. Con CSS, el cambio se puede llevar a cabo en unos segundos modificando parte del cdigo de la hoja de estilo principal. Vamos a llevar a la prctica lo que acabamos de aprender. Si, si mucha teora hasta ahora y nada de prctica, entonces vallamos a la Accin, vamos a crear una pgina web con el nombre de default.html: Fichero default.html
<html> <head> <title>Mi documento</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Mi primera hoja de estilo</h1> </body> </html>
Ahora vamos a crear la hoja de estilo style.css, pero esta vez lo guardamos con la extensin .css Fichero style.css
body { background-color: #FF0000;}
Ahora coloca los dos ficheros en la misma carpeta. Recuerda grabar los ficheros con las extensiones correctas (".html" y ".css", respectivamente). Abre el fichero default.htm con el navegador y observa que la pgina tiene un color de fondo rojo. Enhorabuena! Acabas de crear tu primera hoja de estilo!
Diseo Web - CSS
COLORES Y FONDOS Color de primer plano: la propiedad 'color'

La propiedad color describe el color de primer plano de un elemento. Por ejemplo, imagina que queremos que todos los ttulos de un documento aparezcan con color rojo oscuro. Todos los ttulos estn marcados con el elemento <h1>. El cdigo siguiente establece el color de los elementos <h1> como rojo; ejemplo:
Ejemplo.html:
Style.css:
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 pgina, la propiedad background-color debera aplicarse al elemento <body>. Tambin se pueden aplicar colores de fondo a otros elementos, entre ellos, a los encabezados y al texto. En el ejemplo que sigue se aplicarn diferentes colores a los elementos <body> y <h1>; Ejemplo:
Ejemplo2.html
Style.css
Fjate cmo hemos aplicado dos propiedades a <h1> separndolas por medio de un punto y coma.
Diseo Web - CSS
Imgenes de fondo [background-image]

La propiedad CSS background-image se usa para insertar una imagen de fondo. Para el ejemplo de la imagen de fondo, vamos a usar la imagen que ves ms abajo. Puedes descargar cualquier otra imagen. En mi caso voy a usar la imagen de mi video juego favorito:
Para insertar la imagen de fondo de una pgina web, aplica sencillamente la propiedad: background-image al elemento <body> y especifica la localizacin de la imagen; ejemplo:
Ejemplo3.html
Style.css
NOTA: Fjate cmo hemos especificado la localizacin de la imagen: url("gow3.jpg"). Esto significa que la imagen est en la misma carpeta que la hoja de estilo. Tambin puedes hacer referencia a imgenes en otras carpetas usando url("../imagenes/gow3.jpg") o incluso imgenes de internet si indicas la direccin completa del fichero: url("http://www.gearofwar3.com/gow.gif").
Diseo Web - CSS
Repetir la imagen de fondo [background-repeat]

En el ejemplo anterior, te fijaste en que, por defecto, la imagen se repeta tanto en el eje horizontal como en el vertical para ocupar toda la pantalla? La propiedad background-repeat controla este comportamiento. Veamos algunos ejemplos de la propiedad background-repeat, para ello vas a modificar el archivo style.css del ejemplo anterior. Background-repeat: repeat-x: La imagen se repite en el eje horizontal.
Style.css
background-repeat: repeat-y : La imagen se repite en el eje vertical.

Style.css
Diseo Web - CSS background-repeat: no-repeat: La imagen no se repite.

Style.css
Fijar la imagen de fondo [background-attachment]

La propiedad background-attachment especifica si una imagen est fija o se desplaza con el elemento contenedor. Una imagen de fondo fija no se mover con el texto cuando el lector se desplace por la pgina, mientras que una imagen de fondo no fija se desplazar con el texto de la pgina web. Veamos ejemplo de dos valores posibles para la propiedad background-attachment para ello modifica el archivo style.css. Background-attachment: scroll: La imagen se desplaza con la pgina - no est fija
Diseo Web - CSS

Background-attachment: fixed: La imagen est fija.
Nota: para ver el resultado agrega ms contenido de texto a tu web.
Ubicacin 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. Hay muchas formas diferentes de establecer los valores de la propiedad background-position. Sin embargo, todas ellas se formatean como un conjunto de coordenadas. Por ejemplo, el valor '100px 200px' posiciona la imagen de fondo a 100 pxeles del margen izquierdo y a 200 pxeles del margen superior de la ventana del navegador. Las coordenadas se pueden indicar como porcentajes del ancho de la pantalla, como unidades fijas (pxeles, centmetros, etc.) o puedes usar las palabras "top" (superior), "bottom" (inferior), "center" (centro), "left" (izquierda) y "right" (derecha). El modelo siguiente ilustra cmo funciona el sistema:
La tabla siguiente proporciona varios ejemplos.
Diseo Web - CSS

Valor background-position: 2cm 2cm background-position: 50% 25% background-position: top right Descripcin: La imagen se posiciona a 2 cm del margen izquierdo y a 2 cm del margen superior de la pgina La imagen se posiciona en el centro de la pgina y un 25 % del margen superior de la misma La imagen se posiciona en la esquina superior derecha de la pgina
Combinacin de propiedades [background]

La propiedad background es una forma abreviada de todas las propiedades de fondo listadas a lo largo de esta sesin. Con la propiedad background se pueden comprimir varias propiedades, y as escribir una hoja de estilo de forma ms abreviada, lo que facilitar su lectura. Por ejemplo, observa estas cinco lneas de cdigo:
background-color: #FFCC66; background-image: url("gow3.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom;
Usando background se puede lograr el mismo resultado con una nica lnea de cdigo:
background: #FFCC66 url("gow3.jpg ") no-repeat fixed right bottom;
El orden en que deben aparecer las propiedades individuales es el siguiente:

[background-color] | [background-image] | [background-repeat]| [background-attachment] | [background-position]
Si se omite alguna propiedad, de forma automtica sta se establecer con su valor por defecto. Por ejemplo, si se omiten las propiedades background-attachment y background-position del ejemplo anterior, quedando el cdigo de la siguiente manera:
ackground: #FFCC66 url("gow3.jpg") no-repeat;
Estas dos propiedades que no se especifican se estableceran, sin ms, con sus valores por defecto, que, como ya sabes, son scroll y top left.

CSS - Sesion 007

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

CSS - Sesion 007

Enviado por

Direitos autorais:

Formatos disponíveis

Diseo Web - CSS

DISEO WEB CSS

Prof. Johann Bedoya Brandacher

Sesin [6] - Pgina [1]

Diseo Web - CSS

HOJAS DE ESTILO EN CSS Qu es CSS?

Cmo funciona CSS?

Prof. Johann Bedoya Brandacher

Sesin [6] - Pgina [2]

Aplicando CSS a un documento HTML

Prof. Johann Bedoya Brandacher

Sesin [6] - Pgina [3]

Prof. Johann Bedoya Brandacher

Sesin [6] - Pgina [4]

Prof. Johann Bedoya Brandacher

Sesin [6] - Pgina [5]

Diseo Web - CSS

COLORES Y FONDOS Color de primer plano: la propiedad 'color'

Prof. Johann Bedoya Brandacher

Sesin [6] - Pgina [6]

Diseo Web - CSS

Imgenes de fondo [background-image]

Prof. Johann Bedoya Brandacher

Sesin [6] - Pgina [7]

Diseo Web - CSS

Repetir la imagen de fondo [background-repeat]

background-repeat: repeat-y : La imagen se repite en el eje vertical.

Prof. Johann Bedoya Brandacher

Sesin [6] - Pgina [8]

Diseo Web - CSS background-repeat: no-repeat: La imagen no se repite.

Fijar la imagen de fondo [background-attachment]

Prof. Johann Bedoya Brandacher

Sesin [6] - Pgina [9]

Diseo Web - CSS

Nota: para ver el resultado agrega ms contenido de texto a tu web.

Ubicacin de la imagen de fondo [background-position]

La tabla siguiente proporciona varios ejemplos.

Prof. Johann Bedoya Brandacher

Sesin [6] - Pgina [10]

Diseo Web - CSS

Combinacin de propiedades [background]

El orden en que deben aparecer las propiedades individuales es el siguiente:

Prof. Johann Bedoya Brandacher

Sesin [6] - Pgina [11]

Você também pode gostar