CheatSheetCss.css

divprimero {
	color: red; /*color del elemento en si*/
	background-color: green; /*color del fondo*/
	margin: 2rem; /*margen externo*/ 
	padding: 16px; /* margen interno*/ 
	font-family: sans-serif; 
	font-weight: bold; /*negrita o puede ser un numero, van de 0 a 1000*/
	font-size: 10px;
}
body {
    font-family: Arial, sans-serif;
    line-height: 2;
    margin: 20px;
    padding-top: 60px;
}
code {
    background-color: #f4f4f4;
    padding: 2px 4px;
    border-radius: 4px;
    text-align: center;
}
pre {
    background-color: #f4f4f4;
    padding: 10px;
    border-radius: 4px;
    overflow-x: auto;
}
h1 {
    text-align: center;
  }
h2 {
text-align: center;
}
ul, p, pre, img, h3, ol, h4, h5 {
    margin-left: 20%;
    margin-right: 20%;
    text-align: justify;
}

/* Estilos básicos para el navbar */
body {
    margin: 0;
    font-family: Arial, sans-serif;
}

/* Navbar container */
.navbar {
    background-color: #000; /* Fondo negro */
    overflow: hidden;
    position: fixed; /* Navbar fijo en la parte superior */
    top: 0;
    width: 100%;
    z-index: 1000;
}

/* Navbar links */
.navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navbar ul li {
    display: none; /* Ocultar enlaces en pantallas pequeñas */
}

.navbar ul li a, .navbar ul li button {
    display: block;
    color: white; /* Texto blanco */
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

.navbar ul li a:hover, .navbar ul li button:hover {
    background-color: #575757; /* Fondo gris al pasar el ratón */
}

/* Hamburger menu */
.navbar .hamburger {
    display: block;
    cursor: pointer;
    padding: 14px 20px;
}

.navbar .hamburger div {
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 5px 0;
    transition: 0.4s;
}

/* Responsive layout */
@media screen and (min-width: 600px) {
    .navbar ul li {
        display: block;
    }
    .navbar .hamburger {
        display: none;
    }
}

/* Mostrar el menú cuando se activa */
.navbar.responsive ul {
    flex-direction: column;
}

.navbar.responsive ul li {
    display: block;
    width: 100%;
}

/* Ajustar el padding del body para el navbar fijo */
body {
    padding-top: 60px; /* Ajusta según la altura del navbar */
}

/* Estilos para las páginas de contenido */
.pagina {
    padding: 20px;
}


/* div{
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--size);
    height: var(--size);
    margin: 1em;
    counter-increment: divs;
}
div::before{
    content: counter(divs);
} */

/* :root {
    --margen: 5px;
    --cantidad:5;
    --alineamiento: left;
} */

  /* :root{ aplica a los html
        --size: 100px;
        counter-reset: divs;
    } */
/* *{ aplica a todos los elementos
    margin:0;
    padding: 0;
    box-sizing: border-box;
} */
figure{
    border: solid 1px #666;
    padding: 1rem;
    width: calc(100vw/var(--cantidad) - var(--margen));
    text-align: center;
    margin: 1rem 0;
    float: var(--alineamiento);
}
figure img{
    max-width: 100%;
}
	/*p{
  		box-sizing: border-box;
  		width: 50ch;
  		background: #999;
  		margin: 2em auto;
  		padding: .5em;
  	}
    p::before{
        content: attr(class); 
        content:"Clases : (" attr(class)")";
        content: "#" attr(id); si quisiera saber cual es el nombre de las id de los elementos p 
        background-color: red;
        display: block;
    }*/
    .div1{
    	width: 500px;
    	height: 500px;
    	background: url(logo.jpeg) no-repeat, linear-gradient(to left, red 15%, blue 100px, white);
    	margin: 2em auto;
    	background-attachment: scroll;
    }
    .div2{
    	width: 500px;
    	height: 500px;
    	background: linear-gradient(to right, red 15%, blue 15% 50%, white 50% 70%, black 70% 100%);
    	margin: 2em auto;
    }
    .div3{
    	width: 500px;
    	height: 500px;
    	background: linear-gradient(red, transparent), url(logo.jpeg);
    	margin: 2em auto;
    	background-attachment: scroll;
    }
    .div4{
    	width: 500px;
    	height: 500px;
    	background: 
    	url(logo.jpeg) no-repeat bottom right, url(logo.jpeg) no-repeat 20px 20px/100px 100px, red;
    	margin: 2em auto;
    }

  
    /* html, body, div{
        margin:0;
        padding:0;
        box-sizing: border-box;
    } */
  
/* div:nth-child(1){background: red}
div:nth-child(2){background: blue}
div:nth-child(3){background: green}
div:nth-child(4){background: yellow} */

#holi{
    /*position: static;
    position: relative;
    position: absolute;
    position: fixed;
    position: sticky;*/
    position: sticky;
}
/* body{
    display: flex;
    flex-flow: column wrap;
    justify-content: flex-start;
    align-content: center;
    width: 1000px;
    height: 1000px;
} */


.primer{background: red}
.segundo{background: blue}
.tercero{background: green}
.cuarto{background: yellow}