Laboratorio 5 Hojas de Estilo CSS Universidad de Chile – Bachillerato Laboratorio 5 Hojas de Estilo CSS Profesor: Profesor Auxiliar: Cristian Wilckens Patricio Bahamondes Fecha: 06 de Mayo del 2010 Curso: Computación
Hojas de Estilo o CSS (Cascade Style Sheet) Universidad de Chile – Bachillerato 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. Curso: Computación
Universidad de Chile – Bachillerato Ejemplo Curso: Computación
Universidad de Chile – Bachillerato 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;} Curso: Computación
Asignación de estilos Los estilos se asignan de la siguiente manera: Universidad de Chile – Bachillerato Asignación de estilos Los estilos se asignan de la siguiente manera: Ej: <HTML> <HEAD> <TITLE> New Document </TITLE> <link rel="stylesheet" type="text/css" href="estilo.css"> </HEAD> <BODY> <p>Texto de prueba</p> </BODY> </HTML> Curso: Computación
Objetos útiles para asignar estilos Universidad de Chile – Bachillerato Objetos útiles para asignar estilos - Para asignar estilos a pedazos de textos, podemos la etiqueta <SPAN>: <HTML> <HEAD> <TITLE> New Document </TITLE> <link rel="stylesheet" type="text/css" href="estilo.css"> </HEAD> <BODY> <p>Este es un <span>texto</span> de ejemplo</p> </BODY> </HTML> span { color: red; } - Uso de asignaciones a elementos únicos vía ID <HTML> <HEAD> <TITLE> New Document </TITLE> <link rel="stylesheet" type="text/css" href="estilo.css"> </HEAD> <BODY> <p>Texto de prueba</p> <p id="texto1">Texto de prueba</p> </BODY> </HTML> #texto1 { color: red; } Curso: Computación
Universidad de Chile – Bachillerato 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: <p>Esta es una prueba</p> 2.- Unidades de absolutas: (no depende del medio) cm: centímetros. mm: milímetros. in: inch (Pulgadas) pt: puntos que equivalen a 0.351 mm pi: picas que equivale a 12 puntos o 4.2 mm p { font-size:2em; } p { font-size:2cm; } Curso: Computación
Unidades de medición 3.- Unidades de porcentuales: (depende del medio) Universidad de Chile – Bachillerato 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: <p>Esta es una prueba</p> p { font-size: -2%; } Curso: Computación
Propiedades de Texto letter-spacing text-align Universidad de Chile – Bachillerato 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. 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: } Curso: Computación
Propiedades de las Fuentes Universidad de Chile – Bachillerato 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. 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. Curso: Computación
Propiedades de las Fuentes Universidad de Chile – Bachillerato 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 Curso: Computación
Propiedades del Color color Universidad de Chile – Bachillerato 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. X correspondiente al color. transparent asigna el valor transparente. background-image Asigna una imagen de fondo al elemento que se aplica. url Una URL en el formato CSS. (url("http://www.emol.com/foto.gif");) Curso: Computación
Propiedades de cuadro margin-? X Donde “X” puede ser un valor o %. Universidad de Chile – Bachillerato 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. Curso: Computación
Propiedades de cuadro padding-x X Donde “X” puede ser un valor o %. Universidad de Chile – Bachillerato 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 Curso: Computación
Propiedades de cuadro border-X-width thin Borde fino. Universidad de Chile – Bachillerato 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 Curso: Computación
Propiedades de cuadro border-color Universidad de Chile – Bachillerato 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 Curso: Computación
Propiedades de cuadro border-style none dotted dashed solid double Universidad de Chile – Bachillerato 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 Curso: Computación
border: 6px groove #D6B4D9; Universidad de Chile – Bachillerato 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; Curso: Computación
[BACHI][LAB5] Universidad de Chile – Bachillerato 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 Curso: Computación