Desenvolvimento em Ambiente Web - kusumoto.com.br · definição diz que a cor do texto destes ......

Desenvolvimento em Ambiente Web

Prof. André Y. [email protected]

Prof. André Y. Kusumoto – [email protected]

CSS - Cascading Style Sheets

• Folhas de estilos em cascata

Objetivo

• Formatar páginas escritas em HTML baseada nos padrões "Cascading Style Sheets", publicados pelo World Wide Web Consortium (W3C).

2/38



Sintaxe CSS

•A sintaxe das definições CSS é composta por duas partes: um seletor e uma declaração.

Exemplo: h1 {color: green}

Seletor Declaração

Neste exemplo o seletor h1 diz que o estilo se aplica a elementos <h1> e a definição diz que a cor do texto destes elementos deve ser verde ("green").

•A declaração fica entre chaves ({...}) e pode conter várias definições.

•Cada definição é formada por um par, propriedade: valor, em que o valor é separado da propriedade pelo caracter : (dois pontos).

•O exemplo seguinte ilustra isto de forma genérica:

seletor {propriedade: valor}

3/38



• O seletor é normalmente o nome de uma tag (elemento) do HTML, mas também pode ser um seletor de classe, um seletor de ID ou um seletor contextual.

Exemplo:<html>

<head>

<title>Ex1</title>

<style type="text/css">

h1 {color: green}

</style>

</head>

<body>

<h1>Este cabeçalho tem cor verde</h1>

</body>

</html>

4/38



• Dentro das chaves (caracteres { e }) pode-se colocar várias definições separadas pelo caracter ";" (ponto e vírgula).

<html>

<head>

<title>Ex3</title>


p { text-align: center; color: green; font-family: arial }

</style>

</head>

<body>

<p> O texto deste parágrafo tem tipo de letra "arial", cor verde e está alinhado ao centro. </p>

</body>

</html>

5/38



Agrupar seletores

•Se for preciso aplicar estilos a mais do que um elemento pode-se agrupar os seletores que compartilham as mesmas definições.

•Para isso, eles devem ser separados por vírgulas.

h1,h2,h3,h4,h5,h6 { color: green }

6/38



Seletores de classe

•Os seletores de classe permitem definir estilos diferentes que podem ser aplicados ao mesmo elemento. No caso de dois tipos diferentes de parágrafo no documento: um alinhado à direita e outro alinhado ao centro. <style type="text/css">

p.direita { text-align: right }

p.centro { text-align: center }

</style>

...

<p class="direita">Parágrafo alinhado à direita. </p>

<p class="centro">Parágrafo alinhado no centro. </p>

7/38



Seletores de classe

•Os seletores de classe também podem ser definidos sem o nome de uma tag (elemento) no início da definição. Quando isso acontece às definições podem ser aplicadas a qualquer elemento cujo atributo class tenha o valor correto.

.centro { text-align: center }

....

<h2 class="centro"> Cabeçalho alinhado ao centro </h2>

8/38



Seletores de id

•O seletor de id é diferente do seletor de classe porque se aplica a um único elemento da página. As regras do HTML ditam que os valores do atributo id não podem repetir-se numa mesma página. Daí resulta que o número de elementos no documento com um determinado id é um ou é zero. p#para1 {text-align: center; color: red}

...

<p id="para1"> Este parágrafo está alinhado ao centro e tem cor vermelha. </p>

9/38



Seletores de id

•Para que a regra se aplique a qualquer elemento que tenha o id para1 basta escrevê-la na forma seguinte: #para1 {text-align: center; color: red}

....

<h1 id="para1">Este texto usa as regras definidas por para1</h1>

10/38



Comentários

•Para se inserir um comentário na definição do CSS, utilize /* e */. Tudo que estiver dentro desses caracteres serão considerados comentários e não serão interpretados.p {

text-align: center; /* Isto é um comentário */

color: black; /* O MSIE 5 não reconhece os comentários!!! */

font-family: arial

}

11/38



Regras

•As regras de CSS podem ser definidas em três lugares. E, por definição, pode utilizar uma combinação dos três métodos. A maneira como as regras interagem entre si está relacionada à parte "em cascata". Os três lugares são:

1) Em um documento separado fora de todos os documentos HTML;

2) No cabeçalho de um documento HTML;

3) Dentro de uma tag de HTML.

12/38



Regras

1) Vinculado/Externo - Externo significa as regras de CSS são colocadas em um arquivo separado, e então a página HTML pode fazer um link para esse arquivo. Essa abordagem permite definir regras em um ou mais arquivos que podem ser aplicadas em alguma página do seu web site.

2) Incorporado/Interno - Incorporado significa as regras de CSS estão localizadas no cabeçalho do documento. As regras incorporadas afetam somente a página atual.

3) Inline - Inline significa as regras de CSS são definidas dentro da tag de HTML. Essas regras afetam somente a tag atual.

13/38



Estilos Vinculados/Externos

• Para definir um conjunto de regras de estilo externo é preciso colocar as regras em um arquivo de texto. Este arquivo deve ser do tipo texto puro (ex. bloco de notas), e deve ter a extensão .css

css

Index.htm

estilos.css

p {font-size:42pt}

14/38



Estilos Vinculados/Externos

• Para se usar os estilos definidos neste arquivo .css é preciso adicionar a tag seguinte no cabeçalho da página, onde nome_do_arquivo é uma referência absoluta ou relativa ao arquivo .css<link rel="stylesheet" href="meu_estilo.css" type="text/css">

Exemplo:<html>

<head>

<title>Estilo Externo</title>

<link rel="stylesheet" href="css/estilos.css" type="text/css">

</head>

<body>

<p>Testando Estilo externo </p>

</body>

</html>

15/38



Estilos Incorporados/Internos

• Os estilos incorporados, são estilos declarados no cabeçalho da página.

Exemplo:<html><head><title>Exemplo Estilos Incorporados</title>


p {background-color: red; font-family:'comic sans ms';

font-size: 14pt}

</style></head>

<body>

<p>Teste com estilo incorporado.</p>

</body>

</html>

16/38



Estilos em linha – in line

•São estilos aplicados a elementos de forma individual. Para declarar um estilo inline basta para isso aplicar o estilo ao atributo style.

Exemplo:<p style = "font-size: 20pt">

Este texto tem um estilo aplicado com relação ao tamanho da fonte: <em>font-size</em> 20pt.

</p>

17/38



A ordem da cascata

• Quando um estilo é definido mais do que uma vez o browser aplica as regras seguintes (listadas por ordem crescente de importância):

1. Estilos definidos por omissão (são aplicados sempre que não existirem outros que se sobreponha a eles).

2. Estilos definidos numa folha de estilos interna (dentro do elemento <style>) ou num arquivo externo.

3. Estilos "inline" (definidos através do atributo style nos elementos do documento HTML).

18/38



A ordem da cascata

Ex: Suponha que uma folha de externa define as seguintes propriedades para o seletor h3:h3 { color: red; text-align: left; font-size: 8pt }

Mas existe uma folha de estilos interna com as seguintes propriedades também para o seletor h3:h3 { text-align: right; font-size: 20pt }

Então, as duas definições serão combinadas para produzir a seguinte versão final para o seletor h3:h3 { color: red; text-align: right; font-size: 20pt }

A cor foi herdada da folha externa, mas o alinhamento do texto e o tamanho de letra foram substituídos pelas definições dadas na folha interna.

19/38



Herança de estilos entre elementos

•Algumas propriedades CSS definidas para um elemento passam automaticamente a ser aplicadas aos descendentes desse elemento. Quando isso acontece diz-se que as propriedades são herdadas.

20/38



Herança de estilos entre elementos

• Algumas propriedades CSS definidas para um elemento passam automaticamente a ser aplicadas aos descendentes desse elemento. Quando isso acontece diz-se que as propriedades são herdadas.

21/38



Herança de estilos entre elementos<html>

<head><title>Exemplo CSS</title>


div { color: blue }

</style>

</head>

<body>

<div>

O texto dos elementos <div> tem cor azul.

<p> Este parágrafo está dentro de um elemento <div>. Ele herda a cor azul.</p>

</div>

<p>Este parágrafo não está dentro de nenhum elemento que lhe deixe uma "herança". </p>

</body>

</html>

22/38



<html>

<head><title>Exemplo CSS</title>


p { color: blue; font-family: cursive; font-size:16px } .verde{ color:green }

</style>

</head>

<body>

<p class="verde" style="color: red">

A última definição de estilos encontrada diz

que a cor deste texto deve ser vermelha ("red").</p>

<p class="verde">

O texto deste parágrafo é verde porque a última

definição (atributo class="verde") lhe dá essa cor.</p>

<p>Este parágrafo possui as definições normais.</p>

</body>

</html>

23/38



Definir cores em CSS

• Podemos obter qualquer cor à nossa escolha combinando em proporções corretas três cores base: vermelho (red), verde (green) e azul (blue).

• O exemplo seguinte mostra três formas diferentes para escrever texto com cor vermelha.

24/38



Definir cores em CSS<html>

<head><title>Exemplo CSS</title></head>

<body>

<p style="color: rgb(255,0,0)">

Este parágrafo tem cor rgb(255, 0, 0)</p>

<p style="color: #FF0000">

Este parágrafo tem cor #FF0000</p>

<p style="color: Red">

Este parágrafo tem cor "Red"</p>

<p style="color: #0000FF">

Este parágrafo tem cor #0000FF</p>

</body>

</html>

25/38



Propriedades dos fundos dos elementos (background)

Definem cores de fundo e imagens de fundo para os elementos do HTML. Estas propriedades permitem controlar as cores e as imagens de fundo dos elementos (posição, repetição, etc).background

• Forma abreviada para escrever todas as propriedades do fundo numa única declaração. Esta propriedade aceita os valores que se pode dar a todas as restantes propriedades desta tabela

26/38



Propriedades dos fundos dos elementos (background) background-attachment

• A propriedade background-attachment indica se a imagem de fundo deve permanecer imóvel na janela do browser ou se acompanha o conteúdo quando o movemos (scroll).

scroll; fixedbackground-color

• Define a cor de fundo de um elemento.

color-rgb; color-hex; color-name; transparentbackground-image

• Define uma imagem de fundo para ser usada no elemento

url; none

27/38


Propriedades dos fundos dos elementos (background) background-position

• Define o local onde se começa a desenhar a imagem de fundo.

top left; top center; top right; center left; center center; center right; bottom left; bottom center; bottom right;

background-repeat

•Estabelece se a imagem de fundo deve repetir-se (formando um mosaico) ou não, e as direções da repetição.

repeat; repeat-x; repeat-y; no-repeat

28/38



<html>

<head><title>background</title>


body { background-image: url("bg-pegadas.jpg");

background-repeat: no-repeat;

background-attachment: fixed }

</style>

</head>

<body>

<p>Esta imagem de fundo permanece imóvel quando se desce ou sobe na página ou quando se desloca para a direita ou para a esquerda </p>

<br /><br />

</body>

</html>

29/38



Propriedades do texto

Definem o aspecto gráfico do texto. Estas propriedades permitem controlar cores, aumentar ou reduzir o espaço entre os caracteres, alinhar o texto, escolher o tipo de letra, decorá-lo, etc.

• color: Define a cor do texto - cor

• letter-spacing: Aumenta ou diminui o espaço entre os caracteres -normal; comprimento

• text-align: Alinha o texto dentro de um elemento - left; right; center; justify

• text-decoration: Adiciona pormenores decorativos ao texto -none; underline; overline; line-through; blink

30/38




Propriedades do texto

• text-indent: Desloca para a direita ou para a esquerda a primeira letra da primeira linha do texto - comprimento; %

• text-transform: Controla as letras de um elemento - none; capitalize; uppercase; lowercase

• white-space: Define a forma como é tratado o espaço em branco dentro de um elemento. normal; nowrap

• word-spacing: Aumenta ou diminui o espaço entre as palavras -normal; comprimento

31/38



<html>

<head> <title>Text</title>


h1 {color: #00ff00; letter-spacing: -3px; text-align: center; text-decoration: overline }

h2 {color: #ddaadd; text-align: left; text-decoration: line-through }

h3 {text-align: right; text-decoration: underline; letterspacing: 0.5cm }

p {color: #ff00ff; text-indent: 1cm }

.upper {text-transform: uppercase; white-space: nowrap}

.lower {text-transform: lowercase; word-spacing: 1cm;}

.capital {text-transform: capitalize; }

a {text-decoration: none}

</style>

</head>

<body>

<h1>Cabeçalho de nível 1</h1>

<h2>Cabeçalho de nível 2</h2>1/2

32/38



<h3>Cabeçalho de nível 3</h3>

<p class="upper“>Parágrafo, deslocado 1 cm, com todas as letras maiúsculas (em inglês "upercase".) Parágrafo, deslocado 1 cm, com todas as letras maiúsculas (em inglês "upercase".) Parágrafo, deslocado 1 cm, com todas as letras maiúsculas (em inglês "upercase".)

</p>

<p class="lower"> Parágrafo, deslocado 1 cm, com todas as letras minúsculas (em inglês "lowercase".)</p>

<p class="capital"> Parágrafo, deslocado 1 cm, com todas as palavras começando com letras maiúsculas ("capitalize" em inglês.)</p>.

<p><a href="http://www.w3.org">Isto é um link</a></p>

</body>

</html>

2/233/38



Controlar o tipo de letra

Definem aspectos estilísticos das letras com que se escreve o texto. Elas permitem escolher entre vários conjuntos de caracteres que desenham as letras de formas diferentes, controlar os tamanhos, ajustar as suas formas, etc.

• font: Aceita os valores que podem ser dados às propriedades restantes desta tabela mais os descritos abaixo. Oferece uma forma abreviada para definir numa única declaração todas as propriedades relativas ao tipo de letra;

• font-style: Define o estilo de letra a usar - normal; italic; oblique.

34/38




• font-variant: Escreve o texto usando um tipo de letra "small-caps" ou o tipo normal. normal; small-caps

• font-weight: Define a espessura do traço com que são desenhadas a letras - normal; bold; bolder; lighter; 100; 200; 300; 400; 500; 600; 700; 800; 900

• font-size: Define o tamanho de um tipo de letra - xx-small; x-small; small; medium; large; x-large; xx-large; smaller ;larger; comprimento; %

• font-family: A propriedade font-family consiste numa lista com os tipos de letra que o browser pode escolher para escrever os textos. family-name

35/38



<html>

<head><title> Fontes</title>


h1 {

font-family: times; font-size: 250%; font-style: italic }

h2 {font-size: 130%; font-style: normal }

p {font-family: courier; font-size: 100%}

p.sansserif {font-family: sans-serif}

p.small {font-variant: small-caps}

p.negrito {font-weight: bold}

</style>

</head>

1/236/38



<body>

<h1>Isto é um cabeçalho de nível 1.</h1>

<h2>Isto é um cabeçalho de nível 2.</h2>

<p>Isto é um parágrafo.</p>

<p class="sansserif">Isto é um parágrafo com uma letra diferente.</p>

<p class="small">Isto é um parágrafo com letra small-caps.</p>

<p class="negrito">Isto é um parágrafo com letra em negrito.</p>

</body>

</html>

2/237/38




Unidades de Medida

•O valor de um comprimento escreve-se com um número seguido de uma abreviação que indica as unidades de medida.

•Não se pode colocar espaço entre o número e a unidade (não escreva 2 cm mas sim 2cm).

Unidade Descrição

% Porcentagem de um valor

in Polegadas (inch)

cm Centímetros

mm milímetros

38/38


Referências

• Notas de aula Prof. José Marcos Barbosa da Silveira. Disponível em http://www.profmarcos.cjb.net. Acessado em 25/01/2010.

• Notas de aula Prof. Paulo Roberto Travassos,. Tópicos Avançados em Sistemas.

• Lemay, Laura. Aprenda a Criar Páginas Web com Html e Xhtml, em 21 dias. Makron Books, 2002.

• Cavalcante, Victor. Web Standards, notas de aula.

• Zeldman, Jeffrey. Projetando Web Sites Compatíveis, Campus.

• Valentine, Chelsea. Xhtml, Campus.

• Silva, Osmar J. HTML 4.0 e XHTML 1.0 - Domínio e Transição, Érica.

• Macedo, Marcelo da Silva. Construindo Sites Adotando Padrões Web, Ciência Moderna.

39/38

Desenvolvimento em Ambiente Web - kusumoto.com.br · definição diz que a cor do texto destes ......

Documents

Transcript of Desenvolvimento em Ambiente Web - kusumoto.com.br · definição diz que a cor do texto destes ......