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
  • Floats
  • Css tables
  • Layouts responsive
  • Flexbox. Versió CSS3
  • Grid

Vegeu també

Enllaços externs