Dictat d’HTML i CSS

Escriu l’HTML que es correspon a aquests esquemes. Has de tenir en compte que el fil blau es correspon a sections, el fil gris a divs i el fil taronja a articles. Les lletres corresponen al contingut de cada element («A», «B»,..). El número només indica el gràfic, com a referència, no ha d’estar a l’HTML

Recorda tabular l’HTML per representar visualment les jerarquies entre elements

Escriu el selector CSS que correspon a cadascun dels següents elements:

1. Tots els títols de segon nivell
2. Tots els títols de segon nivell i tots els paràgrafs
3. Tots els divs que tenen la classe «fila»
4. Tots els fills de primer nivell de les sections amb la classe «fila»
5. Tots els divs que tenen la classe «fila» i que estan a dins d’una section
6. Tots els divs amb la classe «fila» que van darrera d’un div amb la classe «entradeta»
7. Tots els divs que tinguin les classes «entradeta» i «esquerra»
8. Tots els divs amb la classe «entradeta» i tots els enllaços amb la classe «botonet»
9. Tots els h2 del footer
10. La imatge i el paràgraf del footer
11. Els h2, els paràgrafs (p) i el enllaços (a) de qualsevol section
12. Els paràgrafs que vagin darrera d’un altre paràgraf
13. Els paràgrafs que siguin últim fill d’un div

Més exercicis

Ara escriu regles segons el que et demana l’enunciat. És a dir: escriu el selector i les propietats.

selector{
propietat1: valor;
propietat2: valor;
...
}

• Dona un color de fons groc als elements que tinguin la id «especial»
• Dona als elements que tenen la classe «alerta» un border de 1px de color gris
• Dona un color de fons vermells als elements que tinguin les classes «alerta» i també «stop» (totes dues classes)
• Dona un color de fons verd als elements que tenen la classe alerta , però també la classe «go» (totes dues classes)
• Fes que els enllaços siguin de color taronja quan el seu estat sigui «link», verd quan sigui «visited» i sense subratllat al posar-nos a sobre.
• Fes que el primer element dins del div amb la classe «container» tingui una tipografia de 1.5rem i que la primera línia d’aquest element tingui el text vermell (aquí hauràs de fer un cerca a internet per trobar aquest pseudo element)
• Fes que les cel·les de les files parells d’una taula tinguin el fons gris (#CCC) i les imparells blau (#00F)
• Fes que quasevol paràgraf que segueixi un h2 sigui vermell
• Fes que les listes no tinguin estil de llista. A més, fes que els li de primer nivell tinguin un border a la part inferior gris i de 1px. Has de tenir en compte, que les llistes es poden enniuar i que, per tant, poden haver-hi li de segon, tercer,… nivells

Exemple de llista enniuada:

<ul>
<li>Item primer nivell
   <ul>
      <li>Item segon nivell</li>
      <li>Item segon nivell</li>
   </ul>
</li>
<li>Item primer nivell
   <ul>
      <li>Item segon nivell</li>
      <li>Item segon nivell</li>
   </ul>
</li>
</ul>

• Item primer nivell
  • Item segon nivell
  • Item segon nivell
• Item primer nivell
  • Item segon nivell
  • Item segon nivell