Aula 2 - HTML e CSS - Linguagem Web

Prévia do material em texto

*
*
Programação para WEB I
Luiz Artur Botelho da Silva
luiz.silva@fafica-pe.edu.br
*
*
Conteúdo Programático
Unidade I
Utilizando CSS nas páginas ;
Utilizando Javascript nas páginas (exemplos diversos contextos de uso);
*
*
CSS - Cascading Style Sheets 
O que é CSS?
 CSS é a mesma coisa que Style Sheets e de que Folhas de Estilo. Você já deve ter visto esses nomes em vários lugares. CSS é mais uma forma de aperfeiçoar seus documentos.
*
*
CSS - Cascading Style Sheets
No que eles podem nos ajudar?
*
*
Como criar estilos
Cada estilo que você cria é definido como uma regra CSS. Cada regra deve utilizar a seguinte sintaxe:
*
*
Como criar estilos
Sintaxe:
*
*
Exemplos CSS
Eis uma regra CSS que especifica que todos os títulos de nível 1 (tags <H1>) sejam exibidos em uma fonte de 36 pixels:
Eis outra regra que diz que todos os títulos de nível 2 (tags <H2>) devem ter tamanho de 24 pixels e cor azul;
*
*
CSS - Cascading Style Sheets
É possível inserir quebras de linha e espaços em branco dentro da regra. Com isso e possível ver mais facilmente todas as declarações e certificar-se de que colocou todos os sinais de ponto-e-vírgula e colchetes nos lugares corretos.
*
*
Exemplo
Esta regra diz que os parágrafos aparecerão em fonte Times, 12 pixel, azul e recuados meia polegada a partir da margem esquerda da página:
*
*
Tipos de Folhas de Estilo
Pode-se definir regras de CSS de 3 formas distintas:
Estilo Externo: Um arquivo separado fora do documento HTML;
Estilo Incorporado: No cabeçalho de um documento HTML;
Estilo Inline: Dentro de uma tag HTML.
*
*
Estilo Externo
Define as regras de CSS em um arquivo separado;
As paginas HTML vão acessar esses arquivos por meio da tag LINK;
Essa abordagem permite definir regras em um ou mais arquivos que podem ser aplicadas em alguma página do seu web site.
*
*
Exemplo Estilo Externo
Criar um arquivo .CSS com a seguinte regra:
Acessar de dentro do arquivo HTML o arquivo .CSS usando a tag LINK, conforme mostrado abaixo:
*
*
Exemplo Estilo Externo
*
*
Estilo Incorporado
Esse estilo especifica as regras de CSS no cabeçalho do documento;
As regras incorporadas afetam somente a página atual;
As regras devem ficar dentro da tag <STYLE>.
*
*
Exemplo Estilo Incorporado
*
*
Exemplo Estilo Incorporado
*
*
Estilo Inline
Esse estilo define suas regras de CSS dentro de uma tag HTML.
Essas regras afetam somente a tag atual.
*
*
Exemplo Estilo Inline
*
*
Tags Personalizadas
Com as classes de estilo, é possível definir diversas variações de uma única tag.
Você pode definir classes de estilo tanto em folhas de estilo externa como nas incorporadas.
A sintaxe é praticamente idêntica à sintaxe normal para os estilos externo e incorporado, com adição de um ponto e o nome da classe depois do elemento na qual será utilizado o atributo.
*
*
Exemplo de Tags Personalizadas
*
*
Tag <DIV>
*
*
Utilizando a tag <DIV>
*
*
Utilizando a tag <DIV>
*
*
Tag <SPAM>
*
*
Utilizando a Tag <SPAM>
*
*
Atalhos de CSS
*
*
Atalhos de CSS
*
*
Atributos CSS
O CSS possui uma lista de atributos que podem ser consultados pelo site:
http://www.w3c.br/divulgacao/guiasreferencia/css2/
*
*
CSS Herança
CSS suporta o conceito de Herança, para definir que propriedades são aplicadas a que elementos;
Algumas propriedades aplicadas a um elemento HTML são automaticamente aplicadas a todos os elementos-filhos;
*
*
CSS Herança
*
*
Classes de Estilos
Podem-se definir relações de dependência:
*
*
Classes de Estilos
Ao definir um estilo com um “*” no seu elemento de tag. As mudanças serão aplicadas a todos elementos que compõe a herança;
Exemplo:
*
*
Classes de Estilos
Já o sinal de “>”, quando usado, aplica estilo aos elemento filho diretamente associando ao seu elemento pai;
Exemplo:
*
*
Classes de Estilos
É possível criar classes de estilos para modificar apenas um elemento especifico;
Exemplo:
*
*
Formatando textos de estados
Estados de uma Linha
*
*
Formatando textos de estados