Exercícios

(cs_09ex_ArtificeWeb.html)

CSS: em http://www.artifice.web.pt/tutoriais/cntd/tut_css1.html

Em equipes – colocar no quadro os atributos e um exemplo.

1. Fundos (background)

2. Linhas de fronteira (border)

3. Propriedades de classificação

4. Controlo dos tamanhos dos elementos

5. Tipos de letra (font)

6. Gerar conteúdos

7. Listas e marcadores

8. Margens

9. Linhas de contorno

10. Espaço em branco dentro de um elemento (padding)

11. Posicionamento

12. formatação de tabelas

13. Formatação de texto

Para ser feito individualmente – salvando com o nome do aluno ( instruções com o professor)

Lista Completa de Exemplos Práticos

{ http://www.artifice.web.pt/tutoriais/cntd/tut_css21.html#a21

Fundos (Background)

1. Definir a cor de fundo

2. Colocar uma imagem como fundo de um elemento

3. Repetir a imagem de fundo (background) na vertical

4. repetir a imagem de fundo (background) na horizontal

5. Controlar a posição de uma imagem de fundo

6. Imagens de fundo fixas (não aconpanham o deslocamento da página)

7. Uma única declaração para definir todas as propriedades do fundo

   Texto

8. Definir a cor do texto

9. Especificar o espaço que separa os caracteres

10. Alinhamento do texto

11. Decoração do texto

12. Inícios de parágrafo

13. Controlar as letras de um texto

    Tipos de Letra (font)

14. Definir o tipo de letra para um texto

15. Definir o tamanho das letras

16. Definir o estilo das letras

17. Definir uma variante de um tipo de letra

18. Escrever com texto mais carregado (negrito)

19. Todas as propriedades do tipo de letra numa única declaração

    Linhas de Fronteira (border)

20. Definir o estilo das quatro linhas de fronteira

21. Linhas de fronteira diferentes em cada um dos lados

22. Definir as cores das quatro linhas de fronteira

23. Definir a espessura da linha de fronteira inferior

24. Definir a espessura da linha de fronteira esquerda

25. Definir a espessura da linha de fronteira do lado direito

26. Definir a espessura da linha de fronteira superior

27. Todas as propriedades da linha de fronteira inferior numa única declaração

28. Todas as propriedades da linha de fronteira esquerda numa única declaração

29. Todas as propriedades da linha de fronteira do lado direito numa única declaração

30. Todas as propriedades da linha de fronteira do lado de cima numa única declaração

31. Todas as propriedades relativas à espessura das linhas de fronteira numa única declaração

32. Todas as propriedades das linhas de fronteira numa única declaração

    Margens (margin)

33. Definir a margem esquerda para um texto

34. Definir a margem direita para um texto

35. Definir a margem superior para um texto

36. Definir a margem inferior para um texto

37. Todas as propriedades relativas a margens numa única declaração

    Separação entre os conteúdos e os limites (padding)

38. Definir o espaço em branco entre o limite esquerdo e o conteúdo de uma célula de tabela

39. Definir o espaço em branco entre o limite direito e o conteúdo de uma célula de tabela

40. Definir o espaço em branco entre o limite de cima e o conteúdo de uma célula de tabela

41. Definir o espaço em branco entre o limite de baixo e o conteúdo de uma célula de tabela

42. Uma única declaração para definir todas as propriedades relativas ao espaço em branco dentro de um elemento

    Listas

43. Símbolos disponíveis para marcadores de item em listas não ordenadas

44. Símbolos disponíveis para marcadores de item em listas ordenadas

45. Uma imagem como marcador de item numa lista

46. Controlo da posição do marcador

47. Todas as propriedades numa única declaração

    Unidades de Medida

48. efinir a altura e a largura de uma imagem

49. Aumentar o espaço entre as linhas

    Propriedades de Classificação

50. Como deve ser apresentado um elemento?

51. Definir o local em que uma imagem deve ser colocada dentro de outro elemento

52. Posicionar um elemento relativamente à sua posição normal

53. Posicionar todos os cabeçalhos relativamente à sua posição normal

54. Posicionar um elemento com um valor absoluto

55. Como tornar um elemento invisível

56. Alterar o símbolo mostrado pelo cursor

    Posicionamento

57. Define a posição do elemento relativamente ao topo e ao lado esquerdo da página

58. O que deve ser feito quando o conteúdo de um elemento excede a sua área

59. Alinhar uma imagem na vertical

60. Colocar um elemento "por detrás" de outro elemento

61. Colocar um elemento "por detrás" de outro elemento (versão 2)

62. Definir a forma de um elemento

    Pseudo-classes

63. Dar cores diferentes a uma ligação

64. Dar outros estilos a uma ligação

    Pseudo-elementos

65. Dar um estilo especial à primeira letra de um texto

66. Dar um estilo especial à primeira linha de um texto

    Outros

67. Elementos de bloco

68. Elementos "inline"

69. Posicionamento absoluto com sobreposição de elementos

70. Estilos definidos num ficheiro externo

71. Regras de cascata com um ficheiro externo e estilos internos

72. Uma cascata de estilos simples

73. Outra cascata de estilos

74. Uma cascata de estilos com "herança"

75. Uma cascata de estilos com e sem "herança"