CSS ETEC FRANCISCO MORATO. Professores: Kelly e Rafael

Tamanho: px

Começar a partir da página:

Download "CSS ETEC FRANCISCO MORATO. Professores: Kelly e Rafael"

Tomás Viveiros Fragoso
8 Há anos
Visualizações:

1 CSS ETEC FRANCISCO MORATO Professores: Kelly e Rafael 2015

2 Agenda Introdução; Website Layouts; CSS; Referências. 2

3 Website Layouts A maioria dos sites têm colocado o seu conteúdo em várias colunas; Ex.: Formatado como uma revista ou jornal; Várias colunas são criadas usando <div> ou <table> elementos; CSS são usados para posicionar elementos, ou para criar fundos ou olhar colorido para as páginas; Mesmo que seja possível a criação de layouts agradáveis com tabelas HTML, as tabelas foram projetados para apresentar dados tabulares - não como uma ferramenta de layout. 3

usados para posicionar elementos, ou para criar fundos ou olhar colorido para as páginas; Mesmo que seja possível

4 Website Layouts 4

5 Website Layouts <html> <body> <table width="500" border="0"> <tr> <td colspan="2" style="background-color:#ffa500;"> <h1>main Title of Web Page</h1> </td> </tr> <tr valign="top"> <td style="background-color:#ffd700;width:100px;text-align:top;"> <b>menu</b><br> HTML<br> CSS<br> JavaScript </td> <td style="background-color:#eeeeee;height:200px;width:400px;text-align:top;"> Content goes here</td> </tr> <tr> <td colspan="2" style="background-color:#ffa500;text-align:center;"> Copyright Sua Empresa</td> </tr> </table> </body> </html> 1.html 5

CSS<br> JavaScript </td> <td style="background-color:#eeeeee;height:200px;width:400px;text-align:top;"> Content goes here</td> </tr>

6 O que é CSS? CSS - Cascading Style Sheets (Folha de Estilos em Cascata); CSS é uma linguagem para estilos que define o layout de documentos HTML; Ex.: CSS controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos, etc.; Diferença entre CSS e HTML: HTML é usado para estruturar conteúdos. CSS é usado para formatar conteúdos estruturados. 6

7 Benefícios do uso de CSS Controle do layout de vários documentos a partir de uma simples folha de estilos; Maior precisão no controle do layout; Aplicação de diferentes layouts para servir diferentes mídias (tela, impressora, etc.); Emprego de variadas, sofisticadas e avançadas técnicas de desenvolvimento. 7

de diferentes layouts para servir diferentes mídias (tela, impressora, etc.

8 Benefícios do uso de CSS Controle do layout de vários documentos a partir de uma simples folha de estilos; Maior precisão no controle do layout; Aplicação de diferentes layouts para servir diferentes mídias (tela, impressora, etc.); Emprego de variadas, sofisticadas e avançadas técnicas de desenvolvimento. 8

9 CSS Por exemplo queremos por uma cor de fundo vermelha para a página web: HTML: <body bgcolor="#ff0000"> CSS: body {background-color: #FF0000;} Esquema CSS: 9

10 Método 1: In-line (o atributo style) <html> <head> <title>exemplo</title> </head> <body style="background-color: #FF0000;"> <p>esta é uma página com fundo vermelho</p> </body> </html> 10

11 Método 2: Interno (a tag style) <html> <head> <title>exemplo</title> <style type="text/css"> body {background-color: #FF0000;} </style> </head> <body> <p>esta é uma página com fundo vermelho</p> </body> </html> 11

12 Método 3: Externo (link para uma folha de estilos) <html> <head> <title>meu documento</title> <link rel="stylesheet" type="text/css" href="style/style.css" /> </head> <body>... 12

13 CSS index.html style.css <html> <head> <title>meu documento</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>minha primeira folha de estilos</h1> </body> </html> body { } background-color: #FF0000; 13

14 Exemplos CSS3 Exemplo 1 (Borda); Exemplo 2 (Perspectiva); Exemplo 3 (Efeito de sombra); Exemplo 4 (Animação). 14

15 Exercício 1 index.html <html> <head> <title>aula LPI 1</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="style.css" type="text/css" media="all" /> </head> style.css <body> body { <h1>texto</h1> background-color: #FFCC66; <p>texto</p> background-image: url("butterfly.gif"); </body> } </html> h1 { color: #990000; background-color: #FC9804; } 15

charset=utf-8" /> <link rel="stylesheet" href="style.

16 Teste no seu CSS e veja o resultado: Valor Descrição Background-repeat: repeat-x background-repeat: repeat-y background-repeat: repeat A imagem se repete na horizontal A imagem se repete na vertical A imagem se repete na tanto na horizontal como na vertical background-repeat: no-repeat A imagem não se repete Background-attachment: scroll A imagem rola com a página Background-attachment: fixed background-position: 2cm 2cm background-position: 50% 25% background-position: top right A imagem é fixa A imagem é posicionada a 2 cm da esquerda e 2 cm para baixo na página A imagem é centrada na horizontal e a um quarto (25%) para baixo na página A imagem é posicionada no canto superior direito da página 16

com a página Background-attachment: fixed background-position: 2cm 2cm background-position: 50% 25% background-position: top right A imagem é fixa A imagem é posicionada a 2 cm

17 Referências HTML.NET. Tutorial CSS. Disponível em: < Acesso em: 15 ago W3C. CURSO DE CSS3. Disponível em: < Acesso em: 15 ago W3SCHOOLS. CSS3 Tutorial. Disponível em: < Acesso em: 15 ago

Disponível em: <http:// www.w3c.br/cursos/cursocss3>. Acesso em: 15 ago. 2012.

Documentos relacionados

Apostila CSS - Introdução à folha de estilos

Apostila CSS - Introdução à folha de estilos Este documento é propriedade intelectual do Núcleo de Educação a distância da NRsystem e distribuído sob os seguintes termos: 1. As apostilas publicadas pelo