Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

CSS #1

No description
by

Gustavo Matamoros González

on 17 March 2015

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of CSS #1

CSS
(Cascading Style Sheets)
¿Qué es CSS?
Es un lenguaje que se creo para controlar el aspecto de los documentos HTML y XHTML, buscando separar el contenido del diseño
Ventajas
Ventajas
Mejora la accesibilidad (diferentes presentaciones según dispositivo o resoluciones)
Facilita el mantenimiento (separa contenido de diseño)
Historia
Historia
La W3C ente regulador de los estándares relacionados con la web buscan crear un lenguaje para manejar e estilo de los documentos HMTL
Se dan 9 propuestas pero se interesan por 2:
CHSS (Cascading HTML Style Sheets) por: Håkon Wium Lie
SSP (Stream-based Style Sheet Proposal) por Bert Bos
En 1995 Lie y Bos se unen para definir un nuevo lenguaje que tomaba los mejor de cada una y crean CSS (Cascading Style Sheets)
En 1996 publican la primera versión del lenguaje CSS1 (CSS nivel 1)
En 1998 publican la segunda versión CSS2
En 2004 publican la revisión CSS 2.1
En 2011 publican CSS3
Y actualmente trabajan con CSS4
http://www.w3.org/TR/2011/WD-selectors4-20110929/
Soporte de Navegadores
Navegadores
El problema de la programación CSS es que tenemos que tomar en cuenta los navegadores que utilizan nuestros clientes
Pero principalmente nos importa el motor del navegador
Que es el encargado de interpretar el código HTML y CSS
Tabla de soporte CSS de los navegadores mas utilizados:
Motores
Paginas de motores:
http://www.opera.com/docs/specs/presto2.12/
http://www.webkit.org/
https://developer.mozilla.org/en-US/docs/Mozilla/Gecko
Algunas de esta paginas nos ofrecen demos gratis para utilizar:
https://developer.mozilla.org/en-US/demos/
Veamos algunos ejemplos:
MENUS:
https://developer.mozilla.org/en-US/demos/detail/accessible-dropline-menu
https://developer.mozilla.org/en-US/demos/detail/3d-flip-list-menu
SLIDERS:
https://developer.mozilla.org/en-US/demos/detail/account-slider
https://developer.mozilla.org/en-US/demos/detail/css3-slider
Transiciones imágenes:
https://developer.mozilla.org/en-US/demos/detail/canvas-slider-k
https://developer.mozilla.org/en-US/demos/detail/3d-image-transitions
Loadding
https://developer.mozilla.org/en-US/demos/detail/collection-of-loading-animation-using-css3-font-aw
Ejemplos
Modificación de información:
https://developer.mozilla.org/en-US/demos/detail/the-whole-bank
Mostrar información:
https://developer.mozilla.org/en-US/demos/detail/full-css3-portofolio
https://developer.mozilla.org/en-US/demos/detail/impressjs
https://developer.mozilla.org/en-US/demos/detail/ionic-presentation
Animaciones:
https://developer.mozilla.org/en-US/demos/detail/whale
https://developer.mozilla.org/en-US/demos/detail/the-planetarium
Animaciones 3d
https://developer.mozilla.org/en-US/demos/detail/css-3d-cube-animation
Validaciones:
https://developer.mozilla.org/en-US/demos/detail/css3-animated-registration-form-with-html5-validat
Tabs:
https://developer.mozilla.org/en-US/demos/detail/tabs-system-css3
Notificaciones:
https://developer.mozilla.org/en-US/demos/detail/html5-notifications
Imágenes, vídeo, geolocalizacion, etc
Funcionamiento básico
Razón
Como vimos en la clase de HTML el problema del diseño con solo HTML es muy complicado
Por ejemplo:
http://181.193.87.6/prograweb/00003_css/00001_html.html
En esta pagina tenemos dos etiquetas FONT pero si la pagina fuera mas grande y tuviéramos 50 elementos tendríamos que insertar 50 etiquetas FONT
Además podríamos tener muchas paginas mas
Por lo que el mantenimiento de la pagina se multiplica, así como el peso de la pagina
Lo que propone CSS es:
http://181.193.87.6/prograweb/00003_css/00002_css.html
Poder insertar un código dentro de la pagina que se encargue de modificar todas las etiquetas que cumplan con ciertas reglas
Por lo que el mantenimiento se optimiza
Inserción
Existen 3 formas de incluir código CSS dentro de un documento HTML
Forma 1
Dentro del mismo documento
El código debe incluirse dentro de las etiquetas <HEAD>...</HEAD>
Y el código se insertan entre las etiquetas <STYLE>...</STYLE>
http://181.193.87.6/prograweb/00003_css/00003_forma1.html
Recordemos que esta es la mejor forma si el código es pequeño.
Y solo afecta a un documento
FORMA 2
Archivo Externo
Es crear un archivo externo que contenga todas las reglas
Es un archivo con extensión ".css"
Un documento HTML puede enlazar cuantos archivos CSS se requieran
Y se enlaza dentro del documento HTML mediante la etiqueta <LINK>
Dentro de la etiqueta <HEAD>
http://181.193.87.6/prograweb/00003_css/00004_forma2/00004_forma2.html
http://181.193.87.6/prograweb/00003_css/00004_forma2/estilos.css
Cuando el navegador carga la pagina también descarga e interpreta el archivo CSS y aplica los estilos
Normalmente la etiqueta <LINK> tiene cuatro atributos:
REL:
indica el tipo de relación del archivo enlazado (stylesheet = hoja de estilo)
TYPE:
indica el tipo de recurso (text/css = Texto en formato CSS)
HREF:
indica el URL (puede ser absoluta o relativa)
MEDIA:
indica el medio al cual se le aplica el estilo (mas adelante lo vemos)
Forma 2
Esta es la forma mas común de incluir CSS dentro HTML
Principalmente por que el mismo archivo lo podemos incluir en varias paginas por lo que todas tendrán el mismo diseño y el mantenimiento se simplifica
Lo común es incluir la hoja de estilo con la etiqueta <LINK>
Pero también la podemos incluir con la etiqueta <STYLE>
La URL puede ir entre comillas simples, dobles o mediante la palabra reservada URL
@import '/css/estilos.css';
@import "/css/estilos.css";
@import url('/css/estilos.css');
@import url("/css/estilos.css");

http://181.193.87.6/prograweb/00003_css/00004_forma2/00005_forma2_style.html
los @imports siempre deben ir al inicio de la etiqueta <STYLE>
@Import
Pero:
<style type="text/css" media="screen">
@import 'estilos.css';
p {color: #000000; }
</style>
Si especificamos una regla después del @import, que también este contenida dentro del archivo CSS (el importado) va prevalecer esta regla
http://181.193.87.6/prograweb/00003_css/00004_forma2/00006_forma2_prevalencia.html
Si incluimos varias hojas con @import
EL ORDEN SI IMPORTA
Por ejemplo:
<STYLE TYPE="text/css" MEDIA="screen, projection">
@import url(/css/estilo1.css);
@import url(/css/estilo2.css
</STYLE>
@Import
Si en "estilo1" definimos que <p> es color rojo (como en los ejemplos anteriores)
Y en "estilo2" también hacemos una definición de <p> en color amarillo
Prevalece la ultima, es decir P =
AMARILLO
@Import
@import se utiliza mas que todo para modular veamos un ejemplo:
En "estilo1" defino lo básico: H1, H2, P, TABLE, etc
En "estilo2" defino un tipo por ejemplo de TABLE
Por lo que en todas las paginas las tablas se ven igual menos en las que se incluya estilo 2
<style type="text/css" media="screen">
@import 'estilos1.css';
@import 'estilos1.css';
...
link e @import relacionados
Si por ejemplo encontramos dentro de un archivo HTML la importación de 2 archivos CSS con <LINK> o con @import
NO hay problema se descargan igual
<link href="estilo1.css" ...>
<style> @import url("estilo2.css") </style>
"estilo2" no se descargara hasta que "estilo1" se descargue e ejecute
Si encontramos <LINK> e @import en un archivo HTML
<link href="estilo1.css" ...>
<link href="estilo2.css" ...>
ó
<style> @import url("estilo1.css") </style>
<style> @import url("estilo2.css") </style>
@import
Por esta razones no se recomienda usar @import dentro de archivos HTML, sino que utilizarlo para importar dentro de archivos CSS ya que permite colocarlos en un orden para establecer prioridades
Otro ejemplo:
Si tenemos un <LINK> que importa una archivo CSS
<link href="a.css" ...>
Y dentro del cual existe una importación de otro CSS
@import url("b.css")
"b.css" no se descarga hasta que se descargue y interprete "a.css"
Forma3
Incluir CSS en los elementos HTML
Es el peor y el menos utilizado ya que tiene los mismos problemas que la etiqueta FONT
Pero puede ser útil cuando solo se requiere modificar un elemento en concreto
http://181.193.87.6/prograweb/00003_css/00007_forma3.html
Glosario y Esquema básico
El esquema para definir reglas CSS es:
Glosario
Regla: es cada uno de los estilos que se definen.
Esta compuesta de:
"Selector": que indica el o los elementos HTML a lo que se la palica la regla
"Llave de apertura": ({)
"Declaración": cada uno de los estilos que deben aplicarse, pueden ser uno o mas.
"Llave de cierre": (})
Propiedad: define que característica vamos a modificar.
Valor: indica el nuevo valor de la característica
Medios CSS
CSS permite definir diferentes hojas de estilos según el medio donde estemos viendo la pagina.
Por ejemplo: pantallas, impresoras, móviles, etc
Tabla de medios aceptados
Los mas utilizados son: screen , print y handhelp
Inclusión de medios
Existen 3 formas de especificar reglas para los medios
Forma1
Directamente en un archivo CSS
Para esto se utiliza la etiqueta @media, seguido del medio al cual deseamos aplicarle el estilo:
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 13pt }
}
Si deseamos aplicar el estilo a mas de un medio simplemente los colocamos separados por coma ","
@media print, screen {
body { font-size: 10pt }
}
Forma 2
Utilizando @import
Colocamos el medio después del URL
@import url("estilos_basicos.css") screen;
@import url("estilos_impresora.css") print;
Si no colocamos el medio después de una sentencia @import el navegador asume que es "ALL", por lo que este archivo se aplica a todos los medios
@import url("estilos_basicos.css");
@import url("estilos_impresora.css");
Forma 3
Utilizando LINK
Debemos indicar el atributo media="valor"
<link rel="stylesheet" type="text/css"
media="screen"
href="basico.css" />
<link rel="stylesheet" type="text/css"
media="print, handheld"
href="especial.css" />
Comentarios
De una linea
/* Este es un comentario en CSS */
De varias lineas
/* Este es un
comentario CSS de varias
lineas */
Selectores
Recordemos:
La declaración indica:
Qué hay que hacer
El selector indica:
a quién hay que hacérselo
Hay dos tipos:
Selectores básicos
Selectores Avanzados
Selector universal
Si lo utilizamos los estilos se aplican a TODOS los elementos de la pagina
Se indica mediante un asterisco (*)
http://181.193.87.6/prograweb/00003_css/00008_Asterisco.html
Selector de tipo o etiqueta
Aplica el estilo a todos los elementos cuya etiqueta HTML coincide con el valor
Por ejemplo: etiqueta HTML <p> y selector p { }
Es el mismo nombre del HTML pero sin "< >"
http://181.193.87.6/prograweb/00003_css/00003_forma1.html
Si los mismos estilos se comparten entre varios elementos podemos usar un selector múltiple
Donde cada selector se separa por coma ","
h1, h2, h3 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
Selector descendente
Selecciona solo los elementos HTML que estén dentro de otros
Por ejemplo:
<p> Este es un párrafo comun pero dentro de este hay una <span> etiqueta SPAN </span> por lo que es especial </p>
Para poder modificar TODAS las etiquetas SPAN que cumplan la condición de estar dentro de un <p> párrafo usamos este tipo de selector
Pero que pasa con un código como el siguiente:
<p>
<span>texto1</span>
<a href="">...<span>texto2</span></a>
</p>
Se le aplica el estilo a "texto2"?
Pues si, por que si se cumple la regla, que este dentro de un <p>

Podemos llegar al nivel que queramos de especificación.
Solo debemos separar cada elemento por un espacio en blanco
Por ejemplo:
p a span em { text-decoration: underline; }
Para esto debemos leerlo en orden inverso
Se le aplica el estilo a TODOS los elementos em <em> que se encuentren dentro de un SPAN <span>, que este dentro un enlace <a> , que este dentro un párrafo <p>
Es decir
<p><span><a><em>texto1....
Importante
Este tipo de selector no debe confundirse con la combinación de selectores
/* El estilo se aplica a todos los elementos "p", "a", "span" y "em" */
p, a, span, em { text-decoration: underline; }
/* El estilo se aplica solo a los elementos "em" que se encuentran dentro de "p a span" */
p a span em { text-decoration: underline; }
Ejemplos:
Selector de clase
Veamos el siguiente código:
¿Que pasa si deseamos aplicar el estilo solo al primer párrafo?
El universal (*) no sirve por que selecciona todos los elementos de la pagina
El selector de tipo (<p>) no sirve por que selecciona todos los párrafos de la pagina
el selector descendiente (<body><p> = body p {}) no sirve por que todos son hijos de BODY
¿entonces?
Para esto existen los selectores de clase
Que aplican el estilo a TODOS los elementos que tienen dentro del HTML el atributo "class"
Selector de clase
Para definir la regla debemos indicarla dentro del CSS, con un punto (.)
Este tipo de selector junto al ID son los mas utilizados
Recordemos que mas de un elemento HTML puede contener la clase
Selector de clase
Que pasa si tenemos el siguiente código:
¿que pasa si queremos aplicarle un estilo solo al primer párrafo?
podríamos hacer una nueva clase que contenga todas las propiedades anteriores y las nuevas, pero estaríamos haciendo el archivo CSS, mas grande y esto se puede multiplicar
Pues la solución es combinar selectores, por ejemplo podríamos podríamos combinar el tipo y el de clase
Regla: todos los elementos que tengan la clase "destacado" que estén dentro de un parrafo
Selector de clase
No debemos confundir:
Además podemos aplicar mas de una clase a un elemento
Por ejemplo:
Selector de clase
También podemos usar el selector de clase multiple
Por ejemplo:
¿De que color es texto rojo o azul?
Pues es azul
Por que estamos diciendo: "Regla: seleccione todos los elementos de la pagina que dentro del atributo class tengan al menos los valores error y destacado"
Selectores ID
Este tipo de selector permite aplicar un estilo a un UNICO elemento HTML que contenga el atributo "ID", el cual debe ser único en toa la pagina
Para definir el estilo debemos declarar la regla (selector) con el símbolo de numeral "#"
También se puede restringir el alcance mediante la combinación de selectores
Por ejemplo:
Regla: El párrafo que tenga el atributo ID="aviso"
Solo seria útil cuando el archivo CSS se aplica a muchas paginas en las cuales existe párrafos con el atributo ID="aviso"
No debemos confundir:
Combinación
Finalmente podemos combinar todos los tipos de selectores
Ejemplos
Practica
Descargar el archivo:
http://181.193.87.6/prograweb/00003_css/00000_practicas/practica1_selectores_basicos.html
Resolver las reglas
Antes de Empezar
El IE 6 y sus versiones anteriores NO SOPORTAN todos estos selectores.
En esta pagina podemos ver la lista completa de los navegadores y los selectores soportados
http://dev.l-c-n.com/CSS3-selectors/browser-support.php
Además en esta pagina podemos comprar cuales selectores soporta nuestro navegador
http://www.css3.info/selectors-test/
Selector de hijos
Permite aplicarle un estilo a un elemento HTML que es hijo directo de otro
Para esto se usa el signo de "mayor que (>)"
Por ejemplo:
La regla: TODOS los elementos HTML que sean hijo directo del elemento <p>
Por esto "texto1" si aplica
"Texto2" no aplica por que es hijo directo de <a> y no de <p>
Veamos otro ejemplo:
http://181.193.87.6/prograweb/00003_css/00012_selector_hijo.html
Selector adyacente
Utiliza el símbolo de "mas (+)"
Y tiene la siguiente estructura:
elemento1 + elemento2 { ... }
Para que se aplique la regla se debe cumplir que:
elemento1 y elemento2 deben ser hermanos, es decir el padre debe ser el mismo.
elemento2 debe estar exactamente después de elemento1
Por ejemplo:
Solo se aplica al primer <h2> no al segundo
Selector adyacente
Un caso útil es cuando digitalizamos un libro, donde normalmente todos los párrafos están indentados excepto el primer párrafo
http://181.193.87.6/prograweb/00003_css/00013_selector_adyacente.html
Selector de atributos
Nos permite aplicarle un estilo a un elemento HTML, según sus atributos y/o valores
Donde:
Ejemplos
Agrupación de reglas
Agrupación
Cuando el sitio es complejo, vamos a tener muchas reglas que se aplican el mismo elemento en diferentes zonas
Por ejemplo:
En este caso el navegador las va agrupar, por lo que nosotros podemos facilitarle el trabajo haciendo nosotros
Además si ya terminamos de programar la aplicación o el sitio podemos optimizar el archivo en cuando a peso y por tanto tiempo de carga, eliminando saltos de linea, espacios, comentarios,etc
Herencia
Cuando establecemos una propiedad="valor" a un elemento, todos sus hijos heredan ese valor
Por ejemplo:
http://181.193.87.6/prograweb/00003_css/00014_herencia.html
Colisiones de estilos
En sitios muy complejos de muchos archivos CSS
Y después de que el navegador los descarga e interpreta y junta
Se puede dar el caso donde varias reglas se aplican a un mismo elemento HTML
Esto es lo que se le conoce como "Colisión de estilos"
Reglas
Para resolver esto el navegador debe aplicar una serie de reglas para resolver el conflicto:
Juntar todas la declaraciones que se aplican al mismo elemento
Ordenarlas según su origen
del navegador
del usuario
del diseñador
Y su importancia (!import)
Ordenarlas según lo especifico (entre mas especifica mas importante)
y finalmente si todavía existen 2 o mas reglas con la misma prioridad, gana la que se aplico de ultimo lugar
Practica
http://181.193.87.6/prograweb/00003_css/00000_practicas/practica2_herencia.html
Descargue el archivo
Ordene el código
Haga que la pagina se vea así:
Unidades de medida
Para definir la altura, anchura y margenes de los elementos
Así como tamaño de letras
Se indica el valor con un numero entero o decimal, seguido de la unidad de medida
SIN ESPACIO
por ejemplo: 32px
absolutas y relativas
Las unidades pueden ser absolutas o relativas
absolutas:
es cuando se da el valor directamente
Por ejemplo: font-size: 32px;
Relativas
Cuando el valor es en relación a otra medida, por lo que para saber su valor real se debe hacer un calculo matemático
Valor 0
Si el valor de la unidad es 0 (cero) la unidad de medida es opcional
Pero si es distinto de 0 (cero) y no se pone la unidad de medida, esta se IGNORA, lo cual es un error común
NOTA:
Algunas propiedades permiten poner valores negativos
Unidades relativas
Son las mas recomendadas, por que son mas flexibles permiten adaptar fácilmente la pagina a los diferentes medios
Relativas
La unidades permitidas son:
em:
No confundir con la etiqueta <em> de HTML
Es aproximadamente el ancho de la letra M ("eme mayúscula") de la fuente que se este usando
Por ejemplo si se usa una fuente de 12px:
1em = 12px
ex:
Es aproximadamente la altura de la letra x ("equis minúscula") de la fuente que se este usando
Por ejemplo si se usa una fuente de 12px:
1ex = 0.5em
px:
Píxel
Es la relación en píxeles de la pantalla donde se este viendo
Ejemplos
Aquí se indica que la que el tamaño de la letra debe ser de un 90% del tamaño por defecto
Es decir si el tamaño por defecto es 12px, entonces:
0.9 X 12 = 10.8px
Por lo que el tamaño de la letra es 10.8px
Si el valor de la medida es un valor decimal con medida inferior a 1, se puede omitir el cero (0). Por ejemplo:
body { font-size: .9em; }
http://181.193.87.6/prograweb/00003_css/00015_em.html
El funcionamiento de ex es igual pero la medida es la altura de la x minúscula
Recordemos que es una unidad relativa, en todos los ejemplos anteriores usábamos la medida default del navegador
Pero acordémonos que en HTML todos los hijos heredan las propiedades del padre
Entonces si tenemos lo siguiente: ¿Cual es la medida en px del H1?
Unidades absolutas
Es cuando indicamos el valor directamente es decir no hay que hacer cálculos
Absolutas
Valores permitidos:
Porcentajes
CSS permite otra unidad de medida relativa basada en porcentajes
Formado por un valor numérico y el símbolo %
Principalmente se utilizan para establecer la anchura de los elementos
Porcentajes
El primer div es de 600px
El segundo "principal" es de 80%, es decir 80% de 600px, por lo tanto 600 X 0.8 = 480 px es su ancho
Recomendación:
La W3C recomienda usar em y porcentajes para definir el tamaño del texto
Y píxel y porcentajes para definir los layout (distribución de la pagina, columnas, elementos etc)
Cuidado
Hay que recordar que las unidades son relativas al padre
Por lo que si tenemos un código como el siguiente:
Lo que va causar es que le texto se vea cada vez mas pequeño
http://181.193.87.6/prograweb/00003_css/00016_em_anidado.html
COLORES
En CSS se pueden indicar colores de 6 formas:
Palabras clave
Colores del sistema
RGB hexadecimal
RGB numérico
RGB porcentual
Web safe
Pero el mas habitual es RGB hexadecimal
Palabras clave
Son 17 palabras claves:
aqua , black , blue , fuchsia , gray , green , lime , maroon , navy , olive , orange , purple , red , silver ,
teal , white , yellow
RGB decimal
El color se obtiene indicando una cantidad por los colores Rojo, Verde y Azul (Red, Green, Blue = RGB)
Los valores pueden ir del 0 al 255 en números decimales
Por ejemplo:
RGB porcentual
Es indicar los colores rojo, verde y azul pero en forma de porcentaje
Los valores van de 0% al 100%
Un valor inferior al 0% se transforma en 0%
Y uno mayor al 100% es igual al 100%
RGB hexadecimal
Un sistema decimal utiliza 10 símbolos para representar los números (del 0 al 9)
Un sistema hexadecimal utiliza 16 símbolos para la representación numérica. Los números del 0 al 9 y las letras A=10, B=11, C=12, D=13, E=14 y F=15
Por ejemplo:
Por dicha existen programas de permiten obtener estos códigos por ejemplo gimp, colorname o agave
RGB hexadecimal
Una ventaja es que podemos comprimir sus valores por ejemplo:
Las letras de los códigos pueden se mayúsculas o minúsculas, pero se recomienda en mayúscula
Colores del sistema
Utiliza los colores definidos parta algunos elementos del sistema operativo
Acá se pueden consultar
http://www.w3.org/TR/CSS21/ui.html#system-colors
Colores web safe
Cada componente RGB puede tomar valores del 0 al 255, es decir 256 posibilidades.
Si lo multiplicamos 256*256*256=16.777.216 colores posibles
Pero en los 90's no todos los monitores podían representar todos estos colores por esta razón se creo las paleta de colores "web safe" garantizando que los colores se verían correctamente en todos los navegadores y sistemas operativos
Aquí los podemos ver:
http://websafecolors.info/
Modelo de cajas (box model)
El "box model" es el comportamiento de CSS que hace que todos los elementos de una pagina HTML se presenten mediante cajas rectangulares
Permitiendo controlar:
La altura, anchura de la caja
Margenes entre cajas
Espacio interior de nuestras cajas
Posicionamiento
box model
Box model
Las cajas se crean automáticamente, es decir cada ves que insertamos un elemento (un etiqueta) creamos una caja
Box model
.Cada caja esta forma de 6 partes
Contenido (Content): es el contenido del elemento (texto del párrafo, texto de la lista, una imagen, etc)
Relleno (padding): es el espacio entre el contenido y el borde
Borde (border): borde que encierra el contenido y el relleno
Imagen de fondo (background image): imagen que se muestra detrás del contenido y relleno
Color de fondo (background color): color que se muestra detras del contenido y relleno
Margen (margin): espacio entre esta y las otras cajas
Anchura (Width)
La propiedad que permite controlar la anchura de estas cajas es width
No admite valores negativos
Los valores en porcentajes se calculan según anchura de su padre
Los valores que puede tomar son:
El valor auto (automático) es el default, indica que el navegador debe calcular el espacio para la caja según el contenido de esta y el espacio disponible en la pagina
inherit: significa que se hereda del padre
Altura (Height)
Height: permite controlar la altura de los elementos
No admite valores negativos
Los valores permitidos:
Los porcentajes se evalúan según el padre
inherit: se hereda del padre
El valor default es auto
Margen (Margin)
CSS define 4 propiedades para controlar los margenes:
Recordemos que el margen es el espacio entre la caja y el resto de cajas
http://181.193.87.6/prograweb/00003_css/00017_box_model.html
nota:
CSS clasifica los elementos en elementos de bloque y en elementos en linea
En bloque (block elements): siempre empiezan en una nueva linea. Por ejemplo: <p> <h1>
En linea (inline elements): solo ocupan el espacio necesario para mostrar sus contenidos. Por ejemplo <a>
Pero mas adelante lo vemos
Los margenes (top-bottom) solo se pueden aplicar a elementos de bloque y las imágenes y los laterales (lef-right) a todos los elementos
http://181.193.87.6/prograweb/00003_css/00017_box_model.html
Veamos otro ejemplo:
http://181.193.87.6/prograweb/00003_css/00018_box_model.html
CSS a parte de los 4 margenes que vimos establece uno adicional que permite establecer un valor para todos los margenes, es decir cuanto todos los margen valen igual.
Esto existe con varias propiedades y se llama "shorthand"
http://181.193.87.6/prograweb/00003_css/00018_box_model.html
Los valores permitidos:
{1,4}: significa que a la propiedad le podemos dar entre 1 y 4 valores donde si pasamos:
1 valor: los 4 tienen el mismo valor
2 valores: el primero se le asigna a top y bottom y el segundo a left y right
3 valores: 1-top, 2-left-right y 3-bottom
4 valores: 1 a cada uno en orden top-right-botom-left
http://181.193.87.6/prograweb/00003_css/00018_box_model.html
Relleno (Padding)
Permite controlar la distancia en el borde y el contenido
Son 4 propiedades:
http://181.193.87.6/prograweb/00003_css/00020_padding.html
shorthand
l igual con el margen existe un propiedad que permite controlar todos los rellenos en una sola instrucción ("shorthand") y es padding
Practica
Descargar el HTML:
http://181.193.87.6/prograweb/00003_css/00000_practicas/practica3_box_model.html
Descargar el CSS básico de estructura (no fijarse en demás etiquetas)
http://181.193.87.6/prograweb/00003_css/00000_practicas/estilo_practica3.css
Utilizar esta imagen
Resolver:
1. El elemento #cabecera debe tener un relleno de 1em en todos los lados.
2. El elemento #menu debe tener un relleno de 0.5em en todos los lados y un margen
inferior de 0.5em .
3. El resto de elementos ( #noticias , #publicidad , #principal , #secundario ) deben tener
0.5em de relleno en todos sus lados, salvo el elemento #pie , que sólo debe tener relleno
en la zona superior e inferior.
4. Los elementos .articulo deben mostrar una separación entre ellos de 1em .
5. Las imágenes de los artículos muestran un margen de 0.5em en todos sus lados.
6. El elemento #publicidad está separado 1em de su elemento superior.
7. El elemento #pie debe tener un margen superior de 1em .
Bordes
Bordes
CSS permite definir la anchura, color y estilo de cada borde
Anchura
valores:
El shorthand:
Valores:
Bordes
{1,4}
1 valor = todos los bordes
2 valores = TOP y BOTTOM / LEFT y RIGHT
3 valores = (1 = TOP) / (2= LEFT y RIGHT) / (3= BOTTOM)
4 valores = TOP, RIGHT,BOTTOM,LEFT
Color
Permite definir el color de los bordes de forma individual
shorthand
Estilo
Permite establecer un estilo al borde de forma individual o en conjunto (shorthand)
shorthand
Estilo Global
Además CSS establece un shorthand que permite establecer todas las propiedades (width, color y style) para todos bordes de forma individual y otra de forma grupal
http://181.193.87.6/prograweb/00003_css/00021_border1.html
Practica
Descargar el archivo
http://181.193.87.6/prograweb/00003_css/00000_practicas/practica4/practica4_bordes.html
Descargar el CSS
http://181.193.87.6/prograweb/00003_css/00000_practicas/practica4/estilo_practica4.css
Aplicar los siguientes cambios:
Eliminar el borde gris que muestran por defecto todos los elementos.
El elemento #menu debe tener un borde inferior de 1 píxel y azul ( #004C99 ).
El elemento #noticias muestra un borde de 1 píxel y gris claro ( #C5C5C5 ).
El elemento #publicidad debe mostrar un borde discontinuo de 1 píxel y de color #CC6600 .
El lateral formado por el elemento #secundario muestra un borde de 1 píxel y de color #CC6600 .
El elemento #pie debe mostrar un borde superior y otro inferior de 1 píxel y color gris claro #C5C5C5

Compativilidad 1
Box model
En el modelo box model actual la suma total ocupada por un elemento es la siguiente:
Es decir sumar:
El ancho del elemento
El relleno
El borde
El margen
Box Model
Pero antes que esto se estandarizada cada fabricante de navegador lo interpretaba diferente (IE5, IE6, IE7 y Netscape 4)
Por ejemplo para el mismo caso el ancho del elemento seria de 300px lo indicado en el width se aquí se tiene que sacar el borde y el relleno
Y ya existían muchas paginas que funcionaban para estos
Por esto se creo dos modos de funcionamiento del navegador:
modo quiks o modo raro que trabaja con esta forma
y el modo estándar que cumple con los estandares
IE8
Por esta razón IE8 introduce el concepto de "Compatibilidad e la página para asegurar que cualquier pagina sin importar para que versión se diseño se vean bien
http://181.193.87.6/prograweb/00003_css/024_compatibilidad_IE8.html
Fondo
CSS establece 5 formas de establecer un fondo a un elemento
background-color
Permite definir un color de fondo
background-image
Permite establecer una imagen como fondo
Si la imagen es mas grande que el espacio del elemento solo se muestra esa parte
Si la imagen es mas pequeña se repite vertical y horizontalmente
http://181.193.87.6/prograweb/00003_css/0025_fondo1/025_fondo1.html
background-repeat
A veces no deseamos que la imagen se repita ya sea vertical o horizontalmente
http://181.193.87.6/prograweb/00003_css/0025_fondo1/026_fondo2.html
background-position
Cuando colocamos un a imagen de fondo siempre se coloca en la esquina superior izquierda
Con background-position podemos cambiar esto
Si damos 2 medidas: desplazamiento horizontal y vertical
Si damos 1 medida: el desplazamiento es horizontal y al vertical se le aplica 50%
Se permite utilizar palabras claves:
top=0% / left = 0% / center=50% / bottom=100% / right=100%
CSS permite combinar porcentajes y palabras claves:
50% 2cm , center 2cm , center 10% .

http://181.193.87.6/prograweb/00003_css/027_back_position.html
background-attachment
Permite fija o no una imagen de fondo para que se desplace o no con el movimiento del scroll
http://181.193.87.6/prograweb/00003_css/028_back_attachment.html
background
Shorthand (background)
Que permite establecer todas las propiedades de una sola vez
El orden es indiferente pero se recomienda:
color,URL, repetición y posición
Además permite asignar todos o solo algunos
Practica 5
Practica5
Los elementos #noticias y #pie tiene un color de fondo gris claro ( #F8F8F8 ).
El elemento #publicidad muestra un color de fondo amarillo claro ( #FFF6CD ).
Los elementos <h2> de #secundario muestran un color de fondo #DB905C y un pequeño padding de 0.2em .
El fondo del elemento #menu se construye mediante una pequeña imagen llamada fondo_menu.png.
Utilizar logotipo.png como fondo sin repetición de #cabecera y remplazar el texto "Logotipo" por esta imagen
Y ponerle un relleno inferior de 70px
Resultado
http://181.193.87.6/prograweb/00003_css/00022_border2.html
Descargar
http://181.193.87.6/prograweb/00003_css/00000_practicas/Practica5.zip
FIN
http://181.193.87.6/prograweb/00003_css/00008_desendiente.html
http://181.193.87.6/prograweb/00003_css/00009_desendiente.html
http://181.193.87.6/prograweb/00003_css/00010_desendiente%20.html
http://181.193.87.6/prograweb/00003_css/00011_clase.html
Full transcript