Módulo 1 / 2ª parte

CSS: conceptos básicos

Los objetivos de este módulo son:

• Aprender los conceptos básicos de CSS.
• Ser consciente de la importancia de separar el contenido y la estructura de la presentación de una página web.
• Aprender los selectores básicos de CSS.
• Aprender a cambiar características básicas de una página web, como el color del texto o el color de fondo de la página.
• Aprender a utilizar los selectores avanzados de CSS.
• Conocer las novedades de CSS3 respecto al uso de los selectores.

1.1- CSS: conceptos básicos

1.2- CSS: cómo se usa en HTML (parte 1)

Práctica 10 con NotePad++:

1.3- CSS: cómo se usa en HTML (parte 2)

Práctica 11 con NotePad++:

1.4- CSS: cómo se usa en HTML (parte 3)

Prácticas 12 con Notepad++:

1.5- ¿Quién es el padre del CSS?

Håkon Wium Lie

1.6- Cómo indicar el juego de caracteres en una hoja de estilo

La regla @charset




El uso de la regla @charset debe cumplir lo siguiente:

• La regla @charset debe ser lo primero que se indique en una hoja de estilo, no puede existir ningún carácter previo, ni siquiera comentarios.

• Si se definen varias reglas @charset, sólo la primera será utilizada.

• No se debe emplear cuando la hoja de estilo esté integrada (embebida) en la propia página web con la etiqueta <style>. Sólo se debe emplear cuando la hoja de estilo está vinculada de forma externa.

@charset "UTF-8";
@charset "iso-8859-15";

Por ejemplo, al principio de una hoja de estilo en cascada se puede escribir:

O también:

En el ejemplo anterior se indica el juego de caracteres ISO-8859-15 (Latin-9), que es similar a ISO-8859-1 pero con la diferencia importante de que incluye el símbolo del euro (€).

1.7- CSS: selectores básicos (1)

Selectores de CSS, como el selector de tipo (elemento o etiqueta), el selector de clase y el selector de identificador.

1.8- CSS: selectores básicos (2)

Selectores de CSS: el selector universal (*) y las pseudoclases de estado (link, visited, hover, active, focus).

1.9- Jugando con los selectores (1)

Práctica 13 con NotePad++:

1.10- Jugando con los selectores (2)

Práctica 14 con NotePad++:

1.11- Jugando con los selectores (3)

Práctica 15 con NotePad++:

1.12- CSS: colores

Method Action / Colección de herramientas, juegos y artículos para aprender diseño.

1.13- CSS: selectores avanzados

Algunos selectores avanzados, como descendientes directos, 
elementos contiguos, :first-child, :first-letter, :first-line 
valores de atributos, :lang, :after, :before y content

1.14- CSS: selectores CSS3

Nuevos selectores que incorpora CSS3: :last-child, :nth-child(n), :nth-last-child(n), :first-of-type, :last-of-type, :nth-of-type(n), :nth-last-of-type(n) y ~.

1.15- Jugando con los selectores avanzados (1)

Cualquier regla CSS comienza con un selector, saber utilizar estos selectores es imprescindible para utilizar correctamente CSS.

Práctica 16 con NotePad++:

1.16- Jugando con los selectores avanzados (2)

Práctica 17 con NotePad++: