<!-- HTML -->
<section class="exemplo">
Isto é um <a class="my-link" href="#">LINK</a> no meio de um texto
</section>
<!-- CSS -->
<!-- Lembre-se de usar shift + enter após cada edição para ver a diferença -->
<style>
.my-link{
display: inline; /* define o posicionamento desse elemento para o tipo inline */
background-color: lightblue; /* altera a cor de fundo desse elemento para lightblue */
padding: 10px; /* define um espaçamento interno de 10px para esse elemento */
width:auto;
}
</style>
<section class="exemplo">
Lorem ipsum, <a class="my-link-float" href="#">LINK</a> consectetur adipiscing elit. Quisque egestas laoreet sollicitudin. Phasellus sollicitudin commodo sem in blandit. Etiam vehicula eros sit amet sapien volutpat, sed tincidunt tortor elementum. Phasellus hendrerit ultrices enim, a faucibus magna auctor ut. Aliquam vitae lacinia lorem, sed luctus felis. Proin maximus lorem et leo cursus, rhoncus blandit turpis condimentum. Quisque lacinia leo lacus, a ullamcorper purus facilisis vel. Nullam a luctus lorem, nec iaculis ex. Maecenas eu sagittis purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam vehicula viverra justo at aliquet. Vestibulum a vestibulum erat.
</section>
<!-- CSS -->
<!-- Lembre-se de usar shift + enter após cada edição para ver a diferença -->
<style>
a.my-link-float{
display: inline-block;
float: right; /* alinha o bloco à direita, permitindo que outros elementos fluam em volta dele */
background-color: lightblue;
padding: 5px;
width: 120px; /* define a largura */
margin: 5px 5px 5px 5px; /* 4 margens em sentido horário - margin: top right bottom left */
}
</style>
<!-- HTML -->
<section class="exemplo">
<div id="box-container">
<div class="box box-1">1</div>
<div class="box box-2">2</div>
<div class="box box-3">3</div>
<div class="box box-4">4</div>
<div class="box box-5">5</div>
</div>
</section>
<!-- CSS -->
<!-- Lembre-se de usar shift + enter após cada edição para ver a diferença -->
<style>
#box-container{ /* elemento-pai, identificado pelo id(#) box-container */
display: auto; /* defina aqui a opção flex, que irá empilhar os filhos desse elemento na direção horizontal */
border: 1px solid black; /* altera a borda desse elemento para uma borda sólida preta de 1px */
}
#box-container > .box{ /* filhos diretos do #box-container, desde que tenham a classe box */
background-color: white; /* altera a cor de fundo desses elementos para branco */
border: 1px solid lightblue; /* altera a borda desse elemento para uma borda sólida azul de 1px */
}
/* acrescente aqui as novas regra para o box-2 conforme as instruções */
</style>
<!-- HTML -->
<section class="exemplo">
<div class="box-container-b">
<div class="box box-1">1</div>
<div class="box box-2">2</div>
<div class="box box-3">3</div>
</div>
</section>
<!-- CSS -->
<style>
.box-container-b{ /* elemento-pai, identificado pelo id(#) box-container-b */
display: flex; /* empilha os filhos diretos desse elemento */
flex-direction: row; /* define a direção de empilhamento vertical (row: horizontal / column: vertical) */
align-items: center;/* alinha os filhos ao centro do eixo secundário */
justify-content: flex-start; /* alinha os filhos no eixo principal */
gap: 5px; /* define um espaçamento de 5px entre os filhos */
border: 1px solid black; /* altera a borda desse elemento para uma borda sólida preta de 1px */
height: 400px;
}
.box-container-b > .box{ /* filhos diretos do #box-container-b, desde que tenham a classe box */
background-color: white;
border: 1px solid lightblue;
min-width: 120px;
min-height: 120px;
flex-grow: 0; /* o valor 0 define que os elementos não devem crescer para se ajustar à largura do pai */
}
.box-container-b > .box-2{ /* filhos diretos do #box-container-b, desde que tenham a classe box-2 */
}
</style>
<!-- HTML -->
<section class="exemplo">
<div class="box-container-c">
<div class="box"></div>
<div class="box type-2"></div>
<div class="box"></div>
<div class="box type-2"></div>
<div class="box"></div>
<div class="box type-2"></div>
<div class="box"></div>
<div class="box type-2"></div>
<div class="box"></div>
<div class="box type-2"></div>
</div>
</section>
<!-- CSS -->
<style>
.box-container-c{ /* elemento-pai, identificado pelo id(#) box-container-b */
display: flex;
flex-wrap: wrap; /* permite que o conteúdo passe para a próxima linha quando necessário */
justify-content: flex-start;
align-items: start; /* alinha os filhos ao centro do bloco de conteúdo, no eixo secundário */
align-content: start; /* alinha todo o bloco de conteúdo, no eixo secundário, se houver mais de uma linha */
gap: 5px;
border: 1px solid black;
min-height: 400px;
}
.box-container-c > .box{ /* filhos diretos do #box-container-b, desde que tenham a classe box */
background-color: #aaa;
width: 140px;
height: 80px;
}
.box-container-c > .type-2{ /* filhos diretos do #box-container-c, desde que tenham a classe type-2 */
background-color: #444;
height: 120px;
align-self: end;
}
</style>
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
