Visualizzazione dei risultati da 1 a 7 su 7
  1. #1

    CSS alle prime armi!

    scusatemi prima mi è partito il messaggio prima che lo completassi...volevo domandare una cosa. su un manuale che sto leggendo, ad un certo punto viene impostato un CSS così: .emph{font-style: italic} per assegnare a tutti gli elementi della classe emph uno stile corsivo.
    quindi nel file html cu sta il paragrafo

    dova ad un certo punto scrive
    <span class="emph">faith</span> così la parola faith appartenente alla classe emph sarà resa in corsivo.
    Ma non era più sempice fare solo faith?
    inserendo lo span e la classe che cosa accade, che tutte le volte che scrivo quella parola sarà in corsivo? e che tutti gli elementi appartenenti alla classe emph avranno le caratteristiche impostate nel CSS?
    quindi se voglio che una seconda parola abbia queste caratteristiche dovrò comunque scriverla in un <span class="emph" etc etc...non mi è chiara questa cosa...


    ciao e grazie!
    paola

  2. #2
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,924
    se utilizzi una classe, come quella che hai portato ad esempio, poi devi specificarla su ogni elemento che devi rendere in corsivo

    <span class="emph">...</span>
    <p class="emph">...</p>
    <dd class="emph">...</dd>
    ...


    però l'enfatizzazione andrebbe realizzata con lo specifico tag [i]

    [i] [i] producono lo stesso effetto, ovvero rendono entrambi il testo in corsivo
    [i] però dà un significato semantico al testo (cioè vuoi enfatizzare una parola o un concetto importante) mentre [i] dà soltanto un aspetto presentazionale (ovvero il tuo testo è solo corsivo, ma non per questo assume importanza).

    Per questo motivo andrebbe preferito il tag [i] mentre l'elemento [i] tenderà ad andare in disuso (già ora è un elemento deprecato quando si usa un doctype xhtml strict)

    altri tag che danno significato semantico a parole o frasi sono ad esempio [b] (al posto di [b] per lo stesso motivo) <cite> o <blockquote>
    Vuoi aiutare la riforestazione responsabile?

    Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)

  3. #3

    css

    ok grazie! quindi è più semplice usare tag specifici anzichè usare una classe...scegliendo quelli non deprecati come dici tu!
    Invece adesso mi sto esercitando con le divisioni ID e CLASS e volevo provare, nell'esempio che riporto sotto a fare rosso il testo dei paragrafi p della classe "storia".
    ho fatto in un css esterno questa formula p.storia{color:red;}
    e poi l'ho inserito nel file html...ma non succede nulla. Sai spiegarmi il motivo? dove ho sbagliato? sto provando e riprovando...

    <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
    <head>

    <title>gif idea home page</title>

    <link rel=”foglio_stile”type=”text/css” href=”baselink.css” />

    <link rel=”foglio_stile”type=”text/css” href=”basemia.css” />

    </head>

    <body>

    <h1>GIF idea</h1>

    <div id=”gif idea”>


    Gif idea nasce nel 2008 e spera di fare e imparare tante cose belle!</p>

    <div class:”storia”>
    <h2>un po’ di me…</h2>


    Io sono diplomata all’Accademia di belle Arti di Napoli. Ho lavorato per anni presso l’agenzia</p><a href=http://www.logika2000.it>Logika comunicazione</a>


    che mi ha insegnato tutto quello che so. Ora lavoro in proprio e vivo a Roma.
    </p>

    Mi interesso di </p> fotografia e <a href=http://www.comix.it/> illustrazione</a>.</p> </div>




    paola

  4. #4
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,924
    p.storia{color:red;}

    si applica a tutti i paragrafi con classe "storia", ma tu non hai definito la classe

    <p class="storia">Gif idea nasce nel 2008
    Vuoi aiutare la riforestazione responsabile?

    Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)

  5. #5

    css

    io avevo messo il simbolo : anzichè =, ma il risultato non è cambiato...
    La classe la avevo definita, anche se in maniera errata...

    io avevo scritto div class:"storia" e poi ci stava <h2>...</h2> e poi

    ... etc etc
    ho corretto scrivendo div class="storia" ma come ti dicevo non è successo niente. Non mi è chiaro perchè dici che non avevo specificato la classe...sul manuale riporta la formula che ho scritto...
    come mai la formula <p class=storia>mi risulta nuova? mannaggia...

    grazie per le tue spiegazioni!
    paola

  6. #6
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,924
    Originariamente inviato da fcaldera
    p.storia{color:red;}

    si applica a tutti i paragrafi con classe "storia", ma tu non hai definito la classe

    <p class="storia">Gif idea nasce nel 2008
    Vuoi aiutare la riforestazione responsabile?

    Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)

  7. #7

    css

    ok, lo so sono un po' dura su questo argomento! ma solo per capire una volta per tutte..
    quindi nell'esempio sotto riportato, gli elementi p non fanno automaticamente parte della divisione classe "storia", visto che la div si apre prima di p e si chiude alla fine?
    pensavo che specificando semplicemente p.storia{color:blue;} fosse inteso che si vanno a colorare tutti i p all'interno della classe storia...il manuale non è preciso in merito..

    <div class=”storia”>
    <h2>un po’ di me…</h2>


    Io sono diplomata all’Accademia di belle Arti di Napoli. Ho lavorato per anni presso l’agenzia<a href=http://www.logika2000.it> Logika comunicazione</a>
    che mi ha insegnato tutto quello che so. Ora lavoro in proprio e vivo a Roma.
    Mi interesso di fotografia e <a href=http://www.comix.it/> illustrazione</a>.</p> </div>

    invece va fatto: <p class=”storia” >

    ok grazie!

    paola

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.