Clases en HTML5 e en CSS

Como facemos se queremos que algún parágrafo estea en verde e outros en rosa? Crearemos clase: un estilo propio en CSS e despois chamalo co atributo class=  en HTML. Hai varios xeitos de crealo en CSS: con *, con # e cun puntiño.

O teu traballo:

• Cando se emprega * para definir unha clase? e cando #?
• Pon un exemplo de clase definida nun CSS e como usas a etiqueta correspondente en HTML
• Consultando esta páxina web  resposta a:
  1. Cal é a propiedade para poñer un parágrafo todo en maiúsculas?
  2. Como se cambia de cor unha ligazón xa visitada e as outras non?
  3. Como quito o subliñado dunha ligazón só nalgúns casos?
  4. Como poño de cores unha ringleira dunha táboa e outras non?
  5. Como fago opaca xusto  unha imaxe?

Para aprender máis

Tipografía

Google pon á nosa disposición algo menos de mil tipos de letras que podemos usar no noso sitio web.

O teu traballo:

Conta nun artigo do teu blog o que temos que facer para que a tipografía da  nosa web quede preciosísima.

Pero moito ollo co que conta este experto.

Tomar medidas en CSS

Normalmente medimos en cm en deseño web é bastante habitual empregar px. Imos ver todas as posibilidades.

O teu traballo:

Consultando  as nosas familiares páxinas averigua o que é:

1. O significado de px
2. Que é un tamaño relativo?
3. Que significa unha fonte de tamaño 3em? Pon exemplo con captura de pantalla
4. Cal é a diferencia con 3rem? Tamén uns exempliños
5. Que significa poñer un tanto por cento?

Propiedades en CSS

Na xa coñecida páxina de w3schools busca propiedades para que o teu sitio web quede estupendo.

O teu traballo:

Persoaliza o teu sitio en html de tal xeito que teña:

• fondo a cor
• recheos sensatos
• marxes dun 10%
• liñas punteadas
• parágrafos indentados
• ligazóns a cores con hover
• algún texto a cor

Comentarios en HTML e CSS

Cando quero ocultar parte do meu código ou explicar a razón pola que fago algo debo usar comentarios. En HTML non son igual ca en CSS.

<!--O que escribo no ficheiro .html non se ve no navegador-->

/* para dar explicacións en CSS */

O teu traballo:

Pon comentarios en todos os teus ficheiros explicando a razón das etiquetas ou propiedades máis difíciles