Hola amigos!!! Dejo el ejercicio CU01029D del tutorial de programación web CSS desde cero.
Enunciado:EJERCICIO
Crea un documento HTML con 2 elementos div de anchura 250 píxeles, con un margen de 20px en todas direcciones y uno junto al otro (en horizontal). En cada div introduce un texto (p.ej. div 1, div 2) y aplícale los siguientes estilos de borde y relleno a ambos elementos. Color de fondo #FFB6C1. La parte superior con borde de puntos redondeados, grosor 15 píxeles, color #DC143C y relleno de 30 píxeles. La parte derecha con borde de trazos o segmentos rectangulares, grosor 10 píxeles, color verde y relleno de 45 píxeles. La parte inferior con borde de línea doble, grosor 10 píxeles, color #FF00FF y relleno 0 píxeles. La parte izquierda con borde con efecto ridge, grosor 40 píxeles, color #2F4F4F y relleno 60 píxeles.
Código HTML:<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Ejercicio CU01029D</title>
<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<body>
<div><p>Div 1</p></div> <div><p>Div 2</p></div>
</body>
</html>Código CSS:div {
width: 250px;
margin: 20px;
background-color: #FFB6C1;
border-top: dotted 15px #DC143C;
padding-top: 30px;
border-right: dashed 10px green;
padding-right: 45px;
border-bottom: double 10px #FF00FF;
padding-bottom: 0;
border-left: ridge 40px #2F4F4F;
padding-left: 60px;
display: inline-block;
}
p {
text-align: center;
font-weight: bold;
font-size: 20px;
}Responde a las siguientes preguntas:
a) ¿Cuál es el ancho total ocupado por cada div (incluyendo sus bordes y rellenos)?
b) ¿Cuál es el alto total ocupado por cada div (incluyendo sus bordes y rellenos)?
c) ¿Cuál es el ancho total desde el límite izquierdo del borde del div más a la izquierda hasta el límite derecho del borde del div más a la derecha (teniendo en cuenta márgenes, bordes y rellenos)?
Respuestas:A- Es 405px.
B- Esto va depender del texto o tamaño del texto o contenido.
C- A mi me da como resultado 850px
Un saludo..
Tema: CSS. Padding y margin: calcular anchura de los elementos de una web px CU01029D (Leído 3645 veces)
RSS -
WAP2