Laboratorio 5 Hojas de Estilo CSS Universidad de Chile – Bachillerato Curso: Computación Cristian...

Laboratorio 5Hojas de Estilo CSS

Universidad de Chile – Bachillerato

Curso: Computación

Cristian WilckensPatricio Bahamondes

Fecha: 06 de Mayo del 2010

Profesor:Profesor Auxiliar:


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.


Curso: Computación

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:

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

- 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> Texto de prueba Texto de prueba </BODY></HTML>

- Uso de asignaciones a elementos únicos vía ID

#texto1 { color: red;}

<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;}

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 0.351 mmpi: 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)

X%: aumento respecto al original.-X%: disminución respecto al original.+X%: aumento respecto al original.


p { font-size: -2%;}


Curso: Computación

Propiedades de Texto

letter-spacingAsigna el espaciado entre caracteres de un texto.Los valores pueden ser los siguientes:

normal Que es el valor por defectoX Donde “X” representa el espacio entre las letras, indicado con algunas de las unidades de css.

text-alignEstablece 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:}


Curso: Computación

Propiedades de las Fuentes

font-familyAsigna el tipo de letra a ocupar.Los valores pueden ser los siguientes:

X Donde “X” el fuente que nosotros queramos.tahoma Font tipo tahomaComic sans MS Font tipo comic.

font-weightEstablece 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.


Curso: Computación

Propiedades de las Fuentes

font-sizeAsigna el tamaño de letra a ocupar.Los valores pueden ser los siguientes:

xx-smallx-smallsmallmediumlargex-largexx-large


Curso: Computación

Propiedades del ColorcolorAsigna 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-colorAsigna 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-imageAsigna 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");)


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.


Curso: Computación


padding-xDefine el espacio entre el borde interno del elemento y el contenido.X puede ser: top, bottom, right, left o ningunoLos 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


border-X-widthDefine el tamaño de los bordes del elemento.X puede ser: top, bottom, right, left o ningunoLos 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


border-colorDefine 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


border-styleDefine 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-xEsta propiedad es la union de border-width, border-style y border-color.X puede ser: top, bottom, right, left o ningunoLos valores dependen de cada propiedad:

border: 6px groove #D6B4D9;

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.htmlestilo.csscss-1.gif


Laboratorio 5 Hojas de Estilo CSS Universidad de Chile – Bachillerato Curso: Computación Cristian...

Documents

Transcript of Laboratorio 5 Hojas de Estilo CSS Universidad de Chile – Bachillerato Curso: Computación Cristian...