Introduzione a

CSS 3

un
po' di
Storia

•  A partire dal 1994 Håkon Wium Lie comincia a lavorare su un formato di fogli di stile chiamato poi CSS
• Formalizzato nel 1996 dal W3C

• Separare la descrizione stilistica dalla struttura del documento
• Dare ai creatori maggiore liberta' per lo stile degli elementi
• Arricchire graficamente le pagine web
• Per un vero supporto da parte dei browser si aspettera' il 2000, con Opera e IE5
• CSS 2 nel 1997
• CSS 3 2011-2014

Cascading HTML Style Sheets

<link href="style.css" rel="stylesheet">

Reset

i default del browser

reset

il meyer

css:
i selettori

selettore {
        attributo: valore;
}

body {
    color: red;
}

p {
    color: white;
    background-color: black; 
}

Il selettore serve per selezionare tutti gli elementi che verificano la regola. Le proprieta' vengono applicate agli elementi selezionati.

Le regole vengono applicate in cascata (cascade) dalla regola piu' generale a quella piu' specifica. Eventuali attributi ripetuti vengono sovrascritti.

/* Tutti gli elementi che hanno l'attributo attr */
[attr] { }

/* Tutti gli elementi che hanno l'attributo attr uguale a value */
[attr=value] { }

/* Tutti gli elementi che hanno l'attributo attr che comincia per value */
[attr^=value] { }

/* Tutti gli elementi che hanno l'attributo attr che finisce per value */
[attr$=value] { }

/* Tutti gli elementi che hanno l'attributo attr che contiene la sottostringa value */
[attr*=value] { }

/* Tutti gli elementi di tipo p che hanno l'attributo attr uguale a value */
p[attr=value] { }

Esercizio 1

• pagina:
• background-color: #22283B;
• testo:
  color: #C1CDD2;
• titolo:
  background-color: #4E6370;
• il sottotitolo:
  font-style: italic;
• i vari capitoli:
  border: 1px solid #EAF1FE;
  font-variant: small-caps;
• il primo paragrafo di ogni capitolo:
  color: #EAF1FE;

BOX
MODEL

Content

PADDING

BORDER

MARGIN

div {
    width: 100px;

    height: 100%;

    margin: 10px;

    margin-top: 2em;

    margin: 1em 2em 1em 2em;

    padding: 10px;

    padding-left: 20px;

    padding: 1em 2em;
}

Size %

vw e vh

px

em

margin: auto;

Specificando come `auto` i margini di un elemento il browser cercherà di mettere quanto più margine possibile. Questo è un trucchetto che può essere utile per centrare orizzontalmente un elemento nel suo parent, solitamente.

.container {
    width: 200px;
    height: 100px;
}

.child {
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    height: 50%;
}

calc(expr)

Esercizio 1

Position

STATIC

FIXED

Relative

absolute

Barra di navigazione

Proviamo a costruire una barra di navigazione fissa in cima alla pagina, che rimanga tale anche se si scrolla. Riempiamo la pagina con qualche paragrafo di lorem ipsum per vedere l'effetto.

boxes

Ricreare l'esercizio come da esempio.

ID & CLASS

ID unici

Class

SENZA DEFAULT

COMPORRE ID E CLASSI

#my-id {
    color: white;
}

.my-class {
    color: black;
}

<h1 id="title">Hello World</h1>
<p class="my-class">Lorem ipsum</p>

/* Tutti gli elementi */
* { }

/* L'elemento avente l'id specificato */
#id { }

/* Tutti gli elementi di classe specificata */
.class { }

/* L'elemento con id e classe specificata */
#id.class { }

/* Tutti gli elementi di classe1 e classe2 */
.class1.class2 { }

/* Tutti gli elementi di classe 2 discendenti di classe 1 */
.class1 .class2 { }

/* Tutti gli elementi di class1 con attr = value */
.class1[attr=value] { }

css
properties

p {
    /* colore del testo */
    color: black;
    /* colore di sfondo */
    background-color: white;
    /* allineamento */
    text-align: center; /* left | right | justify */
    /* decorazione del testo */
    text-decoration: none; /* overline | line-through | underline */
    /* upper-lower case */
    text-transform: lowercase; /* uppercase | capitalize */
    /* indentazione */
    text-indent: 20px;
    /* spazio tra lettere e parole */
    letter-spacing: 2px;
    word-spacing: 10px;
    /* altezza di una linea */
    line-height: 20px
}

p {
    /* stile del bordo per tutti i lati */
    border-style: solid;
    border-width: 2px;
    border-color: black;
    /* o per singolo lato */
    border-top-style: solid;
    border-top-width: 2px;
    border-top-color: black;
    /* o con una shortcut */
    border: 2px solid black;
}

p {
    /* font: nome, famiglia, serif/non serif */
    font-family: "Times New Roman", Times, serif;
    /* stile del font */
    font-style: normal; /* italic | oblique */
    /* dimensioni */
    font-size: 20px;
    /* peso del font */
    font-weight: normal; /* bold */
    /* variante del font */
    font-variant: normal; /* small-caps */
}

display

inline

block

inline-block

none

pseudo-classi

Button

Possiamo creare la nostra classe 'button' per stilare dei link per avere dei pulsanti da usare nella nostra pagina web.

Vedere esempio.

Animazioni

Aggiungete le animazioni come da esempio: il cambio di colore e la posizione.