Tecnologias para Internet - 2013.2 - Aula 3
-
Upload
thyago-maia -
Category
Education
-
view
223 -
download
0
description
Transcript of Tecnologias para Internet - 2013.2 - Aula 3
Tecnologias para Internet
Prof.º Thyago MaiaProf. Thyago MaiaGestão da TI – 2013.2
Aula 3: Folhas de Estilo
Objetivos• Introduzir o conceito de folhas de estilo• Apresentar alguns recursos da p g
tecnologia• Definir e apresentar as principaisDefinir e apresentar as principais
propriedades CSS• Fazer com que o aluno crie seu• Fazer com que o aluno crie seu
primeiro projeto Web HTML + CSS
2
Introdução ao CSSIntrodução ao CSS
Introdução ao CSSç
Folha de Estilo
A partir do HTML 4.0, toda formatação de uma página HTML pode ser definida em uma folha depágina HTML pode ser definida em uma folha de estilo;Q d d lê f lh d ilQuando um navegador lê uma folha de estilo, o mesmo formata o documento HTML de acordo
ifi õ d fi id f lh dcom as especificações definidas na folha de estilo;
4
Introdução ao CSSç
• O que é CSS?Sigla para Cascading Style Sheets;g p g y ;Estilos definem como os elementos HTML serão apresentados/formatados;apresentados/formatados;Estilos foram adicionados no HTML 4.0 para resolver um problema:resolver um problema:
Separar o conteúdo da sua formatação!
lh d l d dFolhas de estilo podem ser armazenadas em arquivos .css ao serem definidas em documentos HTML;
5
Arquitetura de Sistemas Web
• Qual camada o CSS se enquadra?
6
Arquitetura de Sistemas Web
• Qual camada o CSS se enquadra?
7
Introdução ao CSSç
• Sintaxe CSSUma regra CSS possui duas partes: Um seletor e g p puma ou mais declarações;
h1 S l th1{
Color: blue;F t i 12
Seletor
DeclaraçãoFont-size: 12px;
} Propriedade Valor
O seletor é normalmente um elemento HTML que irá seguir as especificações definidas nas q g p çdeclarações (h1, body, p, a, etc.);
8
Introdução ao CSSç
• Tag usada em um documento HTML para referenciar um arquivo CSS:q
<link rel=“stylesheet” type=“text/css” href=“exemplo css”><link rel= stylesheet type= text/css href= exemplo.css >
• Tal tag deverá ser declarada entre as tags<head> e </head> (cabeçalho de uma página ( ç p gHTML;
Algumas propriedades CSSAlgumas propriedades CSS
Algumas propriedades CSSg p p
A propriedade BackgroundUtilizada para definir efeitos de fundo em um pelemento CSS;Alguns possíveis efeitos: background‐color (corAlguns possíveis efeitos: background color (cor de fundo), background‐image (imagem de fundo) background‐repeat (repetição da imagemfundo), background repeat (repetição da imagem de fundo);
body{
background-color: #b0c4de;
11
}
Algumas propriedades CSSg p p
Formatação de texto com CSSUtilizamos a propriedade color para setar uma p p pcor no texto de um determinado elemento;Com CSS uma cor pode ser especificada com:Com CSS, uma cor pode ser especificada com:
Um valor hexadecimal (Ex.: #FF0000)Um valor RGB (Ex : rgb(255 0 0))Um valor RGB (Ex.: rgb(255,0,0))O nome da cor em inglês (Ex.: red)
body{
color: blue;
12
}
Algumas propriedades CSSg p p
Alinhamento de texto com CSSUtilizamos a propriedade text‐align para definir o alinhamento horizontal em textos;O texto pode ser centralizado (center), alinhado a esquerda ou direita (left ou right) ou justificado (justify);
h1 {
text-align: right; }
P{
13
text-align: center;}
Algumas propriedades CSSg p p
Decoração de textos com CSSA propriedade text‐decoration é usada para setarp p pou remover decorações em textos;
a { text-decoration: none; }{ ; }h1 { text-decoration: line-through; }h2 { text-decoration: underline; }h3 { text-decoration: overline; }{ ; }
14
Algumas propriedades CSSg p p
Transformações de textosA propriedade text‐transform é usada para p p pmanter textos em caixa alta ou caixa baixa;
p {text-transform: uppercase;
}#area {
text-transform: lowercase; }#area2 {
text-transform: capitalize; }
15
Algumas propriedades CSSg p p
IndentaçãoA propriedade text‐indent é usada para p p pespecificar a indentação da primeira linha de um texto;;
p {
text-indent: 50px; }
16
Algumas propriedades CSSg p p
Tipos de FonteA propriedade font‐family é usada para setar o p p y ptipo de fonte a ser utilizado em um texto;Podemos definir vários tipos de fonte para aPodemos definir vários tipos de fonte para a mesma propriedade.
Caso um ou mais navegadores não suporte um dosCaso um ou mais navegadores não suporte um dos tipos listados;
p {
font-family: “Times new Roman”, Times, Serif; }
17
}
Algumas propriedades CSSg p p
Estilos de FonteA propriedade font‐style é usada para definir o p p y pestilo de fonte a ser utilizado em um texto;
p {
font-style: italic; }
#exemplo{
font-style: oblique; }
18
Algumas propriedades CSSg p p
Tamanho de FonteA propriedade font‐size seta o tamanho do texto;p p ;
p {
font-size: 40px; }
#exemplo{
font-size: 14px; }
19
Algumas propriedades CSSg p p
Largura e altura de um elementoAs propriedades width e height (largura e altura) p p g ( g )setam, respectivamente, a largura e altura de um determinado elemento;;
p p{
width: 240px;height: 100px;g p ;
}
20
Algumas propriedades CSSg p p
BordasAtravés da propriedade border (borda) podemos p p ( ) pinserir bordas em elementos CSS;
p {
border: 5px solid red;}
#exemplo {
border: 1px dotted blue;}
21
Algumas propriedades CSSg p p
MargensAtravés da propriedade margin podemos inserir p p g pmargens em elementos CSS;
#exemplo {
i t 100margin-top: 100px;margin-bottom: 100px;margin-left: 100px;
i i ht 100margin-right: 100px;}
22
Algumas propriedades CSSg p p
PaddingA propriedade padding define o espaço entre a p p p g p çborda de um elemento e seu conteúdo;
#exemplo {
ddi t 100padding-top: 100px;padding-bottom: 100px;padding-left: 100px;
ddi i ht 100padding-right: 100px;}
23
Introdução ao CSSç
Os seletores id e class
Além dos seletores de elementos HTML, CSS também permite que nós criemos nossostambém permite que nós criemos nossos próprios seletores, chamados id e class;
24
Introdução ao CSSç
Os seletores idSeletores id são usados para especificar um estilo p ppara um elemento único;Seletores id formatam elementos HTML que osSeletores id formatam elementos HTML que os invocam a partir do atributo id;
/* no css */
#paragrafos
<!-- no html -->
#paragrafos{
color: red;<p id=“paragrafos” />
25
co o : ed;}
Introdução ao CSSç
Os seletores classSeletores class são usados para especificar um p pestilo para um grupo de elementos;Seletores class formatam elementos HTML que osSeletores class formatam elementos HTML que os invocam a partir do atributo class;
/* no css */.centro{
<!-- no html -->
{text-align: center;
<p class=“centro” />
26
ce te ;}
Introdução ao CSSç
Os seletores classTambém podemos especificar que apenas alguns p p q p gtipos de elementos HTML deverão ser afetados pela classe;p ;
/* no css */p.centro{
<!-- no html -->
{text-align: center;
<p class=“centro” />
27
ce te ;}
Prática em LaboratórioPrática em Laboratório
OBS.: Todas as atividades deverão ser enviadas para o e‐mail [email protected]
Prática em Laboratório
• Faça uma folha de estilo que padronize a formatação do documento HTML criado na çatividade prática 01. (0,0 a 2,0 pontos)– Data de entrega: Até 09/09/2013;– Data de entrega: Até 09/09/2013;– Critérios de avaliação:
b d d f• Substituição das tags HTML de formatação por seletores CSS. Tal substituição será classificada como:
Total: Toda a formatação foi definida no arquivo CSS criado– Total: Toda a formatação foi definida no arquivo CSS criado (2,0 pontos);
– Parcial: O CSS define parte da formatação do documento HTML. Algumas tags HTML ainda formatam parte do conteúdo (0,0 a 1,5 pontos); 29
Prática em Laboratório
• Faça uma folha de estilo que padronize a formatação do documento HTML criado na çatividade prática 01. (0,0 a 2,0 pontos)– O(s) arquivo(s) CSS deverão ser editados APENAS– O(s) arquivo(s) CSS deverão ser editados APENAS através dos softwares Notepad++, Notepad ou GEdit;GEdit;
– A atividade em questão é individual;
30
Prática em Laboratório
• Faça um Front‐End para um sistema Web fictício através da criação de formulários çHTML. (0,0 a 5,0 pontos)– Data de entrega: Até 09/09/2013;– Data de entrega: Até 09/09/2013;– Critérios de avaliação:
d “ ” d á (l k• Presença de um “menu” em cada página HTML (links que direcionam o usuário para cada página do sistema fictício); (0 0 a 1 0 ponto)fictício); (0,0 a 1,0 ponto)
• Os formulários criados refletem totalmente ou parcialmente o Front‐End para o sistema Webparcialmente o Front End para o sistema Web proposto; (0,0 a 1,0 ponto)
31
Prática em Laboratório
• Faça um Front‐End para um sistema Web fictício através da criação de formulários HTML. (0,0 a 5,0 pontos)
• Uso de CSS no Front‐End; (0,0 a 1,0 ponto)• Formatação; (0,5 pontos)• Organização do código; (0,0 a 1,0 ponto)• Pesquisa (o aluno pesquisou e utilizou tags não apresentadas em sala de aula); (0,5 pontos)
• O(s) arquivo(s) CSS deverão ser editados APENAS através dos softwares Notepad++, Notepad ou GEdit;
– A atividade em questão poderá ser feita em grupos de até 3 alunos; 32