Ferramentas para Sistema Web Sistemas de Informação Aula 8 – 17/04/2013.

Apresentação em tema: "Ferramentas para Sistema Web Sistemas de Informação Aula 8 – 17/04/2013."— Transcrição da apresentação:

1 Ferramentas para Sistema Web Sistemas de Informação Aula 8 – 17/04/2013

2 Revisão CSS Estrutura de Regras CSS Seletores Seletor universal Seletor de tipo Seletor de descendentes Seletor de filhos Seletor de irmão adjacente Seletor de atributos Seletor de id Seletor de classe 2

3 3

4 Cores em CSS As cores podem ser definidas de três formas diferentes: pelo nome da cor, pelo valor hexadecimal associado à cor pela função rgb(). Normalmente, utilizamos a forma hexadecimal ou a função rgb(). 4

5 Cores em CSS Em hexadecimal: #RRGGBB. Onde RR, GG e BB podem variar de 00 a FF e representam os componentes vermelho, verde e azul de uma cor. Para definir uma cor utilizando a função rgb(), é necessário passar como argumento as “quantidades” de vermelho, verde e azul necessárias para formar a cor desejada. Essas quantidades podem ser expressas na escala de 0 a 255 ou em porcentagem. Veja os exemplos abaixo: 5

6 Unidades de Medida Em CSS possuímos diversas unidades de medida como podemos verificar na tabela abaixo: 6 UNDescrição inpolegada cmcentímetro mmmilímetro emtamanho relativo ao tamanho de fonte atual no documento. 1em é igual ao tamanho da fonte atual, 2em o dobro do tamanho da fonte atual e assim por diante. exessa unidade é igual à altura da letra "x“ minúscula da fonte atual do documento. ptponto (1pt é o mesmo que 1/72 polegadas) pxpixels (um ponto na tela do computador)

7 Principais Propriedades CSS 7

8 Propriedades de background PropriedadesDescrição background-attachmentdefine se a imagem de background deve se mover com a rolagem de um elemento ou não. background-colordefine a cor do background de um elemento. background-imagedefine a imagem de background de um elemento. background-positiondefine a posição do background de um elemento. background-repeatdefine se o background e um elemento de se repetir caso este seja menor que a parte visível do elemento. backgrounddefine todas as propriedades de background em uma única linha. 8

9 Exemplo 9

10 Propriedades de Texto PropriedadesDescrição colordefine a cor do texto directiondefine a direção do texto letter-spacingdefine o espaçamento entre as letras do texto line-heightdefine a altura das linhas de um texto text-aligndefine o alinhamento horizontal do texto. text-decorationdefine uma “decoração” ou efeito para um texto. text-indentdefine a identação da primeira linha de um bloco de texto. text-transformdefine a capitalização do texto. vertical-aligndefine o alinhamento vertical do texto. white-spacedefine como os espaços do texto serão tratados. word-spacingdefine o espaçamento entre as palavras do texto. 10

11 Exemplo 11

12 Propriedades de Fonte PropriedadeDescrição font-familydefine a família de fontes a ser utilizada font-sizedefine o tamanho da fonte font-styledefine o estilo de fonte font-variantdefine se a fonte será utilizada no formato small-caps ou não font-weightdefine a espessura dos traços de uma fonte fontdefine todas as propriedades de fonte em uma única linha 12

13 Exemplo 13

14 Propriedades de Lista PropriedadesDescrição list-style-imagedefine qual será o indicador de item da lista. list-style-positiondefine se o indicador de item da lista será exibido do lado de dentro ou de fora do elemento do item. list-style-typedefine qual o tipo de indicador de item será usado na lista. list-styledefine todas as propriedades de lista em uma única linha. 14

15 Exemplo 15

16 Exercício Na aula 3 criamos uma página que disponibiliza uma receita fictícia. A partir deste exercício, crie três novas páginas com novas receitas. Crie também uma página principal com links para as receitas, em seguida, aplique regras de CSS para estas páginas utilizando as novas propriedades aprendidas hoje. Trabalhe as propriedades de background, texto, fonte e lista. 16

17 Exercício: Testando Colunas Continuando e testando o funcionamento de alguns seletores estudados, crie um documento html em um arquivo chamado duascolunas.html. Além disso, defina algumas regras de formatação em um arquivo CSS chamado duascolunas.css. Salve esses arquivos na mesma pasta. 17

18 18

19 19

20 Fim 20