Hola a todos, y bienvenidos a una nueva clase del curso de Introducción a CSS 3.
A lo largo de esta cuarta clase, veremos como posicionar cada elemento que incluyamos en nuestra página web. Aunque a simple vista pueda parecer sencillo (y lo es, siempre y cuando haya pocos elementos en pantalla), según añadamos más y más elementos a nuestra web, se convertirá en un asunto complejo y algo complicado de manejar, si no tienes claro los conceptos básicos que veremos en el siguiente vídeo.
Dicho de otra forma, si prestas atención y asimilas bien los siguientes conceptos, habrás dado un paso de gigante en la maquetación de páginas web.
¡Manos al teclado!
RESUMEN DEL VÍDEO:
Hoy veremos cómo posicionar elementos en nuestra página. Con la propiedad padding podemos añadir espacio entre elementos. Para establecer márgenes usaremos la propiedad margin. Con border podremos posicionar mejor los elementos ya que limitaremos su contenido.
CÓDIGO DE EJEMPLO:
<!DOCTYPE html>
<html>
<head>
<title>Cuarta clase</title>
<style>
div{
height: 200px;
width: 500px;
background-color: red;
padding-left: 100px;
margin: 100px;
border: 6px solid yellow;
}
.segundo {
background-color: rgb(0, 255, 0);
margin-left: 0;
border-style: dashed;
}
p{
border-width: 7px;
border-style: dotted;
border-color: white;
margin-left: 100px;
}
</style>
</head>
<body>
<div><p>Contenido, Contenido, Contenido, Contenido, Contenido, Contenido</p></div>
<div class="segundo"><p> Contenido, Contenido, Contenido, Contenido, Contenido, Contenido</p></div>
</body>
</html>