---
title: CSS
tags: apuntes
description: Apuntes de CSS.
---
# CSS
CSS o Cascading Style Sheet, es el lenguaje que se utiliza para darle color y forma al HTML.
## Uso en webs
El código css, se usa en archivos .css, para que nuestra página web use "x" css, en la etiqueta \<head\> tendremos que poner lo siguiente:
```htmlembedded=
<head>
<link rel="stylesheet" href="estilo.css">
</head>
```
Se puede poner más de un css!
```htmlembedded=
<head>
<link rel="stylesheet" href="estilo-generico.css">
<link rel="stylesheet" href="estilo-ejemplo.css">
</head>
```
## Estructura y formato
El formato utilizado es el siguiente:
```css=
elemento {
atrubuto: valor;
}
elemento.clase {
atrubuto: valor;
}
elemento#id {
atrubuto: valor;
}
.clase {
atrubuto: valor;
}
#id {
atrubuto: valor;
}
```
Como puedes ver, puedes darle un aspecto a todos los elementos que sean iguales, a un elemento con cierta clase o id, o a ciertas clases e ids.
Para darle el mismo estilo a varios elementos, se hace de la siguiente manera:
```css=
elemento1,
elemnto2,
elemento3 {
background-color: #2b2b2b;
color: #d5d5d5;
}
```
También puedes especificar que solo los elementos que esten dentro de cierto elemento tengan un estilo en concreto, aquí queremos que todos los párrafos dentro de un formulario con clase hola tengan un formato:
```css=
form.hola p {
background-color: #2b2b2b;
color: #d5d5d5;
}
```
Para finalizar con la estructura, la jerarquía en caso de que apliques varios estilos al mismo elemento es la siguiente: id>class>orden
## Ejemplo
Por ejemplo, vamos a dar a un párrafo, un color de fondo y letra.
```css=
p.ejemplo {
background-color: gray;
color: red;
}
```
Para ello usaremos el siguiente HTML.
```htmlembedded=
<p class="ejemplo">
Este es un ejemplo, el fondo debería ser gris, y la letra roja.
</p>
```
<style>
p.ejemplo {
background-color: gray;
color: red;
}
</style>
:::info
<p class="ejemplo">
Este es un ejemplo, el fondo debería ser gris, y la letra roja.
</p>
:::
## Atributos
### height & width
Permiten definir el tamaño de un elemento. (Si usas porcentajes, el padre tiene que tener definido un tamaño también)
#### max min
Puedes especificar minimos y maximos: max-width, min-width, max-height, min-height.
:::info
Normalmente min, se usa para responsiveness
:::
### padding & margin
Los elementos html por lo general son cajas, el padding, separa el contenido de dentro de las paredes del elemento, el margen, separa el contenido exterior de las paredes.
:::info
margin
<div class="margin-example">
padding
<div class="padding-example">Contenido</div>
</div>
<style>
div.margin-example {
border: solid 2px;
margin: 20px;
padding: 20px;
}
div.padding-example {
border: dotted 2px;
}
</style>
:::
* margin: 10px; Se aplica a todos los lados
* margin: 10px 5px 3px 1px; Orden top right bottom left
* margin: 10px 5px 3px; Orden top left-right bottom
* margin: 10px 5px 3px; Orden top-bottom left-right
Opcionalmente, si quieres definir solo uno, tienes:
* margin-top
* margin-right
* margin-bottom
* margin-left
:::success
Lo mismo con padding.
:::
### font-weight
* bold: Hola -> <span style="font-weight:bold">Hola</span>
* bolder: Hola -> <span style="font-weight:bolder">Hola</span>
* lighter: Hola -> <span style="font-weight:lighter">Hola</span>
### font-style
* italic: Hola -> <span style="font-style:italic">Hola</span>
* oblique: Hola -> <span style="font-style:oblique">Hola</span>
### text-decoration
* underline: Hola -> <span style="text-decoration:underline">Hola</span>
### text-transform
* capitalize: hola -> <span style="text-transform:capitalize">hola</span>
* uppercase: hola -> <span style="text-transform:uppercase">hola</span>
* lowercase: HOLA -> <span style="text-transform:lowercase">HOLA</span>
### text-shadow
* 2px 2px 3px gray: <span style="font-weight:bold">HOLA</span> -> <span style="font-weight:bold;text-shadow:2px 2px 3px gray">HOLA</span>
### text-align
* left
<div style="border:black solid 2px;padding:5px;text-align:left">
TEXT
</div>
* right
<div style="border:black solid 2px;padding:5px;text-align:right">
TEXT
</div>
* center
<div style="border:black solid 2px;padding:5px;text-align:center">
TEXT
</div>
* justify
<div style="border:black solid 2px;padding:5px;text-align:justify">
text text text text text text text text text text text text text text text text text text text text text text text text random text random random text random random text random text random random random text random text random random text text random text random text random text text random text random
</div>
### columnas
columns: n columnas
column-widht: tamaño de columna
column-gap: distancia entre columnas
column-rule: poner barras entre columnas 2px solid gray
### line-height
Cambiar la separación entre lineas.
* 10px
<div style="line-height:10px">
HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLAHOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA
</div>
* 20px
<div style="line-height:20px">
HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLAHOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA HOLA
</div>
### font-family
Que tipografía usar.
### @font-face
Aplicar tipografias custom.
```css=
@font-face {
font-family: myFont;
src: url(assets/font/myFont.ttf);
}
@font-face {
font-family: myFont;
src: url(assets/font/myFont_Italic.ttf);
font-style: italic;
}
@font-face {
font-family: myFont;
src: url(assets/font/myFont_Bold.ttf);
font-weight: bold;
}
```
### background
#### background-color
Definir color. Acepta nombres genericos, hex, rgb y más. (red, #FF0000, rgb(255,0,0), hsl...)
#### background-image
Poner una imagen como fondo, el valor tiene que ser "ruta/imagen.png", incluyendo las comillas
#### background-position
Lugar del fondo, center, left, top, etc...
#### background-repeat
Si se repite para rellenar todo el fondo.
#### background-size
Tamaño del fondo.
#### all-in-one order
background: color img repeat attach position/size;
### gradients
backgorund: linear-gradient(40deg, pink, purple, pink);
backgorund: radial-gradient(circle, pink, purple, pink);
cssgradient.io
### display
Como se mostrará, puedes cambiar elementos de bloque a linea, es decir, un formulario se comporte como un enlace y viceversa. También tiene otros comportamientos. Valores (block, inline, flex...)
#### inline
#### block
#### flex
##### flex-shrink
##### flex-grow
##### flex-basis
### border
#### border-style border-width border-color
Se usan normalmente directamente en border:
* <span style="border:solid 1px black;padding:10px">solid 1px black</span>
* <span style="border:dotted 1px black;padding:10px">dotted 1px black</span>
* <span style="border:dashed 3px red;padding:10px">dashed 3px red</span>
* <span style="border:groove 1px black;padding:10px">groove 1px black</span>
* <span style="border:double 2px green;padding:10px">double 2px green</span>
* <span style="border:ridge 1px black;padding:10px">ridge 1px black</span>
#### border-left/right/top/bottom
Si quieres darle formato a un solo lado.
* <span style="border-left:solid 1px black;border-top:dashed 2px green;border-bottom:ridge 2px blue;border-right:dotted 5px red;padding:5px;display:block">border-top: dashed 2px green<br>border-left: solid 1px black<br>border-right: dotted 5px red<br>border-bottom: ridge 2px blue</span>
#### border-radius
Para redondear
* <span style="border:solid 1px black;border-radius: 10px;padding:10px;display:block">border: solid 1px black<br>border-radius: 10px</span>
#### box-shadow
box-shadow: pos-x pos-y blur size color
* <span style="border:solid 1px black;border-radius: 10px;box-shadow:5px 5px 5px 3px gray;padding:10px;display:block">border: solid 1px black<br>box-shadow: 5px 5px 5px 3px gray<br>border-radius: 10px</span>
### tablas
#### border
```css=
table {
/*Para evitar que se acumulen los bordes, hace que se junten*/
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
}
```
### Unidades
#### Absoulutas
Unidades que miden exactamente eso.
* px
* pt
#### Relativas
* % : Se relaciona con el width del contenedor, excpeto en fuentes, que se refiere en base al tamaño de la fuente en dicho contenedor
* em : 1 em = tamaño actual del contenedor
* rem : 1 rem = tamaño de la fuente del navegador
### formato a links
Usa el siguiente orden para evitar problemas
* a {}
* a:link {}
* a:visited {}
* a:hover {}
* a:active {}
Para cosas seleccionadas
a:focus {}
Se suele usar en inputs por ejemplo
### list-style-type
* none
* circle
* disc
* square
:::info
Las listas tienen padding, para quitarlo, vete al padre, ul/ol, y añade padding-left: 0; :+1:
:::
* upper-roman
* upper-alpha
* decimal
* decimal-leading-zero
<ul style='list-style:"> "'>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
</ul>
### list-style-position
* inside
Sign in with Wallet
Connect another wallet