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ó

Són les sigles de Cascading Style Sheets. És un llenguatge que descriu l'estil d'un HTML (estan molt relacionats).
Veem com queda el sistema de capes:

Francauxach css three-layers.png

  • La capa "content" (contingut) amb HTML:
  • La capa "presentation" (presentació) amb CSS:
  • La capa "behavior" (comportament) amb JS:

Normalment haurem de tindre separades les 3 capes.

Historia

Desde 1990 fins els 5 anys següents no hi havia definit un patró de disseny per al contingut de les pàgines web. Al 1996 es va crear el CSS 1.0, permeten la modificació de l'estil de les fonts, del color, de les aliniacions... Dos anys després (1998) va sortir el CSS 2.0, amb noves funcions per a la posició de les dades, el media, el text-shadow... L'any 2011 va sorgir el CSS 2.1 i actualment estem treballant amb el CSS 3.0.

Com s'afegeix el CSS a HTML?

Inline

Per exemple:

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

Val a dir que intentarem evitar aquest mètode durant el curs.

<link> element

Per exemple:

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

La manera més recomanable.

<style> element

Per exemple:

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

Té els mateixos inconvenients que la Inline.

@import rules inside <style> element

Per exemple:

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

Aquesta manera és encara pitjor que la primera.

Sintaxi

Està constituïda per un conjunt de "statements" (normalment 1). Tot i així, abans dels statements poden haver "At-rules".
Exemple d'statement:

selector.gif

Un statement està constituït per les següents parts:

  • Selector: Tria la part del document HTML de la qual volem modificar el seu estil. Es poden combinar.
  • Type selectors: p, span...
  • Universal selectors: *
  • Attribute selectors: [title], [rel~="copyright"]
  • Class selectors: .comment, .post ...
  • ID selectors: #nav, #main
  • Pseudo classes: :hover, :lang(zh), :checked
  • Declaració: Poden haver més d'una, sempre separades per punt i coma. Estan dividides en dos parts:
  • Propietat: Nom de la característica que es vol canviar.
  • Valor: Valor que es vol afegir a la característica.

Els At-rules més importants són:

  • @charset -> S'escriuen al principi de tot.
  • @import -> Abans dels statements.
  • @media

Layouts

Vegeu també

Enllaços externs