Introducción a css

22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS

SeminarioHTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS

INTRODUCCIÓN A CSS

Facilitadora:María Zeballos


¿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.


Ventajas de CSSCSS 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.


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.


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.




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”



Se pueden crear todos los archivos CSS que sean necesarios, y cada documento HTML puede enlazar tantos archivos CSS como necesite.


MEDIOS CSSCSS 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>


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.


Componentes de un estilo CSSUna 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



• 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


Ejemplo:



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

Documents

Introducción a css