/*Esto es un comentario en .css*/
/*Los estilos van entre '{}' y se separan con ';' */
body {
margin: 0;
color: black;
}/*Esto añade estilos a cualquier tag `<div>`*/
div {/*Esto añade estilos al **id**: `<div id="unico">`*/
#unico {/*Estilos en: `<div class="generica">`*/
.generica {/*Cualquier <td> en: `<table id="tabla"><tr><td>..`*/
#tabla td {/*Cualquier <td> hijo directo de <tr>: `<tr><td>..`*/
tr > td {/*Puedes referenciar múltiples elementos con comas*/
button, .label > a, #formulario input {/*Se activa cuando pones el mouse encima*/
button:hover {/*Se activa cuando precionas con el mouse*/
button:focus {/*Elemento antes `::before` o después `::after`
Debe contener al menos el atributo: `content:`*/
button::before { | button::after {
content: " ";: initial; /*deja la propiedad por defecto*/
: inherit; /*hereda la propiedad del parent*/Existen varias maneras de definir un mismo color en css:
| nombre | RGB | RGB+A (alpha) | HEX |
|---|---|---|---|
| red | rgb(255,0,0) | rgba(255,0,0,1) | #ff0000 |
color: red; /*color texto*/background-color: red; /*color fondo*/
background:
linear-gradient(red,yellow); /*gradiente lineal*/
radial-gradient(red,yellow); /*gradiente radial*/
background-size: cover; /*tamaño imagen*/background-image: url(ruta.jpg); /*imagen fondo*/
background-poistion: 50%; /*posicion imagen*/
background-repeat: no-repeat; /*repetición imagen*/
background-size: cover; /*tamaño imagen*/font-family: sans-serif; /*fuente*/
font-size: 16px; /*tamaño*/
font-style: italic; /*estilo*/
font-weight: bold; /*grueso*/text-align: center; /*alinea horizontal (todo)*/
text-decoration: underline; /*decoración*/
text-overflow: ellipsis; /*al desbordar*/
text-transform: uppercase; /*en mayusc. o minusc.*/
text-shadow: 1px 1px black; /*sombra*/white-space: nowrap; /*sin saltos de linea*/
word-break: break-all;/*parte palabras entre líneas*/
word-spacing: 1px; /*espacio entre palabras*/vertical-align: middle; /*alinea elementos vertical*/border: 1px solid black; /*todos los bordes*/
border-top: 1px solid black; /*solo el borde 'top'*/
border-radius: 5px; /*redondear contenido 5px*/padding: 5px; /*margen interior del contenido*/
padding-right: 5px; /*5px (lado derecho)*/margin: 5px; /*margen exterior al contenido*/
margin-left: 5px; /*5px (lado izquierdo)*/border-width: | padding: | margin: /*Dimensiones*/
5px; /*tamaño de 5 píxeles*/
0 5px; /*tamaños top/bottom y left/right*/
5px 0 5px 0; /*orden: top right bottom left*/
box-shadow: /*sombra del elemento*/
1px 1px 5px black; /*1px top-left, 5px difuminado*/
inset 1px 1px 5px black; /*mismo pero interior*/cursor: pointer; /*cambia el icono del cursor*/
user-select: none; /*deshabilita seleccion de texto*/width: 100%; /*ancho*/
height: 100px; /*% solo si parent tiene altura fija*/position:
fixed; /*posicion fija de la pantalla*/
absolute; /*posicion fija de la pagina*/
relative: /*tags 'absolute' son relativos a este*//* solo para elementos con atributo 'position': */
top: 0; /*margen absoluto superior*/
bottom: 0; /*margen absoluto inferior*/
left: 0; /*margen absoluto izquierdo*/
right: 0; /*margen absoluto derecho*/display:
block; /*el elemento se comporta como <div>*/
inline-block; /*como <div> pero de ancho variable*/
none; /*oculta el elemento y sus efectos*/float:
left; /*lo lleva a la izquierda del contenedor*/
right; /*lo lleva a la derecha del contenedor*/transform:
translate(-50%, -50%); /*% de su propio tamaño*/
translateX(-100%); /*mueve el elemento en eje X*/
translateY(-100%); /*mueve el elemento en eje Y*/
rotate(90deg); /*rota el elemento (deg=grados)*/box-sizing: border-box; /*que tamaño incluya borde*/
table-layout: fixed; /*se fijan anchos de tabla*/
border-collapse: collapse; /*quita espaciados tabla*/overflow-x: | overflow-y: /*contenido que sobresale*/
auto; /*muestra scroll si lo necesita*/
visible; /*se muestra aunque sobresalga*/
hidden; /*oculta lo que sobresalga*/
scroll; /*siempre muestra el scroll*/z-index: 99; /*antepone los elementos unos a otros*/transition: all 300ms; /*tiempo transición cambios*/