Comprensión fundamental CSS

Has cubierto mucho en este módulo, así que debes sentirte bien de haber llegado al final! El paso final antes de seguir adelante es intentar la evaluación para el modulo - esto involucra una serie de ejercicios relacionados que deben ser completados a fin de crear el diseño final - una tarjeta de negocios/tarjeta de jugador/perfil de medio social.

Punto de inicio

Para iniciar esta evaluación, debes:

• Ir y tomar el archivo HTML para el ejercicio, y el archivo de imagen asociada, y salvarlos en un nuevo directorio en tu computadora local. Si quieres usar tu propio archivo de imagen y llenar con tu propio nombre, eres bienvenido a hacerlo — solo asegúrate de que la imagen sea cuadrada.
• Toma el archivo de texto recursos CSS — esto contiene un set de selectores crudos y un conjunto de reglas que necesitaras estudiar y combinar para responder parte de esta evaluación.

Resumen del proyecto

Se te ha proporcionado un HTML crudo y una imagen, y necesitas escribir el CSS necesario para dar estilo dentro de una pequeña carta de negocios, la cual tal vez puede funcionar como tarjeta de jugador o perfil de medio social. Las secciones siguientes describen lo que necesitas hacer.

Configuración básica:

• Primero que nada, crea un archivo nuevo en el mismo directorio que tus archivos de imagen y HTML. Nómbralos de una forma realmente imaginativa como stilos.css.
• Enlaza tu archivo CSS a tu archivo HTML por medio de un elemento <link>.
• Los primeros dos conjuntos de reglas en el archivo de recursos CSS son tuyos, GRATIS! Después de que hayas terminado de regocijarte en tu buena fortuna, copia y pégalos dentro de la sección superior de tu nuevo archivo CSS. Úsalos como prueba para asegurarte de que tu CSS se aplica  correctamente a tu HTML.
• Por encima de las dos reglas, añade un comentario CSS con un texto dentro de él para indicar que se trata de un conjunto de estilos generales de la página en general. "Estilos generales de página". También añade tres comentarios más en la parte inferior del archivo CSS para indicar estilos específicos para la configuración del contenedor de la tarjeta, estilos específicos para el encabezado y pie de página, y estilos específicos para el contenido principal de la carta de negocios. De ahora en adelante, los estilos subsecuentes añadidos a la hoja de estilos deben ser organizados en un lugar apropiado.

Teniendo cuidado de los selectores y conjuntos de reglas proporcionados:

• Lo siguiente, nos gustaría que echaras un vistazo a los cuatro selectores,  y calcules el peso especifico de cada uno. Anótalos donde puedan ser encontrados más adelante, como en un comentario  en la sección superior de tu CSS.
• Ahora es tiempo de colocar el selector correcto en el conjunto de reglas correcto! Tienes cuatro selectores y conjunto de reglas para combinar en tus recursos CSS. Hazlo ahora, y añádelos a tu archivo CSS. Necesitas:
  • Darle al contenedor principal de la carta un acho/alto fijo, color de fondo solido, borde, y border-radius (esquinas redondeadas!), entre otras cosas.
  • Darle al encabezado un gradiente de fondo que va desde más oscuro a más claro, a demás esquinas redondeadas que encajen dentro de las esquinas redondeadas del contenedor principal de la carta.
  • Darle al pie de página un gradiente de fondo que va desde más claro a más oscuro, a demás esquinas redondeadas que encajen dentro de las esquinas redondeadas del contenedor principal de la carta.
  • Flotar la imagen a la derecha de manera que se pegue a la mano derecha del contenido principal de la carta de negocios, y darle un max-height (altura máxima) de100% (un truco ingenioso que asegura que crezca/encoja para permanecer de la misma altura que su contenedor padre, independientemente de la altura que tome.)
• Estar atento! Hay dos errores en los conjuntos de reglas proporcionados. Usando cualquier técnica que conozcas, encuéntralos y arréglalos antes de continuar.

Nuevo conjunto de reglas que necesitas escribir:

• Escribe un conjunto de reglas que se dirija a ambas el encabezado de la tarjeta, y el pie de la tarjeta, dándoles a las dos una altura total de 50px, la cual incluya altura de contenido 30px y padding 10px en la parte superior e inferior. Pero expresado en ems.
• El margen predeterminado aplicado a los elementos <h2> y <p> por el navegador va a interferir con nuestro diseño, así que escribe una regla que dirija todos estos elementos y fija su margen a 0.
• Para evitar que la imagen se derrame por fuera del contenido principal de la tarjeta de negocios (el elemento <article>), necesitamos darle una altura especifica. Fija la altura del elemento <article> a 120px, expresado en ems. También dale un color de fondo negro semi-transparente, resultando en una ligera sombra más oscura que permite al fondo de color rojo brillar un poco también.
• Escribe un conjunto de reglas que den al <h2> un efectivo tamaño de fuente de 20px (pero expresado en ems) y una apropiada altura de línea para ubicarla en el centro de la caja contenedora del encabezado. Recuerda de lo antes expuesto que la altura de la caja contenedora debe ser de 30px — esto te da todos los números necesarios para calcular la altura de línea.
• Escribe un conjunto de reglas que le den a <p> dentro del pie de página un efectivo tamaño de fuente de 15px (pero expresado en ems) y una apropiada altura de línea para ubicarla en el centro de la caja contenedora del encabezado. Recuerda de lo antes expuesto que la altura de la caja contenedora debe ser de 30px — esto te da todos los números necesarios para calcular la altura de línea .
• Como ultimo pequeño toque, dale al párrafo dentro del <article> un valor de padding apropiado de manera que su lado izquierdo se alinee con el <h2> y párrafo del pie de página, y fija su color para que sea bastante clara, así será fácil de leer.

Otras cosas para pensar:

• Tendrás una clasificación especial si escribes tu CSS  para una máxima legibilidad, con una declaración separada en cada línea.
• Debes incluir .card al inicio de la cadena del selector en todas tus reglas, de manera que estas reglas no interfieran con el estilo de ningún otro elemento si la tarjeta de negocios fuera puesta en una página con una carga de otro contenido.

Pistas y sugerencias

• No necesitas editar el HTML de ninguna forma, excepto para aplicar el CSS a tu HTML.
• Cuando trates de trabajar el valor em necesitas representar una cierta longitud de pixel, piensa a cerca de que tamaño de fuente base tiene el elemento raíz (<html>), y por lo que necesita ser multiplicado para obtener el valor deseado. Lo que te dará tu valor em, al menos en un caso simple como este.

Ejemplo

La siguiente captura de pantalla muestra un ejemplo de a lo que debería parecerse el diseño final terminado:

Evaluación

Si estas siguiendo esta evaluación como parte de un curso organizado, deberías ser capaz de dar tu trabajo a tu profesor/mentor para el marcaje. Si estas auto-aprendiendo, entonces puedes obtener tu marcaje guía muy fácilmente preguntando en la lista de correo dev-mdc, o en el canal IRC #mdn en Mozilla IRC. Intenta el ejercicio primero — no se gana nada haciendo trampa!