1. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
Seminario
HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
INTRODUCCIÓN A CSS
Facilitadora:
María Zeballos

2. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
¿QUÉ ES CSS?
CSS es un lenguaje de hojas de estilos, estándar
de la W3C (World Wide Web Consortium),
creado para controlar el aspecto o presentación
de los documentos electrónicos definidos con
HTML y XHTML como el color, tamaño y tipo de
letra de los párrafos de texto, la separación entre
titulares y párrafos, la tabulación con la que se
muestran los elementos de una lista, etc.

3. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
Ventajas de CSS
CSS permite la separación de los contenidos y su
presentación, tiene las siguientes ventajas:
• Obliga a crear documentos bien definidos y con
significado completo (también llamados “documentos
semánticos”).
• Mejora la accesibilidad del documento.
• Reduce la complejidad del mantenimiento.
• Estandariza el aspecto de su sitio web, ya que la
misma hoja puede ser usada para dar formato a
múltiples documentos HTML.
• Permite visualizar el mismo documento en infinidad
de dispositivos diferentes.

4. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
TRABAJANDO CON CSS EXTERNO
Aunque es posible incluir CSS en el mismo documento,
mediante la etiqueta <style>, e incluso en cada elemento
HTML, mediante el atributo style, esas no son las formas
recomendadas de aplicar CSS a un documento, por los
inconvenientes que se tiene a la hora de modificar el
estilo del documento, en el que se tienen que hacer
cambios a cada página o, aún más tedioso, a cada
elemento.
En este curso definiremos el estilo del documento desde
un archivo CSS externo, que puede reutilizarse para más
de un documento.

5. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
Ya sabemos que los documentos HTML y HTMAL5
tienen extensión .html, un archivo CSS tendrá
extensión .css y será enlazado al documento
mediante la etiqueta <link> o mediante la
etiqueta <style>.
La etiqueta link es la más utilizada.
TRABAJANDO CON CSS EXTERNO

6. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
TRABAJANDO CON CSS EXTERNO
Ejemplo de enlace al archivo estilos.css:
<link rel="stylesheet" type="text/css"
href="estilos.css" media="screen" />
<style type="text/css" media="screen">
@import ' estilos.css '; </style>
Recuerde que si usa html5
ya no tiene que indicar el tipo type="text/css”

7. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
TRABAJANDO CON CSS EXTERNO
Se pueden crear todos los archivos CSS que
sean necesarios, y cada documento HTML
puede enlazar tantos archivos CSS como
necesite.

8. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
MEDIOS CSS
CSS permite indicar diferentes reglas para diferentes
medios o dispositivos y define algunas propiedades
específicamente para determinados medios.
El medio se indica por medio del atributo media en la
etiqueta <link> o <style> que se utiliza para enlazar el
archivo css externo, como puede ver en las siguientes
líneas.
<link rel="stylesheet" type="text/css"
href="estilos.css" media="screen" />
<style type="text/css“ media="screen">
@import 'estilos.css'; </style>

9. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
MEDIOS CSS
<link rel="stylesheet" type="text/css" href="estilos.css" media="screen" />
Como valor del atributo media se puede utilizar “all”, para indicar
que el estilo se aplique a todos los medios.
Los medios más utilizados son:
Screen. Para definir el aspecto de la página en pantalla.
print. Para definir el aspecto de la página cuando se imprime.
handheld. Para definir el aspecto de la página cuando se visualiza
mediante un dispositivo móvil.
Además de estos medios, se tienen los siguientes: braille, tv,
projection.

10. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
Componentes de un estilo CSS
Una hoja de estilo (archivo .css) es una colección de reglas
de estilo, cuya creación es bastante simple. Una regla CSS
tiene dos partes: el selector y la declaración.
• Indica el elemento o elementos a los que se le
aplica la regla CSS. Debe tener en cuenta que
los selectores distinguen entre mayúsculas y
minúsculas. Más adelante se describe el uso
de selectores, ya que ellos presentan una
clasificación y se pueden combinar, para
obtener resultados avanzados.
El selector

11. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
Componentes de un estilo CSS
Una hoja de estilo (archivo .css) es una colección de reglas
de estilo, cuya creación es bastante simple. Una regla CSS
tiene dos partes: el selector y la declaración.
• Va entre llaves “{}” y especifica los estilos que se
aplicarán al elemento o elementos que indique
el selector. Cada estilo está indicado por una
propiedad, separada de su valor por medio de
dos puntos “ : ”. Una declaración puede definir
varios estilos diferentes para un mismo selector,
en este caso cada grupo propiedad:valor va
separado por un punto y coma “ ; ”.
La declaración

12. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
Ejemplo:
Componentes de un estilo CSS
Una hoja de estilo (archivo .css) es una colección de reglas
de estilo, cuya creación es bastante simple. Una regla CSS
tiene dos partes: el selector y la declaración.

13. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
Comentarios en CSS
En una hoja de estilo, además de las reglas
css, podemos incluir comentarios que
ayuden a estructurar el documento y que
faciliten su mantenimiento posterior. Los
comentarios van entre /* y */ y son
completamente ignorados por los
navegadores.
Ejemplo:
/* Este es un comentario en css */