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ó

Són les inicials de Cascading Style Sheets. Descriu l'estil d'un document HTML.

Separation Of Concerns:

  • Content layer:
  • Presentation Layer:
  • Behavior Layer:

Tenim que tindre contingut (HTML), no te que tindre res relacinat amb la presentació i el comportament.

El javascript controla el comportament del document.

CSS és un pegat del HTML(parche).

Evitar (Negreta) ficar-ho a part amb el CSS.

Screenshot from 2017-01-10 15-47-06.png

Història

CSS 1

1996

Canviar la font, colors, definir la alineació, box-model i els css selectors per id o per classe.

CSS 2

1998

Apareix la Z(fondaria), media(per al responsive(indica el tipus de medi en que es mostra el document)),

CSS 2.1

2011

Com utilitzar CSS en un fitxer HTML?

Quatre opcions.

  • inline: Ventatge per llegibilitat, el navegador el llegeix més ràpid. No recomanable.
    • Exemple:
<body>
    <h1 style="font-size: 2em; font-weight: 700;">
        Hello World
    </h1>
    <p style="margin: 2em 0;">
        Paragraph here
    </p>
</body>
  • Embedded: Un link per afegir la fulla d'estils. Recomanable. En laravel elexir afegir dins un fitxer per afegir carregar varis.
    • Exemple:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Hello World</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>


  • External: Incrustat, mateixos problemes que la primera opció.
    • Exemple:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello World</title>
    <style type="text/css">
        /* ... */
    </style>
</head>
<body>
  • @import: import per seprar css complicats en varies parts. S'anomena at rule(@).
    • Exemple:
<style>
@import url(normalize.css);
@import url(layout.css);
@import url(typography.css);
</style>

Parts CSS

Selectors

Exemple de statement(declaració CSS):

selector.gif

Els statements(declaracions) són com funcions. Abans de els statements poden haver at rules(@import "extra.css").

  • Primer selecciona l'element HTML que vols donar-li estil.
  • Una declaració té 2 parts(propietat i valor), és separen amb ;. Hi han infinitat de propietats en CSS.

At-rules

  • @charset: Conjunt de caràcters que s'utilitzaran per llegir el document(UTF-8, per defecte). Va a dalt de tot.
  • @import: Va abans de cada declaració, excepte del @charset.

Selectors

Identificar un patró per veure com apliquem el estil. El universal és el *(tot seleccionat).

Els de tipus: seleccionen un tipus de selector en concret.

Selectors de ID: Un hash davant(#) significa que s'aplicarà aquell estil.

Per últim, els relacionats amb pseudo classes.(:hover: Al pasar per damunt, :checked: Canviar el seu estil al estat checkejat)

Selector Combinador: És poden combinar. Exemple (ul > li) una llista dins un ul.

Selector pseudoelement: L'estil que ficare just abans d'un paràgraf.

Per exemple la primera lletra d'un paràgraf donar-li éstil.

p:first-of-type::first-letter {
    font-size: 40px;
    font-weight: bold;
}

CSS Layout

2 tipus d'elements (etiquetes html):

  • Container: és obligatori i conté un conjunt d'items.
  • Items: són els elments subscerptibles de ser organitzats.

Media Querys

Per fer el css responsive usarem media querys.

Grid layouts / Grid Systems

2 tipus:

  • HTML based Grid layouts: Bootstrap, Bulma i altres sistemes.
  • CSS Grid layouts: Han sortit framewoks

Bulma

http://bulma.io/

Bootstrap

NavBar

Necessitem un html que incorpore el css del bootstrap. I també necessitem javascript per reaccionar a canvis i esdeveniments.


Mobile First Strategy

Dissenyar a partir de tindre primer en compte el mòvil.

3parts:

  • Content: Determinar que és més important.
  • Layout:
    • Primer dissenyar layouts petits
    • Primer css per a mobils -> adaptant progressivamnet tablet y desktop, large.
  • Pogressive enhancement -> Millora progressiva
    • Responsive utilities

Mides bootstrap

  • xs extra small (mobiles) fins a 768px
  • sm small (tablets o phablets) fins a 992
  • md medium desktop fins a 1200
  • lg large large desktops >1200

WRAP:

Landing Pages

Pàgina principal

Call to action: Primera acció que ens interesa que faigue l'usuari: comprar, instalar, descargar, registrar. Per exemple bootstrap, download bootstrap.

Els svg són vectorials, per tant depenent la mida el pinta i no pixela, els pdfs iguals.

Si no li indiques, o fallen les fotn s'acabaran usant les del sistema.

Color

Per evitar desastres millor usar eines per elegir colors(normalment 5), com per exemple:

Per baixar-mos bootstrap triant els components que tu vulguis.

Fonts

At rule @font-face per elegir la font. Descarrega una font i la utilitzem per tothom.

@font-face {
   font-family: 'MyWebFont'
}

Tenim el TrueType

Combinació de fonts

Normal agafar una font per capçaleres i l'altra per paràgrafs.

Textures

Per exemple per fer fondos afegim un patró, imatge petita que és repeteix:

Vegeu també

Enllaços externs