La descarga está en progreso. Por favor, espere

La descarga está en progreso. Por favor, espere

Laboratorio 5 Hojas de Estilo CSS Universidad de Chile – Bachillerato Curso: Computación Cristian Wilckens Patricio Bahamondes Fecha: 06 de Mayo del 2010.

Presentaciones similares


Presentación del tema: "Laboratorio 5 Hojas de Estilo CSS Universidad de Chile – Bachillerato Curso: Computación Cristian Wilckens Patricio Bahamondes Fecha: 06 de Mayo del 2010."— Transcripción de la presentación:

1 Laboratorio 5 Hojas de Estilo CSS Universidad de Chile – Bachillerato Curso: Computación Cristian Wilckens Patricio Bahamondes Fecha: 06 de Mayo del 2010 Profesor: Profesor Auxiliar:

2 Universidad de Chile – Bachillerato Curso: Computación Hojas de Estilo o CSS (Cascade Style Sheet) Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal usado para definir la presentación de un documento estructurado escrito en HTML. El W3C (World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirá de estándar para los navegadores. La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.

3 Universidad de Chile – Bachillerato Curso: Computación Ejemplo

4 Universidad de Chile – Bachillerato Curso: Computación Sintaxis Al igual que el JavaScript, las hojas de estilo poseen una sintaxis estricta para que funcionen. Cada regla consta de un SELECTOR, que es el que define el elemento que queremos modificar; y una DECLARACION, que corresponde al estilo a aplicar. A su vez, la declaración consta de una propiedad y un valor. Ej: SELECTOR { PROPIEDAD: VALOR; } H1 { color: blue; background-color: red;}

5 Universidad de Chile – Bachillerato Curso: Computación Asignación de estilos Los estilos se asignan de la siguiente manera: Ej: New Document Texto de prueba

6 Universidad de Chile – Bachillerato Curso: Computación Objetos útiles para asignar estilos - Para asignar estilos a pedazos de textos, podemos la etiqueta : New Document Texto de prueba - Uso de asignaciones a elementos únicos vía ID #texto1 { color: red; } New Document Este es un texto de ejemplo span { color: red; }

7 Universidad de Chile – Bachillerato Curso: Computación Unidades de medición 1.- Unidades de tamaño relativas: (depende del medio) em: respecto del ancho de la letra m. ex: respecto del ancho de la letra x. px: respecto del ancho de un pixel. Ej: Esta es una prueba 2.- Unidades de absolutas: (no depende del medio) cm: centímetros. mm: milímetros. in: inch (Pulgadas) pt: puntos que equivalen a mm pi: picas que equivale a 12 puntos o 4.2 mm Ej: Esta es una prueba p { font-size:2em; } p { font-size:2cm; }

8 Universidad de Chile – Bachillerato Curso: Computación Unidades de medición 3.- Unidades de porcentuales: (depende del medio) X%: aumento respecto al original. -X%: disminución respecto al original. +X%: aumento respecto al original. Ej: Esta es una prueba p { font-size: -2%; }

9 Universidad de Chile – Bachillerato Curso: Computación Propiedades de Texto letter-spacing Asigna el espaciado entre caracteres de un texto. Los valores pueden ser los siguientes: normal Que es el valor por defecto X Donde X representa el espacio entre las letras, indicado con algunas de las unidades de css. text-align Establece la alineación del texto. Los valores pueden ser los siguientes: left Alinea el elemento ala izquierda. right Alinea el elemento ala derecha. center Centra el elemento. justify Alinea el elemento a ambos lados. p { letter-spacing: 12px; text-align: right: }

10 Universidad de Chile – Bachillerato Curso: Computación Propiedades de las Fuentes font-family Asigna el tipo de letra a ocupar. Los valores pueden ser los siguientes: X Donde X el fuente que nosotros queramos. tahoma Font tipo tahoma Comic sans MS Font tipo comic. font-weight Establece lo gorda que será una letra en el texto. Los valores pueden ser los siguientes: normal valor por defecto. bold Negrita. bolder Un poco mas pesada. lighter Mas ligera que la normal. 100,200,…,900 Cada vez va subiendo de peso.

11 Universidad de Chile – Bachillerato Curso: Computación Propiedades de las Fuentes font-size Asigna el tamaño de letra a ocupar. Los valores pueden ser los siguientes: xx-small x-small small medium large x-large xx-large

12 Universidad de Chile – Bachillerato Curso: Computación Propiedades del Color color Asigna el color del elemento que se aplica. Los valores pueden ser los siguientes: X Donde X corresponde al color en RGB (#FF00FF) o Texto (red). background-color Asigna el color de fondo al elemento que se aplica. Los valores pueden ser los siguientes: X correspondiente al color. transparent asigna el valor transparente. background-image Asigna una imagen de fondo al elemento que se aplica. Los valores pueden ser los siguientes: url Una URL en el formato CSS. ( url("http://www.emol.com/foto.gif"); )

13 Universidad de Chile – Bachillerato Curso: Computación Propiedades de cuadro margin-? Define el tamaño del margen de un elemento. ? puede ser: top, bottom, right, left o ninguno margin-top, margin-bottom, margin-right, margin-left, margin Los valores pueden ser los siguientes: X Donde X puede ser un valor o %. Para el caso en que no se defina la posición podemos definir todos los bordes al mismo tiempo: margin: 0px; para aplicar a todos los lados. margin: 0px 0px; arriba y abajo. margin: 0px 0px 0px; arriba, derecha, abajo. margin : 0px 0px 0px 0px; arriba derecha abajo izquierda.

14 Universidad de Chile – Bachillerato Curso: Computación Propiedades de cuadro padding-x Define el espacio entre el borde interno del elemento y el contenido. X puede ser: top, bottom, right, left o ninguno Los valores pueden ser los siguientes: X Donde X puede ser un valor o %. Para el caso en que no se defina la posición podemos definir todos los bordes al mismo tiempo: padding: 0px; para aplicar a todos los lados. padding : 0px 0px; arriba y abajo. padding : 0px 0px 0px; arriba, derecha, abajo. padding : 0px 0px 0px 0px; arriba derecha abajo izquierda

15 Universidad de Chile – Bachillerato Curso: Computación Propiedades de cuadro border-X-width Define el tamaño de los bordes del elemento. X puede ser: top, bottom, right, left o ninguno Los valores pueden ser los siguientes: thin Borde fino. medium Borde medio. thick Borde grueso. Para el caso en que no se defina la posición podemos definir todos los bordes al mismo tiempo. border-width : thin medium thin thick; arriba derecha abajo izquierda

16 Universidad de Chile – Bachillerato Curso: Computación Propiedades de cuadro border-color Define el color de los bordes del elemento. Los valores pueden ser los siguientes: X Con el color definido en RGB o Texto. Para el caso en que no se defina la posición podemos definir todos los bordes al mismo tiempo. border-color : red black pink #FFFFFF; arriba derecha abajo izquierda

17 Universidad de Chile – Bachillerato Curso: Computación Propiedades de cuadro border-style Define el aspecto de los bordes del elemento. Los valores pueden ser los siguientes: none dotted dashed solid double groove ridge inset upset Tambien podemos definir todos con un mismo valor o por separado. border-style : none inset ridge groove; arriba derecha abajo izquierda

18 Universidad de Chile – Bachillerato Curso: Computación Propiedades de cuadro border-x Esta propiedad es la union de border-width, border-style y border-color. X puede ser: top, bottom, right, left o ninguno Los valores dependen de cada propiedad: border: 6px groove #D6B4D9;

19 Curso: Computación [BACHI][LAB5] Se le pide realizar una pagina la cual quede exactamente igual al siguiente ejemplo. Tenga cuidado con los tamaños. Este laboratorio puede tener múltiples definiciones en cuanto a código HTML, pero la parte visual debe ser la misma para todos. Para las imágenes, sáquelas de la sección de materiales del laboratorio 5 del sitio Web del curso. No olvide enviar los archivos: lab5.html estilo.css css-1.gif Universidad de Chile – Bachillerato


Descargar ppt "Laboratorio 5 Hojas de Estilo CSS Universidad de Chile – Bachillerato Curso: Computación Cristian Wilckens Patricio Bahamondes Fecha: 06 de Mayo del 2010."

Presentaciones similares


Anuncios Google