Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 31/5/2016 19:38 1 Este parágrafo em fonte Courier Este parágrafo em fonte Cambria e tamanho 20px.

Apresentação em tema: "Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 31/5/2016 19:38 1 Este parágrafo em fonte Courier Este parágrafo em fonte Cambria e tamanho 20px."— Transcrição da apresentação:

1 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 31/5/2016 19:38 1 Este parágrafo em fonte Courier Este parágrafo em fonte Cambria e tamanho 20px Digite os comandos no Bloco de Notas e grave como estilo1.html. Execute no seu browser e veja o efeito gerado pelo CSS. Exemplo CSS usando STYLE Esta é uma página com fundo vermelho

2 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 31/5/2016 19:38 2 Utilizando os comandos sobre estilização do CSS, crie um arquivo ex_estilo1.html que apresente os mesmos efeitos da janela abaixo.

3 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 31/5/2016 19:38 3 Até o momento, foram aprendidas duas formas de utilizarmos o CSS: em linha, na qual a definição tem efeito somente para a tag referente e no início do arquivo html, dentro da tag head (style), no qual as definições valem para todo o documento html. Uma outra opção é criar um arquivo separado, um arquivo texto com extensão CSS, no qual podemos gerenciar o layout de muitas páginas ao mesmo tempo, isto é, todos os arquivos html que possuirem esta inserção (este link), terão a exibição de seus atributos de acordo com as definições do arquivo.CSS. Sintaxe: Esse link deve ser incluído na seção head, onde está sendo indicado ao navegador que o mesmo deve utilizar esse arquivo (arquivo.CSS) para renderizar(reproduzir) a página a ser exibida usando os atributos descritos nesse arquivo. Essa técnica economiza um grande retrabalho do designer/desenvolvedor caso tenha que alterar, por exemplo, a cor de fundo de umas 100 páginas html, ou o fonte utilizado na tag h1, ou ainda outro atributo qualquer estilizado pelo CSS.

4 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 31/5/2016 19:38 4 Digite os comandos abaixo no Bloco de Notas e crie um arquivo como o nome de estilo. css e outro com o nome de exerc49.html. Grave ambos na mesma pasta. (estilo.css) body { background-color:blue; color: purple; } h1 {color:red; text-align:center;} h2 {color:green; text-align:left;} h3 {color:yellow; text-align:right;} h4 {color:black; text-align:center; font-style:italic;} (exerc49.html) Exemplo CSS usando Link Esta é uma página com fundo AZUL, letras em MARROM e padrão css (continua...  )

5 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 31/5/2016 19:38 5 Título da Página em VERMELHO com H1 CENTRALIZADO Texto da Página em VERDE com H2 Alinhado a ESQUERDA Texto da Página em AMARELO com H3 Alinhado a DIREITA Texto da Página em PRETO com H4 CENTRALIZADO e Itálico

6 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 31/5/2016 19:38 6 Os seletores utilizados, foram as próprias TAGs. Podemos escrever seletores agrupados, quando estes tiverem as mesmas características, separando-os com a vírgula. Exemplo: h1 {color: red;} h2 {color:red;} p {color: red;} Agrupando... h1, h2, p {color:red;} Seletor CLASSE Os seletores CSS não estão restritos as TAGs da marcação (X)HTML, podem ser entidades da marcação ou combinação delas, podem ser atributos ou seus valores, ou combinações de TAGs e atributos. A grafia para o atributo classe é: class, associado a um nome ou a um elemento. Um mesmo elemento ou TAG pode receber várias classes.

7 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 31/5/2016 19:38 7 Seletor CLASSE (continuação) Exemplos: CSS p {color:blue;} p.cor-um{color:black;} p.cor-dois{color:red;} HTML Parágrafo com texto na cor AZUL Parágrafo com texto na cor PRETA Parágrafo com texto na cor VERMELHA Observação: Deve-se evitar nomear as classe com nomes relacionados com a atribuição do elemento, pois se futuramente o conteúdo atribuido for alterado, o código terá uma leitura equivocada da ação esperada. Exemplo: p.vermelha {color:red;} p.esquerda{text-align:left;} Implementação futura: p.vermelha {color:black;} p.esquerda {text-align:center;}

8 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 31/5/2016 19:38 8 Utilize o Bloco de Notas para criar alguns seletores de classe (estilo50.css), e uma pagina em html (exerc50.html) que exiba a imagem apresentada.

9 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 31/5/2016 19:38 9 (exerc50.html) Exercicio50-Seletores de CLASSE e CSS Título da Página do Exercício 50 com Seletor de Classe(CSS) O seletor de CLASSE em CSS deve ser utilizado para personalizar o texto Seu nome NÃO DEVE ESTAR RELACIONADO A AÇÃO DO ATRIBUTO, MAS SIM COM A ESTRUTURA DO DOCUMENTO Página 001

10 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 31/5/2016 19:38 10 body { bgcolor:white; } h1.principal { background-color:yellow; color:red; text-align:center; } p.normal { color:blue; text-align:justified; } p.destaque { color:red; background-color:black; text-align:center; } h6.rodape { color:green; text-align:right; }(exerc50.css)

11 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 31/5/2016 19:38 11 Resumo das propriedades: background-color:valor;Cor atribuida ao fundo ao elemento color:valor;Cor atribuida ao elemento em nível principal (cor texto) text-align:valor;Alinhamento do elemento texto