Fogli di stile introduzione
This presentation is the property of its rightful owner.
Sponsored Links
1 / 36

Fogli di stile: introduzione PowerPoint PPT Presentation


  • 88 Views
  • Uploaded on
  • Presentation posted in: General

Fogli di stile: introduzione. Maria Simi, a.a. 2003/04 Contenuti tratti da: [D. Siegel, J. Zeldman, Manuale di riferimento del W3C] . Introduzione dei fogli di stile. 1996: definizione dei fogli di stile da parte del W3C (CSS Level 1 o CSS-1)

Download Presentation

Fogli di stile: introduzione

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Fogli di stile introduzione

Fogli di stile: introduzione

Maria Simi, a.a. 2003/04

Contenuti tratti da: [D. Siegel, J. Zeldman, Manuale di riferimento del W3C]


Introduzione dei fogli di stile

Introduzione dei fogli di stile

  • 1996: definizione dei fogli di stile da parte del W3C (CSS Level 1 o CSS-1)

  • Dal 1996 al 2000: scarso supporto da parte dei browser

  • Legge della “gravidanza di 18 mesi” [Zeldman]

  • Adesso cominciano ad essere praticabili: CSS-1 ben supportato da:

    • Explorer 5 e maggiori

    • Opera 5 e maggiori

    • Netscape 6 e maggiori

  • Il supporto non è ancora completo


Problemi da superare

Problemi da superare

  • Abuso di HTML come linguaggio di annotazione stilistica

    • mancanza di pulizia delle pagine

    • tag proprietari e non standard

  • Spreco di banda di comunicazione

    • I tag stilistici occupano spazio nella pagina (font ripetuto per tutti i paragrafi o tutte le celle di una tabella)

    • Le tabelle ritardano il caricamento

    • Le immagini al posto dei testi sono pesanti

  • Scarsa aggiornabilità e consistenza

  • Ostacolo al progresso

    • Difficile visualizzazione su browser non grafici

    • In futuro: PDA, telefonini …


Vantaggi dei css

Vantaggi dei CSS

  • Separazione stile-contenuto

    • Contenuto con il minimo di struttura necessario

    • Stili specificati a parte

    • Possibilità di applicare lo stesso stile a più contenuti

    • Possibilità di riutilizzo di uno stesso contenuto con stili diversi

  • Aderenza agli standard

    • Maggiore durata nel tempo del progetto

    • Maggiore compatibilità

  • Facilità di manutenzione

  • Maggiore controllo stilistico


Facilit di manutenzione

Facilità di manutenzione

  • I fogli di stile possono essere globali per il sito

    • Le regole stilistiche stanno in un posto solo e sono utlizzate da tutte le pagine del sito

  • Facilità di sviluppo e gestione

    • Più facile sviluppate siti consistenti dal punto di vista visuale

    • Facilità nella manutenzione del sito: se si vuole cambiare uno stile si cambia in un posto solo


Maggiore controllo stilistico

Maggiore controllo stilistico

  • Con i fogli di stile si riescono a controllare aspetti stilistici che non si possono controllare in altro modo

    • Le famiglie di tipi (font, dimensioni, interlinea)

    • La sottolineatura dei link

    • La possibilità di HOVER sui link

    • Divisione della pagina in sezioni (div, span) con stili diversi

    • Controllo di margini e bordi

    • I colori, gli sfondi, il tiling, lo scorrimento

    • atro ...


Regole css sintassi

Regole CSS: sintassi


Regole css

Regole CSS

selettore {

attributo1: valore1;

attributo2: valore2;regola

attributok: valorek;}dichiarazioni

Esempio:

body {

margin: 0;

background: white; o meglio #ffffff

font-family: helvetica, arial, sans-serif }

possibili valorialternativa generica


Regole css altri esempi

Regole CSS: altri esempi

h1 {

font-weight: bold;

font-size: 24px;

} in pixel

p, li {

font-size: 12px;

line-height: 150%;interlinea 1,5 (18px)

}

Nota: Il punto e virgola separa le dichiarazioni, dopo l'ultima non serve anche se non da' errore


Selettori classe

Selettori classe

  • Possiamo definire una sottoclasse di un tag esistente con un stile particolare.

    • Esempio di specializzazione di h2

      h2.red {color: #ff0000}

      <h2 class="red">Getting started</h2>

  • O una sottoclasse generica che si può utilizzare per specializzare un qualunque elemento

    • Esempio di sotto-classe generica

      .smaller {font-size: 9px}

      <p class="smaller">Testo piccolo</h2>

      <div class="smaller">Tutto qui dentro è piccolo</div>


Selettori di elementi singoli

Selettori di elementi singoli

  • È possibile anche definire stili che si applicano solo ad elementi HTML identificati da un ID

  • Esempio

    #footer {

    font-size: 11px;

    margin-top: 25px

    }

    <div id="footer"> Saluti e baci ... </div>

    Nota: ce ne può essere solo uno per pagina


Selettori discendenti

Selettori discendenti

  • È possibile definire stili che si applicano solo in certi contesti (nell’ambito di altri tag)

    h1 { color: red }

    em { color: red }

    <h1>Questo titolo è<em>molto</em> importante</h1>

    h1 { color: red }

    em { color: red }

    h1 em { color: blue }

  • L’enfasi è blù nel contesto di un titolo rosso altrimenti è rossa.


Tre modi di usare gli stili

Tre modi di usare gli stili

  • Foglio di stile in un file esterno e riferito nel documento

  • Stili definiti nella testa del documento (embedded)

  • Stili definiti nei tag del documento (inline) mediante l'attributo style


Fogli di stile esterni

Fogli di stile esterni

  • Passi da seguire:

    • Si crea il foglio di stile

    • Si salva con estensione .css (es stile.css)

    • Nella sezione head della pagina HTML a cui vogliamo applicare lo stile:

      <head>

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

      </head>Pagina normalePagina con CSS


Fogli di stile embedded

Fogli di stile embedded

  • Se vogliamo definire uno stile che vale solo per il documento:

    <head>

    <style type="text/css">

    <!--

    body {margin: 0;

    font-family: helvetica, arial, sans-serif

    }

    -->

    </style>

    </head>I commenti servono per i browser che non

    supportano i CSS e per evitare

    l’indicizzazione da parte dei motori di ricerca


Fogli di stile inline

Fogli di stile inline

  • Per cambiare gli stili localmente in una porzione di un documento

  • Supponiamo che lo stile del documento preveda il tipo Arial, dimensione 12px, di colore nero …

    <p style="color: red; font-style: italic">

    Questo è importante e lo voglio mettere

    in rosso e in corsivo!!

    </p>

    Pagina normalePagina con CSS (inline)


Fogli di stile in cascata

Fogli di stile “in cascata”

  • Ma perché in cascata?

  • Tutti gli aspetti stilistici sono definiti dai browser e valgono a meno di ridefinizione

  • Ogni elemento stilistico può essere ridefinito (anche più volte) e vince sempre la definizione “pìù specifica”

  • ... a parità di specificità la definizione più recente

  • Ma più specifica in che senso?

    • Secondo la struttura gerarchica del documento

    • I l documento è un oggetto che contiene altri oggetti che contengono altr oggetti ...


L albero del documento

BODY

H1

P

DIV

EM

UL

LI

LI

LI

L’albero del documento

<HTML>

<HEAD>

<TITLE>My home page</TITLE>

</HEAD>

<BODY>

<H1>My <em>home</em> page</H1> <P>Welcome to my home page! Let me tell you about my favorite composers:</p>

<DIV>

<UL>

<LI> Elvis Costello </LI>

<LI> Johannes Brahms </LI>

<LI> Georges Brassens </LI>

</UL>

</DIV>

</BODY>

</HTML>

Gli stili vengono ereditati a meno di ridefinizione


I selettori e l albero

BODY

H1

P

DIV

EM

UL

LI

LI

LI

I selettori e l'albero

  • Ogni selettore seleziona un sottoinsieme degli elementi nell'albero

  • Esempi

    H1

    LI

    DIV

    P EM


Precedenza temporale

Precedenza temporale

  • A parità di specificità, gli stili definiti su un elemento cancellano quelli definiti precedentemente

  • In particolare esiste la seguente precedenza:

    • Stili definiti inline nel corpo del documento (BODY o tramite l'attributo STYLE di altri tag come Hx, DIV, P, ...)

    • Stili definiti nella testa del documento

      • Stili definiti in file esterni riferiti tramite LINK

      • Stili definiti nel tag STYLE nella testa del documento

    • Stili definiti dai browser (quelli di default)

  • Se nello stesso foglio di stile definisco due volte lo stesso elemento vale l'ultimo

    Casi particolari: margin: 0; margin-left: 20px


Esempio

Esempio

<html>

<head>

<style type="text/css">

h1 {color: green}

</style>

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

</head> file stile.css

h1 {color: yellow;

<body style="color: red"> font-family: arial

}

...

<h1 style="color: blue">Come sono?</h1>

Testo che segue il titolo.

</body>

</html>

HTML


Fase di transizione

Fase di transizione

  • Problemi di compatibilità

  • Uso limitato e consapevole dei CSS per il controllo della tipografia

  • Le tabelle sono ancora usate per la disposizione degli oggetti (layout)


Css per la tipografia

CSS per la tipografia

  • Tipi dei caratteri (font)

  • Testo

  • Colori e sfondi

  • Margini

  • Tabelle


Ancora sulle regole forme abbreviate

h1 {font-weight: bold}

h2 {font-weight: bold}

h3 {font-weight: bold}

h1 {color: green}

h1 {text-align: center}

h1 {color: green}

h1 {color: red}

*.smaller {

font-size: 9px}

h1 {font-size: 36pt;

font-family: serif;

font-style: normal;

font-weight: normal;

font-variant: normal;

line-height: normal}

Abbreviazioni

H1, H2, H3 {font-weight: bold}

H1 {color: green;

text-align: center}

H1 {color: red}

.smaller {

font-size: 9px}

H1 {36pt serif}

Ancora sulle regole: forme abbreviate


Fogli di stile introduzione

Font

  • I caratteri possono essere visualizzati in stili tipografici diversi, associando ad essi delle immagini (gliph)

  • Un tipo (font) è un insieme coordinato di gliph, che possono essere o non essere disponibili sulla macchina locale

    • Per questo motivo bisogna dare delle alternative

    • Per questo motivo a volte i caratteri speciali previsti dallo standard (anche se compresi dal browser) non sono visualizzati

  • Famiglia di font: un insieme coordinato di font


Attributi di font

font-family

con o senza serif (grazie)

proporzionali o fisse

fantasy, handwriting

Famiglie generiche:

serif, sans-serif, cursive, fantasy, monospace

font-style

normal, Italic, oblique

font-variant

normal, small-caps

font-weight

bold, bolder, lighter,100 ... 900

font-stretch

ultra-condensed, wider, condensed, semi-condensed, normal ...

font-size

Misura assoluta in pt, px, large, small

Misura relativa: larger, smaller, %, em

line-height: interlinea

Attributi di font


Misure assolute e relative

Misure assolute e relative

  • Misure assolute

    • punti (pt)

    • pixel (punti sullo schermo)

    • xxsmall, x-small, small, medium, large, x-large, xx-large

  • Misure relative

    • valore %, larger, smaller ...

    • 1 em è pari alla dimensione del font in punti (la dimensione della M): specificare 0.8em significa un carattere che è l’80% di quello del padre

    • 1 ex è pari all’altezza di una lettera minuscola


Pixel punti em

Pixel, punti, em?

  • I punti (pt) sono per la stampa.

  • In teoria le misure relative sono migliori

    • Preferenze dei browser per aggiustare dimensioni

    • Netscape 4 per MAC ignora le misure in % se usate per le dimensioni dei font

    • Alcune versioni di Netscape 4 li trattano come pixel

    • Netscape 4 ignora gli em. IE3 li tratta come pixel

  • Le misure in pixel sono le più affidabili

    • A volte il ridimensionamento mediante le preferenze dei browser non funziona


Testo

Testo

  • text-indent: il rientro della prima riga di un blocco

    • valori assoluti in em, px, cm ...

    • valori relativi in %

  • text-align

    • valori: center, right, left, justify

  • text-decoration

    • underline, overline, line-through

  • text-shadows

    • h1 {text-shadow: 0.2em 0.2em}


Ancora testo

Ancora testo

  • letter-spacing

    • blockquote{letter-spacing: 0.1em}

  • word-spacing

    • H1 {word-spacing: 1em}

  • text-transform

    • capitalize, uppercase, lowercase

  • white-space

    • normal (le sequenze di spazi e gli “a capo” sono ignorati)

    • pre (le sequenze di spazi e gli “a capo” sono rispettati)

    • nowrap (spazi ignorati, a capo soppressi)


Colori e sfondi

Colori e sfondi

  • Due stili che vanno specificati insieme

    • color: il colore del testo

    • sfondo

      • background-color: un colore o ‘transparent’

      • background-image: un’immagine specificata da un URL

      • gli sfondi non si ereditano ma sono normalmente trasparenti

  • Sfondi degli elementi

    • background-repeat

      • Valori: repeat, repeat-x, repeat-y, no-repeat

    • background-attachment

      • Valori: fixed, scroll

    • background-position

      • Valori: posizione in % o assoluta


Tabelle

Tabelle

<table>

<caption>Tabella 3x3</caption>

<tr id="row1"><th>Header 1</th>

<td>Cell 1</td><td>Cell 2</td></tr>

<tr id="row2"> <th>Header 2</th>

<td>Cell 3</td><td>Cell 4</td></tr>

<tr id="row3"><th>Header 3</th>

<td>Cell 5</td><td>Cell 6</td>

</table>

NOTA: specifica per riga HTML

  • Aggiungiamo un po’ di stile con i CSS ...


Tabelle e css

Tabelle e CSS

TH { vertical-align: center;

text-align: center;

font-weight: bold; font-size: x-large }

TD { vertical-align: middle }

TABLE {border: 1px solid black }

TR#row1 { text-align: left }

TR#row2 { text-align: center }

TR#row3 { text-align: right }

CAPTION { caption-side: top }

HTML


Margini

Blockquote e le liste (ol, ul) normalmente rientrano il testo contenuto

Lo spazio intorno può essere controllato con le proprietà:

margin

margin-left

margin-right

margin-top

margin-bottom

blockquote {

margin-top: 1em;

margin-right: 0em;

margin-bottom: 1em;

margin-left: 0em;

font-style: italic;}

o anche:

blockquote {

margin: 1em 0em 1em 0em;

font-style: italic;}

In senso orario a partire da top

Margini


Fogli di stile introduzione

Link

  • Link sottolineato o non

    a:link {text-decoration: underline;}

    a:link, a:visited {text-decoration: none}

    a:hover {background: cyan}

    a:hover {color: red}

  • Link, visited, hover sono chiaramente specializzazioni di a. Ma perché i due punti?

    • non sono proprio classi come le altre ...

    • sono pseudo-classi perché si basano su proprietà che sono esterne al documento (es. un link è stato visitato)


Conclusioni

Conclusioni

  • Perché è una buona idea usare gli stili

  • Regole, selettori, attributi, valori

  • Stili esterni, embedded e inline

  • L'albero del documento

  • Regole di precedenza degli stili

  • Gli stili per la tipografia


  • Login