CSS és un llenguatge que descriu l'estil d'un document HTML. CSS descriu com s'ha de mostrar un document HTML.
aka Cascading Style Sheets actualment en l'anomenada versió 3
Presentació:
http://justineo.github.io/slideshows/writing-css/#/2
http://primercss.io/scaffolding/
Design pattern Separation of concerns:
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:
https://elgranartista.wordpress.com/2009/09/03/las-novedades-del-css3/
http://apps.workflower.fi/vocabs/css/en
Molt més elaborat: http://justineo.github.io/slideshows/writing-css/#/2
Simple:
Exemple statement/declaració CSS:
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 allelements will be center-aligned, with a red text color: Resources
Quatre opcions:
Incrustat(embedded) al head:
Acacha Wiki
<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>
Recursos:
Hi ha infinitat de propietats que es poden classificar per apartats:
Recursos
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
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:
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
-webkit- (Chrome, newer versions of Opera.) -moz- (Firefox) -o- (Old versions of Opera) -ms- (Internet Explorer)
Resources:
http://learnlayout.com/box-sizing.html
Resources:
Vegeu CSS Centering
Vegeu CSS preprocessors
Vegeu Media Queries
Vegeu CSS transitions
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
S'utilitzen en projectes com select2.
Vegeu BEM
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:
Vegeu CSS tables a l'article sobre HTML tables
Vegeu Media Object