EXAMEN MÓDULO 1/5

1. En CSS, ¿qué pseudo clase se emplea para definir una propiedad cuando un elemento recibe el foco?

    :focus

2. En CSS, para indicar el juego de caracteres en una hoja de estilo se emplea:

    @charset

3. ¿Qué atributo de HTML se emplea para definir un estilo en línea?

    style

4. En CSS, ¿cómo se selecciona la primera letra de un párrafo?

    p:first-letter

5. En CSS, la expresión ".elemento" es un selector:

    De clase.

6. ¿Qué código hexadecimal equivale al color rgb (0, 255, 255) en CSS?

    #00FFFF

7. En CSS, el selector "h1, p" selecciona:

    Selecciona todos los h1 y todos los p.

8. En CSS, ¿cómo se escribe un selector para que una regla se aplique a todo el texto en negrita que se encuentre dentro de una lista no ordenada?

    ul b

9. ¿Cuál de los siguientes no es un código válido de color en CSS?

    rgb (100, 200, 300)

10. En CSS, para definir el color del margen de un elemento se emplea la propiedad:

    Las anteriores respuestas no son correctas (border-color, margin-color, padding-color).

CSS: Selectores CSS3

• :last-child. Destaca el último elemento de una lista.
• :nth-child (n). Selecciona un elemento empezando desde el principio de la lista.
• :nth-last-child (n). Selecciona un elemento empezando desde el final de la lista.

Los siguientes selectores son parecidos a estos primeros, pero tienen una diferencia:

• :first-of-type
• :last-of-type
• :nth-of-type
• :nth-last-of-type

Estos seleccionan un elemento entre todos los que son del mismo tipo y que ocupe la posición indicada.

• ~. Aplica el estilo a todos los elementos que sean iguales al elemento anterior.

CSS: Selectores avanzados

• Símbolo mayor que (>). Permite seleccionar los descendientes directos.
• Símbolo más (+). Aplica estilos a ciertos elementos dependiendo de si tienen otro elemento junto a ellos o no (sólo a los inmediatamente contiguos).
• :first-child. Destaca el primer elemento de una lista.
• :first-letter. Destaca la primera letra del texto del elemento seleccionado.
• :first-line. Destaca la primera línea del texto del elemento seleccionado.

Atributos propios de ciertas etiquetas para definir los estilos

• Si se especifica entre corchetes ([ ]) el nombre de un atributo, los estilos se aplicarán a todos los elementos que tengan ese atributo, no importa cuál sea su valor.

También se puede especificar más igualando el atributo a una cadena de texto.

IMPORTANTE La comparación distingue mayúsculas y minúsculas.

Si en la cadena que se va a especificar aparecen caracteres no alfanuméricos, se necesita entrecomillarla. 

• Para seleccionar elementos cuyo atributo empiece por una palabra, se añade la barra vertical (|) precediendo al símbolo igual (=). El valor del atributo del elemento debe ser la palabra completa o seguida de un guión.
• Mediante la tilde de la eñe ~ (en la tecla 4 para teclados con distribución en español, o Alt+126 en el teclado numérico), se puede especificar que el atributo contenga una palabra.

Otros selectores

• :lang. Destaca palabras o textos en otros idiomas. Se debe escribir entre paréntesis el código del idioma. Selecciona todas las etiquetas cuyo valor del atributo lang coincida con la especificada entre paréntesis.
• :content. Incluye contenido antes o después de la etiqueta seleccionada mediante :before y :after.

CSS: Colores

Para representar colores en HTML y CSS se emplea el método RGB.

La descripción RGB de un color hace referencia a la composición del color según la intensidad de los colores primarios con que se forma: rojo, verde y azul (Red Green Blue). Es un modelo con el que es posible representar un color mediante la mezcla por adición de los tres colores luz primarios.

El modelo RGB no define por sí mismo lo que significa exactamente rojo, verde o azul, por lo que los mismos valores RGB pueden mostrar colores notablemente diferentes en distintos dispositivos que usen este modelo de color.

Los valores de cada canal, rojo, verde y azul, se pueden expresar de tres formas distintas:

- Mediante un valor decimal entre 0 y 255.
- Mediante un valor porcentual entre 0 y 100.
- Mediante un valor hexadecimal entre 00 y FF, que equivale a 0 y 255 en decimal. Esta forma es la más aconsejable. Los valores se especifican tras el símbolo almohadilla (#).

Los colores se pueden aplicar a las distintas partes del modelo de caja:

• Fuente o texto (color)
• Fondo (background-color)
• Borde (border-color)

CSS: Selectores básicos

Existen tres selectores básicos fundamentales:

• Tipo⟶ También es conocido como selector de elemento o selector de etiqueta. Hace referencia a todos los elementos a etiquetas de un mismo tipo.
• Clase (.)⟶ El atributo class es un atributo global, común a todas las etiquetas HTML, y permite especificar las clases que se aplicarán a un determinado elemento. En CSS, los nombres de las clases vienen precedidos por un punto (.); es imprescindible incluir este carácter en CSS y no en el atributo class de las etiquetas en HTML, un error muy común en los primeros desarrollos de cualquier persona.
• Identificador (#).⟶ El carácter inicial en el código CSS es #, en lugar del punto, y se aplica a aquellas etiquetas cuyo atributo id coincida con el texto tras la #.

También es posible utilizar la combinación de selectores para seleccionar etiquetas anidadas. Para anidar selectores, se especifican uno tras otro separados por espacios en blanco, siempre empezando por el elemento con menor nivel de anidamiento en el documento HTML.

Para aplicar el mismo estilo a diferentes reglas no es necesario repetir código, se puede separar las reglas por comas y especificar el estilo una sola vez.

Otros selectores:

• Universal (*). Cuando se incluye en una regla, selecciona todos los elementos. Es difícil tenerlo bajo control y se pueden aplicar estilos sin darse cuenta.
• Con el carácter ":"

- :link⟶ Sólo es aplicable a enlaces. Modifica el estilo por defecto de aquellos hipervínculos no visitados a los que se aplique la regla.

- :visited⟶ Se aplica a los hipervínculos visitados.

- :hover⟶ Modifica el estilo cuando el puntero del ratón está sobre un elemento al que se le aplica la regla. Es posible utilizarlo en todos los elementos, no solo en los hipervínculos. En caso de enlaces, es muy importante declarar :hover después de :link y :visited, en caso de que existan, para que :hover funcione correctamente.

- :active⟶ Se aplica a enlaces que están siendo pulsados. Al pulsar se activa el estilo definido por la regla de CSS, y al dejar de pulsar se deja de aplicar la regla. Es necesario declarar :active después de :hover para que tenga efecto.

- :focus⟶ Destaca el elemento que está activo o que tiene el foco en un formulario. 

CSS: Cómo se usa en HTML

El acoplamiento informático es un factor que indica el nivel de dependencia entra las unidades de software de un sistema informático; dos funciones son absolutamente independientes entre sí cuando una puede hacer su trabajo completamente sin recurrir a la otra. Lo mejor sería un desacoplamiento total.

Cuando usamos CSS para definir la presentación de una página web escrita en HTML, se crea un acoplamiento entre HTML y CSS.

En HTML se puede indicar que queremos aplicar unas reglas CSS de tres formas:

• Atributo style. Es la peor opción ya que lleva aparejado un acoplamiento máximo entre HTML y CSS, ya que hay que copiar el estilo CSS en cada elemento (párrafos, encabezados...).
• Etiqueta <style>. Reduce un poco el acoplamiento que existe entre HTML y CSS. Es mucho mejor que usar el atributo style, pero no es la mejor solución, porque el código CSS sigue estando en el mismo fichero que el código HTML.
• Etiqueta <link>. Reduce el acoplamiento que existe entre HTML y CSS al máximo, ya que el código HTML y CSS no se encuentran en el mismo fichero, sino que se almacenan en ficheros distintos. Se debe escribir en el <head> de la página web. Debe llevar el atributo href="" en el que se indica la ruta al fichero que contiene la hoja de estilo y el atributo rel="stylesheet" que indica que es una hoja de estilo.

El nuevo fichero se debe guardar con la extensión .css

Si en la página web se indica el juego de caracteres, no es necesario volver a indicarlos en la hoja de estilo. Sin embargo, si se combinan páginas web y hojas de estilo con distintos juegos de caracteres, se debe indicar la codificación empleada en la hoja de estilo.

La regla @charset

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

• 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.
• Sólo se debe emplear cuando la hoja de estilo está vinculada de forma externa.
• El valor de juego de caracteres se debe indicar entrecomillado.

CSS: Conceptos básicos

Para lograr que las páginas web tengan la presentación visual que queramos, debemos emplear CSS. Es un lenguaje muy sencillo que se compone de reglas. Cada regla está formada por uno o más selectores y una declaración formada por un bloque de estilos que define los estilos a aplicar para los elementos del documento que cumplan con el selector. Cada declaración de estilos se define entre llaves, y está formada por parejas propiedad-valor.