Skip to content

Instantly share code, notes, and snippets.

@furenku

furenku/estilos.css

Last active February 24, 2018 19:57
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save furenku/58beb898d2a00e515b8b5fceebf5e04b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save furenku/58beb898d2a00e515b8b5fceebf5e04b to your computer and use it in GitHub Desktop.
Download ZIP
intro css
Raw
estilos.css
/* un comentario, no afecta nada */
/*
selector {
propiedad1: valor1;
propiedad2: valor2;
}
*/
/* selector por nombre de etiqueta */
body {
/* bgc#444444 */
background-color: #444444;
/* c#ffffff */
color: #ffffff;
}
div {
/* bgc#777777 */
background-color: #777;
}
/* selector por nombre de clase */
.caja {
/* w50p */
width: 50%;
/* p50 */
padding: 50px;
/* tac */
text-align: center;
/* bd */
border: 5px solid white;
}
/* caja dentro de otra caja*/
.caja .caja {
/* bgc#f00 */
background-color: #f00;
}
/* solo las hijas directas */
.madre > .caja {
/* bgc#f00 */
background-color: #0f0;
}
/* selector por id - no se recomienda, mas que en casos especiales */
#mi-caja {
border: 10px solid blue;
color: #00f;
}
Raw
estilos.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Intro Estilos</title>
<link rel="stylesheet" href="css/02-intro-estilos.css">
</head>
<body>
<!-- .caja{un contenido} -->
<div class="caja">un contenido</div>
<!-- p.caja>lorem20 -->
<p class="caja">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel possimus autem asperiores, animi nemo laudantium ad quia cupiditate molestiae maiores.
</p>
<!-- .caja.madre{contenido}>.caja.hija{contenido2} -->
<div class="caja madre">
contenido
<div class="caja hija">contenido2</div>
</div>
<!-- .caja.madre{contenido}>.caja.hija{contenido2}>.caja.nieta{contenido3} -->
<div class="caja madre">
contenido
<div class="caja hija">
contenido2
<div class="caja nieta">
contenido3
</div>
</div>
</div>
<!-- #mi-caja.caja>lorem20 -->
<div id="mi-caja" class="caja">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, illo. Molestiae officiis commodi non quo repellat, voluptatum exercitationem porro doloremque?
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment