Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010 CSS Cascading Style Sheets Folhas de Estilo em Cascata Parte I.

Apresentação em tema: "Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010 CSS Cascading Style Sheets Folhas de Estilo em Cascata Parte I."— Transcrição da apresentação:

1 Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010 CSS Cascading Style Sheets Folhas de Estilo em Cascata Parte I

2 Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010 CSS é uma linguagem que define a formatação de um documento html.

3 Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010 documento.htmldocumento.css CSS é usado para configurar um estilo. HTML é usado para estruturar conteúdos.

4 Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010 A grande vantagem do uso de CSS é a de separar a marcação HTML, da apresentação do site.

5 Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010 index.html documento.css historia.html produtos.html contato.html cadastro.html

6 Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010 Em outras palavras, vale dizer que o HTML destina-se unicamente a estruturar e marcar o conteúdo, ficando por conta das CSS toda a responsabilidade pelo visual do documento.

7 Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010 Sintaxe Seletor {propriedade: valor} É o elemento que será alvo da regra de estilo. É o atributo do elemento HTML ao qual será aplicada a regra. É a característica específica a ser assumida pela Propriedade.

8 Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010 Se por exemplo, você quiser trocar a cor do fundo de um site com 100 páginas, a folha de estilos evita que você edite manualmente uma a uma as páginas para fazer a mudança nos 100 documentos HTML. Usando CSS a mudança se fará em uns poucos segundos.

9 Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010 texto exemplo Esse elemento e seus atributos estão em desuso. Texto exemplo

10 Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010 O certo é em um documento com extensão.css colocar (exemplo de folha de estilo externa): p { font-size: large; font-family: georgia, serif; color: red; }

11 Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010 Para ligar os dois documentos é necessário acrescentar na seção head do documento html: documento.html documento.css

12 Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010 Além do exemplo de folha de estilo externa. Existem mais dois tipos de folhas de estilo. Incorporada In line

13 Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010 Folha de estilo incorporada (é colocada no cabeçalho do documento html) Exemplo body {background-color: #FF0000;} Esta é uma página com fundo vermelho

14 Curso Técnico em Informática | URCAMP | Denise Aristimunha de Lima | 2010 Folha de estilo In line (é colocada na própria linha do código html) Exemplo Esta é uma página com fundo vermelho