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ó

CSS: Cascading Style Sheets. CSS és un llenguatge que descriu l'estil d'un document HTML. CSS descriu com s'ha de mostrar un document HTML. HTML mai ha estat pensat per a contenir tags per a formatar i donar estil a les pàgines web. Només està pensat per al contingut. Per tant necessita una capa de presentació, aqui és on entra en joc el css. El css per defecte té uns estis en cascada on hi ha definits uns estils per defecte, per aixo encara que no haguem tocat res de css veurem formatats diferens per exemple l'etiqueta "p" de la "h1".

aka Cascading Style Sheets actualment en l'anomenada versió 3

Presentació:

http://justineo.github.io/slideshows/writing-css/#/2

http://atozcss.com

http://primercss.io/scaffolding/


Sintaxi

Statement té les següents parts:

selector.gif


Selector

  • Selector: La part del document html que volem donar estils.

Ens han de permetre editar parts de l'html, Pattern matching.


Tenim un selector per a referir-nos a l'element. Després tenim la declaració, que té dos parts, la propietat i el valor.

Un selector és una forma d'escollir un o diversos elements del DOM(Document object Model). L'HTML té una estructura d'arbre, que té una etiqueta pare (html).

Declaracions Selección 999(815).png


Cascade

Utilitza una tècnica user agent, cada navegador utilitza els seus propis estils per defecte. Es poden utilitzar estils per usuari. A l'hora de resoldre conflicte en diversos estils especificats el que té mñes importan cia és el que ha definit l'autor d'una web, seguit per el que ha definit l'usuari i finalment l'user agent.

Com utilitzar CSS en un fitxer HTML?

Tres opcions:

  • inline
  • Embedded
  • External
  • Import

Incrustat(embedded) al head:

 <head>

<style>

p { padding-bottom:12px; }

</style>

</head> 

Incrustat al tag (inline)

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

Aquest és el que té més importacia, el que sobrescriura a tots els altres, però d'aquesta manera barraijem el contingut i la presentació, i és una de les coses que més es vol evitar. Fent una importació d'un fitxer extern (external):

Tenim 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>



http://jsbin.com/katafiveje/edit?css,output http://jsbin.com/razaxo/1/edit?html,css,output http://jsbin.com/razaxo/5/ http://jsbin.com/jamiti/edit?html,css,output http://jsbin.com/nidolez/edit?html,css,output http://jsbin.com/nidolez/edit?html,css,output



Css reset

També anomenat normalize, és un css que la idea que té es carregar-lo inicialment i a l'inici normalitzar les diferències entre navegadors.

Definició de conceptes

  • Herència: hi ha propietats que poden tenir herència i n'hi ha que no, les etiquetes fills poden heretar propietats de les etiquetes pare.

Per a resoldre possible problemes d'herencia, utilitzem l'anomenat especificitat, el que tingue el valor més alt serà el que tindrà més força.

Vegeu També

Enllaços externs