Categoría: CSS
Mini ejercicio flex
Usando solo flexbox crear una fila con cuatro artículos que ocupen todo el ancho de la página y dentro de cada artículo una cabecera y debajo un botón centrado.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#contenedor {
display: flex;
justify-content: space-around;
}
#contenedor>div {
background-color: bisque;
background: linear-gradient(to right, bisque, #eacda3);
flex-basis: 200px;
border-radius: 20px 0;
box-shadow: 7px 7px 5px #DDDDDD;
}
#contenedor h1 {
text-align: center;
}
#contenedor>div>div {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}
</style>
</head>
<body>
<div id="contenedor">
<div>
<h1>Artículo</h1>
<div><button>Pínchame</button></div>
</div>
<div>
<h1>Artículo</h1>
<div><button>Pínchame</button></div>
</div>
<div>
<h1>Artículo</h1>
<div><button>Pínchame</button></div>
</div>
<div>
<h1>Artículo</h1>
<div><button>Pínchame</button></div>
</div>
</div>
</body>
</html>
Tres artículos con espacio lateral
<div class="row"> <div class="col-md-2"></div> <div class="col-md-8 "> <div class="row"> <article class="col-md-4 bg-primary"> <h1>Artículo</h1> </article> <article class="col-md-4 bg-primary"> <h1>Artículo</h1> </article> <article class="col-md-4 bg-primary"> <h1>Artículo</h1> </article> </div> </div> <div class=" col-md-2"> </div> </div>
<div class="col-md-8 d-flex justify-content-around"> <article class="bg-primary"> <h1>Artículo</h1> </article> <article class="bg-primary"> <h1>Artículo</h1> </article> <article class="bg-primary"> <h1>Artículo</h1> </article> </div>
Selectores básicos CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/selectores.css">
</head>
<body>
<header>
<div><img src="img/baldosa.jpg"></div>
<div>
<h1>hola</h1>
</div>
<ul>
<li>
<h1>Que pasa??</h1>
</li>
</ul>
<h1>Hola</h1>
<h1>Hola</h1>
</header>
<h1>Hola que tal estamos. Yo muy bien.</h1>
<h1 id="especial" class="varios sombra">Hola que tal <span class="susto">estamos</span>. Yo muy bien.</h1>
<h1 class="varios tipo sombra">Hola que tal estamos. Yo muy bien.</h1>
<h1 class="tipo">Hola que tal estamos. Yo muy bien.</h1>
<h1 class="varios sombra">Hola que tal <span>estamos</span>. Yo muy bien.</h1>
<h1 class="varios">Hola que tal estamos. Yo muy bien.</h1>
<h1 class="varios">Hola que tal estamos. Yo muy bien.</h1>
<h1 class="sombra verde">Hola que tal <span class="verde">estamos</span>. Yo muy bien.</h1>
<a href="pepe.html">ENlace</a>
<a href="fotos.html">ENlace</a>
<a href="articulos.html">ENlace</a>
<div>
<p>parrafo</p>
<p>parrafo</p>
<p>parrafo</p>
<p>parrafo</p>
<p>parrafo</p>
</div>
<footer>
<div>
<div>
<p>Párrafos dentro de muchos divs</p>
<p>Párrafos dentro de muchos divs</p>
<p>Párrafos dentro de muchos divs</p>
<p>Párrafos dentro de muchos divs</p>
<p>Párrafos dentro de muchos divs</p>
<a href="">Enlace</a>
</div>
<p>estoy solo</p>
<p>estoy solo</p>
<p>estoy solo</p>
</div>
</footer>
</body>
</html>
h1{
color:blue;
clear: both;
}
#especial{
color:red;
background-color: green;
}
#especial .susto{
background-color: yellow;
}
.varios{
color:green;
}
.varios span{
color:yellow;
}
.tipo{
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.sombra{
text-shadow: 10px 10px 5px grey;
}
/*El estilo se aplica a las dos clases */
.tipo, .sombra{
font-size:4em;
}
/* El estilo se aplica a todos los headers y a todas las imágenes */
header, img{
border:1px solid black;
}
/*El estilo se aplica a todas las imágenes que estén dentro de un header*/
header img{
width:20%;
float: left;
}
/*Esto se aplica a todos los h1 dentro del header, estén donde estén (anidados dentro de otros elementos) */
header h1{
color:purple;
}
/*Esto se aplica a todos los h1 hijos directos del header, si hay anidación no se aplica */
header > h1{
color:salmon;
}
header + h1{
background-color: sienna;
}
/*Todos los elementos de clase verde que estén dentro de un h1 */
h1 .verde{
background-color: green;
}
/* Todos los h1 que además tengan la clase verde */
h1.verde{
background-color: green;
}
[class]{
border:3px solid black;
}
/*Todos los elementos con un atributo href que empieza por 'foto' */
[href^=foto]{
background-color: chartreuse;
}
.susto:hover{
background-color: chocolate;
}
p:last-child{
color:red;
}
Selectores CSS
Pero mejor no memorizarlos 😉
En esta página de w3schools se muestran diferentes tipos de selectores css:
Layout flexbox + media query
<header>
<h1>Cabecera</h1>
</header>
<div class="slider"></div>
<main>
<section>
<h1>Contenido</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, esse! Hic magni voluptate quia, ut eligendi
pariatur deleniti. Numquam, perspiciatis. Eius soluta ipsam qui nisi, ea cum quod atque pariatur?</p>
</section>
<section>
<h1>Contenido</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, esse! Hic magni voluptate quia, ut eligendi
pariatur deleniti. Numquam, perspiciatis. Eius soluta ipsam qui nisi, ea cum quod atque pariatur?</p>
</section>
<section>
<h1>Contenido</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, esse! Hic magni voluptate quia, ut eligendi
pariatur deleniti. Numquam, perspiciatis. Eius soluta ipsam qui nisi, ea cum quod atque pariatur?</p>
</section>
<section>
<h1>Contenido</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, esse! Hic magni voluptate quia, ut eligendi
pariatur deleniti. Numquam, perspiciatis. Eius soluta ipsam qui nisi, ea cum quod atque pariatur?</p>
</section>
</main>
<footer>
<p>Pie de página</p>
</footer>
header{
height:150px;
background-color: burlywood;
}
.slider{
width: 100%;
height: 300px;
background-image: url('../img/baldosa.jpg');
background-size: cover;
}
main{
display: flex;
flex-wrap: wrap;
}
main section{
flex:25%;
}
@media (max-width:728px){
main section{
flex:50%;
}
}
@media (max-width:400px){
.slider{
height: 100px;
}
footer,aside{
display: none;
}
main {
flex-direction: column;
}
}
Layout ‘Holy Grial’ con css Grid
Layout flex responsive
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/layoutflex.css">
</head>
<body>
<header>
<h1>Cabecera</h1>
</header>
<main>
<aside>
<ul>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
</ul>
</aside>
<section>
<h1>Contenido</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, esse! Hic magni voluptate quia, ut eligendi
pariatur deleniti. Numquam, perspiciatis. Eius soluta ipsam qui nisi, ea cum quod atque pariatur?</p>
</section>
</main>
<footer>
<p>Pie de página</p>
</footer>
</body>
</html>
main{
display: flex;
}
@media (max-width:728px){
main{
flex-direction: column;
}
}
@media (max-width:400px){
footer,aside{
display: none;
}
}
Comienzo maquetación Flexbox
html:
<div class="flex">
<div class="first"> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
<div>
<div> </div>
</div>
<div>
<div> </div>
</div>
<div>
<div> </div>
<div> </div>
<div> </div>
</div>
<div>
<div> </div>
<div> </div>
<div> </div>
</div>
Css:
div div{
background-color: black;
width: 200px;
margin-left: 20px;
}
.flex{
display: flex;
justify-content: space-between;
align-items: center;
}
.first{
margin-right: 250px;
height: 100px;
}
Resumen layouts
El layout es la organización de nuestra página, es un elemento de diseño que nos indica dónde van a ir los diferentes elementos.
Aquí tenemos ejemplos de diferentes layouts:
https://designshack.net/articles/layouts/10-rock-solid-website-layout-examples/
https://websitesetup.org/website-layouts/
Para diseñar los layouts normalmente se utilizan herramientas de wireframing. Hay algunas online:
https://www.lancetalent.com/blog/top-5-herramientas-wireframes-ch/
O podemos hacerlo directamente en una libreta.
Para implementar nuestro layout usaremos las etiquetas div o las nuevas etiquetas semánticas:
Que nos permitirán crear nuestro layout:
https://www.w3schools.com/html/html_layout.asp
https://www.w3schools.com/css/css_website_layout.asp
Hoy hemos visto la manera más sencilla que es utilizando float:
https://www.w3schools.com/css/css_float.asp
Pero más adelante veremos otras maneras de hacerlo. Dentro de trifulcas podéis encontrar varios ejemplos:
https://trifulcas.com/layout-one-page/
https://trifulcas.com/layout-semantico-2/
Y una búsqueda por internet os mostrará miles de páginas que tratan el tema: