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

Historia del CSS

CSS 1 (1996) font, color, align, box-model, #id, .class, ...

CSS 2 (1998) position, z-index, media, text-shadow, ...

CSS 2.1 (2011)

CSS 2.1 vs CSS 2

Mes info history: http://justineo.github.io/slideshows/writing-css/#/

Introducció

Design pattern Separation of concerns:

1409729756css_three-layers.png

The content layer is always present. It comprises the information the author wishes to convey to his or her audience, and is embedded within HTML or XHTML markup that defines its structure and semantics. Most of the content on the Web today is text, but content can also be provided through images, animations, sound, video, and whatever else an author wants to publish.

The presentation layer defines how the content will appear to a human being who accesses the document in one way or another. The conventional way to view a web page is with a regular web browser, of course, but that’s only one of many possible access methods. For example, content can also be converted to synthetic speech for users who have impaired vision or reading difficulties.

The behavior layer involves real-time user interaction with the document. This task is normally handled by JavaScript. The interaction can be anything from a trivial validation that ensures a required field is filled in before an order form can be submitted, to sophisticated web applications that work much like ordinary desktop programs.


CSS = Cascading Style Sheets (Fulles d'estil en cascada) Està altament relacionat amb HTML

Tenim que evitar: Fer servir etiquetes tipo br o font en una presentació

Pàgina important cuan anessim a fer servir algo nou: http://caniuse.com/

Com funciona

Sintaxi

Exemple STATEMENT DECLARACIÓ CSS:

selector.gif

El selector tria la etiqueta del document HTML que es vol modificar amb el CSS

La declaració conté una o mes declaracions separades per punt i coma

Qualsevol declaracio inclueix una propietat CSS, el nom i el valor, separades per dos punts.

Una declaració CSS sempre acaba en , i la declaració sempre acaba amb }

Tipos de sel·lectors:

  • * UNIVERSAL SELECTOR
  • # ID SELECTOR Una etiqueta que cuan tingue l'id X s'aplicarà aquell estil.
  • () ATTRIBUTE SELECTOR Tipo ID pero amb atributs

Com introduïr CSS al HTML

Quatre opcions:

  • inline Avantatge principal = Millor velocitat i rendiment
  • Embedded Dintre de la capçalera, intentar evitar mes d'un CSS MES RECOMANABLE
  • External Amb styles
  • @import Serveix per juntar varios fitxers CSS amb un

Incrustat(embedded) al head:

 <head>

<style>

p { padding-bottom:12px; }

</style>

</head> 

Incrustat al tag (inline)

<p style= "padding-bottom:12px; "> Your Text</p>

Fent una importació d'un fitxer extern (external):

Teniu dos opcions:

<link href="myCSSfile.css" rel="stylesheet" type="text/css" />

or using the import method:

<style type= "text/css " media= "all ">

@import "myCSSfile.css ";

</style>

Vegeu també

Enllaços externs