08/11/2012. Tecnologias WEB - CSS. Professor Elisson Lobão

(1)

Tecnologias WEB - CSS

Professor Elisson Lobão

(2)

3

CSS(Cascade Style Sheets) são folhas

de estilo que permitem controlar a

aparência dos elementos HTML

Vantagens:

Grande liberdade de formatação

Maior produtividade

Maior facilidade de atualização

CSS

Os estilos podem ser inseridos nos documentos de três

maneiras diferentes:

Externas -

Por meio de um link direcionado para um arquivo de style sheet em separado, funcionando para uma ou mais páginas web.

Internas -

Por meio de uma inserção de um style sheet numa única página web

Em linha -

Pelo acréscimo de atributos de estilo inline em algumas tags

(3)

5

Externas

Neste caso temos um Pasta exterior que pode ser

associado a vários Pastas html

Exemplo do que temos de escrever no Pasta html <html>

<head>

Internas

Definidas num documento específico. Permitem aplicar o estilo apenas a esse documento. O elemento style têm de ser escrito dentro do head.

(4)

7

Pelo acréscimo de atributos de estilo inline em algumas tags como <p>, <div>, ou <span>

Exemplo

<div style="margin-left: 0.5in; font-size: 10pt"> Este deve ser um bloco de texto com algum

<span style="font-weight: bold; background: #FFFF00"> texto selecionado</span> dentro dele </div>

Em linha

Sintaxe

Sintaxe Exemplo

seletor { propriedade:valor} Body { background-color: #FFFFFF } seletor { propriedade:valor; propriedade:valor} P { text-align:center; color:red} seletor { propriedade:valor; propriedade:valor; Propriedade:valor } P { text-align: center; Color: black; Font-family:arial } seletor,seletor,seletor { propriedade:valor } H1,h2,h3 { color: green }

(5)

9 Exemplo:

Pasta HTML no body

<h1>Tecnologia dos Media</h1> <p> Informática </p>

Pasta CSS H1 { color:red } P { color:blue }

Resultado:

Tecnologia dos Media

Informática

Sintaxe

Tipos de seletores

seletores de classe

Um seletor de classe permite identificar um conjunto de ocorrências de um elemento e atribuir-lhes um estilo comum.

A classe pode ser : • genérica

-.rd{ color:blue}

<p class=rd>texto em azul</p>

<h1 class=rd>texto tambem em azul</h1>

• um tipo de elementos, ou seja só fica associada a um tipo de elementos

p.p1 { color: red }

(6)

11

Tipos de seletores

seletores de ID

Um seletor de ID permite identificar uma única ocorrência de um elemento HTML.

Os seletores ID são criados pelo carácter # seguido do nome.

#nome { color:blue; background: black }

<p id=nome>Só este elemento é que é identificado como nome</p>

DIV e SPAN

Existem dois elementos genéricos que não têm significado semântico nem produzem nenhum efeito, mas permitem definir seções/blocos e são muito usados com CSS.

Permitem agrupar conteúdo em unidades lógicas: <div>: quebra o fluxo normal do documento

<span>:mantém o fluxo normal do conteúdo

<div class="zonaesquerda">

<p>texto, texto, texto</p>

</div>

<div class="zonacentral">

<h1>Título</h1>

<p> texto, texto, texto, <span class="nota">texto, texto</span>, texto</p> <p> texto, texto, texto, texto, texto, texto</p>

(7)

13

DIV e SPAN

Css

.Zonaesquerda { color: green }

.zonacentral { color: yellow } .nota { color: red }

Resultado:

texto, texto, texto

Título

texto, texto, texto,texto, texto texto texto, texto, texto, texto, texto, texto

Pseudo-elementos

p:first-line { text-transform: uppercase } p:first-letter {font-size: 200%}

Pseudo elementos são elementos fictícios que não existem em HTML e que se referem a uma sub parte do elemento HTML.

(8)

15

Unidades de medida

Unidade Descrição % Percentagem de qualquer unidade

em 1 em é igual ao tamanho da fonte do elemento corrente ex 1 ex é aproximadamente metade da altura da fonte px pixels Unidade Descrição cm Centímetros in Polegadas mm Milímetros pt Ponto (1 pt é 1/72 polegadas )

Unidades de cor

Unidade Descrição Exemplo do vermelho Nome da cor O nome da cor red

rgb(x,y,z) Um valor rgb rgb(255,0,0) rgb(x%,y%,z%) Uma percentagem rgb rgb(100%,0%,0%) #rrggbb Um número hexadecimal #ff0000

(9)

17

Texto

Propriedade Descrição Valores Exemplo

font-size (herdado) Ajusta o tamanho do texto tamanho (pt, in, cm, px) percentagem { font-size: 12pt } { font-size: 200% } font-family (herdado) Ajusta os tipos de

letra e as alternativas (em ordem de preferência) nome do tipo de letranome da família da fonte { font-family: Trebuchet MS, Sans-serif }

text-decoration (não herdado) Efeitos sobre o texto none underline overline line-through

{font-decoration: overline}

font-weight (herdado) Ajusta o peso do tipo normal bold bolder lighter { font-weight: bold }

font-style (herdado) Texto em itálico normal italic

{font-style: italic}

Texto

text-align (herdado) Alinhamento do texto left Center right justify { text-align: center }

text-indent (herdado) indentação da primeira linha do texto

tamanho (pt, in, cm, px)

{ text-indent: 0.5in }

line-height (herdado) Altura das linhas de um bloco de texto. tamanho (pt, in, cm, px) percentagem {line-height: 18p t} { line-height: 200% } vertical-align (não herdado) Alinha o texto verticalmente dentro do elemento baseline sub super top text-top middle bottom { vertical-align: top }

(10)

19

Padding

padding (herdado) Espaço entre a borda do elemento e o conteudo do elemento tamanho (pt, in, cm, px) { padding: 20px } padding-top padding -left padding -bottom padding -right (herdado) Em relação a cada um dos lados tamanho (pt, in, cm, px) {padding-top: 0.5in }

Cor e background

color (herdado) Cor do texto Unidades da cor { color: red } background-color (não

herdado)

Cor de fundo de um elemento

Unidades da cor { background-color: black} Background-image (não herdado) Ajusta as imagens do fundo url {background-image: url(‘imagem1.jpg’)}

(11)

21

margens

margin (não herdado) Permite especificar a margem do elemento tamanho (pt, in, cm, px) { margin: 8px } margin-top margin-left margin-bottom margin-right (não herdado) Permite especifar cada uma das margens

tamanho (pt, in, cm, px)

{ margin-top: 12pt }

Contornos

border (herdado) Ajusta o contorno do elemento

grossura: em pixels. estilo: none, dotted, dashed, solid, double. cor: valor da cor.

{ border: 4px double green; } border-top border-left border-bottom border-right (não herdado)

Ajusta cada um dos contornos

grossura: em pixels. estilo: none, dotted, dashed, solid, double. cor: valor da cor.

{ border-top: 2px dotted red; }

(12)

23

Listas

list-style-type herdado)

define a aparência do marcador de cada item de uma lista. Não numéricos: disc circle square { list-style-type: disc; } Numéricos: decimal decimal-leading-zero lower-roman upper-roman Lower-latin upper-latin { list-style-type: upper-roman; }

Posicionamento

Com CSS é possível alterar o fluxo normal de uma página e definir o posicionamento de cada elemento

(13)

25

Posicionamento

Todos os elementos têm a propriedade position que estabelece a forma de "cálculo" da posição de um elemento. 4 alternativas: static: o elemento é posicionado segundo o fluxo normal. O valor por defeito.

relative: a posição da "caixa" é calculada em relação à posição normal (static).

absolute: permite posicionar relativamente ao elemento pai. fixed: o cálculo da posição é igual ao método absoluto, mas o elemento pai é a "janela de visualização" (viewport).

Posicionamento

A propriedade position, é usada juntamente com: top: deslocamento do lado superior do elemento. left: deslocamento do lado esquerdo do elemento. bottom: deslocamento do lado inferior do elemento. right: delocamento do lado direito do elemento. e:

width: largura do elemento. height: altura do elemento. As unidades podem ser: Fixas: pixels (px), points (pt), centímetros (cm), milímetros (mm). Relativas: em, percentagem (%)

(14)

27

Posicionamento

Exemplo:

<div class=parte1>1º bloco de informação</div> <div class=parte2>

2º bloco de informação <br><br> <div class=parte2a>

1º sub bloco de informação <br> Este bloco está inserido no 2º bloco. </div><br>

2º sub bloco de informação <br>

Este bloco também está inserido no 2º bloco, após o bloco anterior. </div><br>

3º sub bloco de informação <br>

Este bloco também está inserido no 2º bloco, após o bloco anterior. </div>

</div>

<div class=parte3>3º bloco de informação </div>

Div=parte1 Div=parte2 Div=parte2a Div=parte2b Div=parte2c Div=parte3

Posicionamento

Continuação do exemplo parte CSS:

.parte1 { background-color:#cccccc; font-family:arial; font-size:14pt; width:460px; padding:20px; } .parte2 { background-color:#222222; font-family:arial; font-size:14pt; color:#ffffff; width:460px; padding:20px; } .parte2a { background-color:#666666; font-family:arial; font-size:12pt; width:400px; margin-left:30px; } .parte2b { background-color:#999999; font-family:arial; font-size:12pt; width:400px; margin-left:30px; } .parte2c { background-color:#666666; font-family:arial; font-size:12pt; width:400px; margin-left:30px; } .parte3 { background-color:#cccccc; font-family:arial; font-size:14pt; width:460px; padding:20px; }

(15)

29

Resultado

Posicionamento Relativo

A posição é calculada em relação à localização natural do elemento. p { position: relative; top: 10px; right: 50px; }

(16)

31

Posicionamento

.parte1 { background-color:#cccccc; font-family:arial; font-size:14pt; width:460px; padding:20px; } .parte2 { background-color:#222222; font-family:arial; font-size:14pt; color:#ffffff; width:460px; padding:20px; position:relative; top:20px; left:40px; } .parte2a { background-color:#666666; font-family:arial; font-size:12pt; width:400px; margin-left:30px; } .parte2b { background-color:#999999; font-family:arial; font-size:12pt; width:400px; margin-left:30px; } .parte2c { background-color:#666666; font-family:arial; font-size:12pt; width:400px; margin-left:30px; } .parte3 { background-color:#cccccc; font-family:arial; font-size:14pt; width:460px; padding:20px; }

Resultado

(17)

33

Posicionamento Absoluto

A posição do elemento é calculada em relação ao "pai". Temos a questão de saber qual é o pai?

p { position: absolute; top: 10px; left: 50px; } div { position: relative; p { position: absolute; top: 10px; left: 50px; }

Exemplo 1: Uso isolado do position absolute Neste caso o pai deste elemento passa a ser o body, por isso o elemento foi lá para cima

Exemplo 2: Uso do position absolute com position relative

Neste caso o pai deste elemento passa a ser o elemento que tem a position relative.

Nota o elemento que usa o absolute tem de estar dentro do elemento que usa o relative

Posicionamento

.parte1 { background-color:#cccccc; font-family:arial; font-size:14pt; width:460px; padding:20px; } .parte2 { background-color:#222222; font-family:arial; font-size:14pt; color:#ffffff; width:460px; padding:20px; } .parte2a { background-color:#666666; font-family:arial; font-size:12pt; width:400px; margin-left:30px; position:absolute; top:0; right:0; } .parte2b { background-color:#999999; font-family:arial; font-size:12pt; width:400px; margin-left:30px; } .parte2c { background-color:#666666; font-family:arial; font-size:12pt; width:400px; margin-left:30px; } .parte3 { background-color:#cccccc; font-family:arial; font-size:14pt; width:460px; padding:20px; }

(18)

35

Resultado

Posicionamento

.parte1 { background-color:#cccccc; font-family:arial; font-size:14pt; width:460px; padding:20px; } .parte2 { background-color:#222222; font-family:arial; font-size:14pt; color:#ffffff; width:460px; padding:20px; position:relative; } .parte2a { background-color:#666666; font-family:arial; font-size:12pt; width:400px; margin-left:30px; position:absolute; top:0; right:0; .parte2b { background-color:#999999; font-family:arial; font-size:12pt; width:400px; margin-left:30px; } .parte2c { background-color:#666666; font-family:arial; font-size:12pt; width:400px; margin-left:30px; } .parte3 { background-color:#cccccc; font-family:arial; font-size:14pt; width:460px; padding:20px; }

(19)

37

Resultado

Posicionamento Fixo

Igual ao posicionamento absoluto, mas relativamente à janela.

p {

position: fixed; top: 50px; left: 10px; }

(20)

39

Posicionamento Float

A propriedade float permite desligar o elemento do fluxo normal e deslocá-lo para a esquerda ou direita da linha. O mais interessante é que o restante conteúdo pode fluir paralelamente ao elemento.

Valores possíveis: none, left, right;

img {

float: left;

}