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

Vegeu també

Enllaços externs