Your SlideShare is downloading. ×
0
Introducción a css
Introducción a css
Introducción a css
Introducción a css
Introducción a css
Introducción a css
Introducción a css
Introducción a css
Introducción a css
Introducción a css
Introducción a css
Introducción a css
Introducción a css
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introducción a css

545

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
545
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 */

×