5.11. Jugando con los selectores (1) ~ Introducción al Desarrollo Web

5.11. Jugando con los selectores (1)

mayo 11, 2018 Fernando López

Cualquier regla CSS comienza con un selector, por lo que saber utilizar los selectores es imprescindible para utilizar correctamente CSS.
En el siguiente ejercicio te proponemos que pongas a prueba tus conocimientos sobre los selectores.

ACTIVIDAD 11
A partir de la página web que se te proporciona, debes añadir los selectores a las reglas CSS para aplicar los estilos deseados y crear una página web que tenga el mismo aspecto que la siguiente imagen:

SOLUCIÓN



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ejercicio de selectores</title>
<style>
/* Todos los elementos de la pagina */
*
{
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
}

/* Todos los parrafos de la pagina */
p
{
  color: #555;
}


/* Todos los párrafos contenidos en #primero */
#primero p
{
  color: #369;
}

/* Todos los enlaces la pagina */
a
{
  color: #C30;
}

/* Los elementos <em> contenidos en #primero */
#primero em
{
  color: #0000BB;
  background-color: #FFFFCC;
}

/* Todos los elementos <em> con la clase "especial" en toda la pagina */
em.especial
{
  color: #FFFF00;
  background: #000000;
}

/* Todos los elementos <span> contenidos en la clase "normal" */
.normal span
{
  font-weight: bold;
}
</style>
</head>

<body>

<div id="primero">
<p>
<a href="http://publicacionesaltaria.com/es/tienda/112-html-css-curso-practico.html">HTML & CSS: Curso práctico avanzado</a>
</p>
<p>
Aunque los inicios de <a href="https://es.wikipedia.org/wiki/Internet">Internet</a> se remontan a los años sesenta, no ha sido hasta los años noventa cuando, gracias a la Web, se ha extendido su uso por todo el mundo. En pocos años, la Web ha evolucionado enormemente: se ha pasado de páginas sencillas, con pocas imágenes y contenidos estáticos que eran visitadas por unos pocos usuarios a <em>páginas complejas, con contenidos dinámicos que provienen de bases de datos y que son visitadas por miles de usuarios al mismo tiempo</em>.
</p>
</div>
<div id="segundo" class="normal">
<p>
Todas las páginas están internamente construidas con la misma tecnología, con el <em class="especial">Lenguaje de marcas de hipertexto</em> (<span>Hypertext Markup Language</span>, <a href="https://es.wikipedia.org/wiki/HTML">HTML</a>) y con las <em class="especial">Hojas de estilo en cascada</em> (<span>Cascading Style Sheets</span>, <a href="https://es.wikipedia.org/wiki/CSS">CSS</a>).
</p>
<p>
Este libro es <em>adecuado para cualquiera que tenga interés en aprender a desarrollar sus propias páginas web</em>. No son necesarios conocimientos previos para aprender con este libro, lo único que es necesario es saber utilizar un ordenador y saber navegar por la Web.
</p>
</div>
</body>

</html>

Introducción al Desarrollo Web

Este blog forma parte de un ejercicio propuesto por el Curso de Google Actívate "Introducción al desarrollo Web HTML y CSS"

Módulos

Buscar este blog

Denunciar abuso

BTemplates.com

viernes, 11 de mayo de 2018

5.11. Jugando con los selectores (1)

0 comentarios:

Publicar un comentario

Artículos Populares

Módulos del curso

Archivo del Blog