Capas

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.

Etiquetas <SPAN><SPAN>:

• Define su contenido como de nivel de texto• Se utiliza para definir estilos en secciones

reducidas de una página.

Ejemplo

Etiqueta <DIV><DIV>

• Define su contenido como de nivel de bloque• Podemos definir estilos a secciones de una

página

Mostrar Ejemplo

CSS: CapasVentajas

• Dan solución al problema de posicionar elementos justo en la posición que se desee.

• Son partes del documento que pueden sersituadas en cualquier posición del mismo.

• Es una división de la página, que tiene uncomportamiento muy independiente dentro dela ventana del navegador

CSS: Capas¿Cómo se Definen?

Se utiliza el elemento <DIV> y atributos especiales para él

CSS: Cascading Style SheetsCapas

Atributos - I• 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.

Mostrar Ejemplo

CSS: Cascading Style SheetsCapas

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

CSS: Cascading Style SheetsCapas

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)

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}

• 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

CSS: Cascade Style Sheet

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.

CSS: Cascading Style Sheets

• Un sitio web entero• Un documento o página HTML• Una porción del documento• Una etiqueta en particular

¿ 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:

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

CSS: Cascading Style SheetsVersiones

•CSS-1•CSS-2•CSS-P•CSS-3

•CSS – 4 (?)

CSS 1 – CSS 21. Bordes2. Backgrounds3. Color (SIN RGBA).4. Texto: tipo de letra, tamaño, decoración.5. Selectores6. Posicionamiento de los elementos7. Capas8. Tablas9. Paginados10. Inherit

CSS3: Ultima versión

1. Atributo gradiente de colores en borde con CSS y Firefox2. Bordes redondeados en CSS 33. Múltiples imágenes de fondo con CSS4. Colores RGBA en CSS 35. Word-wrap en CSS 36. Textos multi-columna con CSS 37. Bordes con imágenes en CSS 38. Sombras en CSS 3 con box-shadow

CSS 3: Ultima versión

9. Resplandor exterior con CSS310. Propiedad background-origin de CSS 311. Atributos CSS3 overflow-x y overflow-y12. Introducción a @font-face de CSS13. Sombras en el texto con text-shadow de CSS

CSS: Cascading Style Sheets• Sitios de Consulta:https://www.w3schools.com/css/default.asp

https://www.w3.org/Style/Examples/011/firstcss.es.html

http://www.maestrosdelweb.com/editorial/css-3-las-nuevas-propiedades/

https://getbootstrap.com/

CSS: Cascading Style SheetsStyle Sheets (o estilos)Definiciones de W3C para controlar el formatodel texto.

Cascading Style SheetsReglas generales de W3C diseñadas pararesolver conflictos generados con lasdefiniciones Style Sheets.

CSS: ¿Cómo definir un estilo?• Se define a través de Reglas.• Una regla contiene dos partes

Un Selector, Una Declaración

CSS: ¿Cómo definir un estilo?Selector

Los selectores de etiquetas HTMLLos selectores de identificadorEl selector de clase

Se usa para definir sobre qué elementos HTML se aplicarán los estilos

• Hay tres tipos de selectores:

CSS: ¿Cómo definir un estilo?

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

Declaración

Selector declaración

CSS: ¿Cómo definir un estilo?

Selector { propiedad: valor}Selector { propiedad: valor; propiedad: valor;

propiedad: valor; .....}Selector1, selector2, selector3, .... { propiedad:

valor}

Sintaxis

CSS: ¿Dónde definir un estilo?

• En la cabecera del documento.

• En el cuerpo del Documento

• En Hojas de estilo externas

CSS: En la cabecera <HEAD>

• Se utiliza el elemento STYLE.

• Puede declararse más de un STYLE.

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><!--

H1{ color:green }--></STYLE></HEAD>

Ejemplo

CSS: ¿Dónde definir un estilo?

• En la cabecera del documento.

• En el cuerpo del Documento

• En Hojas de estilo externas

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 

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

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}

CSS: ¿Dónde definir un estilo?

• En la cabecera del documento.

• En el cuerpo del Documento

• En Hojas de estilo externas

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

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

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>

CSS: ¿Cómo definir un estilo?Selector

Los selectores de etiquetas HTMLLos selectores de identificadorEl selector de clase

Se usa para definir sobre qué elementos HTML se aplicarán los estilos

• Hay tres tipos de selectores:

CSS: Selectores

Los selectores de etiquetas HTMLP{color:blue}

H1{ color:green }

Ejemplo:<P>P&aacute;rrafo Azul</P>

<H1>Cabecera H1 Verde</H1>

Ejemplo

CSS: Selectores

Los selectores de identificador#parr{color:green}#cabH1{ color:red }

Ejemplo:<P id=“parr”>P&aacute;rrafo Verde</P>

<H1 id=“cabH1”>Cabecera H1 Roja</H1>

Ejemplo

Ejemplo con capa

• #capa1 {background‐color:#00CC00; border:#000 1px solid; margin:0px 0px 0px0px; width:80px; float:left}

• #capa2 {background‐color:#00CCFF; border:#000 1px solid; margin:0px 0px 0px0px;float:right}

CSS: Selectores

El selector de clase.claseLetraGris{ color:gray }

Ejemplo:<p class=“claseLetraGris”>P&aacute;rrafo Gris</p><H1 class=“claseLetraGris”>Cabecera H1 Gris</H1>

Ejemplo

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.

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.

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.