CSS: webs con estilo

206 views
143 views

Published on

Presentación del curso de CSS impartido en NH Barcelona

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
206
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CSS: webs con estilo

  1. 1. @borjamulleras| www.md360.es | borja@md360.es
  2. 2. @borjamulleras| www.md360.es | borja@md360.esRedefiniendo el estilo de etiquetas HTMLHTML:<h1><font color="red">texto del elemento</font></h1>CSS:<HTML><HEAD>…<style type="text/css">h1 {color: red;}</style>…</HEAD><BODY>Este texto es de color negro.<h1>texto del elemento</h1></BODY></HTML>
  3. 3. @borjamulleras| www.md360.es | borja@md360.esRedefiniendo el estilo de etiquetas HTML<style type="text/css">body {font-family: Georgia, "Times New Roman”;color: blue;background-color: #d8da3d;}h1 {color: red;font-family: Helvetica, Geneva, Arial;}</style>
  4. 4. <HTML><HEAD><link rel="stylesheet" type="text/css" href="nombre-hoja-estilo.css">…</HEAD><BODY style=“font-family: Georgia;color: blue;background-color: #d8da3d; ”>Este texto es de color ?.<h1 style=“color: red;font-family: Helvetica, Geneva, Arial;”>texto del elemento</h1></BODY></HTML>@borjamulleras| www.md360.es | borja@md360.esUsando atributo STYLE en las etiquetasIndex.htm
  5. 5. <HTML><HEAD><link rel="stylesheet" type="text/css" href="nombre-hoja-estilo.css">…</HEAD><BODY>Este texto es de color ?.<h1>texto del elemento</h1></BODY></HTML>@borjamulleras| www.md360.es | borja@md360.esHoja de estilo externabody {font-family: Georgia, "Times New Roman”;color: blue;background-color: #d8da3d;}h1 {color: red;font-family: Helvetica, Geneva, Arial;}Nombre-hoja-estilo.cssIndex.htm
  6. 6. h1, h2, h3 {color: red;} es equivalente a h1 {color: red;}h2 {color: red;}h3 {color: red;}h1 {font-family: Georgia, "Times New Roman",Times, serif;color: red;background-color: #d8da3d;}@borjamulleras| www.md360.es | borja@md360.esNormas básicas
  7. 7. Retocar las etiquetas de HTML no siempre es solución.Las clases:.nombre { color: red; }<p class="nombre"> ... ... </p>y los identificadores (un sólo elemento):#nombre {font-size: 16px;font-weight: bold;}<p id="nombre"> ... ... </p>@borjamulleras| www.md360.es | borja@md360.esDefinimos clases o identificadores
  8. 8. Selecciona sólo párrafos que pertenecen a la clase ofertap.ofertas { color: red;}Selecciona todos los elementos que pertenecen a la clase oferta.ofertas { color: red;}Esto selecciona todo los elementos que tengan un id pieDePagina#pieDePagina { color: red; }Selecciona un elemento <p> si tiene el id pieDePaginap#pieDePagina { color: red; }@borjamulleras| www.md360.es | borja@md360.esDefinimos clases o identificadores
  9. 9. @borjamulleras| www.md360.es | borja@md360.es
  10. 10. @borjamulleras| www.md360.es | borja@md360.es
  11. 11. @borjamulleras| www.md360.es | borja@md360.es
  12. 12. @borjamulleras| www.md360.es | borja@md360.esEl modelo cajap {margin: 100px;margin-top: 5px;border-color: red;border-top-color: blue;border-style: solid;padding-left:20px;padding-top: 10px;padding-bottom: 100;width: 400px;height: 200px;color: green;font-size:40px;}
  13. 13. @borjamulleras| www.md360.es | borja@md360.esEl modelo cajap {margin: 100px;margin-top: 5px;border-color: red;border-top-color: blue;border-style: solid;padding-left:20px;padding-top: 10px;padding-bottom: 100;width: 400px;height: 200px;color: green;font-size:40px;}http://www.w3schools.com/cssref/default.asp
  14. 14. @borjamulleras| www.md360.es | borja@md360.esLas capas
  15. 15. @borjamulleras| www.md360.es | borja@md360.esLas capas#contenedor {width: 900px;height: 400px;} <html><head><title>Maquetando con estilos CSS</title><link href="estilos.css" rel="stylesheet" type="text/css"></head><body><div id="contenedor"></div></body></html>
  16. 16. @borjamulleras| www.md360.es | borja@md360.esLas capas#contenedor {width: 900px;height: 400px;}#cabecera {background-color: green;height:50px;padding:5px;}<html><head><title>Maquetando con estilos CSS</title><link href="estilos.css" rel="stylesheet" type="text/css"></head><body><div id="contenedor"><div id="cabecera“>Cabecera</div></div></body></html>
  17. 17. @borjamulleras| www.md360.es | borja@md360.esLas capas#contenedor {width: 900px;height: 400px;}#cabecera {background-color: green;height:50px;padding:5px;}#barra-lateral {background-color: orange;float: left;width:140px;height:100%;}<html><head><title>Maquetando con estilos CSS</title><link href="estilos.css" rel="stylesheet" type="text/css"></head><body><div id="contenedor"><div id="cabecera">Cabecera</div><div id="barra-lateral“>Barra lateral</div></div></body></html>
  18. 18. @borjamulleras| www.md360.es | borja@md360.esLas capas#contenedor {width: 900px;height: 400px;}#cabecera {background-color: green;height:50px;padding:5px;}#barra-lateral {background-color: orange;float: left;width:140px;height:100%;}#contenido {background-color: gray;float:left;width:740px;height:100%;}<html><head><title>Maquetando con estilos CSS</title><link href="estilos.css" rel="stylesheet" type="text/css"></head><body><div id="contenedor"><div id="cabecera">Cabecera</div><div id="barra-lateral“>Barra lateral</div><div id="contenido">Contenido principal</div></div></body></html>
  19. 19. @borjamulleras| www.md360.es | borja@md360.esLas capas…..#barra-lateral {background-color: orange;float: left;width:140px;height:100%;}#contenido {background-color: gray;float:left;width:740px;height:100%;}#pie {background-color: blue;clear: both;}<html><head><title>Maquetando con estilos CSS</title><link href="estilos.css" rel="stylesheet" type="text/css"></head><body><div id="contenedor"><div id="cabecera">Cabecera</div><div id="barra-lateral“>Barra lateral</div><div id="contenido">Contenido principal</div><div id=“pie">pie</div></div></body></html>
  20. 20. @borjamulleras| www.md360.es | borja@md360.es
  21. 21. @borjamulleras| www.md360.es | borja@md360.esFirebughttps://addons.mozilla.org/es/firefox/addon/firebug/
  22. 22. @borjamulleras| www.md360.es | borja@md360.esLas capasCLEAR: left | right | bothSe usa para evitar que otras capas floten alrededor.FLOAT: none | left | rightSe usa para forzar que las capas floten alrededor.
  23. 23. @borjamulleras| www.md360.es | borja@md360.esListas / enlaces / fondos / Textos / FuentesListas:http://www.w3schools.com/css/css_list.aspLinks:http://www.w3schools.com/css/css_link.aspFondos:http://www.w3schools.com/css/css_background.aspTextos:http://www.w3schools.com/css/css_text.aspFuentes:http://www.w3schools.com/css/css_font.asp
  24. 24. @borjamulleras| www.md360.es | borja@md360.esFormularioshttp://web.tursos.com/tutoriales/html-css/como-hacer-un-formulario-de-contacto-i-html-y-css

×