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 #3

No description
by

Gustavo Matamoros González

on 20 April 2015

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of CSS #3

CSS#3
Simular tabla con <div>
Simular tabla
Si creamos una estructura de nuestra pagina con DIV, podemos tener el problema de que cada columna tiene un tamaño distinto (según el contenido que tengan)
http://http://181.193.87.6/prograweb/00003_css/065_columnas_mismo_tamano.html
Pero a veces necesitamos se vean todos del mismo tamaño
Para esto podemos usar la propiedad display, para simular una tabla las cuales sabemos todas las celadas de una fila tienen la misma altura
Para esto debemos crear un div adicional que simule una tabla
http://http://181.193.87.6/prograweb/00003_css/066_simular_tabla_con_div.html
Sombras
box-shadow permite crear sombras sobre elementos
http://181.193.87.6/prograweb/00003_css/067_sombras.html
Transparencias
CSS3 incluye la propiedad "opacity" para incluir transparencias en la pagina
Los valores de opacity van del 0.0 a 1.0
Donde 0.0 es la máxima transparencia
E7 y versiones anteriores no la soportan por lo que hay que utilizar la propiedad privativa "filter alpha" donde se debe dar una valor entre 0 (invisible) y 100 (visible)
http://181.193.87.6/prograweb/00003_css/068_transparencia.html
font-face
Nos permite incluir en nuestra pagina una fuente especial descargada
Primero debemos definirla y luego la podemos utilizar
http://181.193.87.6/prograweb/00003_css/069_font_face/069_font_face.html
sprites CSS
Sprites CSS
Sabemos que el 80% de la carga de una pagina es la descarga de recursos adicionales a la misma.
Por esta razón se creo un técnica llamada sprites CSS que permite optimizar la descargas de imágenes
Lo que busca es unir todas las imágenes en un solo archivo para que el navegador solo tenga que descargar una imagen
Por ejemplo tenemos 3 imágenes de 16px x 16px
Luego con un editor de imágenes como GIMP creamos un archivo nuevo de tamaño 16px de ancho y 48px de alto (16+16+16=48) y agregamos las imágenes
Sprites CSS
Y con esto ya la podemos usar en nuestro código
Lo importante es que los elementos deben de tener el alto de las imágenes y con la propiedad "background-position" nos podemos desplazar entre la imagen
Y optimizamos la carga de nuestra pagina
http://181.193.87.6/prograweb/00003_css/070_sprites_css/070_sprite.html
También se puede hacer la imagen horizontalmente
Además podemos añadir sombras en texto:
http://181.193.87.6/prograweb/00003_css/071_text_shadow.html
Reset CSS
Recordemos que cada navegador tiene su propio CSS, que nos puede afectar en nuestro diseño
Por esta razón existen archivos llamados reset CSS que debemos incluir en nuestra pagina para evitar posibles errores
http://181.193.87.6/prograweb/00003_css/reset.css
Archivo reset.css:
Ejemplo sin:
http://181.193.87.6/prograweb/00003_css/072_reset_css_sin.html
Ejemplo con:
http://181.193.87.6/prograweb/00003_css/072_reset_css_con.html
Firebug
Firebug es un complemento de Firefox que nos ayuda en la programación
Una vez instalado para activarlo cargamos la pagina que deseamos inspeccionar y damos clic en el icono ubicado a la derecha de la barras de Direcciones del navegador
O nos ubicamos directamente en el elemento que deseamos evaluar damos clic derecho->Inspeccionar elemento con Firebug
Firebug cuenta con los siguientes paneles:
Consola: Muestra mensajes de error ubicando el archivo que produce el error
html: muestra el código html, permite seleccionar elementos y modificar el contenido y cambiar reglas CSS
CSS: muestra todas las hojas CSS descargadas por la pagina y permite modificar sus valores
Script y DOM: depuración de javascript
Red: muestra información de todos los recursos descargados (.css, .js, imagenes, etc) importante el peso y tiempo
Muchas veces tenemos un texto con un tamaño relativo por ejemplo 1em; pero si necesitamos saber el valor real con que el navegador lo esta dibujando tab->HTML->Seccion Derecha->Interpretado, de esta forma podemos ver el tamaño real
También podemos ver información de la marquetacion del elemento
Pseudo-clases
first-child
selecciona el primer elemento hijo de un elemento
http://181.193.87.6/prograweb/00003_css/073_pseudo_clase_first_child.html
Primer em que se encuentre dentro de un p
:link y :visited
Se aplica los enlaces
:link: enlaces no visitados
:visited: enlaces visitados
http://181.193.87.6/prograweb/00003_css/074_psc_link_visited.html
:hover, :active y :focus
Se puede aplicar a cualquier elemento HTML
:hover: cuando se pasa el mouse por encima del elemento
:active: cuando el usuario hace clic sobre un elemento y lo tiene presionado
:focus: cuando el elemento tiene el foco del navegador
Demo Hover A:
http://181.193.87.6/prograweb/00003_css/075_hover_a/index.html
Demo Hover img y CSS3:
http://181.193.87.6/prograweb/00003_css/075_hover_img/index.html
Demo active:
181.193.87.6/prograweb/00003_css/075_hover_a/active.html
Demo Focus:
http://181.193.87.6/prograweb/00003_css/076_focus/
Pseudo-clase de texto
:first-line
Selecciona la primera linea de texto
:first-letter
Selecciona la primera letra de la primera linea del texto
http://181.193.87.6/prograweb/00003_css/077_psc_first_letter_first_line.html
:before y :after
Se utilizan con la propiedad "content" para añadir contenido antes o después de un elemento
Y además podemos usar la propiedad counter-reset para controlar la numeración con counter() y conuters()
http://tympanus.net/codrops/
http://181.193.87.6/prograweb/00003_css/078_psc_before_after.html
white-space
white-space
Permite controlar los espacios en blanco
Opciones:
Normal: Los espacios en blanco y saltos de linea se eliminan
Pre: se respetan los espacios en blanco y saltos de linea
pre-wrap: respeta espacios en blanco y añade saltos del linea para que el texto no se salga del contenedor
Nowrap: elimina los espacios en blanco y no añade saltos de linea para que el texto no se salga
pre-line: elimina espacios en blanco, respeta saltos de linea originales y añade los necesarios para que el texto no se salga
http://181.193.87.6/prograweb/00003_css/078_psc_white_space.html
FIN
Tarea #2
Modificar las siguientes paginas para que todo el estilo sea dado por CSS y no exista dentro del archivo nada de diseño
pagina1.html
pagina2.html
pagina3.html
Pagina4.html
Además ....
crear una ventana de diseño libre para un login de sistema
Y una pagina con la siguiente estructura:
Un div contenedor que permita centrar la pagina horizontalmente y de un 80% del tamaño de la pagina
Una sección de encabezado que contiene el código del "menú de varios niveles" visto en clases
Debe hacer todos los cambios necesarios para que el menú se centre dentro del encabezado
y una sección de "contenido" para mostrar el contenido
Debe separar el código CSS en los archivos:
estilo.css: estructura de la pagina
menu.css: estrutura del menu
reset.css: debe eliminar el CSS del navegador
Y los debe insertar dentro de una carpeta de nombre "css"
Y debe crear un div para el footer
Full transcript