SlideShare una empresa de Scribd logo
ESTRUCTURAS CON HTML
        Y CSS
Reglas generales de CSS

•   Verificar que todas las llaves abiertas estén
    debidamente cerradas.
•   Nunca omitir puntos y comas.
•   Utilizar nombres representativos para todas
    las clases.
Recordando terminología CSS


 1


     h1 {
                 3

       font-size: 20px;
     }

           2
Recordando terminología CSS



 ¿Cuáles son las cinco
 maneras de manejar
    objetos CSS?
El elemento <DIV>


•   Es el elemento más útil de HTML
•   Se emplea con fines estructurales
•   Plantea una sub-estructura en un
    documento HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <link href="styles/style.css"
    type="text/css" rel="stylesheet" />
  </head>
  <body>
  </body>
</html>
<body>
  <div id="container">
     <div id="header">
     
     </div>
     <div id="content">
     
     </div>
     <div id="footer">
     
     </div>
  </div>
</body>
Container
Header




 Footer
Content
<body>
  <div id="container">
     <div id="header">
        <h1>Titulo de la practica</h1>
     </div>
     <div id="content">
        <p>...</p>
     </div>
     <div id="footer">
        ...
     </div>
  </div>
</body>
El modelo de caja

Documento HTML

    Elemento HTML


                 Contenido
El modelo de caja

 Documento HTML
                                border
         Elemento HTML
margin

     padding
                    Contenido
<body>
  <div id="container">
     <div id="header">
        <h1>Titulo de la practica</h1>
     </div>
     <div id="content">
        <p>...</p>
     </div>
     <div id="footer">
        ...
     </div>
  </div>
</body>
#container{
   background-color: #CCCCCC;
}
#header{
   background-color: #AAAAAA;
}
#content{
   background-color: #336600;
}
#footer{
   background-color: #6600FF;
}
#container{
  background-color: #CCCCCC;
  border: 3px solid #444444;
  padding: 15px;
}
border: 3px solid #444444;   Color


    Grosor   Tipo de borde




border-right: 3px solid #444444;
border-left: 2px dotted #0000FF;
border-bottom: 6px dashed #FF0000;
border-top: 10px double #336600;
padding: 15px;


padding: 15px 4px;

        B, T R, L

padding: 15px 0 10px 2px;

         T   R      B   L

padding-top: 15px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 2px;
#container{
   background-color: #CCCCCC;
}
#header{
   background-color: #AAAAAA;
}
#content{
   background-color: #336600;
   margin: 20px;
}
#footer{
   background-color: #6600FF;
}
#container{
   background-color: #CCCCCC;
}
#header{
   background-color: #AAAAAA;
}
#content{
   background-color: #336600;
   margin: 20px;
}
#footer{
   background-color: #6600FF;
}
margin: 15px;


margin: 15px 4px;

        B, T R, L

margin: 15px 0 10px 2px;

         T      R   B   L

margin-top: 15px;
margin-right: 0;
margin-bottom: 10px;
margin-left: 2px;

Más contenido relacionado

La actualidad más candente

Resumen 1 / Taller de Diseño Web IAS
Resumen 1 / Taller de Diseño Web IASResumen 1 / Taller de Diseño Web IAS
Resumen 1 / Taller de Diseño Web IAS
Nombre Apellidos
 
HTML
HTMLHTML
HTML
Vladimir
 
Html y css
Html y cssHtml y css
Html y css
Roberto Garcia
 
Pagina web i
Pagina web iPagina web i
Nicolaas 1112
Nicolaas 1112Nicolaas 1112
Nicolaas 1112
Daniel Vargas
 
Header
HeaderHeader
Header
Triway EAD
 
Clase 07 04 08
Clase 07 04 08Clase 07 04 08
Clase 07 04 08
farohache
 
Lenguaje html y css ..
Lenguaje html y css ..Lenguaje html y css ..
Lenguaje html y css ..
FranciscoDavidGarciaVaya
 
Etiquetas[1]
Etiquetas[1]Etiquetas[1]
Etiquetas[1]
TMHL06
 
Introducción HTML
Introducción HTMLIntroducción HTML
Introducción HTML
Carlos A. Iglesias
 
HTML
HTML HTML
Acuerdo no. 027 2006
Acuerdo no. 027 2006Acuerdo no. 027 2006
Acuerdo no. 027 2006
natalymoreno08
 
Introducción a CSS en XHTML
Introducción a CSS en XHTMLIntroducción a CSS en XHTML
Introducción a CSS en XHTML
Omar Sosa-Tzec
 
Acuerdo no. 056
Acuerdo no. 056Acuerdo no. 056
Acuerdo no. 056
natalymoreno08
 
El código html
El código htmlEl código html
El código html
Kevin Rosero
 
Html
HtmlHtml
Maquetacion css-con-dreamweaver
Maquetacion css-con-dreamweaverMaquetacion css-con-dreamweaver
Maquetacion css-con-dreamweaver
chespok
 
CSS
CSSCSS

La actualidad más candente (18)

Resumen 1 / Taller de Diseño Web IAS
Resumen 1 / Taller de Diseño Web IASResumen 1 / Taller de Diseño Web IAS
Resumen 1 / Taller de Diseño Web IAS
 
HTML
HTMLHTML
HTML
 
Html y css
Html y cssHtml y css
Html y css
 
Pagina web i
Pagina web iPagina web i
Pagina web i
 
Nicolaas 1112
Nicolaas 1112Nicolaas 1112
Nicolaas 1112
 
Header
HeaderHeader
Header
 
Clase 07 04 08
Clase 07 04 08Clase 07 04 08
Clase 07 04 08
 
Lenguaje html y css ..
Lenguaje html y css ..Lenguaje html y css ..
Lenguaje html y css ..
 
Etiquetas[1]
Etiquetas[1]Etiquetas[1]
Etiquetas[1]
 
Introducción HTML
Introducción HTMLIntroducción HTML
Introducción HTML
 
HTML
HTML HTML
HTML
 
Acuerdo no. 027 2006
Acuerdo no. 027 2006Acuerdo no. 027 2006
Acuerdo no. 027 2006
 
Introducción a CSS en XHTML
Introducción a CSS en XHTMLIntroducción a CSS en XHTML
Introducción a CSS en XHTML
 
Acuerdo no. 056
Acuerdo no. 056Acuerdo no. 056
Acuerdo no. 056
 
El código html
El código htmlEl código html
El código html
 
Html
HtmlHtml
Html
 
Maquetacion css-con-dreamweaver
Maquetacion css-con-dreamweaverMaquetacion css-con-dreamweaver
Maquetacion css-con-dreamweaver
 
CSS
CSSCSS
CSS
 

Similar a Tema 9 - Estructura con css

Programacion web
Programacion webProgramacion web
Programacion web
Carlos Alonso Pérez
 
Modulo1parte2ver2 140505061829-phpapp02
Modulo1parte2ver2 140505061829-phpapp02Modulo1parte2ver2 140505061829-phpapp02
Modulo1parte2ver2 140505061829-phpapp02
Pablo Ch
 
Fundamentos de CSS
Fundamentos de CSSFundamentos de CSS
Fundamentos de CSS
Nicolas Navarro Rincón
 
Presentación CSS y HTML en Gummurcia
Presentación CSS y HTML en GummurciaPresentación CSS y HTML en Gummurcia
Presentación CSS y HTML en Gummurcia
Manuel Villagordo Vera
 
Dispositivas CURSO HTML 5.pdf
Dispositivas CURSO HTML 5.pdfDispositivas CURSO HTML 5.pdf
Dispositivas CURSO HTML 5.pdf
JohnWalker603627
 
Diseño de paginas con html1
Diseño de paginas con html1Diseño de paginas con html1
Diseño de paginas con html1
Ricardo ViGuillermo
 
Introduccion a css
Introduccion a cssIntroduccion a css
Introduccion a css
catalan21
 
HTML5 y CSS3 ¿Imprescindibles?
HTML5 y CSS3 ¿Imprescindibles?HTML5 y CSS3 ¿Imprescindibles?
HTML5 y CSS3 ¿Imprescindibles?
Binaris, Escuela Digital Avanzada
 
Clase 6 twig
Clase 6 twigClase 6 twig
Clase 6 twig
hydras_cs
 
Introducción CSS
Introducción CSSIntroducción CSS
Introducción CSS
Carlos A. Iglesias
 
Luisa
LuisaLuisa
Luisa
Luisa Bone
 
MEJORES - Curso-HTML-+-CSS.pdf
MEJORES - Curso-HTML-+-CSS.pdfMEJORES - Curso-HTML-+-CSS.pdf
MEJORES - Curso-HTML-+-CSS.pdf
yanpier1
 
Curso-HTML--CSS.pdf
Curso-HTML--CSS.pdfCurso-HTML--CSS.pdf
Curso-HTML--CSS.pdf
GiovanniMelendez6
 
Css
CssCss
HTML y CSS
HTML y CSSHTML y CSS
HTML y CSS
Dinamiclerning
 
Introducción al desarrollo web frontend
Introducción al desarrollo web frontendIntroducción al desarrollo web frontend
Introducción al desarrollo web frontend
Max Kraszewski
 
CSS - Arquitectura Escalable y Modular
CSS - Arquitectura Escalable y ModularCSS - Arquitectura Escalable y Modular
CSS - Arquitectura Escalable y Modular
rodboc
 
Html actividades 1
Html actividades  1Html actividades  1
Html actividades 1
Lobo Solitario Mistico
 
Css reglas1
Css reglas1Css reglas1
Curso HTML y CSS, parte 1
Curso HTML y CSS, parte 1Curso HTML y CSS, parte 1
Curso HTML y CSS, parte 1
Sergio Nouvel Castro
 

Similar a Tema 9 - Estructura con css (20)

Programacion web
Programacion webProgramacion web
Programacion web
 
Modulo1parte2ver2 140505061829-phpapp02
Modulo1parte2ver2 140505061829-phpapp02Modulo1parte2ver2 140505061829-phpapp02
Modulo1parte2ver2 140505061829-phpapp02
 
Fundamentos de CSS
Fundamentos de CSSFundamentos de CSS
Fundamentos de CSS
 
Presentación CSS y HTML en Gummurcia
Presentación CSS y HTML en GummurciaPresentación CSS y HTML en Gummurcia
Presentación CSS y HTML en Gummurcia
 
Dispositivas CURSO HTML 5.pdf
Dispositivas CURSO HTML 5.pdfDispositivas CURSO HTML 5.pdf
Dispositivas CURSO HTML 5.pdf
 
Diseño de paginas con html1
Diseño de paginas con html1Diseño de paginas con html1
Diseño de paginas con html1
 
Introduccion a css
Introduccion a cssIntroduccion a css
Introduccion a css
 
HTML5 y CSS3 ¿Imprescindibles?
HTML5 y CSS3 ¿Imprescindibles?HTML5 y CSS3 ¿Imprescindibles?
HTML5 y CSS3 ¿Imprescindibles?
 
Clase 6 twig
Clase 6 twigClase 6 twig
Clase 6 twig
 
Introducción CSS
Introducción CSSIntroducción CSS
Introducción CSS
 
Luisa
LuisaLuisa
Luisa
 
MEJORES - Curso-HTML-+-CSS.pdf
MEJORES - Curso-HTML-+-CSS.pdfMEJORES - Curso-HTML-+-CSS.pdf
MEJORES - Curso-HTML-+-CSS.pdf
 
Curso-HTML--CSS.pdf
Curso-HTML--CSS.pdfCurso-HTML--CSS.pdf
Curso-HTML--CSS.pdf
 
Css
CssCss
Css
 
HTML y CSS
HTML y CSSHTML y CSS
HTML y CSS
 
Introducción al desarrollo web frontend
Introducción al desarrollo web frontendIntroducción al desarrollo web frontend
Introducción al desarrollo web frontend
 
CSS - Arquitectura Escalable y Modular
CSS - Arquitectura Escalable y ModularCSS - Arquitectura Escalable y Modular
CSS - Arquitectura Escalable y Modular
 
Html actividades 1
Html actividades  1Html actividades  1
Html actividades 1
 
Css reglas1
Css reglas1Css reglas1
Css reglas1
 
Curso HTML y CSS, parte 1
Curso HTML y CSS, parte 1Curso HTML y CSS, parte 1
Curso HTML y CSS, parte 1
 

Más de Pamela Rodriguez

Especificaciones del proyecto parcial
Especificaciones del proyecto parcialEspecificaciones del proyecto parcial
Especificaciones del proyecto parcial
Pamela Rodriguez
 
Tema 7 - Introducción a html con css
Tema 7 - Introducción a html con cssTema 7 - Introducción a html con css
Tema 7 - Introducción a html con css
Pamela Rodriguez
 
Tema 8 - Uso de la tipografía en web
Tema 8 - Uso de la tipografía en webTema 8 - Uso de la tipografía en web
Tema 8 - Uso de la tipografía en web
Pamela Rodriguez
 
Tema 6 - Formularios en html
Tema 6 - Formularios en htmlTema 6 - Formularios en html
Tema 6 - Formularios en html
Pamela Rodriguez
 
Tema 4 - Etiquetas y atributos en html
Tema 4 - Etiquetas y atributos en htmlTema 4 - Etiquetas y atributos en html
Tema 4 - Etiquetas y atributos en html
Pamela Rodriguez
 
Tema 5 - Tablas en html
Tema 5 - Tablas en htmlTema 5 - Tablas en html
Tema 5 - Tablas en html
Pamela Rodriguez
 
Tema 2 - Introducción a los proyectos web
Tema 2 - Introducción a los proyectos webTema 2 - Introducción a los proyectos web
Tema 2 - Introducción a los proyectos web
Pamela Rodriguez
 
Tema 1 - Introducción a la materia
Tema 1 - Introducción a la materiaTema 1 - Introducción a la materia
Tema 1 - Introducción a la materia
Pamela Rodriguez
 
Tema 3 - Introducción a HTML
Tema 3 - Introducción a HTMLTema 3 - Introducción a HTML
Tema 3 - Introducción a HTML
Pamela Rodriguez
 

Más de Pamela Rodriguez (9)

Especificaciones del proyecto parcial
Especificaciones del proyecto parcialEspecificaciones del proyecto parcial
Especificaciones del proyecto parcial
 
Tema 7 - Introducción a html con css
Tema 7 - Introducción a html con cssTema 7 - Introducción a html con css
Tema 7 - Introducción a html con css
 
Tema 8 - Uso de la tipografía en web
Tema 8 - Uso de la tipografía en webTema 8 - Uso de la tipografía en web
Tema 8 - Uso de la tipografía en web
 
Tema 6 - Formularios en html
Tema 6 - Formularios en htmlTema 6 - Formularios en html
Tema 6 - Formularios en html
 
Tema 4 - Etiquetas y atributos en html
Tema 4 - Etiquetas y atributos en htmlTema 4 - Etiquetas y atributos en html
Tema 4 - Etiquetas y atributos en html
 
Tema 5 - Tablas en html
Tema 5 - Tablas en htmlTema 5 - Tablas en html
Tema 5 - Tablas en html
 
Tema 2 - Introducción a los proyectos web
Tema 2 - Introducción a los proyectos webTema 2 - Introducción a los proyectos web
Tema 2 - Introducción a los proyectos web
 
Tema 1 - Introducción a la materia
Tema 1 - Introducción a la materiaTema 1 - Introducción a la materia
Tema 1 - Introducción a la materia
 
Tema 3 - Introducción a HTML
Tema 3 - Introducción a HTMLTema 3 - Introducción a HTML
Tema 3 - Introducción a HTML
 

Tema 9 - Estructura con css

  • 2. Reglas generales de CSS • Verificar que todas las llaves abiertas estén debidamente cerradas. • Nunca omitir puntos y comas. • Utilizar nombres representativos para todas las clases.
  • 3. Recordando terminología CSS 1 h1 { 3 font-size: 20px; } 2
  • 4. Recordando terminología CSS ¿Cuáles son las cinco maneras de manejar objetos CSS?
  • 5. El elemento <DIV> • Es el elemento más útil de HTML • Se emplea con fines estructurales • Plantea una sub-estructura en un documento HTML
  • 6. <!DOCTYPE html> <html lang="es"> <head> <link href="styles/style.css" type="text/css" rel="stylesheet" /> </head> <body> </body> </html>
  • 7. <body> <div id="container"> <div id="header"> </div> <div id="content"> </div> <div id="footer"> </div> </div> </body>
  • 8.
  • 12. <body> <div id="container"> <div id="header"> <h1>Titulo de la practica</h1> </div> <div id="content"> <p>...</p> </div> <div id="footer"> ... </div> </div> </body>
  • 13. El modelo de caja Documento HTML Elemento HTML Contenido
  • 14. El modelo de caja Documento HTML border Elemento HTML margin padding Contenido
  • 15. <body> <div id="container"> <div id="header"> <h1>Titulo de la practica</h1> </div> <div id="content"> <p>...</p> </div> <div id="footer"> ... </div> </div> </body>
  • 16. #container{ background-color: #CCCCCC; } #header{ background-color: #AAAAAA; } #content{ background-color: #336600; } #footer{ background-color: #6600FF; }
  • 17.
  • 18. #container{ background-color: #CCCCCC; border: 3px solid #444444; padding: 15px; }
  • 19.
  • 20. border: 3px solid #444444; Color Grosor Tipo de borde border-right: 3px solid #444444; border-left: 2px dotted #0000FF; border-bottom: 6px dashed #FF0000; border-top: 10px double #336600;
  • 21.
  • 22. padding: 15px; padding: 15px 4px; B, T R, L padding: 15px 0 10px 2px; T R B L padding-top: 15px; padding-right: 0; padding-bottom: 10px; padding-left: 2px;
  • 23. #container{ background-color: #CCCCCC; } #header{ background-color: #AAAAAA; } #content{ background-color: #336600; margin: 20px; } #footer{ background-color: #6600FF; }
  • 24. #container{ background-color: #CCCCCC; } #header{ background-color: #AAAAAA; } #content{ background-color: #336600; margin: 20px; } #footer{ background-color: #6600FF; }
  • 25.
  • 26. margin: 15px; margin: 15px 4px; B, T R, L margin: 15px 0 10px 2px; T R B L margin-top: 15px; margin-right: 0; margin-bottom: 10px; margin-left: 2px;