Scribd Logo
Carica

Benvenuto in Scribd!

  • C1 - Css - Stile

    Caricato da

    patric
    20 visualizzazioni16 pagine
    informatica, css_stile

    Titolo originale

    C1 - css_stile

    Copyright

    © © All Rights Reserved

    Formati disponibili

    PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    informatica, css_stile

    Copyright:

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

    C1 - Css - Stile

    Caricato da

    patric
    informatica, css_stile

    Copyright:

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

    C1 Lo stile degli elementi

    Il linguaggio CSS

    I fogli di stile CSS


    Sommario
    ●
    Fogli di stile CSS
    ●
    Regole e commenti in CSS
    ●
    Inclusione di stile CSS in HTML
    ●
    Selettori
    ✔ Selettore universale
    ✔ Selettore di tipo
    ✔ Selettore di id
    ✔ Selettore di classe
    2
    Lo stile in HTML
    ●
    Nelle prime versioni di HTML, lo stile degli elementi delle pagine
    veniva gestito tramite appositi attributi.
    ●
    Tali attributi esistono ancora ma sono deprecati, ne è sconsigliato
    l’utilizzo.
    ●
    Lo stile delle moderne pagine Web viene gestito tramite appositi
    fogli di stile, file scritti in linguaggio CSS (Cascading Style Sheets).
    ●
    Un file CSS permette di gestire ogni aspetto della formattazione di
    un documento HTML. Nelle ultime versioni, è possibile gestire altri
    aspetti di stile, come le animazioni.

    3
    Foglio di stile CSS
    ●
    Un foglio di stile, scritto in linguaggio CSS, è una
    sequenza di regole che consentono al browser di
    mostrare determinati elementi secondo un certo stile,
    definito dalle regole.
    ●
    Un foglio di stile contiene, fondamentalmente regole e
    commenti.
    ●
    Possono esserci altri elementi in un foglio di stile, per
    un uso più avanzato.
    4
    Regola CSS
    ●
    Una regola CSS è formata da: selettore {
    ✔ selettore, che serve a definire a quale (o
    quali) elementi del documento si deve proprieta1: valore1;
    applicare la regola;
    ✔ blocco di dichiarazioni, delimitato da proprieta2: valore2;
    parentesi graffe { }
    ...
    ●
    Ogni dichiarazione nel blocco è una
    coppia proprietà: valore che termina proprietaN: valoreN;
    per punto e virgola (;)
    ●
    Una proprietà definisce l’aspetto degli }
    elementi (definiti dal selettore) da
    modificare, secondo il valore.
    5
    Commento
    ●
    In CSS, un commento /*
    Questo è un commento
    è un qualunque testo
    */
    racchiuso tra i selettore {
    seguenti delimitatori: proprieta1: valore1;
    ✔ /* in apertura proprieta2: valore2;
    ...
    ✔ */ in chiusura
    proprietaN: valoreN;
    }
    6
    Valori delle proprietà
    ●
    A seconda della proprietà, vi sono vari tipi di valori supportati in CSS:
    ✔ Numeri: indicati come numeri interi o con virgola (punto .);
    ✔ Unità di misura: in genere usati per le dimensioni di contenitori, caratteri, altro. Di
    solito sono in pixel (es. 100px), punti (per i caratteri, es. 12pt), e altre;
    ✔ Percentuali: utilizzate se non si vogliono usare dimensioni fisse (es. 80% della
    larghezza);
    ✔ Stringhe: sequenze di caratteri tra virgolette;
    ✔ URL: per indicare percorsi per immagini o altre risorse, si usa la parola chiave
    url("percorso_della_risorsa")
    ✔ Colori: possono essere indicati con un nome specifico di colore (in genere in inglese,
    es. white, black, green, ecc.), in codifica esadecimale (es. il bianco è #FFFFFF), ecc.

    7
    Fogli di stile CSS in HTML
    ●
    Esistono tre differenti modi per aggiungere dello stile in CSS all’interno di un file
    HTML.
    ●
    File esterno, importato tramite il tag link all’interno della sezione head della
    pagina:
    <link href="url_foglio" type="text/css" rel="stylesheet">
    ✔ L’attributo href indica il percorso del file CSS.
    ✔ type="text/css" e rel="stylesheet" vanno scritti in questo modo, indicano che il file
    è un foglio di stile di tipo CSS.
    ●
    Tag <style> all’interno della sezione <head>, il cui contenuto è il codice CSS
    per la pagina.
    ●
    Attributo style in ogni elemento HTML e, come valore, le regole CSS.
    8
    Selettori
    ●
    I selettori sono importantissimi nell’applicazione di regole in CSS
    ●
    Esistono diversi tipi di selettori, i principali sono:
    ✔ selettore universale;
    ✔ selettore di tipo;
    ✔ selettore di id;
    ✔ selettore di classe.
    ●
    Altri selettori, molto potenti, permettono di selezionare elementi
    in base a valori di attributi, relazioni, ecc.

    9
    Selettore universale
    ●
    Il selettore universale, l’asterisco (*), permette
    di applicare proprietà a tutti gli elementi di un
    documento HTML:
    ✔ In pratica, seleziona tutti gli elementi;
    * { color: green; }
    ✔ Imposta, per tutti gli elementi, il colore verde per la
    proprietà color, che rappresenta il colore del testo.
    10
    Selettore di tipo
    ●
    Permette di 1 /*Seleziona tutti i titoli di tipo h1*/
    2 h1 {
    selezionare 3 color: blue;
    elementi in base 4 font-style: italic;
    al tipo di 5 font-size: 18pt;
    elemento HTML. 6 }
    7
    ●
    Si indica il nome, 8 /*Seleziona tutti i paragrafi*/
    o i nomi, dei tipi 9 p {
    10 font-size: 14pt;
    di elementi da
    11 font-family: "Times New Roman",serif;
    selezionare. 12 }
    11
    Id e classi
    ●
    Per ogni elemento HTML si possono specificare due attributi:
    ●
    id: nome identificativo dell’elemento all’interno del documento HTML. Deve
    essere univoco.
    id="identificativo_elemento"
    ✔ Esempio: <h1 id="titolo_pagina">Titolo della pagina</h1>
    ●
    class: nome che identifica una classe di elementi, ossia un gruppo di elementi
    che, per qualche motivo deciso dallo sviluppatore, si possono raggruppare (es.
    hanno le stesse funzioni, hanno caratteristiche simili, ecc.). Si possono indicare
    più classi, separate da spazi:
    class="classe1 classe2 … classeN"
    ✔ Esempio: <p class="testo-verde sfondo-giallo">Contenuto del paragrafo</p>

    12
    Selettori di id
    ●
    In un selettore di id, si fa precedere all’id
    dell’elemento il carattere hashtag #
    #id_elemento { ... }
    ●
    All’id con hashtag, si può far precedere il tipo di
    elemento
    h1#id_elemento { ... }

    13
    Selettori di id
    1 h1 { <h1 id="titolo_pagina">
    2 color: blue; Ciao Mondo!
    3 font-style: italic; </h1>
    4 font-size: 18pt;
    <p>
    5 }
    La mia prima pagina HTML!
    6 p {
    7 font-size: 14pt; </p>
    8 font-family: "Times New Roman",serif;
    9 }
    10 #titolo_pagina {
    11 font-style: normal;
    12 font-size: 22pt;
    13 }

    14
    Selettori di classe
    ●
    In un selettore di classe, a ciascuna classe si fa
    precedere il punto
    .nome-classe { ... }
    ●
    Ai nomi di classe con punto, si può far precedere il tipo
    di elemento
    h1.nome-classe { ... }
    ✔ Seleziona, tra gli elementi appartenenti alla classe (es.
    nome-classe), solo quelli di un certo tipo (es. h1)
    15
    Selettori di classe
    <h1 id="titolo_pagina" class="sfondo-giallo">
    1 h1 { Ciao Mondo!</h1>
    <p>La mia prima pagina HTML!</p>
    2 color: blue; <p class="testo-verde">
    3 font-style: italic; Nel mezzo del cammin di nostra vita<br>
    4 font-size: 18pt; mi ritrovai per una selva oscura<br>
    ché la diritta via era smarrita.</p>
    5 }
    <p class="sfondo-giallo">
    6 p { Ahi quanto a dir qual era è cosa dura<br>
    7 font-size: 14pt; esta selva selvaggia e aspra e forte<br>
    8 font-family: "Times New Roman",serif; che nel pensier rinova la paura!</p>
    9 }
    10 #titolo_pagina {
    11 font-style: normal;
    12 font-size: 22pt;
    13 }
    14 .testo-verde { color: green; }
    15 .sfondo-giallo { background-color: blue; }
    16

    Potrebbero piacerti anche