class: center, middle, inverse

# Css
### Cascading Style Sheets

.footnote[Mateu Yábar]

---
# Css
- Llenguatge que descriu l'estil d'un document HTML.
	- Descriu com s'ha de mostrar un document HTML
- El navegador té un estil per defecte per cada element html
	- Per exemple _em_ mostra en cursiva
	- Css permet modificar aquest comportament

---
# Css
- Css està en continua evolució
	- Els diferents navegadors van afegint les noves funcionalitats
	- https://caniuse.com

---
# Referencies
- https://developer.mozilla.org/en-US/docs/Web/CSS
- https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

---
class: super_long_code
# Exemple d'HTML
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Snatch (porcs i diamants)</title>
</head>
<body>
<h1>Snatch (porcs i diamants)</h1>
<h2>Any producció</h2>
<p>2000</p>
<h2>Argument</h2>
<p>El destí creuat de diversos personatges, entre
    els quals Franky anomenat "Franky quatre dits" que ha de
    lliurar al "Cosí Avi", un mafiós novaiorquès, un enorme
    diamant que acaba de robar.</p>
<h2>Actors</h2>
<ol>
    <li>Jason Statham</li>
    <li>Brad Pitt</li>
    <li>Benicio Del Toro</li>
</ol>
<h2>Urls</h2>
<ul>
    <li><a href="https://www.imdb.com/title/tt0208092/">IMDB</a></li>
    <li><a href="https://www.themoviedb.org/movie/107-snatch">MovieDB</a></li>
</ul>
</body>
</html>
```

---
# Exemple css
Volem que el títol principal es mostri centrat i els titols de segon nivell blaus

```
h1 {
	text-align: center;
}

h2 {
	color: blue;
}
```

---
# Lincar a un fitxer css

Desde el head d'un HTML

```html
<link rel="stylesheet" href="css/site.css">
```

---
# Estructura css
```
selector {
	propietat: valor;
	propietat: valor;
	(...)
}

selector {
	propietat: valor;
}

(...)
```

---
# Comentaris
Podem posar comentaris dins d'un css entre /\* comentari \*/

```css
/* comentari css  d'una linia*/
/* O de més d'una
Linia */
```

---
# Selectors simples - per element

Podem seleccionar tots els elements d'un tipus posant el nom del tipus.

Per exemple per seleccionar tots els li posem
```
li{
	color: green;
}
```

---
# Selectors simples - per id

Podem seleccionar l'element que té un id determinat usant #id. Per posar un id a un element html usarem l'atribut id. L'identificador hauria de ser únic.

```html
<p id="any_produccio">2000</p>
```

```css
#any_produccio {
	color: red;
}
```

---
# Selectors simples - per classe (class)

Podem seleccionar l'element que tenen una classe determinada usant .nom_classe. Per posar una classe a un element html usarem l'atribut class. Un element pot tenir més d'una classe i ser compartida per diversos elements.

```html
<ul>
	<li class="actor_principal">Jason Statham</li>
	<li class="actor_principal">Brad Pitt</li>
	<li>Benicio Del Toro</li>
</ul>
```

```css
.actor_principal {
	color: blue;
}
```

---
# Selectors compostos

- element,element
	- exmple: div, p
	- Selecciona tot els div i els p
- element element
	- exemple: div p
	- Selecciona tots els p dins d'un element div
- element>element
	- exemple: div > p
	- Selecciona tots els p que el seu pare es un div

```css
#person .name{
	color: blue;
}

#person>p {
	margin: 5px;
}

```

---
# Selectors links

```css
a {

}

a:link {

}

a:visited {

}

a:focus {

}

a:hover {

}

a:active {

}
```

---
# Propietats - Text - color
- color
	- Permet modificar el color d'un text
	- Valors
		- Nom del color [llista de noms](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)
		- Valor exadecimal
			- \#00ff00
			- \#RedGreenBlue
		- Valor RGB
			- rgb(214, 122, 127)
		- Valor RGBA (alfa)
			- rgba(214, 122, 126, 0.5)
	- [Exemple de selector de colors](https://www.w3schools.com/colors/colors_picker.asp)

---
# Element inspector
La majoria de navegadors moders incorporent un inspector de css.

---
# Webfonts
- Podem importar una font específia.
	- Vigilar amb el tamany (kb)

```
@font-face {
  font-family: "myFont";
  src: url("myFont.ttf");
}

html {
  font-family: "myFont", "Bitstream Vera Serif", serif;
}
```

- https://fonts.google.com/

---
# Disseny de llistes
- list-style-type
	- circle | square | upper-roman | lower-alpha | none

---
# Exercici Snatch

- [Exercici Snatch](exercicis/04_exercicis_css.html#exercici-snatch)

---
# Box properties
.full_width[![box properties](box-model-standard-small.png)]

---
# Box properties
```html
<p id="box-sample">
box
</p>
```

```
#box-sample{
	margin: 20px;
	padding: 50px;
	border: solid black 20px;
	height: 100px;
	width: 300px;
	background-color: blue;
}
```

---
# Box properties - height / width
- Defineix l'alçada i amplada d'un element
- Valors
	- en pixels
		- 40px
	- en %
		- 50%
	- en em
    - relatiu amida de la font
		- 40em
- max-width

---
# Box properties - padding

```
padding: 1em;
```

```
/* top | right | bottom | left */
padding: 5px 1em 0 1em;
```

```
padding-top: 5px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 5em;
```

---
# Box properties - border

```
/* width | style | color */
border: 2px solid green;
```

```
/* top | right | bottom | left */
border-width: 1px 2em 0 4rem;

/* top | right | bottom | left */
border-style: none solid dotted dashed;

/* top | right | bottom | left */
border-color: red yellow green blue;
```

---
# Box properties - border radius
```
border-radius: 20px;
```

```
/* top left, top right, bottom right, bottom left */
border-radius: 20px 10px 50px 0;
```

---
# Box properties - Margin

```
margin: 1em;
```

```
/* top | right | bottom | left */
margin: 5px 1em 0 1em;
```

```
margin-top: 5px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 5em;
```

### Centrar horizontalment

```
margin-left: auto;
margin-right: auto;
```

---
# Exercici Box Properties

- [Exercici Box Properties](exercicis/04_exercicis_css.html#exercici-boxproperties)

---
# Background
```
background-color   : gold;
```

```
background-size    : 140px;
background-position: center;
background-image   : url('https://mdn.mozillademos.org/files/11947/ff-logo.png');
background-color   : gold;
background-repeat: no-repeat;
```

---
# Background
```html
<div id="bg1"></div>
<div id="bg2"></div>
```

```css
#bg1{
	background-color   : green;
	widht: 200px;
  	height: 200px;
  	margin: 10px;
}
#bg2{
	background-size    : 140px;
	background-position: center;
	background-image   : url('https://mdn.mozillademos.org/files/11947/ff-logo.png');
	background-color   : gold;
	background-repeat: no-repeat;
	margin: 10px;
	widht: 200px;
  	height: 200px;
}
```

---
# Exercici Background

- [Exercici Background](exercicis/04_exercicis_css.html#exercici-background)

---
# Flux normal
- Normal Flow or Flow Layout
- És com el navegador mostra les pàgines HTML de forma predeterminada quan no es fa res per controlar el disseny de pàgina.

---
# Flux normal - block
- display: __block__
	- Caixa que s'apila sobre altres caixes
		- Apareix en una línia separada
	- Pot tenir l'amplada i alçada establerta en ella.
	- El model de caixa complet s'aplica a les caixes de bloc.
- elements
  	- div
  	- p
  	- h1, h2, h3...
  	- ul / ol
  	- li
---
# Flux normal - inline
- display: __inline__
	- Flueix amb el text del document
		- Apareixerà en la mateixa línia que el text circumdant i altres elements en línia.
		- El seu contingut es trencarà amb el flux del text, com a línies de text en un paràgraf.
	- Les configuracions d'amplada i alçada no tenen efecte en les caixes en línia
- elements
	- em
	- strong
	- a
	- button
	- img

---
# Flux normal - Exemple

```html
<div>
	<h1>
		Title
	</h1>
	<p>
		Hello
		<a href="somelink">
			link
		</a>
		<em>Emphasis</em>
	</p>
	<div>
		Some Text
		<img src="https://picsum.photos/400/100"/>
		More text
		<div>
			Text inside div
		</div>
	</div>
	<p>
    	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut turpis commodo, dignissim nisl sit amet, vestibulum ipsum. Morbi euismod scelerisque magna, nec scelerisque risus condimentum a. Phasellus bibendum, nibh et faucibus maximus, ex nulla tristique dolor, id faucibus quam sem a neque. Suspendisse ultricies leo vitae nibh pellentesque, ut efficitur metus semper. Aenean nec enim neque. Donec lacus felis, pretium sit amet tristique aliquam, feugiat nec felis. Donec ultrices et augue faucibus suscipit. Proin auctor, risus sit amet varius tempus, mauris nulla finibus eros, id viverra est lacus vel lectus. Sed hendrerit non velit non viverra. Mauris id lorem ornare, ornare nunc vel, dapibus sapien. Donec placerat pretium velit vel molestie. Suspendisse ac dolor elit. Mauris in auctor lorem.
    </p>
</div>
```
---
# Modificació del flux normal
- Podem substituir aquest comportament predeterminat, utilitzant:
	- position
	- float
	- display

---
# Flux - float
- Permet que els elements flotin a l'esquerra o a la dreta uns dels altres, en comptes de fer-ho per defecte asseguts uns sobre els altres
	- left: flota l'element a l'esquerra.
	- right: flota l'element a la dreta.
	- none: especificat no flotant en absolut. Aquest és el valor predeterminat.

```
float: right
```

- Podem fer que un element surti sota dels elements flotants

```
clear: both
```

---
# Flux - float

<div style="float: left; border: 1px solid black; width: 200px; height: 200px;">Float left</div>
<p>Paragraf 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum bibendum justo massa, quis scelerisque magna finibus vel. Sed a nisl nec</p>
<div style="float: right; border: 1px solid black; width: 200px; height: 200px;">Float right</div>
<p>Paragraf 2: Donec sit amet nunc purus. Nunc nec velit ipsum. Donec tortor diam, lobortis id nulla in, pharetra fermentum velit.
Vestibulum eu vestibulum velit, at accumsan diam.</p>

---
# Exercici Float

- [Exercici Float](exercicis/04_exercicis_css.html#exercici-float)

---
# Flexbox

- El model de caixes Flexible de CSS3 (Flexible Box en anglès), o flexbox

- https://css-tricks.com/snippets/css/a-guide-to-flexbox/

---
# Exercici Flexbox

- [Exercici Flexbox](exercicis/04_exercicis_css.html#exercici-flexbox)

---
# Media queries
- Volem poder mostrar una mateixa pàgina web diferent segons el tamany de la pantalla que usem.
- CSS media queries
- https://developer.mozilla.org/es/docs/CSS/Media_queries

```
@media (max-width: 600px) {
  footer {
    display: none;
  }
}

@media (min-width: 300px) and (max-width: 600px){

}
```

---
# Indicar que una web es reponsive
Al head
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```

---
# Exercici Media queries

- [Exercici media queries](exercicis/04_exercicis_css.html#exercici-media-queries)

---
# Exercici general - flex - MediaQueries

- [Exercici general - flex - queries](exercicis/04_exercicis_css.html#exercici-general---flex---queries)

---
# Css Specificity

- Decisió de quina propietat té més pes

```html
<p class="message" id="introduction">
  MarkSheet is a free HTML and CSS tutorial.
</p>
```

```css
p{ color: blue;}
.message{ color: green;}
#introduction{ color: red;}
```

---
# Css Specificity
## Ordre d'importancia

1. id
2. class
3. element

- https://specifishity.com/

---
# Css Specificity

__!important__ passa per sobre de tots els selectors

```css
.myclass { 
  color: black !important;
}
```
---
# Css Specificity
- https://specifishity.com/
- https://css-tricks.com/specifics-on-css-specificity/

---
# GridLayout
Ens ofereix un sistema de taula per posicionar elements.

https://css-tricks.com/snippets/css/complete-guide-grid/

---
# Exercici GridLayout

- [Exercici GridLayout](exercicis/04_exercicis_css.html#exercici-grid)