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ó

Cascading Style Sheets (CSS, en català: Fulls d'Estil en Cascada) és un llenguatge de fulls d'estil utilitzat per descriure la semàntica de presentació (l'aspecte i format) d'un document escrit en un llenguatge de marques. La seva aplicació més comuna és dissenyar pàgines web escrites en HTML i XHTML, però el llenguatge també pot ser aplicat a qualsevol classe de document XML, incloent-hi SVG i XUL.

CSS està dissenyat principalment per permetre la separació de contingut del document (escrit en HTML o un llenguatge de marques similar) de la presentació del document, incloent-hi elements com la disposició, colors, i Tipus (terme tipogràfic). Aquesta separació pot millorar l'accessibilitat al contingut, proporcionar més flexibilitat i control en l'especificació de característiques de presentació, permetre que múltiples pàgines comparteixin un format comú, i redueix complexitat i repetició en el contingut estructural (com per exemple al permetre disseny web sense taules). CSS també pot deixar la mateixa pàgina de marques ser presentada en estils diferents mitjançant mètodes de render diferents, com a la pantalla, en impressió, per veu (quan és llegida en veu alta per un navegador amb lector o pantalla lectora) i amb mecanismes Sistema somatosensorial amb sistemes Braille. Mentre que l'autor d'un document típicament associa els documents amb un full d'estil CSS, els lectors poden utilitzar un full d'estil diferent, potser un al seu propi ordinador, per invalidar aquell que l'autor ha especificat.

Capes

Css pedro.png

La capa de contingut està sempre present. Es compon de la informació que l'autor vol transmetre a la seva audiència, i s'insereix dins d'HTML o XHTML que defineix la seva estructura i la semàntica. La major part del contingut a la Web avui en dia és el text, però el contingut també es pot proporcionar a través d'imatges, animacions, so, vídeo, i qualsevol altra cosa que un autor vol publicar.

La capa de presentació defineix com el contingut apareixerà a un ésser humà que accedeix el document en una forma o altra. La forma convencional de veure una pàgina web és un navegador web normal, per descomptat, però això és només un dels molts mètodes d'accés possibles. Per exemple, el contingut també es pot convertir en veu sintètica per als usuaris que pateixen de trastorns o dificultats en la visió de lectura.


La capa de comportament implica la interacció de l'usuari en temps real amb el document. Aquesta tasca és normalment manejat per JavaScript. La interacció pot ser qualsevol cosa des d'una validació trivial que assegura un camp obligatori està buit abans d'un formulari de comanda pot ser enviat, a sofisticades aplicacions web que funcionen de la mateixa manera que els programes d'escriptori normal.


Història

Els fulls d'estil han existit d'una forma o altra des dels començaments de SGML durant els anys 1970. Els Fulls d'Estil en Cascada es desenvolupaven com a mitjà per crear una aproximació consistent a proporcionar informació d'estil per a documents web.

A mesura que HTML augmentava, anava afegint una varietat més àmplia de capacitats estilístiques per satisfer les demandes de desenvolupadors web. Aquesta evolució donava més control sobre l'aspecte dels llocs però al cost que HTML es tornés més complex d'escriure i de mantenir per als dissenyadors. Les diferències entre navegadors web feien difícil la consistència de l'aparença dels llocs web, i els usuaris tenien menys control sobre com el contingut web era mostrat.

Variacions

CSS té diversos nivells i perfils. Cada nivell de CSS es construeix a partir de l'últim, típicament afegint trets nous i típicament denotat com CSS1, CSS2, i CSS3. Els perfils són típicament un subconjunt d'un o més nivells de CSS fets per a una interfície d'usuari o dispositiu particular. Actualment hi ha perfils per a mecanismes mòbils, impressores, i televisors. Els perfils no s'haurien de confondre amb tipus de mitjans de comunicació, que es van afegir a CSS2.

CSS 1

La primera especificació CSS que va esdevenir una recomanació oficial del W3C és el nivell de CSS 1, publicat el desembre del 1996. Cascading Style Sheets, level 1 CSS 1 specificationEntre les seves capacitats hi ha suport per:

  • Propietats de Tipus (terme tipogràfic) com tipografia i èmfasi.
  • Color de text, fons, i altres elements.
  • Atributs de text com espaiat entre paraules, lletres, i línies de text.
  • Alineació de text, imatges, taules i uns altres elements.
  • Marge, vora, padding, i posició per a la majoria dels elements.
  • Identificació única i classificació genèrica de grups d'atributs.

CSS 2

CSS Nivell 2 era desenvolupat pel W3C i es publicava com a Recomanació el maig del 1998. Essent un superconjunt de CSS1, CSS2 inclou un cert nombre de capacitats noves com posicionament absolut, relatiu, i fix d'elements i z-index, el concepte de tipus de mitjans multimèdia, suport per a fulls d'estil auditius i text bidireccional, i propietats de font noves com ombres. El W3C manté la recomanació CSS2.: Cascading Style Sheets, level 2 CSS 2 specification

CSS Nivell 2 revisió 1 o CSS 2.1 arregla errors en CSS2, treu característiques a les quals es donava suport molt pobre i afegeix ampliacions ja implementades als navegadors a l'especificació. Encara que era una Recomanació Candidata durant uns quants mesos, el 15 de juny del 2005 era tornat a un esborrany per a futura revisió.

CSS 3

El nivell de CSS 3 és actualment en desenvolupament, des del 15 de desembre del 2005.Cascading and inheritance W3C Working DraftEls primers esborranys de CSS3 van ser alliberats el juny del 1999.http://news.css3.info/ El Roadmap de W3C CSS3 proporciona un resum i introducció d'aquesta nova versió de fulls d'estil.«Introduction to CSS3, W3C Working Draft, 23 May 2001». W3.org. [Consulta: 2009-06-20 A diferència de CSS2, que va ser una especificació que definia diverses funcionalitats, CSS3 està dividida en diversos documents separats, anomenats mòduls. Cada mòdul afegeix noves funcionalitats a les definides a CSS2, de manera que es preserven les anteriors per mantenir la compatibilitat. Degut a la modulació dels CSS3, diversos mòduls poden trobar-se en diferents estadis de desenvolupament.

Els tres tipus d'estils

CSS proporciona tres camins diferents per aplicar les regles d'estil a una pàgina Web:

1. Un full d'estil extern, que és un full d'estil que està emmagatzemat en un arxiu diferent a l'arxiu on s'emmagatzema el codi HTML de la pàgina web. Aquesta és la manera de programar més potent, perquè separa completament les regles de format per la pàgina HTML de l'estructura bàsica de la pàgina.

2. Un full d'estil intern, que és un full d'estil que està incrustat dins d'un document HTML. (Va a la dreta de l'element <head>). D'aquesta manera s'obté el benefici de separar la informació de l'estil, del codi HTML pròpiament dit. Es pot optar per copiar el full d'estil incrustat d'una pàgina a una altra, (aquesta possibilitat és difícil d'executar si es vol per guardar les còpies sincronitzades). En general, l'única vegada que es fa servir un full d'estil intern, és quan es vol proporcionar alguna característica a una pàgina web en un simple fitxer, per exemple, si s'està enviant alguna cosa a la pàgina web.

3. Un estil en línia(In-line), que és un mètode per insertar el llenguatge d'estil de pàgina directament, dins d'una etiqueta HTML. Aquesta manera de fer no és totalment adequada. L'inserir la descripció del format dins del document de la pàgina web a nivell de codi es converteix en una feina llarga, costosa i poc elegant per resoldre el problema de la programació de la pàgina. Aquest mode de treball es podria usar de manera ocasional si es pretén aplicar un format amb pressa, ràpidament. No és tot senzill o estructurat com hauria de ser, però funciona. Aquest és el mètode recomanat per maquetar correus electrònics en HTML.

En aquest curs intentarem no utilitzar el mètode 3(In-Line)ja que no compleix amb el separation of contents.

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>

Sintaxis

CSS té una sintaxi simple i utilitza un cert nombre de paraules clau angleses per especificar els noms de diverses propietats d'estil.

Un full d'estil consta d'una llista de regles. Cada regla o conjunt de regles consta d'un o més selectors i un bloc de declaracions. Un bloc de declaració consta d'una llista de declaracions entre claus d'ator. Cada declaració mateixa consta d'una propietat, dos punts (:), un valor, seguit de semidos punts (;).

En CSS, els selectors s'utilitzen per declarar a quins dels elements de marca s'aplica un estil. Els seleccionadors poden afectar a tots els elements d'un tipus específic, o només aquells elements que tenen un cert atribut; es pot afectar a elements depenent de com es posen relativament els uns dels altres en el codi de marcatge, o damunt com es nien dins del moder d'objectes del document.

Les pseudoclasses són una altra forma d'especificació utilitzada en CSS per identificar elements de marca, i en alguns casos, accions d'usuari específiques a què s'aplica un bloc de declaracions particular. Un exemple sovint utilitzat és la pseudoclasse de :hover que aplica un estil a' només quan l'usuari 'assenyala' l'element visible, normalment mantenint el cursor sobre l'element. S'afegeix a un seleccionador com en a:hover o #elementid:hover. Altres pseudoclasses i els pseudo-elements són, per exemple, :first-line, :visited o :before. Una pseudoclasse especial és :lang(c), "c".

Una pseudoclasse selecciona elements sencers, com :link o :visited, mentre que un pseudo-element fa una selecció que pot constar d'elements parcials, com :first-line o :first-letter.

Els selectors es poden combinar d'altres maneres també, especialment en CSS 2.1, per aconseguir especificitat i flexibilitat més gran.

Exemple d'statement CSS:

Simple:

selector.gif

Selectors

Selectors d' http://apps.workflower.fi/vocabs/css/en#selector

Selectors.png

Sleectors.png

Exemple CSS Wiki

green text

Mòduls

Les especificacions de CSS3 aporten novetats que permeten fer webs més elaborades i dinàmiques, amb una major separació d'estils i continguts. Aquestes especificacions donen suport a moltes necessitats de les webs actuals, sense haver de recórrer als llenguatges de programació. CSS3 ofereix noves funcions que poden ser implementades en qualsevol pàgina de Firefox, Konqueror, Opera o Safari:

  • Borders:
  • Border-color: permet definir un graduant de color a la vora dels elements de la pàgina amb CSS. Aquesta propietat és una extensió de CSS realitzada per Mozilla, i per tant, es pot veure en el seu navegador més conegut: Firefox. Aquests són els atributs que ens permeten definir diversos colors per cadascuna de les parts de les vores:
- moz-border-top-colors
- moz-border-right-color
- moz-border-bottom-colors
- moz-border-left-colors
  • Border-image: fa possible la utilització d'imatges com vores dels elements de les pàgines, sense codi HTM, simplement amb pàgines d'estil.
  • Border-radius: permet definir la curvatura de les vores, especificant les mesures de la ràtio que han de donar-se a la curvatura de les cantonades. Per exemple, amb border-radiu: 5px; es defineix un ràtio de 5 píxels en l'arrodoniment de les cantonades de l'element.
  • Box-shadow: permet aplicar ombres als elements de la pàgina sense utilitzar imatges ni Javascript. Aquest atribut requereix diversos valors per especificar les característiques del desplaçament horitzontal de l'ombra, el desplaçament vertical, el difuminat i el color d'aquesta (exemple en l'ordre d'aparició dels valors indicats: 5px -9px 3px #000).
  • Backgrounds:
  • Background-origin: defineix l'origen de coordenades sobre la qual es col·locarà una imatge de fons perquè aquesta sigui la vora de l'element o del seu contingut.
  • Background-size: defineix la grandària de les imatges de fons, utilitzant longituds, percentatges o mitjançant l'ús de paraules claus (contain or cover).
  • Multiple background: permet fer capes amb múltiples imatges de fons. Escrivint les diverses imatges en la declaració CSS separades per comes.
  • Color:
Mitjançant els colors en RGBA, es poden aplicar noves transparències als colors que s'especifiquen amb CSS. HSL colors incorpora els valors de matís, saturació i lluminositat que permet una gamma molt àmplia de colors i tons disponibles. HSL colors opacity permet treballar l'opacitat i és la característica més àmpliament implementada de CSS3.

HSL.png

  • Text effects:
  • Text-shadow: permet aplicar ombres sòlides, desenfocades, col·locar diverses ombres en un mateix element i nous efectes als textos amb CSS.
  • Text- overflow: serveix per fragmentar les paraules que són massa llargues i no caben dins de l'amplada d'un encapçalament.
  • Word-wrap: permet utilitzar qualsevol tipografia en una pàgina web. Amb la regla @front-face que permet definir en el full d'estils qualsevol tipografia independentment de si l'usuari disposa d'ella o no.
  • User-interface:
  • Box-sizing: ofereix una nova característica que permet canviar el comportament del navegador en el càlcul de l'amplada d'un element.

Size1.png

  • Selectors:
El mòdul de selector introdueix tres nous selectors d'atributs que s'agrupen sota el títol "attribute selectors". El primer permet la selecció dels elements en els quals un atribut comença amb una cadena específica. Els altres dos permeten la selecció dels elements (un determina "acaba en" i l'altre "conté") en els quals un atribut especificat no acaba ni conté una cadena especificada.
  • Altres mòduls: altres de les funcions que es poden desenvolupar amb les especificacions dels CSS3, són:
  • Multi-column Layout: permet la creació de múltiples columnes de text. incorpora nous atributs perquè el navegador s'encarregui de produir textos multicolumnes, és a dir, que maqueti directament el text en diverses columnes.
  • CSS3 Transitions: són uns efectes de presentació que permeten fer canvis de propietat en els valors de CSS per crear efectes de transició.
  • Animacions:
Una de les característiques de CSS3 és la possibilitat de crear animacions dels elements de la pàgina. Abans només estaven disponibles per als programadors Javascript o dissenyadors amb Flash. Permet crear fons animats, àlbums de fotos animats, menús animats i botons amb efectes.

Layouts

Grid layouts/ Grid systems

CSS Grid Layout (aka "Grid"), és un sistema de disposició bidimensional basat en la quadrícula que té com a objectiu fer ni més ni menys que canviar completament la forma en què vam dissenyar interfícies d'usuari basades en grid. CSS sempre s'ha utilitzat per dissenyar les nostres pàgines web, però mai s'ha fet una feina molt bona de la mateixa. Primer fem servir taules, després flotadors, posicionament i bloqueig en línia, però tots aquests mètodes eren essencialment hacks i van deixar fora una gran quantitat de funcionalitat important (centrat vertical, per exemple). Flexbox va ajudar, però està pensat per a dissenys unidimensionals més senzills, no complexos bidimensionals (Flexbox i Grid funcionen molt bé junts). Grid és el primer mòdul CSS creat específicament per a solucionar els problemes de disseny que tots hem estat hackejant durant el temps que hem estat fent llocs web.

Hi ha dues coses principals que em van inspirar a crear aquesta guia. El primer és l'impressionant llibre de Rachel Andrew Get Ready for CSS Grid Layout. És una introducció completa i clara a la xarxa i és la base de tot aquest article. Li recomano que el compri i el llegeixi. La meva altra gran inspiració és Chris Coyier Una guia completa de Flexbox, que ha estat el meu recurs d'anar per a tots els flexbox. Ha ajudat a un munt de persones, evident pel fet que és el primer resultat quan Google va "flexbox". T'adonaràs de moltes similituds entre el seu lloc i el meu, perquè ¿per què no robar dels millors?

La meva intenció amb aquesta guia és presentar els conceptes de Grid com existeixen en l'última versió de l'especificació. Així que no vaig a estar cobrint la sintaxi actualitzada de l'IE, i faré tot el possible per actualitzar aquesta guia regularment a mesura que maduri l'especificació.


Bulma

http://bulma.io/documentation/grid/columns/

Bootstrap

Mobile first strategy

A partir V3 de bootstrap.

3 parts:

  • Content: Determinar què és més important
  • Layout:
  • Primer dissenyar layouts petits
  • Primer CSS per a mobils -> adaptant progressivament tablets, desktop, large.
  • Progressive enhancement -> Millora progresiva.
http://getbootstrap.com/css/#grid

Color

Material

Selector de colors per a mdl

http://getmdl.io/customize/index.html

Frameworks CSS

Bootstrap

Resources:

Tutorials de disseny web simple

https://www.williamghelfi.com/blog/2013/08/04/bootstrap-in-practice-a-landing-page/
https://24ways.org/…/how-to-make-your-site-look-half-decent/

Esquemes de colors i palettes

http://getmdl.io/customize/index.html
http://paletton.com/
https://color.adobe.com

Vegeu També

Enllaços Externs