Clase 5 2018 [Modo de compatibilidad]dirinfo.unsl.edu.ar/dweb/Clase 5.pdf · • Una hoja de estilo...
Transcript of Clase 5 2018 [Modo de compatibilidad]dirinfo.unsl.edu.ar/dweb/Clase 5.pdf · • Una hoja de estilo...
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á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á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á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.