Desarrollo de Aplicaciones para Internet I. Unidad III - CSS Profesor: M.C. Martín Olguín

Tamaño: px

Comenzar la demostración a partir de la página:

Download "Desarrollo de Aplicaciones para Internet I. Unidad III - CSS Profesor: M.C. Martín Olguín"

Carolina Montes Redondo
hace 8 años
Vistas:

1 Desarrollo de Aplicaciones para Internet I Unidad III - CSS Profesor: M.C. Martín Olguín

2 Cascading Style Sheets (CSS) Aunque el HTML desde sus orígenes privilegia el contenido sobre la apariencia, esta última se puede administrar mediante las hojas de estilo (CSS). Las CSS constituyen una manera de administrar el look general de un sitio.

puede administrar mediante las hojas de estilo (CSS).

3 Estándar CSS Definidos en: El CSS fue definido en 1996 En 1998 se extendió al CSS 2 Actualmente está en revisión el CSS 2.1 Se está desarrollando el CSS 3

4 Estilos En su definición más simple, un estilo es una regla que le dice al navegador cómo desplegar el contenido de una etiqueta en particular. Cada etiqueta tiene asociadas propiedades de estilo, cuyos valores definen cómo la etiqueta va a ser desplegada por el navegador.

5 Ejemplos de propiedades de estilo font-size: 12pt font-size: larger color: red color: rgb(255,0,0) background-image: url(marmol.gif) background-image: none

6 Tipos de definición de estilos Estilos en línea (Inline Styles) Es la manera más sencilla de asociar un estilo a una etiqueta. Se define dentro de la etiqueta. Ejemplo: <h1 style= color: green; font-style: bold >Encabezado Verde</h1>

una etiqueta. Se define dentro de la etiqueta.

7 ...Tipos de definición de estilos Hojas de estilo a nivel de documento (Document-Level Style Sheets) Se definen en el encabezado del documento. Ejemplo: <head> <style type= text/css >  </style> </head> h1 {color: green; font-style: bold}

8 ...Tipos de definición de estilos Hojas de estilo externas Las reglas de estilo se definen en un archivo y se crea una referencia desde la página HTML, por ejemplo: <head> <link rel=stylesheet type= text/css href= > </head>

referencia desde la página HTML, por ejemplo: <head> <link

9 Estilos importados Otra forma: <head> <style type= text/css > ; --> </style> </head>

10 Sintaxis básica de los Estilos Una regla de estilo se forma de dos partes: Un selector: el nombre de la etiqueta que la regla de estilo afecta. La lista de propiedades de estilo encerradas entre {}. selector {propiedad1:valor1; propiedad2:valor2;...propiedadn:valorn}

11 Ejemplos de Estilos h1 {color: green;} p {text-align: center;} ol {list-style: upper-roman;}

12 Selectores Múltiples Se pueden usar selectores separados por coma por cada regla: h1,h2,h3,h4,h5,h6 {text-align: center}

13 Selectores Contextuales El estándar CSS2 define una manera de aplicar un estilo a una etiqueta dependiendo del contexto dentro del documento: ol li {list-style: upper-roman;} ol ol li {list-style: upper-alpha;} ol ol ol li {list-style: decimal;} ol ol ol ol li {list-style: lower-alpha;}

ol li {list-style: upper-roman;} ol ol li {list-style: upper-alpha;} ol

14 ...Selectores Contextuales Se pueden mezclar selectores múltiples con contextuales: h1 ul, p u, cite {color: red;}

15 Clases de Estilo Se pueden crear diferentes estilos para los mismos elementos, los cuales se distinguirán por un nombre de clase: h3.centrada { text-align: center; } h3.der { text-align: right; }

16 ...Clases de Estilo Estas clases se utlizan de la siguiente manera: <h3 class="centrada">encabezado Centrado</h3> <h3 class="der">encabezado a la derecha</h3>

17 Clases Genéricas Se pueden definir clases sin asociarlas a una etiqueta en particular:.itlcentr {font-style:italic; text-align:center} Se puede usar en varias etiquetas: <h1 class= itlcentr >Encabezado</h1> <p class= itlcentr >Parrafo</p>

18 Algunas propiedades Font: font-family, font-size, font-style, etc. Background: background-color, background-image, etc. Texto: text-align, text-indent, word-spacing, etc. Color: color

19 Práctica #2 Elaborar su sitio personal para el curso, el cual contendrá la lista de prácticas realizadas, utilizará CSS para homogeneizar el contenido, frames y tablas para organizar la distribución de la información.

utilizará CSS para homogeneizar el contenido, frames y

Documentos relacionados

CSS. Departamento de Lenguajes y Computación Universidad de Almería CSS. Contenidos

CSS. Departamento de Lenguajes y Computación Universidad de Almería CSS. Contenidos Desarrollo de aplicaciones web Manuel Torres Gil mtorres@ual.es Departamento de Lenguajes y Computación Universidad de Almería Desarrollo de aplicaciones web 1. Características y ventajas de 2. Sintaxis