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)

Introducció

Inicials de Cascading Style Sheets. Traduit vol dir Fulls d'estil en cascada.

Serveix per descriure l'estil d'un html.

Seguint el separation of concerns:

1409729756css_three-layers.png

HTML s'encarrega del contingut, Javascript del comportament i CSS de la presentació. (Ampliar amb el primer enllaç)

CSS va aparèixer després de HTML per a arreglar alguns problemes que es trobaven amb algunes etiquetes (No sempre!!). Com per exemples les etiquetes:
 <b>, <font>, <div style=""> 

Historia

CSS 1. Quatre anys més tard que la primera versió de HTML.

CSS 2. L'etiqueta media per comprovar el responsive (tipus de medi on es troba el document).

CSS 3. La versió actual.

Com utilitzar CSS

Inline

No es fa la separation of concerns. A evitar. Els navegadors l'interpreten més ràpid.

<body>
    <h1 style="font-size: 2em; font-weight: 700;">
        Hello World
    </h1>
    <p style="margin: 2em 0;">
        Paragraph here
    </p>
</body>

Embedded

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello World</title>
    <style type="text/css">
        /* ... */
    </style>
</head>
<body>
...

External

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Hello World</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
...

Inconvenients: baixa el rendiment. Avantatges: un sol document. El més reomanat.

Import

<style>
@import url(normalize.css);
@import url(layout.css);
@import url(typography.css);
</style>

Quan els css siguin molt grans.

Sintaxi

El compilador de CSS és el navegador.

Veure el vocabulari en Vocabs.

Exemple de Statement:

selector.gif

Selector: tria la part del document de la que es vol modificar la presentació. Segueix un patró.

Una declaració té dos parts: propietat i valor. Cada declaració està separada de altres amb punt i coma (";").

Tipus de selectors

  1. Universal. Ho seleccionen tot. L'asterisc.
  2. De tipus. S'aplica a tots els elements d'aquell tipus.
  3. D'Id. Definits amb un hash # davant, quan l'element té aquell id.
  4. De classe. Definits amb un punt . davant, quan l'element pertany a aquella classe.
  5. D'attribut. Definits per [atribut], quan l'element té aquell atribut.
  6. Pseudo-classes. Casos predefinits, per exemple :hover.

Vendor prefixes: Prefix del venedor del navegador. Serveixen per buscar un altra forma de fer-ho en el navegador si no ho soporta.

Viewport: respecte a què està posicionat. El seu pare.

Layouts

Tècniques per a crear layouts:

  • Prohibides: taules, frames, etc. Molt antigues.
  • Posicionament: block / inline.
  • Floats
  • Css tables
  • Layouts responsive
  • Flexbox. Versió CSS3
  • Grid

Flexbox

Esquema de distribució. Com s'organitzen les coses en la pantalla. En aquest cas, de forma flexible.

Flex: flexibilitat (dinàmiques, resizing, stretching, shrinking)

Dos tipus d'elements (etiquetes html):

  • Container: és obligatori i conté una llista o conjunt d'items.
  • Items: són els elements susceptibles de ser organitzats.

Grid Layouts / Grid Systems

Dos tipus de grid layouts:

  • HTML based Grid layouts : Bootstrap, bulma i altres sistemes. Per exemple, vue-material té un sistema de layouts.
  • CSS Grids layouts. Més separation of concerns que l'anterior. Han sortit nous frameworks.

Bulma

Utilitza com a base el model flexbox.

Bootstrap

Cal definir un div amb la classe container.

Mobile First Strategy

A partir de la versió 3. Es dissenya tenint en compte primer els mòbils. Seguint el següent model:

  • Content: Determinar que és més important.
  • Layout: Primer dissenyar els layouts petits, primer css per a mòbils i adaptar progressivament per a tables, desktop, large.
  • Progressive enhancement: millora progressiva. Les responsive utilities ajuden a fer-ho.

Mides bootstrap

  1. xs - extra small (mobiles) fins a 768px
  2. sm small (tablets o phablets) fins a 992px
  3. md medium (desktop) fins a 1200px
  4. lg large (large desktop)

Components

Landing Pages

Vol dir pàgina principal.

Call to Action -> CTA. El que vols que l'usuari faci.

Icons

  • Font-awesome
  • Material icons
  • ionicons

Color

Vue material

// Vue material themes
Vue.material.registerTheme('custom', {
  primary: 'blue',
  accent: 'red',
  warn: 'red',
  background: 'grey'
})
// Apply themes
Vue.material.setCurrentTheme('custom')

Tipografia

Cal definir la font i després utilitzar-la.

Al utilitzar-la, s'indiquen diverses families de font per a que esculli una altra quan no es trobi la primera en el sistema operatiu.

Al definir-la, el navegador se la descarrega i tothom la veu de la mateixa manera.

Combinar diferentes fonts com a criteri de disseny:

h1 {
	font-family: 'Allan', Helvetica, Arial, sans-serif;
	font-size: 70px;
	line-height: 75px;
}

p {
	font-family: 'Cardo', Georgia, Times, serif;
	font-size: 18px;
	line-height: 25px;
}

Textures i patrons

Vegeu també

Enllaços externs