---
# System prepended metadata

title: Apunts CSS

---

# Apunts CSS
#### Font: https://hackmd.io/_t8opWecRk63vnguBpdRYA#Regles
##### María Teresa Castillo

El HTML ens serveix per determinar el contingut de la pàgina web:

- què apareix: text, imatges, video i enllaços.
- components: formularis, taules.

I el CSS són unes regles que permeten aplicar un estil als elements HTML. L'estil per:
- donar disseny: color, tipus de lletra. 
- disposició a la pàgina: alineació vertical, alineació horitzontal, posició respecte als altres elements.
- forma: contorn de l'element: gruix, color i estil d'aquest contorn. 

## Regles
Les regles es formen per un selector i un conjunt de propietats.

Una regla és:
```css=
selector {propietat:valor}
```

### Selector
#### Per id:
```htmlembedded=
<p id="text">
lorem ipsum lorem
</p>
```
Aquí seria #text per seleccionar aquest paràgraf.
I una regla seria:

#text{
color:blue;
}

Posa la lletra de color blau.

#### Per nom element
Es posa l'etiqueta dels element on volem aplicar l'estil.

```htmlembedded=
<p id="text">
lorem ipsum lorem
</p>
<p id="peu">
lorem ipsum lorem
</p>
```
Per exemple una regla:
p{
font-size:20px;
}

Posaria la lletra de mida de 20 píxels als paràgrafs.

### Conjunt de propietats

És una llista de parelles on s'indicar una propietat que per exemple poden ser:

- color color d
- width amplada de l'element en px
- height alçada de l'element en px
- font-family tipus de lletra exemple Arial
- font-size mida del text en px
- border si l'element té contorn en px.
- border-color color del contorn

Teniu un llistat i explicacions aquí [CSS Reference](https://www.w3schools.com/cssref/)

Les regles es posen dins del tag head i amb el tag:
```htmlembedded=
<style type="text/css">
Aquí totes les regles
</style>
``` 

Exemple:
```htmlembedded=
<html>
<head>
<style type="text/css">
#peu{
color:blue;
}
#text{
color:orange;
}
p{
font-size:20px
}
</style>
</head>
<body>
<p id="text">
lorem ipsum lorem
</p>
<p id="peu">
lorem ipsum lorem
</p>
</body>
</html>
#
```

El primer paràgraf la lletra serà taronja i el segon blava. Ambdós tenen mida de 20 pixels de lletra.


## CSS i disposició dels elements a la pàgina

El CSS té vàries propietats que permeten fixar la disposició dels elements a la pàgina. Cada element té una caixa que és el seu contorn i això és el que usarem.

## Visualització

És la propietat que permet dir si un element es posarà ocupant una sola línia ell (fent salt de línia com el <br/>) o en la mateixa línia. 

La propietat és diu **display**.

Dos valors:
- **block** l'element ocupa ell només la línia
- **inline** l'element ocupa la mateixa línia que el del costat
- **none** l'element no es mostra. Invisible.

## Marges

També podem dir-li a un element distàncies respecte als altres elements. Es defineixen en píxels i els marges a dalt, a sota, dreta i esquerra amb altres elements.

-    **margin-top**
-    **margin-right**
-    **margin-bottom**
-    **margin-left**

## Padding

És el marge del contingut d'un element respecte a la caixa que el conté. També es pot fixar per dalt, sota, dreta i esquerra. També es fixa per costats:

-    **padding-top**
-    **padding-right**
-    **padding-bottom**
-    **padding-left**


Mireu imatge aclaridora sobre tots aquests marges:

![](https://i.imgur.com/sQ6b61e.png)

[Enllaç a més explicacions](https://www.w3schools.com/css/css_boxmodel.asp)

## Selector jeràrquic

És aquell selector que ens permet seleccionar per element (nom del *tag*) però estiguin ordenats de certa manera.

Per exemple el selector **li** selecciona a tots els li de la pàgina web.

Però si podem el selector **ol li** només selecciona els li d'una lista ordenada.

```htmlembedded=
<html>
<head>
<style type="text/css">
p{
color:orange;
}
div p{
font-size:30px;
}
</style>
</head>
<body>
<p id="peu">
lorem ipsum lorem
</p>
<div>
<p id="text">
lorem ipsum lorem
</p>
</div>
</body>
</html>
```
La primera regla farà que tots els paràgrafs tinguin el color de la lletra taronja i en canvila segona regla només afecta al segon paràgraf.

## Selector condicional

El selector només s'aplica els elements que tenen un atribut que compleixi una característica.

La sintaxis és nomelement[nomatribut="valor"] per exemple només vull posar un estil per a una label concreta seria. **label[for="nom"]**.

Vegeu un exemple:


Exemple:
```htmlembedded=
<html>
<head>
<style type="text/css">
p[id="text1"]{
color:orange;
}
p[id="text2"]{
font-size:30px;
}
</style>
</head>
<body>
<p id="text1">
lorem ipsum lorem
</p>
<p id="text2">
lorem ipsum lorem
</p>
</body>
</html>
#
```
El primer paràgraf tindra lletra color taronja i el segon només la mida de la lletra a 30 pixels.
