Download pdf - Tecnologias para Internet - 2013.1 - Aula 3

Tecnologias para Internet

Prof.º Thyago MaiaProf. Thyago MaiaGestão da TI – 2013.1

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


• 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


• 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


• 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

}


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

}


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;}


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; }h1 { text decoration: line through; }h2 { text-decoration: underline; }h3 { text-decoration: overline; }h4 { text-decoration: blink; }h4 { text-decoration: blink; }

14


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


IndentaçãoA propriedade text‐indent é usada para p p pespecificar a indentação da primeira linha de um texto;;

p {

text-indent: 50px; }

16


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

}


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


Tamanho de FonteA propriedade font‐size seta o tamanho do texto;p p ;

p {

font-size: 40px; }

#exemplo{

font-size: 14px; }

19


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


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


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


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


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


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



#paragrafos{

color: red;<p id=“paragrafos” />

25

co o : ed;}


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{



{text-align: center;

<p class=“centro” />

26

ce te ;}


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{



{text-align: center;

<p class=“centro” />

27

ce te ;}