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

Els layouts són capes de distribució.
Hi han 3 tipus de Box Layouts:

  • Block -> A les etiquetes
     : Vertical
  • Inline -> A les etiques de text com els <a> : Horitzontal
  • Inline-block -> Una combinació dels dos anteriors.

Flex

Li dona flexibilitat al layout, és a dir, les seves mides pasen a ser dinàmiques per facilitar el resizing, l'stretching i l'shrinking.
Hi han dos tipus d'elements (etiquetes html):

  • Container: És obligatori i conté un conjunt d'items.
  • Item: Són els elements subsceptibles de ser organitzats.

Grid

Hi han dos tipus:

  • Basats amb HTML -> Bootstrap, Bulma...
  • Basats amb CSS -> Diferents frameworks.

Bulma

La instal·lació serà la següent:

$ npm install bulma

I afegir el link a l'index de l'html:

<link rel="stylesheet" href="../node_modules/bulma/css/bulma.css">

Bootstrap

La instal·lació serà la següent:

$ npm install bootstrap@3

I afegir el link a l'index de l'html:

<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">

Hi han diferents tipus de mides:

  • xs --> extra small (mobiles) --> fins a 768px
  • sm --> small (tablets o phablets) --> fins a 992px
  • md --> medium (desktop) --> fins a 1200px
  • lg --> large (large desktop) --> major que 1200px

Mobile First Strategy

A partir de la v3 de Boostrap, es va pensar amb el disseny mòbil com al més important a l'hora de dissenyar una web. És va dividir en 3 parts:

  • Content: Determinar que és el més important.
  • Layout:
  • Primer dissenyar els layouts petits.
  • Primer CSS per a mòbils --> Anar adaptant progressivament tablets, desktop, large.
  • Progressive enhancement --> Millora prograssiva:
  • Responsive utilities

Colors

Pàgines web interessants amb esquemes de colors i palettes:

Fonts

En qüestions de disseny, normalment tindrem un tipus de font per a les capçaleres i un altre per al contingut. Per exemple:

h1 {
	font-family: 'Lobster', Georgia, Times, serif;
	font-size: 70px;
	line-height: 100px;
}
 
p {
	font-family: 'Cabin', Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 25px;
}

Vegeu també

Enllaços externs