---
# System prepended metadata

title: CSS
tags: [apuntes]

---

---
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

