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)

CSS

selector.gif

Introducció

Cascading Style Sheets

1409729756css_three-layers.png

  • El CSS va ser un pegat, per solucionar problemes d'estils al HTML, el HTML va ser creat primer que el CSS.

Ex de problemes :

 <b> Prova </b>

<div style="display=none">
asdasd
</div>

Historia

1996 va sortir el CSS 1 -> font, color, align, box-model, #id, .class, ...

1998 el CSS 2 -> position, z-index, media, text-shadow, ...

2011 CSS 2.1

Com utilitzar el CSS

Inline

Ex:


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

  • Desavantatge: Evitar mesclar codi
  • Avantatja: Més ràpid

Embedded

Ex:

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

  • Desavantatge:
  • Avantatja:

Exterlan

Ex:

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

@import

Ex:


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

Layouts

Flex: Flexibilitat (dinamiques, resizing, stretching, shrinking)

2 tipus elements (etiquetes html):

- Container: és obligatori i conté un conjunt d'items
- Items: són els elements susceptibles de ser organitzats

Vegeu també

Enllaços externs