Desarrollo CSS
¿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.
Tres formas de incluir el CSS a) 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>
<. DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 <!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>
<. DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 <!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>
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>
<. DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 <!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>
c) Incluir CSS en los elementos HTML <span style="border:solid 1px green;"></span>
<. DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 <!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>
¿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 <!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>
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:
Regla: cada uno de los estilos que componen una hoja de estilos CSS 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.
Ejercicio 1.- 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”
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 class="pie"> </body> </html>
Ejercicio CSS