Esercizi CSS

  1. Scrivere un documento html contenente tre paragrafi. Tramite CSS fare in modo che lo sfondo di ogni paragrafo sia di colore verde, il colore di primo piano del testo sia giallo ed il testo sia enfatizzato (la proprietà font-style assume il valore italic). Utilizzare uno stile inline.
  2. Risolvere l'esercizio 1 utilizzando un foglio di stile interno.
  3. Risolvere l'esercizio 1 utilizzando un foglio di stile esterno.
  4. Aggiungere al documento html dell'esercizio 2 un foglio di stile esterno dove è presente una regola CSS che rende il testo, in font Arial, di ogni paragrafo di colore nero e grande 16 punti. In cosa differiscono gli "output" visuali dei due esercizi. Perché l'output è uguale/differente?
  5. Nell'esercizio precedente invertite la posizione dei tag <link> e <style>. Cosa succede? Perché?
  6. Al codice prodotto per l'esercizio 1 aggiungere un foglio di stile interno contenente un'istruzione CSS per colorare il testo di tutti i paragrafi di bianco. Che cosa succede? Se i paragrafi non risultano colorati di bianco modificare opportunamente l'istruzione per forzarlo.
  7. Scrivere un'istruzione CSS per fare in modo che il contenuto di ogni tag span sia colorato di giallo su sfondo marrone solo quando il tag è "figlio" di un paragrafo. Scrivere un documento html dove l'istruzione CSS viene applicata a tutti gli span contenuti tranne che ad uno.
  8. Scrivere un'istruzione CSS per fare in modo che il contenuto di un paragrafo sia grande 18 punti, giustificato e in font Arial solo se l'attributo CLASS del paragrafo inizia per il valore ac.
  9. Scrivere un documento html in cui il selettore p ~ p viene applicato (sfondo di colore rosso) ma non il selettore p + p (colore del testo verde). Modificare la soluzione in modo che entrambi i selettori vengano applicati.
  10. Usando CSS fate in modo che il testo non in enfasi del seguente paragrafo compaia in enfasi e viceversa.
    Gli indirizzi attualmente in uso sono prevalentemente quelli di classe A, B e C. Questi indirizzi non sono mai dati singolarmente, ma per motivi di organizzazione di rete sono dati in blocchi di indirizzi adiacenti.
  11. Usando CSS fate in modo che il seguente paragrafo allineato a destra, sia di colore verde, ma solo la parola indirizzi sia di colore rosso. Lo sfondo del paragrafo deve essere di colore azzurro chiaro.
    Gli indirizzi attualmente in uso sono prevalentemente quelli di classe A, B e C. Questi indirizzi non sono mai dati singolarmente, ma per motivi di organizzazione di rete sono dati in blocchi di indirizzi adiacenti.
  12. Usando CSS fate in modo che la prima lettera del seguente paragrafo sia colorata di verde e sia grande il triplo delle lettere del paragrafo stesso.
    Il termine 'portale' è ormai divenuto una vera e propria 'parola magica' all'interno della sempre più vasta comunità di utenti e operatori della rete Internet.
  13. Creare una pagina html contenente il vostro nome e cognome. Utilizzando CSS fate in modo che ogni lettera sia grande 36 punti, venga usato un font senza grazie e venga colorata in maniera differente dalle altre.
  14. Creare una pagina html per pubblicizzare il ristorante "Rainbow". Il Look&Feel della pagina deve essere realizzato utilizzando opportunamente CSS. La pagina, mostrata nella seguente immagine, include il logo e i due menù di punta del ristorante.

  15. Creare una pagina html contenente una serie di link (potreste usare un elenco di link a giornali on-line). Usando CSS fare in modo che normalmente il colore dei link sia rosso; mentre, quando il cursore del mouse si posiziona su di essi il colore diventi giallo, il testo diventi tutto in maiuscolo e la sua grandezza diventi di 14 punti.
  16. Usando CSS fate in modo che i paragrafi del brano (tratto dal libro Internet 2000 di M. Calvo, M. Ciotti, G. Roncaglia, M. Zela) siano giustificati, l'interlinea dei paragrafi sia pari a 1.5; mentre, il margine destro e quello sinistro siano di 1.5 centimetri. Le intestazioni di livello uno siano di colore rosso, centrate e grandi 16 punti; mentre le intestazioni di livello due siano di colore blu, allineate a sinistra e grandi 14 punti.
  17. Utilizzando delle regole CSS fare in modo che:
    • Solo il primo paragrafo del file lorem.html e la parola "lorem" nell'intestazione siano di colore verde.
    • Colorare di blu la prima lettera dell'intestazione del file lorem.html
    • Colorate di tre colori diversi le parole enfatizzate del file lorem.html
  18. Scrivere un documento HTML contentente tre paragrafi collegato ad un documento CSS. Nel documento CSS definire delle istruzioni in modo che:
    • Il testo della pagina è scritto in arial a 14 punti.
    • Tutti i paragrafi hanno i margini destro e sinistro di 3em (usare le proprietà margin-left e margin-right).
    • Il primo paragrafo ha lo sfondo rosa ed il colore di primo piano blu. La grandezza del carattere deve essere di 10 punti, il testo allineato a destra.
    • Il secondo paragrafo ha lo sfondo nero, e colore di primo piano #FFFF00.
    • Prima del terzo paragrafo (colore di sfondo verde primo piano blu) deve comparire la parola "IMPORTANTE"
  19. Scrivere una regola CSS per assegnare lo stile: (sfondo rosso - colore di primo piano verde - bordo di tre pixel tratteggiato di colore giallo - area di respiro di 4 pixel) a tutti gli elementi EM primi figli di paragrafi di posto pari contenuti in un DIV.
  20. Creare un documento HTML contenente sei paragrafi. Utilizzando i contatori in CSS, prima di ogni paragrafo deve comparire un numero progressivo che indica la posizione del paragrafo nel documento. Il numero deve essere colorato di verde, deve essere seguito da un punto e deve essere grande due volte il testo.
  21. Creare un documento HTML con cinque paragrafi. Il testo della pagina è scritto in arial a 14 punti. Inoltre, rendere il testo dei primi due paragrafi in grassetto e quello del primo, terzo e quinto di dimensione 24 punti.
  22. Creare una pagina HTML contenente una serie di paragrafi, alcuni dei quali devono essere di classe "avvertimento" questi paragrafi devono essere contenuti all'interno di un rettangolo e il testo deve essere ben distanziato dai bordi e lo sfondo deve essere grigio chiaro.
  23. Si consideri del codice HTML dove il tag BODY contiene molteplici tag P ognuno dei quali contiene vari tag SPAN. Scrivere una regola CSS per assegnare un bordo thick, black, solid al testo dei tag SPAN che sono secondi figli di un tag P.
  24. Scrivere delle regole CSS per cui la prima riga (intestazione) di una tabella con ID='qwerty' abbia colore di primo piano verde e colore di sfondo rosso, tutte le righe pari (non considerando l'intestazione) abbiano colore di primo piano bianco e colore di sfondo verde, tutte le righe dispari (non considerando l'intestazione) abbiano colore di primo piano giallo e colore di sfondo nero.
  25. Scrivere un documento HTML contenente una tabella con 20 righe dove la prima riga (intestazione) è colorata di verde su sfondo rosso, mentre a partire dalla riga 4 (non considerando l'intestazione) tutte le righe pari sono di colore bianco su sfondo blu.
  26. Scrivere un documento HTML contenente il proprio nome e cognome (solo le iniziali devono essere in maiuscolo). Usando opportunamente CSS fate in modo che tutte le lettere siano in maiuscolo, di colori diversi (tranne il rosso ed il bianco) e su sfondo rosso. Quando si va con il mouse sulla terza lettera del cognome o del nome, questa deve diventare bianca, minuscola ed in grassetto.
  27. Scegliete un'immagine di vostro gradimento; posizionarla come sfondo del testo dell'esercizio 16.
  28. Scegliete un'immagine di vostro gradimento; relativamente al testo dell'esercizio 16, l'immagine deve essere lo sfondo di tutte le intestazioni.
  29. Scegliete un'immagine di vostro gradimento; relativamente al testo dell'esercizio 16, l'immagine deve ripetersi solo in alto ed orizzontalmente. Inoltre, non deve scrollare con la pagina.
  30. Utilizzando CSS fate in modo che i paragrafi del brano dell'esercizio 16 abbiano un bordo superiore ed inferiore tratteggiato e di colore verde; mentre, il bordo destro e sinistro deve essere incassato e di colore rosso.
  31. Utilizzando CSS, relativamente al brano dell'esercizio 16, fate in modo che la parola Internet nel abbia un bordo rosso; le intestazioni devono essere centrate e tutte le parole devono iniziare in maiuscolo (non editare il file HTML); indentare di un pollice la prima riga di tutti i paragrafi, tranne quello che inizia per "Deve però sapere..." che deve essere indentato di 4 centimetri.
  32. Creare un documento HTML contenente una serie di link (potreste usare un elenco di link a giornali on-line). Usando CSS fare in modo che il testo sia formattato come un link; mente ogni link appaia come testo normale.
  33. Creare un documento HTML contenente una serie di link (potreste usare un elenco di link a giornali on-line). Usando CSS fare in modo che la dimensione dei link siano il doppio del testo normale.
  34. Creare un documento HTML contenente due elenchi puntati. Usando opportunamente CSS incorniciare il primo elenco con un bordo doppio di colore verde e cambiare il simbolo degli elementi pari del secondo elenco in un quadrato.
  35. Usando CSS cambiare i pallini della seguente lista non ordinata con un'immagine di vostra scelta.
    • Primo item
    • Secondo item
    • Terzo item
    • Quarto item
  36. Usando CSS e senza modificare i tag HTML trasformare la lista non ordinata dell'esercizio precedente in ordinata.
  37. Usando opportunamente CSS fate in modo che nel seguente elenco ordinato vengano usate le lettere maiuscole invece dei numeri.
    1. Primo item
    2. Secondo item
    3. Terzo item
    4. Quarto item
  38. Usando opportunamente CSS fate in modo che lo sfondo dell'intera lista sia verde, largo 12 centimetri ed abbia un padding di 1 centimetro; mentre, lo sfondo di ogni item sia rosso e grande a sufficienza per contenere il testo dell'item. Il testo deve essere in un carattere qualiasi senza grazie
    • Primo item
    • Secondo item
    • Terzo item
    • Quarto item molto, molto, molto, molto lungo
    Il risultato dovrebbe essere simile a questo.
  39. Cambiare il puntatore del mouse in un punto interrogativo quando si passa sopra al testo enfatizzato del seguente paragrafo
    Gli indirizzi attualmente in uso sono prevalentemente quelli di classe A, B e C. Questi indirizzi non sono mai dati singolarmente, ma per motivi di organizzazione di rete sono dati in blocchi di indirizzi adiacenti.