SlideShare una empresa de Scribd logo
1 de 2
Descargar para leer sin conexión
Desarrollo web con Flash                                                              Práctica 5




                           Práctica 5 Introducción a las CSS


Estructuras de una página

Están formadas por tres capas (en archivos independientes):
    • Contendio: HTML
    • Presentación: CSS
    • Comportamiento: JavaScript

Practica 1:
        Buscar en google e instalar la Web Developer ToolBar de Chrispederick, para Firefox
        Usando la ToolBar y siguiendo las indicaciones del instructor:
            1. Deshabilitar las CSS
            2. Ver para diferentes dispositivos
            3. Dehabilitar los colores
            4. Esconder imágenes de fondo
            5. Mostrar los contornos de los elementos
            6. Validar pagina html


CSS

Estructura de código CSS:




                           selector {
                                    propiedad: valor;
                           }




Ing. Hugo Mendieta Pacheco                                                                    1
Desarrollo web con Flash                                                             Práctica 5


CSS de Navegador y de Autor

Practica 2:
        Desactive todos las CSS del navegador


Tipos de CSS

    •   En línea:
         Se aplican directamente sobre un elemento.
         sobre escriben cualquier estilo.
         Solo aplican al elemento q tiene el atributo style.
         No recomendables, sólo para pruebas o casos excepcionales.


    •   Internos, en la cabecera
         Aplican a todos los elementos de la página.
         Se aplican de manera más limpia.
         Sólo aplican a los elementos de la página.




    •   Estilos vinculados
         Por medio de un archivo externo.
         Pueden aplicarse a varias páginas.
         Separan la estructura y el diseño.



    •   Esilos importados
         Se pueden relacionar varios archivos de CSS a través de un archivo CSS o del html.
         Separa código por bloques relacionando elementos en archivos independientes.
         Sirve para la maquetación.



Práctica 3:
        Realice los ejemplos anteriores según las indicaciones del instructor.


CSS para diferentes dispositivos

Practica 4:
        Especifique diferentes CSS para todos los dispotivos, salida por pantalla, impresión y
        dispositivos móviles.




Ing. Hugo Mendieta Pacheco                                                                     2

Más contenido relacionado

La actualidad más candente

La actualidad más candente (13)

Curso estilos web CSS
Curso estilos web CSSCurso estilos web CSS
Curso estilos web CSS
 
Desarrollo Web: HTML + Bootstrap
Desarrollo Web: HTML + BootstrapDesarrollo Web: HTML + Bootstrap
Desarrollo Web: HTML + Bootstrap
 
Mi presentación: resumen de lo aprendido
Mi presentación: resumen de lo aprendidoMi presentación: resumen de lo aprendido
Mi presentación: resumen de lo aprendido
 
Curso cei 337 acrobat profesional
Curso cei 337   acrobat profesionalCurso cei 337   acrobat profesional
Curso cei 337 acrobat profesional
 
WordPress una herramienta para todo
WordPress una herramienta para todoWordPress una herramienta para todo
WordPress una herramienta para todo
 
Bootstrap 3.
Bootstrap 3.Bootstrap 3.
Bootstrap 3.
 
Wiki
WikiWiki
Wiki
 
This is Drupal! (Basics)
This is Drupal! (Basics)This is Drupal! (Basics)
This is Drupal! (Basics)
 
Diseñar en joomla!.key
Diseñar en joomla!.keyDiseñar en joomla!.key
Diseñar en joomla!.key
 
DrupalCamp Spain 2014: Introducción al desarrollo de módulos en Drupal 7
DrupalCamp Spain 2014: Introducción al desarrollo de módulos en Drupal 7DrupalCamp Spain 2014: Introducción al desarrollo de módulos en Drupal 7
DrupalCamp Spain 2014: Introducción al desarrollo de módulos en Drupal 7
 
Convertir html y css en Joomla!
Convertir html y css en Joomla!Convertir html y css en Joomla!
Convertir html y css en Joomla!
 
Blogs
BlogsBlogs
Blogs
 
HOJA DE ESTILO S4P3.pptx
HOJA DE ESTILO S4P3.pptxHOJA DE ESTILO S4P3.pptx
HOJA DE ESTILO S4P3.pptx
 

Destacado (20)

Navegadores
NavegadoresNavegadores
Navegadores
 
Actividad 6
Actividad 6Actividad 6
Actividad 6
 
Presentacion ganado
Presentacion ganadoPresentacion ganado
Presentacion ganado
 
Mezclamos 7
Mezclamos 7Mezclamos 7
Mezclamos 7
 
Conclusiones clase modulo 2
Conclusiones clase modulo 2Conclusiones clase modulo 2
Conclusiones clase modulo 2
 
Aguas y red hidrográficas. (temas 5 )
Aguas y red hidrográficas. (temas 5 )Aguas y red hidrográficas. (temas 5 )
Aguas y red hidrográficas. (temas 5 )
 
Oc64 67
Oc64 67Oc64 67
Oc64 67
 
Practica07
Practica07Practica07
Practica07
 
CHAGAS SALUT PÚBLICA.pdf
CHAGAS SALUT PÚBLICA.pdfCHAGAS SALUT PÚBLICA.pdf
CHAGAS SALUT PÚBLICA.pdf
 
Insumos naye
Insumos nayeInsumos naye
Insumos naye
 
Ict 06437 imp 4215 2 3 -da compactador
Ict 06437 imp 4215 2 3 -da compactadorIct 06437 imp 4215 2 3 -da compactador
Ict 06437 imp 4215 2 3 -da compactador
 
Els Ibers
Els IbersEls Ibers
Els Ibers
 
Formulario kpsi (plantilla en blanco)
Formulario kpsi (plantilla en blanco)Formulario kpsi (plantilla en blanco)
Formulario kpsi (plantilla en blanco)
 
Presentación1
Presentación1Presentación1
Presentación1
 
Ikastaroak08 I
Ikastaroak08 IIkastaroak08 I
Ikastaroak08 I
 
Dirección Oficial de F1
Dirección Oficial de F1Dirección Oficial de F1
Dirección Oficial de F1
 
La meva àvia
La meva àviaLa meva àvia
La meva àvia
 
Carnaval2008
Carnaval2008Carnaval2008
Carnaval2008
 
Os meus melhores momentos na serra da estrela
Os meus melhores momentos na serra da estrelaOs meus melhores momentos na serra da estrela
Os meus melhores momentos na serra da estrela
 
Xadrez na escol1
Xadrez na escol1Xadrez na escol1
Xadrez na escol1
 

Similar a Practica05 b (20)

Practica06
Practica06Practica06
Practica06
 
Las Herramientas de un Frontend
Las Herramientas de un FrontendLas Herramientas de un Frontend
Las Herramientas de un Frontend
 
OOCSS - @janogarcia
OOCSS - @janogarciaOOCSS - @janogarcia
OOCSS - @janogarcia
 
CSS - Drupal Camp Costa Rica 2016
CSS - Drupal Camp Costa Rica 2016CSS - Drupal Camp Costa Rica 2016
CSS - Drupal Camp Costa Rica 2016
 
HTML.ppt
HTML.pptHTML.ppt
HTML.ppt
 
diseño web HTML aplicaciones web y demas
diseño web HTML aplicaciones web y demasdiseño web HTML aplicaciones web y demas
diseño web HTML aplicaciones web y demas
 
HTML.ppt
HTML.pptHTML.ppt
HTML.ppt
 
HTML.ppt
HTML.pptHTML.ppt
HTML.ppt
 
S2-DAW-2022S1.pptx
S2-DAW-2022S1.pptxS2-DAW-2022S1.pptx
S2-DAW-2022S1.pptx
 
Desarrollo de temas de apariencia para Liferay 6.1
Desarrollo de temas de apariencia para Liferay 6.1Desarrollo de temas de apariencia para Liferay 6.1
Desarrollo de temas de apariencia para Liferay 6.1
 
Manual css3 DesarrolloWeb
Manual css3 DesarrolloWebManual css3 DesarrolloWeb
Manual css3 DesarrolloWeb
 
crossmedia 03: css
crossmedia 03: csscrossmedia 03: css
crossmedia 03: css
 
Framework de programacion de paginas web
Framework de programacion de paginas webFramework de programacion de paginas web
Framework de programacion de paginas web
 
Editor profesional web
Editor profesional webEditor profesional web
Editor profesional web
 
HTML5, CSS3, Jquery y Boostrap
HTML5, CSS3, Jquery y BoostrapHTML5, CSS3, Jquery y Boostrap
HTML5, CSS3, Jquery y Boostrap
 
Qué es CSS y con qué se come?
Qué es CSS y con qué se come?Qué es CSS y con qué se come?
Qué es CSS y con qué se come?
 
U5.pptx
U5.pptxU5.pptx
U5.pptx
 
Semana6(Framework para diseño y desarrollo web ).pdf
Semana6(Framework para diseño y desarrollo web ).pdfSemana6(Framework para diseño y desarrollo web ).pdf
Semana6(Framework para diseño y desarrollo web ).pdf
 
Plan asignatura
Plan asignaturaPlan asignatura
Plan asignatura
 
Hoja de estilo
Hoja de estiloHoja de estilo
Hoja de estilo
 

Practica05 b

  • 1. Desarrollo web con Flash Práctica 5 Práctica 5 Introducción a las CSS Estructuras de una página Están formadas por tres capas (en archivos independientes): • Contendio: HTML • Presentación: CSS • Comportamiento: JavaScript Practica 1: Buscar en google e instalar la Web Developer ToolBar de Chrispederick, para Firefox Usando la ToolBar y siguiendo las indicaciones del instructor: 1. Deshabilitar las CSS 2. Ver para diferentes dispositivos 3. Dehabilitar los colores 4. Esconder imágenes de fondo 5. Mostrar los contornos de los elementos 6. Validar pagina html CSS Estructura de código CSS: selector { propiedad: valor; } Ing. Hugo Mendieta Pacheco 1
  • 2. Desarrollo web con Flash Práctica 5 CSS de Navegador y de Autor Practica 2: Desactive todos las CSS del navegador Tipos de CSS • En línea:  Se aplican directamente sobre un elemento.  sobre escriben cualquier estilo.  Solo aplican al elemento q tiene el atributo style.  No recomendables, sólo para pruebas o casos excepcionales. • Internos, en la cabecera  Aplican a todos los elementos de la página.  Se aplican de manera más limpia.  Sólo aplican a los elementos de la página. • Estilos vinculados  Por medio de un archivo externo.  Pueden aplicarse a varias páginas.  Separan la estructura y el diseño. • Esilos importados  Se pueden relacionar varios archivos de CSS a través de un archivo CSS o del html.  Separa código por bloques relacionando elementos en archivos independientes.  Sirve para la maquetación. Práctica 3: Realice los ejemplos anteriores según las indicaciones del instructor. CSS para diferentes dispositivos Practica 4: Especifique diferentes CSS para todos los dispotivos, salida por pantalla, impresión y dispositivos móviles. Ing. Hugo Mendieta Pacheco 2