Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 31/5/2016 11:34 1 Introdução e Conceitos CSS CSS significa Cascade Style Sheetes (Folha de Estilo.

Apresentação em tema: "Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 31/5/2016 11:34 1 Introdução e Conceitos CSS CSS significa Cascade Style Sheetes (Folha de Estilo."— Transcrição da apresentação:

1 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 31/5/2016 11:34 1 Introdução e Conceitos CSS CSS significa Cascade Style Sheetes (Folha de Estilo em Cascata), é um método ou um conjunto de regras que têm como base o HTML, utilizado para padronizar layouts de sites e criar estilos de apresentação, facilitando o processo de padronização, uma vez que deseja-se alterar o layout de um site, torna-se mais fácil, rápido e prático, realizar as mudanças em suas folhas de estilo do que em cada um dos arquivos HTML que compõe o site em questão. Para a utilização do CSS, faz-se necessário tomar conhecimento de alguns conceitos quanto ao seu funcionamento. O CSS faz uso das TAGs do HTML, criando estilos, formatando páginas, organizando e posicionando textos, imagens e demais itens que o browser possa interpretar. Para o HTML as TAGs podem ser escritas em caixa alta ou baixa (continua  )

2 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 31/5/2016 11:34 2 Introdução e Conceitos CSS (continuação) podem ser escritas em caixa alta ou baixa (FORM ou form), para o CSS, as TAGs e seus atributos devem ser escritos sempre utilizando letras minúsculas, estar convenientemente aninhadas e toda TAG têm seu corresponde indicando o fechamento, pois isso é OBRIGATÓRIO. Quando trabalhamos com HTML e CSS, também estamos trabalhando com XHTML, que é uma linguagem de marcação para WEB baseada em SGML, uma metalinguagem complexa, projetada com a finalidade de servir de base para a criação de outras linguagens. A SGML foi usada na criação do XML (Extensible Markup Language), assim, pode-se dizer que ao escrever em XHTML (Extensible Hypertext Markup Language), estamos escrevendo em HTML reformulado para XML, no qual as TAGs e atributos já estão definidos.

3 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 31/5/2016 11:34 3 Introdução e Conceitos CSS (continuação) Formato Correto: Aqui tem um texto com sinalizadores corretos Texto enfatizado com sinalizadores corretos Formato Incorreto: Aqui tem um texto com sinalizadores incorretos Texto enfatizado com sinalizadores incorretos Elementos obrigatórios em um documento XHTML É obrigatória a declaração DOCTYPE, bem como a presença dos elementos,, e. São três os tiposde DOCTYPE: Strict, Transational e Frameset.

4 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 31/5/2016 11:34 4 Elementos obrigatórios em um documento XHTML (continuação - DOCTYPE) Strict é a mais rígida das declarações. Não permite qualquer item de apresentação dentro dos elementos, nem tão pouco elementos em desuso, segundo a W3C. Exemplo: http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd Transitional é mais flexível que a anterior, indicada para documentos que empregam elementos em desuso, definição de regras dentro de TAGs e a exibição de documentos em navegadores sem suporte para CSS. Exemplo: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

5 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 31/5/2016 11:34 5 Elementos obrigatórios em um documento XHTML (continuação - DOCTYPE) Frameset é regida pelas mesmas diretrizes da declaração transitional, acrescida de permissão ao emprego de elementos específicos e baseados em frames. Exemplo: http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd Sintaxe CSS A sintaxe básica de uma folha CSS é constituida de duas partes: o seletor e a declaração. Esta é compreendida por uma propriedade e um valor. seletor{propriedade:valor}

6 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 31/5/2016 11:34 6 Sintaxe CSS (continuação) Seletor – é o alvo da regra CSS. É a TAG do elemento da marcação ou uma entidade capaz de definir em qual lugar da marcação será aplicada a regra CSS. Declaração – determina os parâmetros da estilização. Propriedade e valor Propriedade – define qual característica do elemento, alvo do seletor, será estilizada. Valor – é a quantificação ou a qualificação da propriedade. Uma regra CSS pode conter mais de uma declaração. Isto significa que, para estilizar mais de uma propriedade de um mesmo seletor, pode-se escrever todas as declarações em uma mesma regra. Exemplo: p { color:#000; background-color: #ff0; font-style: italic; text-align: right; }

7 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 31/5/2016 11:34 7 Sintaxe CSS (continuação) Ao escrever uma regra CSS com mais de uma declaração, como no exemplo anterior, usa-se o ponto-e-vírgula para separá-las. O ponto-e-vírgula é facultativo no caso de propriedade única ou após a última declaração. Exemplo: (forma compacta) p{color:#000;background-color: #ff0;font-style: italic;text-align: right} Obs.: Quando o valor da propriedade for uma palavra composta, separada por espaço, deve-se usar apas ou apóstrofo para delimitar este valor. Pode-se fazer uso do CSS através do atributo style. Exemplo: Parágrafo com tamanho de fonte igual a 20 px continua... 

8 Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 31/5/2016 11:34 8 Este parágrafo em fonte Courier Este parágrafo em fonte Cambria e tamanho 16px 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