CSS

Es pot consultar el curs de [CSS de W3Schools](https://www.w3schools.com/css/default.asp)

Com aplicar estils?

Per aplicar estils a les pàgines web tenim 4 maneres diferents de fer-ho:

Dins de l'etiqueta

Dins de l'etiqueta que vulga'm canviar es pot afegir l'atribut style i entre cometes els valors dels estils que volem aplicar separats pel símbol ;

Hola

Adeu

Per etiqueta

Si volem aplicar un estil a TOTES les etiquetes iguals podem utilitzar-les en una etiqueta style en la etiqueta head de la següent manera:

<head> ... <style> p { color: green; } </style> ... </head> <body> ... <h1>Títol</h1> <p>Hola</p> <p>Adeu</p> <h2>Subtítol</h2> ... </body>

Títol

Hola

Adeu

Subtítol

Per identificador

Quan volem canviar els estils d'un únic element el que fem és afegir-li un identificador amb un atribut id i dins de l'etiqueta style (en head) l'utilitzem amb el símbol #

<head> ... <style> #titol { color: green; } </style> ... </head> <body> ... <h1 id="titol">Títol</h1> <p>Hola</p> <p>Adeu</p> <h2>Subtítol</h2> ... </body>

Títol

Hola

Adeu

Subtítol

Per classe

Quan volem canviar els estils de diversos elements que poden provindre d'etiquetes diferents, utilitzem l'atribut class dins de les etiquetes que volem modificar i utilitzem el . per identificar-lo dins de l'etiqueta style (en head). *Si es volen utilitzar dos classes es posa seguit d'un espai: class="classe1 classe2"*

<head> ... <style> .remarcat { color: green; background-color: yellow; } </style> ... </head> <body> ... <h1 class="remarcat">Títol</h1> <p>Hola</p> <p>Adeu</p> <h2 class="remarcat">Subtítol</h2> ... </body>

Títol

Hola

Adeu

Subtítol

Com pose els estils en un fitxer a banda?

Per posar els estils a banda hem d'indicar-li al fitxer HTML quin fitxer css va a utilitzar i després afegir el fitxer CSS a la mateixa carpeta de l'HTML

A l'etiqueta head afegim la següent etiqueta:

Afegim el fitxer estils.css

p { color: red; } h1 { color: black; }

Quins estils podem aplicar?

Color de la lletra

color: red; color: blue; color: #ff0000;

Color de fons

background-color: red; background-color: #ff0000;

Amplada

width: 100%; width: 40%; width: 200px; width: max-content; /*agafa tota l'amplada*/

Alçada

height: 100vh; height: 200px;

Alinear text

text-align: center; text-align: left; text-align: right;

Tamany de la lletra

font-size: 14px; font-size: 200%; font-size: 3em;

Negreta

font-weight: bold;

Cursiva

font-style: italic;

Marge (fora de la vora)

margin: 10px 5px 4px 3px; (dalt, dreta, baix, esquerra) margin: 10px 20px; (dalt i baix, esquerra i dreta) margin: 10px; (dalt, baix, dreta i esquerra) margin-left: 10px; margin-right: 10px; margin-top: 10px; margin-bottom: 10px; margin: 0 auto; (dalt i baix 0 i esquerra i dreta automàtic)

Encoixament (entre element i vora)

padding: 10px 5px 4px 3px; (dalt, dreta, baix, esquerra) padding: 10px 20px; (dalt i baix, esquerra i dreta) padding: 10px; (dalt, baix, dreta i esquerra) padding-left: 10px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px;

Icones

[Enllaç](https://www.w3schools.com/css/css_icons.asp)

Llevar subratllat enllaços

text-decoration: none;

Float

[Enllaç](https://www.w3schools.com/css/css_float.asp)

float: right; float: left; float: none; clear: both;

Ombra

[Enllaç](https://www.w3schools.com/css/css3_shadows_box.asp)

box-shadow: 5px 10px 15px red;

Mostrar

display: none; (no mostrar) display: block; (mostrar i que ocupe tota l’amplada → com p) display: inline; (mostrar i que ocupe només el que ocupa → com span)

Posicionar elements

[Enllaç](https://www.w3schools.com/css/css_positioning.asp)

position:static; position:relative; position:fixed; position:absolute; position:sticky;

Centrar div al centre

Al contenedor que té els elements que s'han de centrar hem d'afegir:

display: flex; justify-content: center; align-items: center; height: 100vh; /*o posar un altura*/

Vora

border: 1px solid black; border: 3px dashed red; /*tamany, tipus i color*/

Solid

Dotted

Dashed

Double

Groove

Ridge

Inset

Outset

border-top: 1px solid black

Disposar elements horitzontalment

Tots els elements que vulgam disposar horitzontalment haurien d'estar tots dins d'una caixa. Anem a disposar 7 caixes amb imatges dins d'un div.

Col·lumnes variables

Si volem que les col·lumnes es disposen segons les necessitats dels elements de dins podem utilitzar els estils segÜents:

#contenedor { display: flex; flex-wrap: wrap; }

Ara, veuras que no està centrat en pantalla perquè els diferents elements estan disposats a l'esquerra, ho podem canviar en la propietat justify-content:

justify-content: center;

justify-content: space-between;

justify-content: space-around;

A banda, també hi ha altres com start, end, space-evently...

Col·lumnes fixes

Si volem que les col·lumnes es disposen amb unes col·lumnes específiques podem utilitzar els estils segÜents:

#contenedor { display: grid; }

Ara, amb les propietats grid-template-columns i grid-template-rows anem definint el que van a ocupar les columnes

*3 col·lumnes iguals*

grid-template-columns: 1fr 1fr 1fr;

*4 columnes: la primera que ocupe 2 i la resta 1*

grid-template-columns: 2fr 1fr 1fr;

Disposar elements verticalment

Podem tindre els elements disposats amb display flex i wrap-content wrap però volem ordenar els elements al centre verticalment. Per això, hauriem d'afegir una altura i també align-items:center

#contenedor { display: flex; flex-wrap: wrap; justify-content: center; height: 500px; align-items: center; }

Repassant els continguts apresos

Crea la següent imatge poc a poc amb el que hem vist fins ara. Recorda primer tindre tota l'estructura i després afegir els estils CSS. Tin en compte quan utilitzar ID, CLASS o ETIQUETA per aplicar estils.

Exercicis

Pàgina personal

Pel·lícula preferida

Països

Grup música

Joc de preguntes

Inputs

Per completar el web, anem a crear una pàgina personal amb els enllaços a totes les activitats que anem fent

Ampliació

Targeta d'aniversari

Menú de bar

Escacs

Responsive design - Media queries

Accedeix a la pàgina de Responsive design - Media queries

Variables en CSS

Quan desenvolupem un web és necessari aplicar uns estils comuns per a tots els elements com el color dels títols que serà el mateix per als bordes dels elements.

h1 { color: coral; } .box { border-color: coral; }

En cas de voler canviar-ho, ho hauriem de fer en tots els llocs i si hem triat un color en 20 selectors diferents ho hauriem de canviar en tots.

Per poder utilitzar variables que guarden aquests valors i només canviar-ho una vegada quan fem un canvi, hem d'utilitzar el següent esquema:

:root { --main-color: coral; --background-color: white; } h1 { color: var(--main-color); } .box { border-color: var(--main-color); }

PROJECTE

Accedeix al projecte