MAESTRÍA EN MEDIOS INTERACTIVOSCurso Propedéutico

2010

INTRODUCCIÓN A CSS

06

CONTENIDO

• Qué es CSS

• Beneficios

• Sintaxis básica

• Cómo aplicar CSS a documentos HTML

• Las reglas de las reglas

• El modelo de caja

¿QUÉ ES CSS?

• CSS (Cascading Style Sheets) es el estándar de la W3C para la definición de la capa presentación de documentos HTML.

BENEFICIOS DE CSS

• Mejor control del diseño (color, tipografía, layout, imágenes)

• Menos trabajo!!!

• Documentos HTML menos extensos

• Descargas más rápidas en navegadores

• Mayor accesabilidad

• Mayor compatibilidad con navegadores

BENEFICIOS DE CSS

• Peeeero..., esto no es CSS:

SINTAXIS CSS• La sintaxis básica de CSS es definida por una regla. Una regla CSS consiste en un

selector y una o más declaraciones. Cada declaración consta de una propiedad y un valor.

• Cada declaración siempre termina con ;. El conjunto de declaraciones está rodeado por signos { y }. La propiedad y valor se separa por :

selector{propiedad:valor;}

Elemento HTML

declaraciónregla

ejemplo: div{border:solid;}

SINTAXIS CSS

selector{propiedad1:valor; propiedad2:valor; propiedad3:valor;}

selector

declaracionesregla

ejemplo: div{border:solid; background-color:#000; width:auto;}

SINTAXIS CSS

selector{propiedad1:valor; propiedad2:valor; propiedad3:valor;}

selector

declaracionesregla

• Lo mismo, pero más legible... (los espacios en blanco no se interpretan como código)

SINTAXIS CSS

selector{

propiedad1: valor; propiedad2: valor; propiedad3: valor;}

selector

declaracionesregla

• Lo mismo, pero mejor no lo hagan..., no hay que abusar!

SINTAXIS CSS

/* Es buena práctica hacer comentarios */selector{propiedad1:valor; propiedad2:valor; propiedad3:valor;}

selector

declaracionesregla

• Lo mismo, pero más legible y además combate el Alzheimer...

comentario

CÓMO APLICAR CSS A HTMLExisten tres formas de aplicar CSS a documentos HTML:

• Estilo externo: Consiste en un documento independiente con una extensión .css. El archivo CSS puede ser aplicado a uno o más documentos HTML. Es el método más recomendado por W3C.

• Estilo interno: La definición de reglas CSS se realiza en el mismo documento HTML. Las reglas sólo aplican en el documento en el que están definidas. Es útil para páginas sencillas, no para un sitio completo.

• Estilo en línea: Es posible definir estilos aplicando el atributo style en los elementos HTML. Solo aplican en el elemento específico. No es recomendable su uso. Sólo no lo hagan !!!

SINTAXIS ESTILO EXTERNO

Para aplicar una hoja de estilos CSS (archivo .css) a un documento HTML debe crearse un elemento link dentro del elemento head:

<link href="miestilo.css" rel="stylesheet" type="text/css" />

elemento vacío

atributo hrefDefine la ruta al archivo .css

relación del enlace tipo de enlace

Buenas prácticas: Crear una carpeta “css” para hojas de estilo. El atributo href sería: href="css/miestilo.css"Definir estilos específicos de acuerdo al dispositivo de salida con el atributo media. Es posible definir screen, print, handheld entre otros.

SINTAXIS ESTILO INTERNO

Para aplicar estilos CSS a un documento HTML debe crearse un elemento style dentro del elemento head:

<style type="text/css">/* estilos aqui */

</style>

elemento

SINTAXIS ESTILO EN LÍNEA

Para aplicar estilo CSS a un elemento HTML debe crearse un atributo style dentro del elemento específico:

p, div, etc...

<elemento style="propiedad1:valor; propiedad2:valor;">

atributo style

Buenas prácticas: Insisto, no lo hagan, sólo no lo hagan

TIPOS DE SELECTORESCSS permite definir varios tipos de selectores:

• Todos los elementos o todos los elementos dentro de un elemento específico• Elemento HTML• Elemento con atributo class• Elemento con atributo id• Elemento anidado en otro elemento• Elemento hijo directo de otro elemento• Elemento precedido de otro elemento específico• Elementos con el mismo atributo class• Elementos con el mismo atributo id• Elemento con un atributo específico• Elemento con un atributo y valor específico• Pseudo-selectores y pseudo-clases

SELECTORES ELEMENTO

Cualquier elemento HTML puede ser definido como selector, siempre y cuando sus declaraciones tengan propiedades válidas para ese elemento.

body{propiedad:valor;}

p{propiedad:valor;}

a{propiedad:valor;}

SELECTORES ELEMENTO

Se pueden agrupar varios o todos los elementos en una misma definición de regla, siempre y cuando los elementos coincidan en la validez de las declaraciones.

body, p, a{propiedad:valor;}

*{propiedad:valor;}todos los elementos

grupo de elementos

SELECTORES ELEMENTO

Es posible definir mayor grado de precisión en la relación de elementos

div *{propiedad:valor;}

p > span{propiedad:valor;}

todos los elementos span dentro de un elemento ptodos los elementos a dentro de un elemento div

Todos los elementos dentro del elemento específico

p *{propiedad:valor;}

div > a{propiedad:valor;}

SELECTORES ELEMENTO

Es posible definir mayor grado de precisión en la relación de elementos

div + span{propiedad:valor;}

todos los elementos a con atributo href con valor " index.html "

Todos los elementos span precedidos del elemento div

a[href="index.html"]{propiedad:valor;}

SELECTORES CLASS

No siempre es deseable que todos los elementos de un documento HTML tengan la misma apariencia. Para eso Dios creó las clases.Recordando, una clase es un nombre que se le asigna a un conjunto de elementos HTML (del mismo tipo o no) por medio del atributo class.Gracias a las clases es posible asignar propiedades a un cierto grupo de elementos del mismo tipo, es decir, de la misma clase.

SELECTORES CLASS

CSS define a las clases con el signo .

p.left{propiedad:valor;}

Todos los elementos div con clase top

div.top{propiedad:valor;}

Todos los elementos p con clase left

Todos elementos con clase blue,los elementos pueden ser div, span, body, etc.

.blue{propiedad:valor;}

se omite el tipo de elemento

SELECTORES ID

No todos los elementos pueden agruparse, siempre existirán elementos únicos y exclusivos.Para eso Dios creó los id.Recordando, un identificador es un nombre que se le asigna a un elemento HTML específico por medio del atributo id. Este id debe ser único en toda el documento.Gracias a los identificadores es posible asignar propiedades a un elemento en particular.

PSEUDOCLASES Y PESUDOELEMENTOS

Existen dos tipos especiales de selectores, llamados pseudoselectores:Las pseudoclases son un tipo especial de clase definidas por CSS, los más comunes son los aplicados a elementos a y a elementos de formulario.CSS define a las pseudoclases por el signo :

Los pseudoelementos son un tipo especial de clase que describe elementos particulares del texto.CSS define a los pseudoelementos por el signo :

PSEUDOCLASES Y PESUDOELEMENTOS

Las pseudoclases para elementos a son:

:link :visited:hover:active

Enlace que no ha sido visitadoEnlace ya visitadoMovimiento del mouse sobre el enlaceEnlace activo, click del mouse

No olvidar el orden de declaración, LoVe, HA!

PSEUDOCLASES Y PESUDOELEMENTOS

/* definir las declaraciones comunes */a{propiedad:valor;} /* definir pseudoclases */a:link {propiedad:valor;}a:visited {propiedad:valor;}a:hover {propiedad:valor;}a:active {propiedad:valor;}

PSEUDOCLASES Y PESUDOELEMENTOS

Los pseudoelementos para texto son:

:first-line :first-letter:before:after:first-child

Primera línea de textoPrimer caracter del textodefine contenido antes del textodefine contenido después del textodefine estilo para el primer elemento hijo

PSEUDOCLASES Y PESUDOELEMENTOS

/* definir las declaraciones comunes */p{propiedad:valor;} /* definir pseudoclases */p:first-letter {propiedad:valor;}p:first-line {propiedad:valor;}

LAS REGLAS DE LAS REGLAS

Las hojas de estilo en cascada deben su nombre a que pueden usarse unas sobre otras para sumar reglas y aplicarlas todas a un mismo documento o elemento. Sin embargo, esto puede llevar a un conflicto existencial:

Si hay dos reglas para un mismo selector o documento...¿Cuál de ellas debe ser interpretada?

Para resolver esta encrucijada, CSS tiene reglas de oro que imperan en todas las reglas:

herencia • cascada • especificidad • orden de las reglas • modelo de cajaEstos conceptos son de suma importancia, sin embargo su comprensión no es muy clara al iniciar el aprendizaje de CSS. La práctica y los errores permiten entender y valorar estos principios.

MODELO DE CAJA

Todos los elementos HTML pueden ser interpretados en CSS como una “caja”, gracias a las propiedades de este modelo es posible definir layouts para maquetar los documentos HTML

área visible

margin

padding

bord

er

width

heig

ht

elemento HTML

07. INTRODUCCIÓN A JS

Siguiente sesión: