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ó

  • CSS (Cascading Style Sheets), traduït Full d'estil en cascada.
  • Serveix per descriure l'estil d'un document HTML.
  • El CSS va sorgir després del HTML per solucionar problemes que es van trobar amb HTML
  • Capa de contingut, capa de presentació i capa de comportament

Exemple

<div style="display:none">
    Hola mundo!
</div>

Recursos:

Història

  • CSS 1 (1996)
font, color, align, box-model, #id, .class, ...
  • CSS 2 (1998)
position, z-index, media, text-shadow, ...
  • CSS 2.1 (2011)
CSS 2.1 vs CSS 2
  • CSS 3 (Actualment)
flex-box,

Recursos:

Contingut

Com funciona?

Sintaxi

  1. Selector,
  2. Declaració,
  • Propietat, existeixen moltes propietats.
  • Valor,

selector.gif

At-rules

  • @charset
(before anything else — any character)
  • @import
(before any statement except @charset)
  • @media
  • @font-face
@charset "UTF-8";
@import "styles.css" screen and (min-width: 960px);

Selectors

Basic simple selectors Example
Type selectors p, span
ID selectorss #nav, #main
Class selectors .comment, .post
Pseudo classes :hover, :lang(zh), :checked
Attribute selectors [title], [rel~="copyright"]
Universal selectors *

Com utilitzar CSS en un fitxer HTML?

1) Inline style: , directament en la etiqueta.

<body>
    <h1 style="font-size: 2em; font-weight: 700;">
        Hello World
    </h1>
    <p style="margin: 2em 0;">
        Paragraph here
    </p>
</body>

2) <link> element:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Hello World</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
...

3) <style> element:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello World</title>
    <style type="text/css">
        /* ... */
    </style>
</head>
<body>
...

4) @import rules inside <style> element

<style>
@import url(normalize.css);
@import url(layout.css);
@import url(typography.css);
</style>

Recursos:

Propietats

Les fulles d'estils podem tenir tres origens:

  • User agent (Navegador): Cada navegador té una fulla d'estil per defecte.
  • Usuaris: Pot arribar a indiciar les seves propis fulles d'estils.
  • Autor: Dissenyador de la propia pàgina web.

Tres opcions en el que l'autor pot utilitzar els CSS

Incrustat (embeded): El col·loquen en el HEAD dins d'una etiqueta <style> </style>

<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):

Tenim dos opcions:

 <link href="myCSSfile.css" rel="stylesheet" type="text/css" /> 

O utilitzar un mètode d'importació

<style type= "text/css " media= "all ">

@import "myCSSfile.css ";

</style>

Herència

Les propietats tenen herencia, hi han que hereden dels pares i han que no.


Casdade

Procés que s'aplica per resoldre un conflicte, aquest conflictes pot ser quan s'aplica elements incoherents. Esta relacionat amb la herència però no tot està relacionat amb la herència.

Ordre del codi

  1. user agent declaration
  2. user declaration
  3. author declaration

Flexbox

Practica

Boxmodel

$ php artisan make:vc boxmodel

Posició

Editar directament per consola Google Chrome

$0.style.display='block'

Float

Recursos:

Clearfix hack:

Vegeu també

Enllaços externs