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 és un llenguatge que descriu l'estil d'un document HTML. CSS descriu com s'ha de mostrar un document HTML.

Intro

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/

Introducció

Design pattern Separation of concerns:

1409729756css_three-layers.png

CSS arregla un gran problema

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:

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

Va haver-hi un moment que es van començar a afegir etiquetes d'estil (que s'han d'evitar!):

<font>
Atributs de color
etc...

Per solventar aquest problema i separar la presentació del contingut apareix CSS de forma que es pot eliminar tot el tema de format d'un document HTML i passar aquesta informació a un CSS.

Resources:

CSS 3

https://elgranartista.wordpress.com/2009/09/03/las-novedades-del-css3/

Eines

Com funciona?

Sintaxi

http://apps.workflower.fi/vocabs/css/en

Molt més elaborat: http://justineo.github.io/slideshows/writing-css/#/2

Simple:

Exemple statement/declaració CSS:

selector.gif

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon.

A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.

In the following example all

elements will be center-aligned, with a red text color: Resources

Com utilitzar CSS en un fitxer HTML?

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

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>

CSS selectors

CSS Selectors:

Recursos:

CSS properties

Hi ha infinitat de propietats que es poden classificar per apartats:

  • Box Properties
  • Layout Properties
  • List Properties
  • Table Properties
  • Color and Backgrounds
  • Typographical Properties
  • Generated Content
  • User Interface Properties
  • Paged Media Properties
  • Vendor-specific Properties


Recursos

Cascading

Cascading vs Inheritance

La herència fa referència a com les propietats s'hereten dels elements pares als elements fills. Algunes propietats CSS(CSS properties) hereten dels pars i altres no. Per exemple font-family s'hereta i també color però altres com  
background o height no (cosa que té bastant de sentit)

La cascade està relacionat amb com se resolen els conflictes, és a dir qui precedeix (guanya el conflicte) quan diferents propietats entren en conflicte. Les normés só
- Les propietats que s'indiquen a posteriori tenen prioritat a les indicades anteriorment
- Els selectors més específics sobrescriuen els selectors menys específics (CSS Specificity)
- Les Specified properties sobrescriuen les inherited properties
....

Recursos

http://webdesignfromscratch.com/html-css/css-inheritance-cascade/
http://www.slideshare.net/MonerKamal/css-specificity-inheritance-and-the-cascade-things-you-should-know
  • Styles can be inherited from a parent
  • Later styles over-rule earlier styles
  • Styles can combine from different sources
  • Style definitions can use any combination of element, id, classname and modifier
  • You can specify an element with a certain element type AND id and classname(s)
  • Styles can apply to elements nested in a particular way

User agent stylesheets

Cada navegador té unes fulles d'estil per defecte i no són iguals (sorpresa ;-)). Podeu trobar referències a:

http://meiert.com/en/blog/20070922/user-agent-style-sheets/

També amb Chrome-dev-tools podeu veure al inspeccionar els elements estils d'usuari del navegador. Projectes com Bootstrap i molts altres utilitzen normalize o eines similars per a normalitzar les diferències.

Vegeu Normalize/CSS resets Recursos:

CSS specificity

Selector specificity és un procés per determinar quines normes CSS tenen preferència quina múltiples normes CSS s'apliquen al mateix element HTML. Vegeu:

http://www.slideshare.net/MonerKamal/css-specificity-inheritance-and-the-cascade-things-you-should-know

CSS vendor prefixes

-webkit- (Chrome, newer versions of Opera.)
-moz- (Firefox)
-o- (Old versions of Opera)
-ms- (Internet Explorer)

Resources:

CSS Box model

Box model

box-sizing:

http://learnlayout.com/box-sizing.html

Resources:

CSS Layout

CSS Layout

CSS centering

Vegeu CSS Centering

Frameworks, CSS Preprocessors i altres eines

Vegeu CSS preprocessors

Temes i plantilles

CSS media queries

Vegeu Media Queries

CSS Transitions

Vegeu CSS transitions

Altres

Flexbox

https://laracasts.com/series/learn-flexbox-through-examples
http://caniuse.com/#search=flexbox (no hi ha suport per IE8 i IE9)
https://laracasts.com/series/learn-flexbox-through-examples

Flexbox

Grid Systems

Grid Systems

Sprites

S'utilitzen en projectes com select2.

Patrons

BEM

Vegeu BEM

CSS variables

Permet definir i utilitzar variables als fitxers CSS i que aquestes variables es puguin modificar en temps d'execució (oco amb eines com Sass o Less es pot fer quelcom similar però sempre toca "recompilar" els fulls d'estil)

Vegeu també:

Recursos:

CSS tables

Vegeu CSS tables a l'article sobre HTML tables

Media objects

Vegeu Media Object

Vegeu també

Enllaços externs