Hola a todos !! Paso a dejar el documento html y su hoja de estilos que responde al ejercicio propuesto en la clase CU01026D del taller gratuito de programación web con CSS que se ofrece en la web de aprenderaprogramar. Desde ya muchas gracias por la atención. Un saludo,
Luis
EJERCICIO
Crea un documento HTML con 10 divisiones, cada una separada de la anterior por dos elementos <br/>. En cada división introduce un texto (p.ej. div 1, div 2, div 3…) y aplícale un estilo de borde diferente utilizando la propiedad border-style.
Documento html
<!DOCTYPE html>
<html>
<head>
<title>"Ejercicio CU01026D"</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/CSS" href="estilos.css">
</head>
<body>
<div id="div1">
div 1 none (no existe borde; no se ocultan otros bordes adyacentes)
</div>
<br/><br/>
<div id="div2">
div 2 - hidden (el borde existe pero está oculto y no es visible; oculta bordes contiguos)
</div>
<br/><br/>
<div id="div3">
div 3 - dotted (borde a base de puntos redondeados)
</div>
<br/><br/>
<div id="div4">
div 4 - dashed (borde a base de trazos o segmentos rectangulares)
</div>
<br/><br/>
<div id="div5">
div 5 - solid (borde como una línea normal formando un rectángulo)
</div>
<br/><br/>
<div id="div6">
div 6 - double (borde en forma de doble línea, exterior e interior)
</div>
<br/><br/>
<div id="div7">
div 7 - groove (efecto 3D con foco de luz arriba a la izquierda. En algunos colores y grosores de línea la visualización no es buena)
</div>
<br/><br/>
<div id="div8">
div 8 - ridge (efecto 3D con foco de luz abajo a la derecha. En algunos colores y grosores de línea la visualización no es buena)
</div>
<br/><br/>
<div id="div9">
div 9 - inset (efecto 3D de ventana con elemento al fondo. En algunos colores y grosores de línea la visualización no es buena)
</div>
<br/><br/>
<div id="div10">
div 10 - outset (efecto 3D de elevación. En algunos colores y grosores de línea la visualización no es buena)
</div>
</body>
</html>
Hoja de estilos: estilos.css
/* Curso CSS estilos aprenderaprogramar.com*/
div{ border-width:10px; border-color: blue;}
#div1 {border-style: none;}
#div2 {border-style: hidden;}
#div3 {border-style: dotted;}
#div4 {border-style: dashed;}
#div5 {border-style: solid;}
#div6 {border-style: double;}
#div7 {border-style: groove;}
#div8 {border-style: ridge;}
#div9 {border-style: inset;}
#div10 {border-style: outset;}
Tema: Tipos de borde CSS. border-style. Efectos 3D. Border-top/left/right... CU01026D (Leído 2182 veces)
RSS -
WAP2