Capas. Para definir una sección o división se utilizan las capas. Para esto utilizamos las etiquetas de HTML

Transcripción

1 Capas

2 Capas Para definir una sección o división se utilizan las capas. Para esto utilizamos las etiquetas de HTML <DIV> y <SPAN> Uso principal es poder aplicar estilo en el cuerpo/porción del documento delimitado por la capa.

3 Etiquetas <SPAN> <SPAN>: Define su contenido como de nivel de texto Se utiliza para definir estilos en secciones reducidas de una página. Ejemplo

4 Etiqueta <DIV> <DIV> Define su contenido como de nivel de bloque Podemos definir estilos a secciones de una página Mostrar Ejemplo

5 CSS: Capas Ventajas Dan solución al problema de posicionar elementos justo en la posición que se desee. Son partes del documento que pueden ser situadas en cualquier posición del mismo. Es una división de la página, que tiene un comportamiento muy independiente dentro de la ventana del navegador

6 CSS: Capas Cómo se Definen? Se utiliza el elemento <DIV> y atributos especiales para él

7 CSS: Cascading Style Sheets Capas Atributos - I Mostrar Ejemplo Atributo position: Indica el tipo de posicionamiento de la capa. Puede tener dos valores: relative: la posición de la capa es relativa al elemento que la contiene. absolute: indica que la posición de la capa se calcula con respecto al punto superior izquierdo de la página.

8 CSS: Cascading Style Sheets Capas Atributos - II Atributo top: Indica la distancia en vertical donde se colocará la capa. Atributo left: Indica la distancia en horizontal a la que estará situada la capa. Atributo width: Indica la anchura de la capa Atributo height: Indica la altura de la capa. Atributo display: por defecto block

9 CSS: Cascading Style Sheets Capas Atributos - III Atributo visibility: Indica si la capa se puede ver o permanece oculta al usuario. Puede tener tres valores. Visible hidden inherit (valor por defecto)

10 Atributos IV Propiedad clip: cortar capa Propiedad z-index: dar profundidad Propiedad float: Indica la posición sobre la que flotara la capa (rigth, left) body {background color:yellow; margin:0px 0px 0px 0px; width:80px; float:left}

11 margin: 25px 50px 75px 100px; top 25px right 50px bottom 75px left 100px margin: 25px 50px 75px; top 25px right y left son 50px bottom margin 75px margin: 25px 50px; top y bottom son 25px right y left son 50px margin: 25px; todos son 25px

12 CSS: Cascade Style Sheet

13 CSS: Cascading Style Sheets Qué son las hojas de estilo? Una hoja de estilo es un conjunto de instrucciones que definen la apariencia de diversos elementos de un documento HTML. Permiten aplicar formato a los documentos escritos en HTML separando el contenido de las páginas de su apariencia. Se trata de dar la separación definitiva de la lógica (estructura) y lo físico (presentación) del documento.

14 CSS: Cascading Style Sheets Cómo Funcionan las hojas de estilo? El modo de funcionamiento de las CSS consiste en definir, mediante una sintaxis especial, la forma de presentación que le aplicaremos a: Un sitio web entero Un documento o página HTML Una porción del documento Una etiqueta en particular

15 Otros Efectos que se pueden lograr con CSS Brindan una herramienta de diseño más potente que html puro. Podemos definir la apariencia a los distintos elementos de HTML. Podemos colocar elementos en la página con mayor precisión, y sin lugar a errores. Y mucho más, como definir la visibilidad de los elementos, márgenes, subrayados, tachados...

16 CSS: Cascading Style Sheets Versiones CSS-1 CSS-2 CSS-P CSS-3 CSS 4 (?)

17 CSS 1 CSS 2 1. Bordes 2. Backgrounds 3. Color (SIN RGBA). 4. Texto: tipo de letra, tamaño, decoración. 5. Selectores 6. Posicionamiento de los elementos 7. Capas 8. Tablas 9. Paginados 10. Inherit

18 CSS3: Ultima versión 1. Atributo gradiente de colores en borde con CSS y Firefox 2. Bordes redondeados en CSS 3 3. Múltiples imágenes de fondo con CSS 4. Colores RGBA en CSS 3 5. Word-wrap en CSS 3 6. Textos multi-columna con CSS 3 7. Bordes con imágenes en CSS 3 8. Sombras en CSS 3 con box-shadow

19 CSS 3: Ultima versión 9. Resplandor exterior con CSS3 10. Propiedad background-origin de CSS Atributos CSS3 overflow-x y overflow-y 12. Introducción de CSS 13. Sombras en el texto con text-shadow de CSS

20 CSS: Cascading Style Sheets Sitios de Consulta: es.html las-nuevas-propiedades/

21 CSS: Cascading Style Sheets Style Sheets (o estilos) Definiciones de W3C para controlar el formato del texto. Cascading Style Sheets Reglas generales de W3C diseñadas para resolver conflictos generados con las definiciones Style Sheets.

22 CSS: Cómo definir un estilo? Se define a través de Reglas. Una regla contiene dos partes Un Selector, Una Declaración

23 CSS: Cómo definir un estilo? Selector Se usa para definir sobre qué elementos HTML se aplicarán los estilos Hay tres tipos de selectores: Los selectores de etiquetas HTML Los selectores de identificador El selector de clase

24 CSS: Cómo definir un estilo? Declaración Consta a su vez de dos partes Propiedad: determina la presentación del documento a través del selector que afecta Valor: Define como se modifica la propiedad Ej: P {align= center } Selector declaración

25 CSS: Cómo definir un estilo? Sintaxis Selector { propiedad: valor} Selector { propiedad: valor; propiedad: valor; propiedad: valor;...} Selector1, selector2, selector3,... { propiedad: valor}

26 CSS: Dónde definir un estilo? En la cabecera del documento. En el cuerpo del Documento En Hojas de estilo externas

27 CSS: En la cabecera <HEAD> Se utiliza el elemento STYLE. Puede declararse más de un STYLE.

28 CSS: En la cabecera del documento Sintaxis: <HEAD> <STYLE> Selector { propiedad: valor; propiedad: valor; propiedad: valor;...} Selector { propiedad: valor; propiedad: valor; propiedad: valor;...}... </STYLE>... </HEAD> Ejemplo: <HEAD> <STYLE> <!-- --> </STYLE> </HEAD> H1{ color:green } Ejemplo

29 CSS: Dónde definir un estilo? En la cabecera del documento. En el cuerpo del Documento En Hojas de estilo externas

30 CSS en el cuerpo <BODY> Se puede definir estilos en el cuerpo del documento de dos formas: En una etiqueta HTML En una sección/capa

31 CSS: En el <BODY> En la etiqueta HTML Se utiliza el atributo Style. Sintaxis: <elemento style= propiedad:valor; propiedad:valor;... > Ejemplo: <H1 style= color:green >Cabecera H1 de color Verde</H1> Ejemplo

32 CSS: En el <BODY> Si quiero aplicar el estilo a una sección utilizo una capa y le especifico el estilo. <div style="background color:#00cc00; border:#000 1px solid;" float:left}

33 CSS: Dónde definir un estilo? En la cabecera del documento. En el cuerpo del Documento En Hojas de estilo externas

34 CSS: Hojas de estilo externas Las reglas de estilo se definen en un archivo externo al documento, este archivo tiene extensión «.css» Ventajas: Brindan el grado más alto de flexibilidad y eficacia. Se pueden aplicar a más de una página. Se pueden modificar más facilmente

35 CSS: Externas Tienen la misma sintaxis que en el caso anterior, pero se omiten las etiquetas <STYLE> y </STYLE> En la cabecera <HEAD> del archivo html se referencia el archivo.css a través del elemento <LINK>.

36 CSS: Externas Sintaxis de referencia: La/s página/s que usa/n el estilo definido en el archivo estilos.css lleva: <HEAD> <LINK rel= stylesheet href= estilos.css type= text/css > </HEAD>

37 CSS: Cómo definir un estilo? Selector Se usa para definir sobre qué elementos HTML se aplicarán los estilos Hay tres tipos de selectores: Los selectores de etiquetas HTML Los selectores de identificador El selector de clase

38 CSS: Selectores Los selectores de etiquetas HTML P{color:blue} H1{ color:green } Ejemplo: <P>Párrafo Azul</P> <H1>Cabecera H1 Verde</H1> Ejemplo

39 CSS: Selectores Los selectores de identificador #parr{color:green} #cabh1{ color:red } Ejemplo: <P id= parr >Párrafo Verde</P> <H1 id= cabh1 >Cabecera H1 Roja</H1> Ejemplo

40 Ejemplo con capa #capa1 {background color:#00cc00; border:#000 1px solid; margin:0px 0px 0px 0px; width:80px; float:left} #capa2 {background color:#00ccff; border:#000 1px solid; margin:0px 0px 0px 0px;float:right}

41 CSS: Selectores El selector de clase.claseletragris{ color:gray } Ejemplo: <p class= claseletragris >Párrafo Gris</p> <H1 class= claseletragris >Cabecera H1 Gris</H1> Ejemplo

42 CSS: Cascading Style Sheets Por qué en cascada? Efecto cascada: Información de estilo proveniente de diversas fuentes y que pueden afectar simultáneamente a una misma estructura HTML. CSS provee criterios de prioridad.

43 CSS: Mecanismo Cascada Se aplica cuando varias reglas de estilo se aplican al mismo elemento. Permite al navegador ordenar las reglas para determinar cuál debe aplicarse. Si no puede encontrar ninguna regla se fija en la heredabilidad de las propiedades.

44 CSS: Orden de Aplicación La información de estilo en línea tiene prioridad sobre la insertada en la cabecera del documento o la enlazada mediante una hoja de estilo externa. La información de estilo insertada en la cabecera del documento tiene prioridad sobre las hojas de estilo externa En último término se aplican las reglas especificadas en una hoja de estilo externa.