Scribd
Cargar
27 vistas12 páginas

P5

Este documento presenta varios ejercicios sobre el uso de CSS para dar estilo y formato a elementos HTML. Los ejercicios incluyen aplicar estilos a títulos, párrafos y listas; usar diferentes unidades y tamaños de fuente; agregar bordes, márgenes y rellenos; y crear diseños de páginas web complejas usando CSS. El objetivo es que los estudiantes practiquen y experimenten con las diferentes propiedades de CSS.

Cargado por

LETTY
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
27 vistas12 páginas

P5

Este documento presenta varios ejercicios sobre el uso de CSS para dar estilo y formato a elementos HTML. Los ejercicios incluyen aplicar estilos a títulos, párrafos y listas; usar diferentes unidades y tamaños de fuente; agregar bordes, márgenes y rellenos; y crear diseños de páginas web complejas usando CSS. El objetivo es que los estudiantes practiquen y experimenten con las diferentes propiedades de CSS.

Cargado por

LETTY
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/ 12

Práctica 5

Ejercicio 1.
1.1- Crear un fichero HTML con dos textos, uno entre etiquetas <h1></h1> y otro entre <h2></h2>. Luego incluir en
el <head> un estilo que afecte al color de las etiquetas h1 (color) y al color de fondo (background-color) de los h2, de
tal manera que quede como el de la figura (texto entre <h1> es azul y el <h2> en negro con fondo rojo)

1.2- Crear un fichero HTML con dos textos, uno entre etiquetas <h1></h1> y otro entre <p></p>. Luego incluir en el
<head> estilos con clases abstractas que muestren: el texto en <h1> en verde con fondo azul y el texto de <p> en
azul con fondo verde. Resolver la actividad de dos maneras:
➢ La primera, usando una declaración de estilos con 4 etiquetas (dos para los colores y dos para los fondos).
➢ La segunda usando dos etiquetas: una que se puede llamar .textoverdefondoazul y otra .textoazulfondoverde.

1.3- Indicar el color del texto que aparecerá. Luego comprobar.


<head>
<style>
h1>b {color:red}
</style>
</head>
<body>
<h1><i><b> Un texto h1 en negrita, cursiva y ____________ </b></i> </h1>
<h1><b> Un texto en h1,negrita y ______________ </b></h1>
</body>

¿Y si cambio?
<style>
h1 b {color:red}
</style>

¿Y aquí?
<head>
<style>
h1>b>i {color:red}

</style>
</head>
<body>
<h1><i><b> Un texto h1 en negrita, cursiva y ____________ </b></i> </h1>
<h1><b><i><u> Un texto en h1,negrita, cursiva, subrayado y ______________ </b></h1>
</body>

1.4- Interprete qué hace el siguiente código. ¿De qué color aparecerán los elementos de la lista? ¿De qué tamaño?
Comprobar.
<head>
<style>
i+b {color:red}
.nivel1 { color:green }
.nivel2 { color:blue }
ul ul .nivel2 { font-size: x-small }
ul ul li { font-size: x-small; color:red }
</style>
</head>

<body>
<h1><p> <i> Titulo</i>; <b> Anidamiento y agrupamiento </b> de selectores </p></h1>
<ul>
<li class="nivel1"> Agrupamiento</li>
<li class="nivel1"> Anidamiento </li>
<ul>
<li class="nivel2"> Anidamiento de hijos</li>
<li class="nivel2"> Anidamiento de adyancentes </li>
<li> Anidamiento común</li>
</ul>
</ul>
</body>

1.5- Comprobar en el navegador las diferencias de tamaño con los siguientes códigos.

<body>
<div style="font-size:0.2in;">Texto de 0.2 pulgadas</div>
<div style="font-size:0.3in;">Texto de 0.3 pulgadas</div>
<div style="font-size:0.4in;">Texto de 0.4 pulgadas</div>
<div style="font-size:0.5in;">Texto de 0.5 pulgadas</div>
<div style="font-size:10px;">Texto de 10 pixeles</div>
<div style="font-size:12px;">Texto de 12 pixeles</div>
<div style="font-size:14px;">Texto de 14 pixeles</div>
<div style="font-size:16px;">Texto de 16 pixeles</div>
<div style="font-size:18px;">Texto de 18 pixeles</div>
<div style="font-size:20px;">Texto de 20 pixeles</div>
<div style="font-size:8mm;">Texto de 8 milimetros</div>
<div style="font-size:9mm;">Texto de 9 milimetros</div>
<div style="font-size:10mm;">Texto de 10 milimetros</div>
<div style="font-size:11mm;">Texto de 11 milimetros</div>
<div style="font-size:1pc;">Texto de 1 pica</div>
<div style="font-size:2pc;">Texto de 2 picas</div>
<div style="font-size:3pc;">Texto de 3 picas</div>
<div style="font-size:4pc;">Texto de 4 picas</div>
</body>

1.6- ¿Qué resultado dará este código? Comprobar

<head>
<style>
body {
margin-top: 100px;
margin-right:100px;
margin-bottom: 100px;
margin-left: 100px ;
border : 3px dotted blue ;}
div {
margin-top: 15px;
margin-right:15px;
margin-bottom: 15px;
margin-left: 15px;
border : 3px dotted red ; }*/
</style>
</head>
<body>
<div style="font-size:0.5in;">Texto de 0.5 pulgadas</div>
</body>

¿Se podría simplificar la definición de los márgenes en una línea?¿Cómo?

1.7- ¿Qué resultado dará este código? Comprobar

<head>
<style>
body {
margin: 100px 100px 100px 100px ;
border-style:inset;
border-color:blue; /* color del borde azul */
border-radius: 15px; /*borde redondeado de radio 15px */
border-width:thick; /* Un borde grueso */
padding: 15px 15px 15px 15px;
}
div {
margin-top:15px;
margin-right:15px;
margin-bottom: 15px;
margin-left: 15px;
padding-left: 10px;
border-top : 3px dotted red ; /*estilo, tamaño y color incluidos en el mismo atributo */
border-right : 2px solid blue ;
border-bottom : 3px double green ;
border-left : 3px groove red ;
}
</style>
</head>
<body>
<div style="font-size:0.5in;">Texto de 0.5 pulgadas</div>
</body>

Ejercicio 2. Dados el siguiente código HTML y CSS base, aplicar las reglas CSS (fondo múltiple) para conseguir el
siguiente aspecto (el fichero fuente se encuentra en la carpeta ejercicio 2):
Ejercicio 3: Busca en Internet al menos tres sitios que ayuden a generar los distintos efectos de bordes usando CSS.
Prueba con distintos efectos en cada uno de ellos.
Una vez generado el borde deseado, copia el código generado y pégalo en el ejercicio junto con una captura de pantalla
del diseño realizado.

 Material apoyo: https://www.youtube.com/embed/kK52pLqFDso

Ejercicio 4: Desarrolla una página web como la mostrada en la imagen utilizando para ello las propiedades CSS3
necesarias, utilizando colores que más se asemejen a los de la página de muestra:

Para conocer la paleta de colores utilizada entra en http://imgr.co/imgr.php; ayúdate de los archivos contenidos en la
carpeta “Ejercicio 4”
Ejercicio 5: A partir del código HTML crear un archivo de CSS para dar estilo como el que aparece en la imagen:

<!DOCTYPE html PUBLIC "//


W3C//DTD XHTML 1.0 Transitional//
EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.
dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta httpequiv="
contenttype"
content="text/html;
charset=UTF8">
<link rel="stylesheet" type="text/css" href="./css/estilo
ejercicio 3.css"/>
<title>Ejercicio 3 de css</title>
</head>
<body>
<div id="contenedor">
<div id="cabecera">
<img alt="Logotipo" id="logo"
src="./css/logo_junta_ce.png" title="Logo">
</div>
<div id="menu">
<ul>
<li><a href="#" target="_self" >Noticias</a>
<ul>
<li><a href="#" target="_self">Internacional</a></li>
<li><a href="#" target= "_self"> Nacional</a></li>
<li><a href="#" target= "_self"> Local</a></li>
<li><a href="#" target= "_self"> Deportes</a></li>
</ul>
</li>
<li><a href="#" target="_self" >Instituto</a>
<ul>
<li><a href="#" target="_self"> Departamentos</a></li>
<li><a href="#" target="_self"> Tutorias </a> </li>
</ul>
</li>
<li><a href="#" target="_self" >trabajos</a>
<ul>
<li><a href="#" target="_self"> Personales</a></li>
<li><a href="#" target="_self"> Grupales</a></li>
</ul>
</li>
</ul>
</div>
<div id="lateral">
<div id="publicidad">
<p><a href="#">Hola</a>
</p>
<p><a href="#">Diez minutos</a>
</p>
</div>
</div>
<div id="contenido">
<div id="principal">
<div class="articulo">
<img src="css/images/foto1.jpg" alt="detención">
<h2 >La Guardia Civil persigue y detiene a 3 personas
por tráfico de hachís</h2>
<p><span>Los arrestados paran el coche en el que iban
en la A7
y huyen a través de un descampado hasta alcanzar
San José Artesano, donde se refugian en un bloque.
</span><br> Fue a eso de las 17:00 horas cuando el
dispositivo de la Benemérita ya estaba desplegado y sobre
las 18:00 horas cuando ya había concluido. Un Mercedes Benz
de color plateado fue retirado de la vía de acceso que
transcurre de manera paralela a la salida de Algeciras por
la A7
en dirección a Málaga. La peculiaridad era que
estaba en dirección contraria al sentido habitual, es
decir, mirando para Algeciras. Los testigos hablaron de una
persecución desde metros atrás. Paralelamente, ya en el
doble carril de la autovía, había otros turismos dañados.
</p>
</div>
<div class="articulo">
<img src="css/images/foto2.jpg" alt="Unión">
<h2 >Un nuevo modelo de Unión</h2>
<p><span>Álvaro Moya, el único candidato a hacerse
cargo del club en la asamblea del viernes, se ve capacitado
para mantener con vida a la entidad y asegura que el dinero
llegará con un proyecto barreño y humilde.</span><br>
El barreñoque
ya había avanzado sus intenciones la
pasada semanacompareció
ayer de forma oficial para
presentar su propuesta en firme. Sin desvelar su posible
equipo de trabajo, el todavía futbolista se mostró
<span>"convencido"</span> de lograr recursos económicos
<span>"en el pueblo"<span> y aseguró que con su modelo de
gestión <span>"es posible salvar a la Unión"</span>.</p>
</div>
</div>
<div id="secundario">
<p><span>Pedirán responsabilidad patrimonial a
González y Ortega por el Escalinata</span> <br>
El Ayuntamiento abrirá expediente si el Supremo
rechaza el Plan de Movilidad para legalizar el parking.
</p>
<p><span>Los alcaldes aplauden la medida de rebajar un
15% sus sueldos.</span><br>
Los dirigentes del Campo de Gibraltar valoran con
positividad la rebaja de los salarios.
</p>
</div>
</div>
<div id="pie">
<div class="enlaces">
<a href="http://www.iescarloscano.es">El Instituto</a>
</div>
<div class="copyright">
<p> &copy El Instituto</p>
</div>
<div class="clear"> </div>
</div>
</div>
</body>
</html>
Ayuda para el menú emergente:
/* definición
del menú movil*/
#menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream
Vera Sans", "Trebuchet Unicode MS", "Lucida Grande",
Verdana, Helvetica, sansserif;
fontsize:
14px;
fontweight:
bold;
}
#menu ul{
background:#333333;
height:35px;
liststyle:
none;
margin:0;
padding:0;
}
#menu li{
float:left;
padding:0px;
}
#menu li a{
background:#333333
url("images/seperator.gif") bottom right norepeat;
color:#cccccc;
display:block;
fontweight:
normal;
lineheight:
35px;
margin:0px;
padding:0px 25px;
textalign:
center;
textdecoration:
none;
}
#menu li a:hover, .menu ul li:hover a{
background: #2580a2 url("images/hover.gif")
bottom center norepeat;
color:#FFFFFF;
textdecoration:
none;
}
#menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
zindex:
200;
/*top:1em;
/*left:0;*/
}
#menu li:hover ul{
display:block;
}
#menu li li {
background:url('images/sub_sep.gif') bottom
left norepeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
#menu li:hover li a{
background:none;
}
#menu li ul a{
display:block;
height:35px;
fontsize:
12px;
fontstyle:
normal;
margin:0px;
padding:0px 10px 0px 15px;
textalign:
left;
}
#menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2
url('images/hover_sub.gif') center left norepeat;
border:0px;
color:#ffffff;
textdecoration:
none;
}
#menu p{
clear:left;
}
/*final del menú*/
Ejercicio 6: Menús pegajosos. Posicionamiento pegajoso. Se aporta el código html e instantánea de la solución en la
carpeta “Ejercicio 6”. En clase se esbozará el comportamiento de los menús (superior, inferior, lateral) y del resto de
elementos de la página web. No obstante, las detallo por aquí:

➢ Menú superior: al realizar scroll vertical hacia abajo, estará visible hasta que desaparezca enteramente la
foto primera (chicos trabajando)
➢ Menú lateral: aparecerá a la altura de Artículo 1. Al realizar scroll vertical hacia abajo, seguirá estando visible
hasta que se muestre por completo la imagen del ordenador en la mesa.
➢ Menú inferior: se visualiza al surgir gráficamente el filo superior de la imagen del ordenador en la mesa y,
aunque hagamos scroll vertical hacia abajo, se mantendrá. Desaparece, cuando desaparece la imagen
especificada en su totalidad.

➢ Opciones del menú superior: si sitúo el ratón en alguno de ellas, cambio de fondo a negro y color de texto
blanco.

➢ Opciones del menú de los artículos: si sitúo el ratón en alguno de ellas, se subraya el Artículo #x. Si cliqueo
en alguno de ellos, la página se visualizará comenzando por el encabezamiento del título de dicho artículo
(en la instantánea Artículo #1 – Publicado el 4 de marzo de 2021).
➢ Opciones del menú inferior: si sitúo el ratón en alguno de ellas, cambio de fondo a negro y color de texto
blanco (como con las opciones del menú superior). Si cliqueo en cualquiera de las opciones, la página se
visualizará comenzando por el menú superior, es decir, que se irá al principio de la web (scroll vertical al
principio de la web).

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Posicionamiento Pegajoso</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&family=Noto+Sans+JP&display=sw
ap" rel="stylesheet">
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<header>
<nav class="navbar">
<div class="contenedor">
<a href="#">Inicio</a>
<a href="#">Servicios</a>
<a href="#">Precios</a>
<a href="#">Compañía</a>
<a href="#">Soporte</a>
</div>
</nav>
<div class="contenedor-imagen">
<a href="#blog">
<img src="https://images.unsplash.com/photo-1504384308090-
c894fdcc538d?ixlib=rb-
1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1950&q=80"
alt="">
</a>
</div>
</header>
<main id="blog">
<div class="contenedor">
<aside>
<h3 class="titulo">Temas</h3>
<nav class="indice">
<a href="#articulo-1">Articulo #1</a>
<a href="#articulo-2">Articulo #2</a>
<a href="#articulo-3">Articulo #3</a>
<a href="#articulo-4">Articulo #4</a>
</nav>
</aside>
<div class="contenido">
<div class="post">
<h1 class="titulo" id="articulo-1">Artículo #1</h1>
<p class="fecha">Publicado el 4 de Marzo de 2021</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod
scelerisque erat tincidunt hendrerit. Cras lobortis id diam sit amet consectetur. Suspendisse non pulvinar justo, ac
commodo velit. Quisque maximus dolor ac magna molestie, sit amet commodo velit congue. Maecenas non dolor ut
elit malesuada congue. Phasellus euismod nisi pharetra ante rutrum dignissim. Ut eget tortor ut sapien egestas
sollicitudin. Aenean pulvinar varius augue, ac euismod tortor faucibus at. In commodo sodales turpis nec vehicula.
Mauris luctus, risus non iaculis porttitor, felis eros sagittis enim, sed ultricies lacus magna quis urna.
</p>
</div>
<div class="post">
<h1 class="titulo" id="articulo-2">Artículo #2</h1>
<p class="fecha">Publicado el 4 de Marzo de 2021</p>
<p>
Ut sit amet vehicula lectus, nec vestibulum purus. Nulla a nibh
magna. Pellentesque commodo commodo sapien eu sagittis. Aenean luctus mauris sit amet quam ornare, eu
ultricies nunc auctor. Nulla volutpat purus eu venenatis facilisis. Nulla risus nisl, rhoncus vitae pulvinar nec, viverra
eu odio. Duis nisi quam, gravida sed imperdiet sed, viverra fermentum turpis. Cras non iaculis augue, nec scelerisque
nibh. Sed auctor dolor mi, sit amet placerat tellus sagittis eu. Curabitur nec luctus dolor. Ut congue rutrum vehicula.
Ut viverra tincidunt nunc, vitae cursus nulla scelerisque aliquam.
</p>
</div>
<div class="post">
<h1 class="titulo" id="articulo-3">Artículo #3</h1>
<p class="fecha">Publicado el 4 de Marzo de 2021</p>
<p>
Aliquam congue nibh in urna porta blandit. Mauris nec mi elit. Duis
ligula quam, suscipit nec hendrerit ac, efficitur pulvinar tortor. Quisque venenatis leo ac hendrerit molestie. Quisque
malesuada, enim ut feugiat finibus, sem mi faucibus enim, vel rhoncus ante justo in nibh. Duis sit amet ipsum
tempus, pellentesque ex sed, mollis erat. Sed metus nibh, tincidunt vel laoreet eget, bibendum at est.
</p>
</div>
<div class="post">
<h1 class="titulo" id="articulo-4">Artículo #4</h1>
<p class="fecha">Publicado el 4 de Marzo de 2021</p>
<p>
Nullam ullamcorper tincidunt laoreet. Donec sapien sapien, egestas
id justo et, tincidunt accumsan ipsum. Etiam molestie lectus a consectetur condimentum. Donec malesuada at
sapien eu viverra. Integer rutrum libero vitae est semper malesuada. Quisque convallis enim et erat aliquam, a
facilisis nunc posuere. Nulla ultrices, turpis in pulvinar feugiat, dolor enim interdum mauris, vitae egestas purus orci
vel nibh. Aliquam eleifend est ac eleifend dictum. Nunc condimentum tincidunt placerat. Praesent varius ornare
quam vitae placerat. Donec justo sapien, pretium vitae vestibulum at, molestie eu ipsum. Proin non turpis eget risus
egestas ornare in nec tortor. Sed commodo lectus vitae tortor blandit, id auctor mauris tempus. Aliquam erat
volutpat.
</p>
</div>
</div>
</div>
</main>
<footer>
<div class="contenedor-imagen">
<img src="https://images.unsplash.com/photo-1497215728101-
856f4ea42174?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-
1.2.1&auto=format&fit=crop&w=1950&q=80" alt="">
</div>
<nav class="navbar">
<div class="contenedor">
<a href="#">Inicio</a>
<a href="#">Servicios</a>
<a href="#">Precios</a>
<a href="#">Compañía</a>
<a href="#">Soporte</a>
</div>
</nav>
</footer>
</body>
</html>

También podría gustarte