| Margins y paddings CSS |
| Margin | Outline | Border |
| Padding | | |
| Margins |
margin-top: 10px; margin-right: 10px; |
margin-bottom: 10px; margin-left: 10px; |
| Margins y paddings - Shorthands |
| margin: 10px; |
Margen de 10px en todas las direcciones (arriba, derecha, abajo, izquierda). |
|
| padding: 10px; |
padding de 10px en todas las direcciones (arriba, derecha, abajo, izquierda). |
|
| margin: 10px 20px; |
10px(top & bottom / Arriba y abajo) |
20px(right & left / Izquierda y derecha) |
| padding: 10px 20px; |
10px(top & bottom / Arriba y abajo) |
20px(right & left / Izquierda y derecha) |
| margin: 10px 20px 15px 30px |
Top, Right, bottom, left |
En el sentido de l'aguja del reloj |
| TIPOGRAFIA: |
| font-family (tipo de fuentes) |
font-family: Arial, Helvetica, sans-serif; |
Google fonts |
| font-size (tamaño de fuente) |
font-size: 18px; |
(em, rem, %, px) |
| line-height: 25px |
Altura de linea (https://grtcalculator.com |
(em, rem, %, px) En funció de line-height el tip de fonts a utlitzar. |
| text-align: center; |
left right center justify |
.... |
| text-transform:uppercase; |
none - capitalize - uppercas - lowercase |
.... |
| Tipografia: color:#FCF345; |
HEX - RGB - HTML COLORS |
.... |
| Tipografia: text-decoration |
(none - overline - line-through/tachado- underline/subratla/u ins) |
.... |
| Tipografia: text-decoration |
Muchas variantes text-decoration: underline red solid 3px; |
Shorthand de: text-decoration-line, text-decoration-color, text-decoration-style, text-decoration-thickness |
| Tipografia: letter-spacing |
letter-spacing: 5px; |
|
| Tipografia: word-spacing |
word-spacing: 5px; |
|
| La función BORDER |
| border: 1px solid #dd221d | shorthand de border-width, border-style, border-color |
| border: border-width |
border-top-width | border-right-width | border-bottom-width | bord-left-width |
| border-style: solid; |
none | hidden |dotted | dashed | solid | double | groove | ridge | inset | outset |
| border-style: solid; |
border-top-style | border-right-style | border-bottom-style | border-left-style |
| border-color: #dd221d; | HEX | RGB | HTML COLORS | border-color: #FFFFFF;
border-color: rgb(255, 255, 255);
border-color: white; |
| border-radius | border-radius: 15; |
versión abreviada:
border: 1px solid #dd221d | versión larga:
border-top: 1px solid #dd221d; border-right: 1px solid #dd221d; border-bottom: 1px solid #dd221d; border-left: 1px solid #dd221d; |