Presentacin de PowerPoint

Estilo CSS

1

HOJAS DE ESTILO - CSSson un mecanismo simple que describe cmo se va a presentar un documento en la pantalla o como se va a imprimir.

HOJAS DE ESTILO - CSSCSS nos ayuda a separar el contenido de la presentacin.

HOJAS DE ESTILO - CSSCSS nos permite controlar el estilo y el formato de mltiples pginas Web a la vezHay 2 formas de insertar una hoja de estilos:

Una hoja de estilo externa puede ser enlazada a un documento HTML mediante el elemento LINK de HTML:

HOJAS DE ESTILO INTERNAS

HOJAS DE ESTILO EXTERNAS

1

2

EJEMPLO-01 sin CSS

EJEMPLO-01con CSS

EJEMPLO 02 - CSS EXTERNA

PASO 1: Se crea un archivo de texto y se le aade solamente el siguiente contenido:DEFINIR CSS EN UN ARCHIVO EXTERNOPASO 2: Se guarda el archivo de texto con el nombre estilos.css Se debe poner especial atencin a que el archivo tenga extensin .css y no .txt

PASO 3: En la pgina HTML se enlaza el archivo CSS externo mediante la etiqueta :

EJEMPLO 02 - CSS EXTERNArel: indica el tipo de relacin que existe entre el recurso enlazado (en este caso, el archivo CSS) y la pgina HTML. Para los archivos CSS, siempre se utiliza el valor stylesheettype: indica el tipo de recurso enlazado. Sus valores estn estandarizados y para los archivos CSS su valor siempre es text/csshref: indica la URL del archivo CSS que contiene los estilos. La URL indicada puede ser relativa o absoluta y puede apuntar a un recurso interno o externo al sitio web.media: indica el medio en el que se van a aplicar los estilos del archivo CSS. Ms adelante se explican en detalle los medios CSS y su funcionamiento.LEYENDA:

Colocando una imagen de fondoLas hojas de estilo en CSS estn compuestas de reglas. Cada regla tiene tres partes:

Regla: Est compuesta de una parte de "selectores", un smbolo de "llave de apertura" ({), otra parte denominada "declaracin" y por ltimo, un smbolo de "llave de cierre" (}).COMPONENTES DE UN ESTILO CSS BSICOel selector (en el ejemplo sera: 'h1'), el cual le dice al navegador la parte del documento que se ver afectada por la regla; la propiedad (en el ejemplo seran 'color y background), las cuales especifican qu aspecto del diseo va a cambiarse; y el valor, establece el nuevo valor de la caracterstica modificada en el elemento. COMPONENTES DE UN ESTILO CSS BSICO

General.css

Una hoja de estilo externa puede ser enlazada a un documento HTML mediante el elemento LINK de HTML:

REGLAS DE ESTILO CSSLa declaracin indica "qu hay que hacer" y el selector indica "a quin hay que hacrselo"

El selector no es ms que el tag de html al que queremos que afecte el estilo.A un mismo elemento HTML se le pueden asignar infinitas reglas CSS y cada regla CSS puede aplicarse a un nmero infinito de elementos. En otras palabras, una misma regla puede aplicarse sobre varios selectores y un mismo selector se puede utilizar en varias reglas.SELECTORES BSICOSSELECTOR DE TIPO O ETIQUETASelecciona todos los elementos de la pgina cuya etiqueta HTML coincide con el valor del selector.

SELECTORES BSICOSSELECTOR DE TIPO O ETIQUETASelecciona todos los elementos de la pgina cuya etiqueta HTML coincide con el valor del selector.

En las hojas de estilo complejas, es habitual agrupar las propiedades comunes de varios elementos en una nica regla CSS y posteriormente definir las propiedades especficas de esos mismos elementos.SELECTORES BSICOSSELECTORES BSICOSSELECTOR DE CLASE

Cmo se pueden aplicar estilos CSS slo al primer prrafo?

SELECTORES BSICOSSELECTOR DE CLASE

Cmo se pueden aplicar estilos CSS slo al primer prrafo?

/* Pone de color rojo todos los prrafos que estn dentro de un div, en cualquier nivel de anidamiento */

div p {color:red;}...esto es un divcon un prrafo dentro

y este esta fuera

/* Pone de color rojo TODOS los prrafos */p {color:red;}

/* Pone de color rojo los span que sean hijos de div */div > span {color:red;}un div con span hijoun div con span nieto

EJERCICIO 01/* Pone de color rojo los prrafos que van despus de un div */div + p {color:red;}texto 1parrafo 1parrafo 2

EJERCICIO 02/* Pone de color rojo los prrafos que tengan align center */p[align="center"] {color:red;}