Progettazione Multimediale

Chi sono

Filippo Matteo Riggio

CTO @ Kaleidoscope Srl

Full Stack Developer

Introduzione

HTML

HTML è un meta linguaggio per la creazione di pagine web.

Analizzeremo e studieremo gli elementi e gli attributi per la creazione di pagine strutturate.

CSS

CSS è un meta linguaggio per applicare stili alle nostre pagine web, migliorandone la presentazione per una migliore fruizione.

Cosa è CSS?

CSS è un acronimo per Cascade Style Sheets, cioè fogli di stile in cascata. E' un linguaggio che ci permette di definire lo stile degli elementi HTML.

NON è un linguaggio di programmazione.

E' nato in seguito all'introduzione di HTML per definire stili di testo per migliorare la leggibilità e la comprensione dei contenuti.

 

Ad oggi siamo alla versione 3 (che ha introdotto le animazioni), e siamo in attesa dell'approvazione della versione 4.

Come funziona

Per capire come funziona CSS, dobbiamo pensare ad un box invisibile intorno agli elementi HTML.

 

In particolare copriremo 4 macro-aree dello stile:
- Box

- Testo

- Altre proprietà

- Animazioni

Gestione del CSS

I CSS possono essere gestiti attraverso l'attributo HTML style, inclusi nel tag <head> o tramite un file esterno poi incluso nell'html:

<html>
    <head>

        <style type="text/css">
        p {
            font-size: 12px;
            font-weight: bold;    
        }
        </style>
    
        <!-- Incluso da file esterno -->
        <link href="style.css" type="text/css" rel="stylesheet" />
    </head>
    <body>

        <p style="font-weight: bold;">Testo in grassetto</p>

    </body>
</html>

Selettori CSS

Vi sono vari tipi di selettori CSS, ognuno per uno specifico scopo.

Vediamo i principali:

* { } // Selettore universale

h1, h2, h3 { } // Selettore di tipo

.class { } // Selettore di classe

#mio_id { } // Selettore di ID

li > a { } // Selettore di figlio diretto

li a { } // Selettore discendenti

h1 + p { } // Selettore di fratello adiacente

h1 ~ p { } // Selettore di fratello generico

Come si applicano le regole

Se a uno stesso elemento, si applicano più regole, le regole CSS si applicano così:

- se i selettori CSS sono identici, si applica l'ultima regola

- se un selettore è più specifico di altri, la regola più specifica si applica

- important: se è applicata la regola "!important", l'ultima regola con "!important" viene applicata

 

A seguire un esempio

<style type="text/css">
    * {
    	font-family: Arial, Verdana, sans-serif;
    }
    h1 {
    	font-family: "Courier New", Courier, monospace;
    }
    i {
    	color: green;
    }
    i {
    	color: red;
    }
    b {
    	color: pink;
    }
    p b {
    	color: blue !important;
    }
    p b {
    	color: violet;
    }
    p#intro {
    	font-size: 100%;
    }
    p {
    	font-size: 75%;
    }
</style>

<h1>Patate</h1>
<p id="intro">Ci sono una <i>dozzina</i> di variet&agrave; di <b>patate</b>.</p>
<p>Generalmente si descrivono come primizie, tardive.</p>

Ereditarietà

Se specificate una proprietà all'interno di un selettore come il body o l'html, questa regola viene ereditata da tutti gli altri selettori.

 

Questo per evitare di applicare le stesse regole per tutti gli elementi.

 

In informatica, si tende sempre a non ripetere lo stesso codice.

Le regole

Come si definiscono le regole?

Le regole sono definite da due parti: una proprietà e un valore, separati dal segno di ":".

font-weight : bold;

Dimensioni del box

Come definire le dimensioni del nostro elemento.

<div class="elemento">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Proin rutrum varius commodo. 
    Sed nisl neque, pharetra vitae nibh vitae, posuere convallis risus.
</div>

.elemento {
    width: 200px;
    height: 50px;
    min-width: 100px;
    max-width: 300px;
    min-height: 40px;
    max-height: 60px;
}

Contenuti che eccedono le dimensioni

Nel caso il contenuto del nostro contenitore ecceda le dimensioni del nostro elemento, possiamo gestire lo stile con la proprietà overflow, che può assumere le proprietà auto | hidden | scroll.

<div class="elemento">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Proin rutrum varius commodo. 
    Sed nisl neque, pharetra vitae nibh vitae, posuere convallis risus.
</div>

.elemento {
    width: 200px;
    height: 50px;
    overflow: hidden;
}

Margini e indentazioni

<div class="elemento">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Proin rutrum varius commodo. 
    Sed nisl neque, pharetra vitae nibh vitae, posuere convallis risus.
</div>

.elemento {
    width: 200px;
    height: 50px;
    margin: 50px;
    padding: 20px;
}

Bordi

<div class="elemento">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Proin rutrum varius commodo. 
    Sed nisl neque, pharetra vitae nibh vitae, posuere convallis risus.
</div>

.elemento {
    width: 200px;
    height: 50px;
    border: 2px solid red;
    padding: 20px;
}

Spessore, stile e colore del bordo.

<div class="elemento">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Proin rutrum varius commodo. 
    Sed nisl neque, pharetra vitae nibh vitae, posuere convallis risus.
</div>

.elemento {
    width: 200px;
    height: 50px;
    border-width: 3px;
    border-style: dashed;
    border-color: blue;
}

Bordi arrotondati

<div class="elemento">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Proin rutrum varius commodo. 
    Sed nisl neque, pharetra vitae nibh vitae, posuere convallis risus.
</div>

.elemento {
    width: 200px;
    height: 50px;
    border: 3px solid green;
    border-radius: 20px 0 20px 0;
}

Ombra del box

<div class="elemento">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Proin rutrum varius commodo. 
    Sed nisl neque, pharetra vitae nibh vitae, posuere convallis risus.
</div>

.elemento {
    width: 200px;
    height: 50px;
    border: 1px solid lightgrey;
    box-shadow: 0 0 5px 15px #CCC;    
}

Elementi in linea o blocco.

<div class="elemento">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Proin rutrum varius commodo. 
    Sed nisl neque, pharetra vitae nibh vitae, posuere convallis risus.
</div>

.elemento {
    display: none;
    width: 200px;
    height: 50px; 
}

Possiamo modificare la tipologia di visualizzazione dell'elementro tramite la proprietà display, che può assumere le proprietà block | inline | inline-block | none.

Qualora il display fosse impostato come none, l'elemento smetterebbe di occupare spazio nella pagina. Se invece, vogliamo rendere l'elemento non visibile, ma mantenere l'ingombro, useremo la proprietà visibility.

Visibilità

<div class="elemento">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Proin rutrum varius commodo. 
    Sed nisl neque, pharetra vitae nibh vitae, posuere convallis risus.
</div>

.elemento {
    display: block;
    visibility: hidden;
    width: 200px;
    height: 50px; 
}

Possiamo modificare come il nostro elemento viene renderizzato tramite la proprietà visibility, che può assumere le proprietà visible | hidden. 

La proprietà di default è visible.

I testi.

Andremo a definire un font per il nostro sito, dimensioni, peso, stile e interlina.

<div class="elemento">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Proin rutrum varius commodo. 
    Sed nisl neque, pharetra vitae nibh vitae, posuere convallis risus.
</div>

.elemento {
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    font-style: italic;
    line-height: 24px;
}

I testi.

Possiamo inoltre definire allineamento, trasformare il testo, sottolinearlo, indentarlo e mettere un'ombra.

<div class="elemento">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Proin rutrum varius commodo. 
    Sed nisl neque, pharetra vitae nibh vitae, posuere convallis risus.
</div>

.elemento {
    width: 200px;
    border: 1px red solid;
    text-align: right;
    text-transform: capitalize;
    text-decoration: underline;
    text-indent: 20px;
    text-shadow: 0 0 3px #CCC;
}

Usare un font specifico.

Possiamo utilizzare un font specifico, attraverso la proprietà @font-face

<div class="elemento">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Proin rutrum varius commodo. 
    Sed nisl neque, pharetra vitae nibh vitae, posuere convallis risus.
</div>


@font-face {
    font-family: myFirstFont;
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
         url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

.elemento {
    width: 200px;
    border: 1px red solid;
    font-family: myFirstFont;
    font-size: 20px;
}

Stili delle liste

Possiamo specificare l'indicatore delle liste, anche immagini,  la posizione, ecc.

<ul class="first">
    <li>
	est justo, iaculis eget ligula id, 
        sagittis semper erat. 
    </li>
</ul>
<ul class="second">
    <li>
	est justo, iaculis eget ligula id, 
        sagittis semper erat. 
    </li>
</ul>
<ul class="third">
    <li>
	est justo, iaculis eget ligula id, 
        sagittis semper erat. 
    </li>
</ul>

ul.first {
    list-style-type: lower-roman;
}
ul.second {
    list-style-image: url('http://placehold.it/10x10');
}
ul.third {
    list-style-position: inside;
}

Stili delle tabelle

Possiamo specificare bordi, allineamento, colore di sfondo, ecc.

<table>
    <tr>
        <th>Author</th>
        <th>Title</th>
        <th class="money">Reserve Price</th> <th class="money">Current Bid</th>
    </tr>
    <tr>
        <td>E.E. Cummings</td>
        <td>Tulips & Chimneys</td>
        <td class="money">$2,000.00</td>
        <td class="money">$2,642.50</td>
    </tr>
    <tr class="even">
        <td>Charles d'Orleans</td>
        <td>Poemes</td>
        <td class="money"></td>
        <td class="money">$5,866.00</td>
    </tr>
    <tr>
        <td>T.S. Eliot</td>
        <td>Poems 1909 - 1925</td>
        <td class="money">$1,250.00</td>
        <td class="money">$8,499.35</td>
    </tr>
    <tr class="even">
        <td>Sylvia Plath</td>
        <td>The Colossus</td>
        <td class="money"></td>
        <td class="money">$1031.72</td>
    </tr>
</table>

body {
    font-family: Arial, Verdana, sans-serif;
    color: #111;
}
table {
    width: 600px;
}
th, td {
    padding: 7px 10px 10px;
}
th {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 90%;
    border-bottom: 2px solid #111111;
    border-top: 1px solid #999;
    text-align: left;
}
tr.even {
    background-color: #efefef;
}
tr:hover {
    background-color: #c3e6e5;
}
.money {
    text-align: right;
}

Stili per i campi testuali

<input type="text" id="email"><br>
<input type="text" id="twitter"><br>
<input type="text" id="web">

input {
    font-size: 120%;
    color: #5a5854;
    background-color: #f2f2f2;
    border: 1px solid #bdbdbd;
    border-radius: 5px;
    padding: 5px 5px 5px 30px;
    background-repeat: no-repeat;
    background-position: 8px 9px;
    display: block;
    margin-bottom: 10px;
}
input:focus {
    background-color: #FFF;
    border: 1px solid #b1e1e4;
}
input#email {
    background-image: url("http://placehold.it/15x15");
}
input#twitter {
    background-image: url("http://placehold.it/15x15");
}
input#web {
    background-image: url("http://placehold.it/15x15");
}

Stili per i pulsanti di invio

<input type="submit" id="submit" value="Register">

input {
    font-size: 120%;
    color: #5a5854;
    background-color: #f2f2f2;
    border: 1px solid #bdbdbd;
    border-radius: 5px;
    padding: 5px 10px;
    background-repeat: no-repeat;
    background-position: 8px 9px;
    display: block;
    margin-bottom: 10px;
}
input:focus {
    background-color: #FFF;
    border: 1px solid #b1e1e4;
}
input#submit {
    color: #444;
    text-shadow: 0px 1px 1px #FFF;
    border-bottom: 2px solid #b2b2b2;
    background-color: #b9e4e3;
    background: -webkit-gradient(linear, left top, left bottom, from(#beeae9), to(#a8cfce));
    background: -moz-linear-gradient(top, #beeae9, #a8cfce);
    background: -o-linear-gradient(top, #beeae9, #a8cfce);
    background: -ms-linear-gradient(top, #beeae9, #a8cfce);
}
input#submit:hover {
    color: #333;
    border: 1px solid #a4a4a4;
    border-top: 2px solid #b2b2b2;
    background-color: #a0dbc4;
    background: -webkit-gradient(linear, left top, left bottom, from(#a8cfce), to(#beeae9));
    background: -moz-linear-gradient(top, #a8cfce, #beeae9);
    background: -o-linear-gradient(top, #a8cfce, #beeae9);
    background: -ms-linear-gradient(top, #a8cfce, #beeae9);
}

Stili per i gruppi di campi e le legende

<fieldset>
    <legend>Newsletter</legend>
</fieldset>

fieldset {
    width: 350px;
    height: 100px;
    border: 1px solid #dcdcdc;
    border-radius: 10px;
    padding: 20px;
    text-align: right;
}
legend {
    background-color: #efefef;
    border: 1px solid #dcdcdc;
    border-radius: 10px;
    padding: 10px 20px;
    text-align: left;
    text-transform: uppercase;
}

Layout - position: static

<h1>Titolo dell'articolo</h1>
<p>
    Contrary to popular belief, Lorem Ipsum is not simply random text. 
    It has roots in a piece of classical Latin literature from 45 BC, 
    making it over 2000 years old. Richard McClintock, 
    a Latin professor at Hampden-Sydney
</p>

body {
    width: 750px;
    font-family: Arial, Verdana, sans-serif;
    color: #665544;
}
h1 {
    background-color: #efefef;
    padding: 10px;
}
p {
    width: 450px;
}

Layout - position: relative

<h1>Titolo dell'articolo</h1>
<p>
    Contrary to popular belief, Lorem Ipsum is not simply random text. 
    It has roots in a piece of classical Latin literature from 45 BC.
</p>
<p class="test">
    making it over 2000 years old. Richard McClintock, 
    a Latin professor at Hampden-Sydney
</p>
<p>
    Contrary to popular belief, Lorem Ipsum is not simply random text. 
    It has roots in a piece of classical Latin literature from 45 BC.
</p>

p.test {
    position: relative;
    top: 10px;
    left: 100px;
}

Layout - position: absolute

<h1>Titolo dell'articolo</h1>
<p>
    Contrary to popular belief, Lorem Ipsum is not simply random text. 
    It has roots in a piece of classical Latin literature from 45 BC.
</p>

h1 {
    position: absolute;
    top: 0;
    left: 500px;
    width: 250px;
}

Layout - position: fixed

<h1>Titolo dell'articolo</h1>
<p>
    Contrary to popular belief, Lorem Ipsum is not simply random text. 
    It has roots in a piece of classical Latin literature from 45 BC.
</p>

h1 {
    position: fixed;
    top: 0;
    left: 0;
}

Layout - Elementi sovrapposti

<h1>Titolo dell'articolo</h1>
<p>
    Contrary to popular belief, Lorem Ipsum is not simply random text. 
    It has roots in a piece of classical Latin literature from 45 BC.
</p>

h1 {
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    color: red;
}
p {
    position: relative;
    z-index: 10;
    width: 450px;
    color: blue;
}

Layout - Elementi mobili

<h1>Titolo dell'articolo</h1>
<blockquote>
    "Lorem Ipsum is not simply random text. "
</blockquote>
<p>
    Contrary to popular belief, Lorem Ipsum is not simply random text. 
    It has roots in a piece of classical Latin literature from 45 BC.
</p>

h1 {
    color: red;
}
p {
    width: 450px;
    color: blue;
}
blockquote {
    float: right;
    width: 275px;
    font-size: 130%;
    font-style: italic;
    font-family: Georgia, Times, serif;
    margin: 0 0 10px 10px;
    padding: 10px;
    border-top: 1px solid #665544;
    border-bottom: 1px solid #665544;
}

Layout - Clear di Elementi mobili

<div class="clear">
    <h1>Titolo dell'articolo</h1>
    <blockquote>
        "Lorem Ipsum is not simply random text. "
    </blockquote>
    <p>
        Contrary to popular belief, Lorem Ipsum is not simply random text. 
        It has roots in a piece of classical Latin literature from 45 BC.
    </p>
</div>

.clear {
    clear: both;
}
h1 {
    color: red;
}
p {
    width: 450px;
    color: blue;
}
blockquote {
    float: right;
    width: 275px;
    font-size: 130%;
    font-style: italic;
    font-family: Georgia, Times, serif;
    margin: 0 0 10px 10px;
    padding: 10px;
    border-top: 1px solid #665544;
    border-bottom: 1px solid #665544;
}

Le media query

.box {
    width: 300px;
    height: 100px;
}

@media only screen and (min-width: 1px) {    
    .box {
        background-color: red;
    }
}

@media only screen and (min-width: 1024px) {    
    .box {
        background-color: blue;
    }
}

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
    /* REGOLE CSS */
}

<div class="box">Questo è un box</div>

<div>
    Media type può essere : all, print, screen, speech
    Media features possono essere: width, height, min-width, min-height, orientation, ecc.

</div>

What's next?

Referenze e contatti

Libri

https://www.oreilly.com/library/view/html-css/9781118206911/

 

Guide online

https://www.html.it/guide/guida-css-di-base/

 

Email: filippo@kaleidoscope.it

Twitter: @fmriggio

Made with Slides.com