IMPORTANT: Per accedir als fitxer de subversion: http://acacha.org/svn (sense password). Poc a poc s'aniran migrant els enllaços. Encara però funciona el subversion de la farga però no se sap fins quan... (usuari: prova i la paraula de pas 123456)

1409729756css_three-layers.png
Referències
Vegeu també Acacha DAM16-17: CSS
Acacha: CSS
Presentació
Enllaços externs Can I use
Autor Forne-Fabre, Roger

Introducció

CSS són les inicials de Cascading Style Sheets i traduït vol dir "fulls d'estil en cascada".

És important separar el CSS de l'HTML.

Història

  • CSS1 (1996) -> font, color, align, box-model, #id, .class, ...
  • CSS2 (1998) -> position, z-index, media, text-shadow, ...
  • CSS 2.1 (2011) -> CSS2.1 vs CSS 2.0
  • CSS3 Actualment

Com utilitzar CSS en un fitxer HTML?

  • inline -> Dintre del mateix document HTML. Inconvenient de que no separem les capes.
  • Embedded -> Mitjançant la etiqueta < link>.
  • External -> Mitjançant la etiqueta < style>.
  • @import -> Combinat amb < style>.

Com s'escriu el CSS

Sintaxi

Exemple de Statement:

selector.gif

Selector -> Selecciona la part (identifica un patró) del document HTML al qual aplicar els estils.

Declaration -> Totes van separades entre un ; A més a més, cada declaració es composa de més d'una propietat i dels valors que acompanyen aquestes.

Vendor prefix

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

Flexbox

Flexbox layout: Esquema de distribució.

Hem vist els Box layouts:
- block: div -> "vertical"
- inline: a -> "horitzontal"
- block-inline -> combinació dels anteriors

Flex: flexibilitat (dinàmiques, resising, stretching, shrinking).

2 tipus d'elements (etiquetes html):
- Containers: és obligatori i conté una llista o conjunt d'items.
- Items: són els elements susceptibles de ser organitzats.