Laboratorio 5 Hojas de Estilo CSS

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

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> Texto de prueba </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 : <HTML> <HEAD> <TITLE> New Document </TITLE> <link rel="stylesheet" type="text/css" href="estilo.css"> </HEAD> <BODY> Este es un texto de ejemplo </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> Texto de prueba Texto de prueba </BODY> </HTML> #texto1 { color: red; } 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 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: Esta es una prueba 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(" 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

Laboratorio 5 Hojas de Estilo CSS

Presentaciones similares

Presentación del tema: "Laboratorio 5 Hojas de Estilo CSS"— Transcripción de la presentación:

Presentaciones similares

Sobre el proyecto

Feedback

Iniciar la sesión

Autorizarse a través de una red social:

Laboratorio 5 Hojas de Estilo CSS

Presentaciones similares

Presentación del tema: "Laboratorio 5 Hojas de Estilo CSS"— Transcripción de la presentación:

Presentaciones similares

Sobre el proyecto

Feedback