Post on 22-Jun-2015
description
Tecnologias para Internet
Prof.º Thyago MaiaGestão da TI – 2014.2
Objetivos
Aula 4: Folhas de Estilo
• Introduzir o conceito de folhas de estilo• Apresentar alguns recursos da
tecnologia• Definir e apresentar as principais
propriedades CSS• Fazer com que o aluno crie seu primeiro
projeto Web HTML + CSS
2
Introduçã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 de estilo;
Quando um navegador lê uma folha de estilo, o mesmo formata o documento HTML de acordo com as especificações definidas na folha de estilo;
4
Introdução ao CSS
• O que é CSS? Sigla para Cascading Style Sheets; Estilos definem como os elementos HTML serão
apresentados/formatados; Estilos foram adicionados no HTML 4.0 para
resolver um problema: Separar o conteúdo da sua formatação!
Folhas 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 CSS Uma regra CSS possui duas partes: Um seletor e
uma ou mais declarações;
O seletor é normalmente um elemento HTML que irá seguir as especificações definidas nas declarações (h1, body, p, a, etc.);
8
h1{Color: blue;Font-size: 12px;}
Seletor
Declaração
Propriedade Valor
Introdução ao CSS
• Tag usada em um documento HTML para referenciar um arquivo 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 HTML;
Algumas propriedades CSS
Algumas propriedades CSS
A propriedade Background Utilizada para definir efeitos de fundo em um
elemento CSS; Alguns possíveis efeitos: background-color (cor de
fundo), background-image (imagem de fundo), background-repeat (repetição da imagem de fundo);
11
body {
background-color: #b0c4de;background-image:url('paper.gif'); }
Algumas propriedades CSS
Formatação de texto com CSS Utilizamos a propriedade color para setar uma
cor no texto de um determinado elemento; Com CSS, uma cor pode ser especificada com:
Um valor hexadecimal (Ex.: #FF0000) Um valor RGB (Ex.: rgb(255,0,0)) O nome da cor em inglês (Ex.: red)
12
body {
color: blue; }
Algumas propriedades CSS
Alinhamento de texto com CSS Utilizamos 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);
13
h1 {
text-align: right; }
P{
text-align: center;}
Algumas propriedades CSS
Decoração de textos com CSS A propriedade text-decoration é usada para setar
ou remover decorações em textos;
14
a { text-decoration: none; }h1 { text-decoration: line-through; }h2 { text-decoration: underline; }h3 { text-decoration: overline; }
Algumas propriedades CSS
Transformações de textos A propriedade text-transform é usada para
manter textos em caixa alta ou caixa baixa;
15
p { text-transform: uppercase;
}#area {
text-transform: lowercase; }#area2 {
text-transform: capitalize; }
Algumas propriedades CSS
Indentação A propriedade text-indent é usada para
especificar a indentação da primeira linha de um texto;
16
p {
text-indent: 50px; }
Algumas propriedades CSS
Tipos de Fonte A propriedade font-family é usada para setar o
tipo de fonte a ser utilizado em um texto; Podemos definir vários tipos de fonte para a
mesma propriedade. Caso um ou mais navegadores não suporte um dos
tipos listados;
17
p {
font-family: “Times new Roman”, Times, Serif; }
Algumas propriedades CSS
Estilos de Fonte A propriedade font-style é usada para definir o
estilo de fonte a ser utilizado em um texto;
18
p {
font-style: italic; }
#exemplo{
font-style: oblique; }
Algumas propriedades CSS
Tamanho de Fonte A propriedade font-size seta o tamanho do texto;
19
p {
font-size: 40px; }
#exemplo{
font-size: 14px; }
Algumas propriedades CSS
Largura e altura de um elemento As propriedades width e height (largura e altura)
setam, respectivamente, a largura e altura de um determinado elemento;
20
p {
width: 240px; height: 100px;
}
Algumas propriedades CSS
Bordas Através da propriedade border (borda) podemos
inserir bordas em elementos CSS;
21
p {
border: 5px solid red;}
#exemplo {
border: 1px dotted blue;}
Algumas propriedades CSS
Margens Através da propriedade margin podemos inserir
margens em elementos CSS;
22
#exemplo {
margin-top: 100px; margin-bottom: 100px;
margin-left: 100px;margin-right: 100px;
}
Algumas propriedades CSS
Padding A propriedade padding define o espaço entre a
borda de um elemento e seu conteúdo;
23
#exemplo {
padding-top: 100px; padding-bottom: 100px;
padding-left: 100px;padding-right: 100px;
}
Introdução ao CSS
Os seletores id e class
Além dos seletores de elementos HTML, CSS também permite que nós criemos nossos próprios seletores, chamados id e class;
24
Introdução ao CSS
Os seletores id Seletores id são usados para especificar um estilo
para um elemento único; Seletores id formatam elementos HTML que os
invocam a partir do atributo id;
25
/* no css */
#paragrafos{
color: red;}
<!-- no html -->
<p id=“paragrafos” />
Introdução ao CSS
Os seletores class Seletores class são usados para especificar um
estilo para um grupo de elementos; Seletores class formatam elementos HTML que os
invocam a partir do atributo class;
26
/* no css */.centro{text-align: center;}
<!-- no html -->
<p class=“centro” />
Introdução ao CSS
Os seletores class Também podemos especificar que apenas alguns
tipos de elementos HTML deverão ser afetados pela classe;
27
/* no css */p.centro{text-align: center;}
<!-- no html -->
<p class=“centro” />
Prática em Laboratório
OBS.: Todas as atividades deverão ser enviadas para o e-mail provas@thyagomaia.net
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/2014;– Critérios de avaliação:• 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
(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
através dos softwares Notepad++, Notepad ou GEdit;
– A atividade em questão é individual;
30