Tecnologias para Internet - 2014.1 - Aula 4

Tecnologias para Internet

Prof.º Thyago MaiaGestão da TI – 2014.1

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


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


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


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


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


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


Indentação A propriedade text-indent é usada para

especificar a indentação da primeira linha de um texto;

16

p {

text-indent: 50px; }


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


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


Tamanho de Fonte A propriedade font-size seta o tamanho do texto;

19

p {

font-size: 40px; }

#exemplo{

font-size: 14px; }


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;

}


Bordas Através da propriedade border (borda) podemos

inserir bordas em elementos CSS;

21

p {

border: 5px solid red;}

#exemplo {

border: 1px dotted blue;}


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;

}


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



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



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



<p class=“centro” />

Prática em Laboratório

OBS.: Todas as atividades deverão ser enviadas para o e-mail [email protected]


• 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é 18/03/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


• 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

Education

Tecnologias para Internet - 2014.1 - Aula 4