Scribd
Cargar
161 vistas10 páginas

Taller CSS

Este documento presenta 8 ejercicios de CSS básicos. Los estudiantes deben completar cada ejercicio creando archivos HTML y CSS por separado para aplicar reglas CSS como selectores, posicionamiento y estilos a elementos en la página. El objetivo es que la página resultante coincida visualmente con las imágenes de ejemplo proporcionadas para cada ejercicio.

Cargado por

laura romero
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
161 vistas10 páginas

Taller CSS

Este documento presenta 8 ejercicios de CSS básicos. Los estudiantes deben completar cada ejercicio creando archivos HTML y CSS por separado para aplicar reglas CSS como selectores, posicionamiento y estilos a elementos en la página. El objetivo es que la página resultante coincida visualmente con las imágenes de ejemplo proporcionadas para cada ejercicio.

Cargado por

laura romero
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 10

TALLER BASICO CSS

En los siguientes ejercicios propuestos se pondrá en práctica reglas básicas de CSS, recuerde por cada
ejercicio crear una carpeta que contenga el archivo css y archivo html, en una carpeta general recopile el
desarrollo de todos los ejercicios y envíela por plataforma.

Ejercicio 1
A partir del código HTML y CSS que se muestra, añadir los selectores CSS que faltan para aplicar los estilos
deseados. Cada regla CSS incluye un comentario en el que se explica los elementos a los que debe aplicarse:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD


/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio de selectores</title>

<style type="text/css">

/* Todos los elementos de la pagina */


{ font: 1em/1.3 Arial, Helvetica, sans-serif; }

/* Todos los parrafos de la pagina */


{ color: #555; }

/* Todos los párrafos contenidos en #primero */


{ color: #336699; }

/* Todos los enlaces la pagina */


{ color: #CC3300; }

/* Los elementos "em" contenidos en #primero */


{ background: #FFFFCC; padding: .1em; }

/* Todos los elementos "em" de clase "especial" en toda la pagina */


{ background: #FFCC99; border: 1px solid #FF9900; padding: .1em; }

/* Elementos "span" contenidos en .normal */


{ font-weight: bold; }

</style>
</head>

<body>
Taller Básico Css

<div id="primero">
<p>Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing elit</a>. Praesent blandit nibh at felis
. Sed nec diam in dolor vestibulum aliquet. Duis ullamcorper, nisi non facilisis molestie, <em>lorem sem ali
quam nulla</em>, id lacinia velit mi vestibulum enim.</p>

</div>

<div class="normal">
<p>Phasellus eu velit sed lorem sodales egestas. Ut feugiat. <span><a href="#">Donec porttitor</a>, magn
a eu varius luctus,</span> metus massa tristique massa, in imperdiet est velit vel magna. Phasellus erat. D
uis risus. <a href="#">Maecenas dictum</a>, nibh vitae pellentesque auctor, tellus velit consectetuer tellu
s, tempor pretium felis tellus at metus.</p>

<p>Cum sociis natoque <em class="especial">penatibus et magnis</em> dis parturient montes, nascetur ri
diculus mus. Proin aliquam convallis ante. Pellentesque habitant morbi tristique senectus et netus et males
uada fames ac turpis egestas. Nunc aliquet. Sed eu metus. Duis justo.</p>

<p>Donec facilisis blandit velit. Vestibulum nisi. Proin volutpat, <em class="especial">enim id iaculis congu
e</em>, orci justo ultrices tortor, <a href="#">quis lacinia eros libero in eros</a>. Sed malesuada dui vel q
uam. Integer at eros.</p>
</div>
</body>
</html>

Ejercicio 2
A partir del código HTML proporcionado, añadir las reglas CSS necesarias para que la página resultante
tenga el mismo aspecto que el de la siguiente imagen:

Página 2 de 10
Taller Básico Css

A continuación se muestra el código HTML de la página sin estilos:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD


/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Ejercicio de selectores</title>

</head>

<body>

<h1 id="titulo">Lorem ipsum dolor sit amet</h1>

<p>Nulla pretium. Sed tempus nunc vitae neque. <strong>Suspendisse gravida</strong>, metus a sceleris
que sollicitudin, lacus velit

Página 3 de 10
Taller Básico Css

ultricies nisl, nonummy tempus neque diam quis felis. <span class="destacado">Etiam sagittis tortor</span
> sed arcu sagittis tristique.</p>

<h2 id="subtitulo">Aliquam tincidunt, sem eget volutpat porta</h2>

<p>Vivamus velit dui, placerat vel, feugiat in, ornare et, urna. <a href="#">Aenean turpis metus, <em>aliq
uam non</em>, tristique in</a>, pretium varius, sapien. Proin vitae nisi. Suspendisse <span class="especia
l">porttitor purus ac elit</span>. Suspendisse eleifend odio at dui. In in elit sed metus pretium elementum
.</p>

<table summary="Descripción de la tabla y su contenido">

<caption>Título de la tabla</caption>

<thead>

<tr>

<th scope="col"></th>

<th scope="col" class="especial">Título columna 1</th>

<th scope="col" class="especial">Título columna 2</th>

</tr>

</thead>

<tfoot>

<tr>

<th scope="col"></th>

<th scope="col">Título columna 1</th>

<th scope="col">Título columna 2</th>

</tr>

</tfoot>

<tbody>

<tr>

<th scope="row" class="especial">Título fila 1</th>

<td>Donec purus ipsum</td>

Página 4 de 10
Taller Básico Css

<td>Curabitur <em>blandit</em></td>

</tr>

<tr>

<th scope="row">Título fila 2</th>

<td>Donec <strong>purus ipsum</strong></td>

<td>Curabitur blandit</td>

</tr>

</tbody>

</table>

<div id="adicional">

<p>Donec purus ipsum, posuere id, venenatis at, <span>placerat ac, lorem</span>. Curabitur blandit, eros
sed gravida aliquet, risus justo porta lorem, ut mollis lectus tortor in orci. Pellentesque nec augue.</p>

<p>Fusce nec felis eu diam pretium adipiscing. <span id="especial">Nunc elit elit, vehicula vulputate</spa
n>, venenatis in, posuere id, lorem. Etiam sagittis, tellus in ultrices accumsan, diam nisi feugiat ante, eu co
ngue magna mi non nisl.</p>

<p>Vivamus ultrices aliquet augue. <a href="#">Donec arcu pede, pretium vitae</a>, rutrum aliquet, tincid
unt blandit, pede. Aliquam in nisi. Suspendisse volutpat. Nulla facilisi. Ut ullamcorper nisi quis mi.</p>

</div>

</body>

</html>
Ejercicio 3
A partir de código HTML y reglas CSS necesarias para que la página resultante tenga el mismo aspecto que
el de la siguiente imagen:

Página 5 de 10
Taller Básico Css

Ejercicio 4

A partir de código HTML y reglas CSS necesarias para que la página resultante tenga el mismo aspecto que
el de la siguiente imagen:

Ejercicio 5

A partir de código HTML y reglas CSS necesarias para que la página resultante tenga el mismo aspecto que
el de la siguiente imagen

Página 6 de 10
Taller Básico Css

Ejercicio 6

A partir de código HTML proporcionado:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD


/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Ejercicio posicionamiento float</title>

<style type="text/css">

</style>

</head>

<body>

<div>

&laquo; Anterior &nbsp; Siguiente &raquo;

</div>

</body>

Página 7 de 10
Taller Básico Css

</html>
Determinar las reglas CSS necesarias para que el resultado sea similar al mostrado en la siguiente imagen:

Ejercicio 7

Definir las reglas CSS que permiten mostrar una galería de imágenes similar a la que se muestra en la
siguiente imagen:

Galería de imágenes construida con CSS

Ejercicio 8

Página 8 de 10
Taller Básico Css

Aplicar con diferentes posibilidades de distribución en una página utilizando <div> y reglas CSS de
posicionamiento realice:

3.1 Actividades de transferencia del conocimiento.


1. Utilizando <div> y reglas CSS de posicionamiento, bordes, colores y teniendo en cuenta la siguiente
tabla realice las siguientes maquetaciones, guarde cada una de las maquetaciones realizadas como
un fichero CSS distinto para poder comparar las aproximaciones.

Página 9 de 10
Taller Básico Css

Página 10 de 10

También podría gustarte