Desarrollo CSS
¿Qué es CSS?Hojas de Estilo en Cascada (Cascading Style Sheets):•   Mecanismo que describe cómo se va a mostrar un documen...
Tres formas de incluir el CSSa) Definir CSS en un archivo externo<link rel="stylesheet" href="imagen/estilo.css" type="tex...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd...
b) Incluir CSS en el mismo documento HTML     <style type="text/css">      p { color: black; font-family: Verdana; }     <...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd...
c) Incluir CSS en los elementos HTML<span style="border:solid 1px green;"></span>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd...
¿Cuál vamos a usar?a) Definir CSS en un archivo externo<link rel="stylesheet" href="estilo/estilo.css" type="text/css" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd...
Regla CSS•   CSS define una serie de términos que permiten describir cada una de las    partes que componen los estilos CS...
•   Regla: cada uno de los estilos que componen una hoja de estilos CSS. Cada regla    está compuesta de una parte de "sel...
Ejercicio1.- Crear una carpeta con el nombre de la empresa “nombreEmpresa”2.- Crear archivo html, con nombre “empresa_inic...
Ejercicio html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-    t...
Ejercicio CSS
Upcoming SlideShare
Loading in...5
×

05 desarrollocss (3)

745

Published on

http

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
745
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

05 desarrollocss (3)

  1. 1. Desarrollo CSS
  2. 2. ¿Qué es CSS?Hojas de Estilo en Cascada (Cascading Style Sheets):• Mecanismo que describe cómo se va a mostrar un documento en la pantalla, o• Cómo se va a imprimir,• Cómo va a ser pronunciada la información presente en ese documento a través de un dispositivo de lectura.Esta forma de descripción de estilos ofrece a los desarrolladores el control total sobre estilo y formato de sus documentos. * Es la separación de contenido XHTML y estilo visual (ó presentación) * Permite dar estilo a múltiples páginas web.
  3. 3. Tres formas de incluir el CSSa) Definir CSS en un archivo externo<link rel="stylesheet" href="imagen/estilo.css" type="text/css" /><style type="text/css"> @import url("estilo/estilo.css");</style>
  4. 4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Documento sin título</title> <link rel="stylesheet" href="estilo/estilo.css" type="text/css" /> </head> <body> </body></html>
  5. 5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Documento sin título</title> <style type="text/css"> @import url("estilo/estilo.css"); </style> </head> <body> </body></html>
  6. 6. b) Incluir CSS en el mismo documento HTML <style type="text/css"> p { color: black; font-family: Verdana; } </style>c) Incluir CSS en los elementos HTML<span style="border:solid 1px green;"></span>
  7. 7. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Documento sin título</title> <style type="text/css"> p { color: black; font-family: Verdana; } </style> </head> <body> </body></html>
  8. 8. c) Incluir CSS en los elementos HTML<span style="border:solid 1px green;"></span>
  9. 9. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Documento sin título</title> </head> <body> <p style="border:solid 1px green;">Párrafo con borde verde</p> </body></html>
  10. 10. ¿Cuál vamos a usar?a) Definir CSS en un archivo externo<link rel="stylesheet" href="estilo/estilo.css" type="text/css" />
  11. 11. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Documento sin título</title> <link rel="stylesheet" href="estilo/estilo.css" type="text/css" /> </head> <body> </body></html>
  12. 12. Regla CSS• CSS define una serie de términos que permiten describir cada una de las partes que componen los estilos CSS. El siguiente esquema muestra las partes que forman un estilo CSS muy básico:
  13. 13. • Regla: cada uno de los estilos que componen una hoja de estilos CSS. Cada regla está compuesta de una parte de "selectores", un símbolo de "llave de apertura" ({), otra parte denominada "declaración" y por último, un símbolo de "llave de cierre" (}).• Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS.• Declaración: especifica los estilos que se aplican a los elementos. Está compuesta por una o más propiedades CSS.• Propiedad: permite modificar el aspecto de una característica del elemento.• Valor: indica el nuevo valor de la característica modificada en el elemento.
  14. 14. Ejercicio1.- Crear una carpeta con el nombre de la empresa “nombreEmpresa”2.- Crear archivo html, con nombre “empresa_inicio.html”3.- Dentro de carpeta “nombreEmpresa”, crear otra carpeta con nombre “estilo”4.- Dentro de la carpeta estilo crear el archivo “estilo.css”5.- Dentro de la carpeta “estilo” crear la carpeta “images”
  15. 15. Ejercicio html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Documento sin título</title> <link rel="stylesheet" href="estilo/estilo.css" type="text/css" /> </head> <body> <div class="pagina"> <div class="encabezado"> </div> <div class="cuerpo"> </div> <div class="pie"> </div> </div> </body></html>
  16. 16. Ejercicio CSS
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×