Scribd Logo
Carica

Benvenuto in Scribd!

  • 04 - CSS

    Caricato da

    laura
    1 visualizzazioni5 pagine
    Notes about css coding

    Titolo originale

    04- CSS

    Copyright

    © © All Rights Reserved

    Formati disponibili

    PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    Notes about css coding

    Copyright:

    © All Rights Reserved
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    1 visualizzazioni5 pagine

    04 - CSS

    Caricato da

    laura
    Notes about css coding

    Copyright:

    © All Rights Reserved
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 5

    CSS (Cascading Style Sheet, Fogli di Stile)

    È un linguaggio per descrivere l’aspetto, lo stile degli elementi di un documento HTML [CSS non
    può esistere senza HTML]. Ogni elemento HTML è caratterizzato da attributi, a cui è associato un
    valore di default. Il CSS, quindi, modifica i valori di base.

    Esistono tre modalità di collegamento tra CSS e HTML:


    • CSS inline: descrizione dello stile all’interno degli elementi
    • CSS embedded: lo stile è specificato all’interno della pagina HTML
    • CSS esterni: lo stile è definito in un file esterno

    Se sono presenti più definizioni di stile per lo stesso elemento, prevale l’ultima [dal generale
    all’elemento specifico]: CSS di default del browser, CSS esterno, CSS embedded e infine CSS inline.

    > CSS inline


    Le regole CSS sono contenute nell’attributo style dell’elemento da modificare [quindi nel <body>].
    Struttura e presentazione non sono separate. È utile per effettuare dei rapidi test.
    Generalmente è sconsigliato: rende difficile la definizione del codice HTML, inoltre se lo stile viene
    copiato per più elementi, è necessario applicare le nuove modifiche ad ognuno di essi. È scomodo.
    es: <p style=“color:red”;>…</p>

    > CSS embedded


    Le regole CSS sono contenute nell’elemento style, nella sezione <head>.
    Fanno riferimento alla sola pagina.

    <html>
    <head>
    <title>…</title>
    <style type=“text/css”>
    p {
    color: red;
    }
    </style>
    </head>

    > CSS esterno


    Le regole CSS si trovano in un file esterno, con estensione .css, richiamato tramite l’elemento
    <link> nella sezione <head>.
    Struttura e presentazione sono completamente separate. La presentazione viene applicata a tutti
    gli elementi della pagina.
    es: <link rel=“stylesheet” type=“text/css” href=“nome_file.css”>

    > foglio di stile CSS


    È un formato testuale, una specifica di proprietà. Non viene mai visualizzato. Il contenuto del tag
    <style> può diventare corpo di un documento CSS, e viceversa [la sintassi non cambia].

    elemento {
    attributo: valore;
    …
    }

    commenti: /* testo del commento */


    È possibile definire due stilo differenti, per visualizzare due temi, due versioni dello stesso sito.
    Una regola è tutto ciò che rappresenta le caratteristiche di un elemento. Il selettore, invece,
    definisce gli elementi a cui applicare quella regola.
    Una regola è composta da dichiarazioni (linee di testo che terminano con ;), a loro volta definite da
    proprietà/attributi e il valore associato.

    > selettori CSS


    • selettore html [es. <p>]: la regola viene applicata a tutti gli elementi di quel tipo
    • .class - un gruppo di elementi: la regola viene applicata agli elementi in cui viene specificata
    • #id - elemento univoco: la regola viene applicata solamente al singolo elemento [se sono presenti
    più elementi con uguale id, la regola verrà applicata solo all’ultimo]

    È possibile specificare più classi per lo stesso elemento, applicando tutte le regole corrispondenti
    ed evitando di creare classi apposite per ogni combinazione di classi definite [attenzione: se le regole
    operano sugli stessi elementi, prevale l’ultima].
    Usando le classi, è possibile creare delle versioni diverse dello stesso elemento di base. È quindi
    possibile restringere il campo di applicazione dei selettori.

    • selettori raggruppati (separati da una virgola): si applicano tutte le regole, ad ognuno dei selettori
    [es: p, a { … }]
    • selettori annidati (separati da spazio): si applicano tutte le regole solo quando un elemento
    rispetta l’annidamento, da destra verso sinistra ad ognuno dei selettori [es: #link a p { … }
    ovvero un paragrafo, con all’interno un link, con id: link]

    > formattazione del testo


    • font-family:…;
    Da specificare nell’elemento <body>: il font sarà così utilizzato per tutto il documento.
    Il browser visualizza i font presenti sul computer dell’utente. È utile specificare più font, separati da
    una virgola. Il browser analizza il primo a sinistra, se non è presente prova a visualizzare il
    successivo. Indica come ultima alternativa un font generico [es: serif, sans-serif, monospace],
    altrimenti verrà visualizzato quello di default del browser. Controlla la visualizzazione di ciascun
    font. Se il nome di un font è composto da più parole, usa le virgolette [es: font-family:“Times
    New Roman”;].

    • color:…;
    Da specificare nell’elemento <body>. Utilizza colori pre-impostati [es: color:red;], valori RGB [es:
    color:rgb(0,0,255);] o valori esadecimali [es: color:#0000FF; → sistema in base 16, con valori
    da 0 a 9, da A a F. Le prime due cifre corrispondono al rosso, le successive al verde, le ultime al blu].

    • width:…; height:…;
    Le unità di misura assolute mantengono uguale dimensione, a prescindere dalla grandezza della
    finestra del browser [es: pt - testi, px - blocchi].
    Le unità di misura relative dipendono dalla dimensione della finestra del browser. Esse sono: %
    (dimensione in percentuale rispetto allo schermo), em (unità di misura definita in base alla
    dimensione del carattere M maiuscolo del font usato nell’elemento contenitore).

    Consigliato: % - testi, em - blocchi, definite in <body>. Verifica la visualizzazione del sito


    ridimensionando la finestra. L’unità di misura si scrive dopo il numero, senza spazio.

    [è utile definire menù e barra di ricerca in px, mentre gli altri elementi in %]
    > layout
    struttura box model: ogni elemento HTML definisce un contenitore, box, a strati, a cui applicare
    uno stile CSS. Ogni box è definito da quattro elementi, dall’interno verso l’esterno: content,
    padding, border e margin.

    > content
    Specifica l’area dell’elemento, tutto ciò che è visibile all’utente.
    Per definire alcune proprietà di dimensione, l’oggetto dev’essere di tipo blocco [es: <span> è un
    contenitore in linea, non un blocco].
    • height (altezza), width (larghezza) seguite da un valore numerico con unità di misura, un
    valore percentuale o auto (dimensione determinata dal contenuto)
    • min-height, max-height, min-width, max-width: dimensioni minime e massime, seguite
    da un valore numerico con unità di misura o un valore percentuale

    L’attributo overflow definisce il comportamento da adottare quando il contenuto, generalmente


    un testo, deborda dalle dimensioni fissate.
    • visible, di default: il contenuto eccedente viene mostrato [soluzione sconsigliata]
    • hidden: il contenuto eccedente viene nascosto
    • scroll: vengono mostrate delle barre di scorrimento, che consentono di accedere al contenuto
    eccedente [soluzione consigliata: è la gestione più completa del contenuto]
    [generalmente è sconsigliato definire un’altezza fissa di un <p>, è più efficiente definire un’altezza
    proporzionale alla pagina: i contenuti si adatteranno alla finestra]

    > padding
    È uno spazio vuoto, regolabile in ogni lato [padding-top, padding-right, padding-left,
    padding-bottom], tra il contenuto e il bordo delle elemento.
    I valori possono essere numerici, percentuali oppure calcolati automaticamente rispetto alla
    larghezza dell’elemento contenitore (auto).
    [quando si specifica lo sfondo di un elemento, esso occuperà l’area definita da content + padding].

    > border
    È il bordo, regolabile in ogni lato, con tre possibili attributi: style, width, color.
    • style, obbligatorio per visualizzare i successivi: solid (linea continua), dotted (a punti),
    none o hidden (nessun bordo), dashed (a trattini), double (doppio bordo) oppure con effetti
    tridimensionali, non sempre supportati dai browser: groove, ridge, inset, outset
    • width, seguito da valore numerico con unità di misura, thin, medium, thick
    • color

    proprietà applicate a tutti e quattro i lati: border:…; [valido anche per padding e margin]
    sintesi delle caratteristiche dei bordi: border: dimensione stile colore;
    [es: border-top: 2px solid black;]
    Attenzione all’ordine di scrittura: l’ultima proprietà sovrascrive le precedenti.

    > margin
    È l’involucro esterno del box, regolabile in ogni lato. Consente di definire la spaziatura fra elementi.
    [attenzione: l’altezza del contenuto non corrisponde all’altezza del box]

    > spazio tra box


    Se due box sono allineati orizzontalmente, la loro distanza è la somma dei margin.
    Se sono allineati in verticale, invece, si verifica il margin collapsing: la distanza è pari al massimo
    fra il margine inferiore del primo e il margine superiore del secondo.

    È possibile stimare la larghezza di un box, seguendo la formula:


    (margin sx + border sx + padding sx) + width + (padding dx + border dx + margin dx)
    Per calcolare l’altezza di un oggetto, si usa la stessa formula. Se sono presenti più oggetti, invece,
    non è possibile definire un valore preciso (dipende dal margin collapsing e dagli elementi vicini).

    Nel caso di un contenitore dentro l’altro, le dimensioni in percentuale del box interno si riferiscono
    a quello esterno.

    Uno stile applicato ad un blocco esterno viene ereditato dai blocchi in esso contenuti.
    Alcune proprietà, quali quelle di formattazione del box model, non vengono ereditate. È necessario
    creare nuove classi. L’obbiettivo è ridurre al minimo i valori da specificare.

    • pseudo-classi, applicate ad un sottoinsieme di elementi di un tipo, identificato da una proprietà


    tipo di elemento:proprietà {…} [es: un link a:link {…} e un link già visitato a:visited
    {…}, oppure una condizione rispetto al cursore - active, focus, hover]
    • pseudo-elementi, applicati ad una parte di un elemento, tipo di elemento:parte {…}
    [es: la prima riga di un paragrafo, p:first-line {color:red;}]

    > posizionamento
    > float
    È possibile estrarre un elemento dal normale flusso del documento, affiancandolo al lato opposto
    del suo contenitore, rispetto a quello indicato come valore di float.
    • float:none; : l’elemento mantiene la sua posizione di default
    • float:left; : l’elemento viene spostato sul lato sinistro del box, il contenuto scorre a destra
    • float:right; : l’elemento viene spostato sul lato destro del box, il contenuto scorre a sinistra
    • mantiene la sua posizione di default

    [ad esempio, posso applicare il float alla prima lettera di un <p>


    In HTML definisco la classe <p class=“primo”>…</p>
    In CSS, definisco le sue proprietà: p.primo:first-letter {float: left} ]

    > clear
    Impedisce il posizionamento di altri elementi, a fianco di un elemento float.
    • clear:none;
    • clear:left; : impedisce il posizionamento a sinistra
    • clear:right; : impedisce il posizionamento a destra
    • clear:both; : impedisce il posizionamento su entrambi i lati

    > display
    Modifica l’apparenza alle categorie blocco, inline, lista, di ogni elemento.
    • display:inline; : l’elemento diventa di tipo inline
    • display:block; : l’elemento diventa di tipo blocco
    • display:list-item; : l’elemento diventa di tipo lista
    • display:none; : l’elemento viene trattato come se non ci fosse, non occupa spazio e non
    viene mostrato [mentre invece visibility:hidden; nasconde l’elemento, ma mostra lo spazio
    occupato]
    [è utile modificare un elemento inline in blocco, per abilitare le proprietà del box model]

    > position
    Permette di gestire la posizione degli elementi.
    • position:static; : posizionamento di default nel flusso
    • position:absolute; : il box dell’elemento viene posizionato rispetto al primo elemento con
    un attributo position differente da static.
    • position:relative; : l’elemento viene posizionato relativamente al box che avrebbe
    occupato nel flusso di default
    • position:fixed; : posizionamento rispetto alla finestra del browser [specifica un margin, poi
    fissa il box]

    È possibile definire la visibilità: visibility:visible oppure visibility:hidden


    z-index gestisce gli elementi come fossero livelli: z-index:auto oppure specifica un valore
    numerico (maggiore è il valore, superiore sarà il livello).

    > menù verticale classico, con bottoni


    Nella pagina HTML definisci la classe .menu. Inserisci i link alle pagine.
    a.menu {
    display : block; → per visualizzare i link, uno dopo l’altro
    text-decoration : none;
    border: 2px solid blue;
    padding: 5px;
    margin: 2px;
    width: 150px;
    background-color: lightblue;
    color: blue;
    }

    a.menu:hover { → crea una pseudo-classe, riferita alla


    border-color: lightblue; classe .menu
    background-color: blue;
    color: white;
    }

    > animazioni in CSS


    L’animazione è una modifica dinamica degli elementi di HTML. Si tratta comunque di
    programmazione web statica. È necessario definire alcune proprietà:
    • animation-name: nome, poi ripreso da @keyframes
    • animation-duration: tempo necessario per completare l’animazione [maggiore sarà il tempo,
    minore la velocità]
    • animation-timing-function: comportamento e curve di accelerazione [:linear, :ease]
    • animation-delay: tempo definito tra il caricamento della pagina e l’inizio dell’animazione
    • animation-iteration-count: numero di ripetizioni [:valore numerico, :infinite]
    • animation-direction: direzione dell’animazione, dopo un’iterazione
    • animation-fill-mode: valori applicati all’animazione, prima o dopo la sua esecuzione
    • animation-play-state: play/pausa della sequenza di animazioni

    Poi, è necessario definire una sequenza di @keyframes. From definisce l’inizio, to la fine, i valori
    intermedi sono specificati in percentuale.

    [utilizza margine per gestire il movimento dell’animazione all’interno della pagina


    tramite animazioni, è possibile creare una sorta di SlideShow]

    Potrebbero piacerti anche