Desenvolvimento Web Professor Horácio Soares ESCM Desenvolvimento Web I CSS - Cascating Styles Sheet Professor Horácio Soares Tel.: 9223-7512 E-mail: [email protected]

Desenvolvimento Web Professor Horácio Soares

ESCM

Desenvolvimento Web ICSS - Cascating Styles Sheet

Professor Horácio Soares

Tel.: 9223-7512E-mail: [email protected]


CSS – Cascating Styles Sheet

Trata-se de um padrão de formatação para

páginas web que vai além das limitações

impostas pelo html. Proposto pelo W3

Consortium <http://www.w3.org> - uma espécie

de comitê que define os padrões de

programação para a WWW - o CSS foi

introduzido pela primeira vez pela Microsoft, no

lançamento do Internet Explorer 3.0.

01



A style sheet consiste em uma ou mais regras que descrevem

como os elementos de uma página Web, que correspondem

particularmente aos Tags HTML serão apresentados (displayed).

Toda regra em CSS tem duas partes, o Seletor e a declaração.

H1 {color : purple;}seletor declaração

propriedade valor

02


Exemplos:

body { color: black; }

p { font-family: sans serif; }

p { text-align:center;}


03


Como adicionar Style Sheet ao HTML:


Inline Style SheetEsta forma de aplicar CSS em documentos HTML perde algumas das vantagens de sua aplicação misturando conteúdo e apresentação. Utilize este método com parcimônia.

Para utilizar estilos Inline, aplique o atributo “style” nos tags HTML. O atributo poderá conter qualquer propriedade CSS. Veja a aplicação abaixo:

<p style="color: sienna; margin-

left: 20px;">

Isto é um parágrafo...

</p>

04




Internal Style SheetUm Style Sheet Interno deverá ser aplicado quando um simples documento tem um único estilo. Os estilos internos deverão ser definidos no HEAD do documento, utilizando o tag <STYLE> como exemplo abaixo:

<head> <style type="text/css">

hr { color: blue; }p { margin-left: 20px; }body { background-image:

url("brasil.gif") }

</style></head>

05




External Style SheetPara incluir um arquivo *.css com todos os estilos que serão usados por todas as páginas do seu site, basta incluir no HEAD do documento HTML um link para o

arquivo CSS como descrito no exemplo abaixo:

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

</head>

Um arquivo Style Sheet externo pode ser escrito em qualquer editor de textos. O arquivo não deverá conter TAGs HTML. Seu Style Sheet deverá ser salvo com a extensão “.css”.

06




External Style Sheet

Outra técnica é importar um Style Sheet externo com um elemento

STYLE usando a “directive” @import

<head>

<style type=“text/css”>

@import url(arq.css);

</style>

</head>

07


Seletores:


Efeito CascataComo a tradução de CSS já diz, é uma folha de estilos em camadas, desta forma, os estilos seguem uma hierarquia como descrita abaixo:

1. Browser default

2. External Style Sheet

3. Internal Style Sheet (dentro do tag <head>)

4. Inline Style (dentro de elementos HTML)

Obs.: O item (4) sobrepõem o (3), que sobrepõem o (2), que por sua vez

sobrepõem o (1).

08


Seletores:


Elemento SeletorSão os próprios tags HTML

p { text-align:center; color:red;}

Para fazer com que as definições de estilo fiquem mais fáceis de entender, você pode colocar cada propriedade em uma linha.

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

Agrupando: Vc pode agrupar seletores, para isto, coloque uma vírgula para separar os seletores. Cada um dos headers terá cor verde.

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

09


Seletores:


Seletor ContextualEste seletor especifica os atributos style para elementos HTML baseados no contexto em que ele é apresentado. Neste exemplo abaixo o seletor contextual especifica que o texto bold com uma lista “purple”

li b {color: purple;}

Nos seletores contextuais, os seletores individuais são separados por um espaço em branco.

10


Seletores:


Seletor de ClasseEspecifica que os elementos HTML podem ser agrupados em uma classe utilizando o atributo CLASS:

<H1 CLASS=“teste”>Testando</H1>

<p CLASS=“teste”>Testando com o parag...</H1>para especificar um style para elementos de uma classe particular, coloque o nome da classe logo após o Seletor separados por um (.) ponto.

H1.teste {color:red;}Para aplicar um Style para todos os elementos HTML através de uma classe retire a tag

.teste {color:red;}

11


Seletores:


Seletores de IDO Seletor ID é diferente do Seletor Classe. Com Seletor de Classe vc pode ser aplicado a diversos elementos em uma página HTML, com o Seletor ID será sempre aplicado a um único elemento.

O atributo ID deve ser único no documento.

<p ID=“pri-paragrafo”>Primeiro Parágrafo...</p>

para aplicar um Style em um elemento com ID, crie seu ID colocando o símbolo # na frente do nome do seletor.

#pri-paragrafo {font-weight:bold;}

12


Seletores:


Seletores de ID

A regra de estilo abaixo, serra aplicada ao elemento p que tem o valor de ID = “para1”

p#para1{ text-align: center;color: red; }

A regra de estilo abaixo será aplicada ao primeiro elemento que tem valor deID = “wer345”

#wer345 {color: green;}A regra será aplicada ao elemento H1

<h1 id="wer345">Some text</h1>

13


Classificação dos Elementos: os elementos CSS podem ser divididos em três tipos:


Elementos lock-Level

Elementos como parágrafos (P), títulos (H1), listas, tabelas, DIV´s e BODY. Geralmente, elementos do tipo block-level aparecem na página HTML em uma linha própria, começando uma nova linha e forçando qualquer outro elemento a fazer o mesmo.

Elementos Inline

Elemento como a ancora (A), EM, e a maioria dos elementos, como imagens, campos de entrada de dados de um formulário. Elementos Inline, não forçam a quebra de linha antes e depois como o Block-level.

14


Classificação dos Elementos: os elementos CSS podem ser divididos em três tipos:


Elementos List-item

Elementos que no HTML incluem apenas os elementos de listas (LI). Eles são especialmente definidos para terem uma apresentação aspectos como um marcador (bullet, letra, numero).

15


Caixas e Bordas:


Todos os elementos em CSS geram uma caixa retangular em volta dele próprio chamado “element box”. Está caixa descreve quanto espaço em um elemento deve ocupar.

Existem diversas propriedades para ajustar os espaços entre o conteúdo do elemento e sua borda, do elemento com outros elementos, etc.

16


bord

er-right

Width(largura)

height(altura)

padding-top - espaço entre a parte superior do objeto e a borda

border-top

border-bottom

margin-top (espaço entre borda superior e outros objetos)b

ord

er-l

eft

padding-bottom - espaço entre a parte inferior do objeto e a borda

pad

din

g-le

ftp

add

ing-righ

t

margin- bottom

mar

gin

-lef

tm

argin-righ

tDetalhes da Box Model:

17


Problemas da Box Model:Existe uma diferença entre a aplicação de valores no Box Model do Internet Explorer e do resto dos navegadores.

IE - Quando definimos a largura de um elemento em 100px e incluímos, por exemplo, um valor para o padding (espaço entre o conteúdo e a borda do elemento) a esquerda e direita em 10 px, a largura do elemento continua em 100px, só que a área do conteúdo do elemento agora passou a ser de 80px.

Outros – Nos outros navegadores, quando temos o mesmo elemento com largura de 100px e incluímos um valor para o padding a esquerda e direita em 10px, a largura do elemento passa a ser de 120px e enquanto a área do conteúdo do elemento continua em 100px.

Rack para funcionar da mesma maneira em todos os navegadores:

.teste1{background:gray;width:400px; padding:10px;}

.teste2{background:gray;width:400px; _width:420px; padding:10px;}

18


Referência CSS2

http://www.w3schools.com/css/css_reference.asp


19


Box Model:


H1 { width: 880px; height: 50px;padding: 15px 5px 15px 50px;border-top: red 5px solid;border-left: red 2px dashed;border-right: red 2px dashed;border-bottom: red 1px solid;margin: 12px 10px 1px 10px; color: #336699; font-size: 20px; font-family: arial, sans-serif; background-color: #eeeeee; text-align: left; }

20


Diferentes tipos para especificar tamanhos:


in (Polegadas)

cm (Centimetros)

mm (Milimetros)

pt (Pontos - Padrão em tipografia, usados em impressoras. Existem 72 pontos para cada polegada)

pc (Picas - equivalente a 12 pontos)

em (por exemplo, 1.2em é o mesmo que 120%)

px (Pixels)

% (Percentual) - por exemplo: H1 {line-height:120%} seta a separação entre linhas para 120% do tamanho corrente de altura.

21


Cores:


#RRGGBB (Hexadecimal para vermelho, verde e azul)

#RGB (Uma forma curta para os valores em Hexa para com valores repetidos. Ex: #F8C #FF88CC

rgb (rrr, ggg, bbb) - especifica valores de 0 até 255 ex.: verde puro rgb(0, 255, 0)

Palavras chaves baseadas nas cores originais do Windows VGA: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, e yellow.

22


Comentários:


/* isso eh um comentario */

p { text-align: center; /* isso eh outro comentario */

color: black; font-family: arial }

23


Background:CSS – Cascating Styles Sheet

body{ background: #FF0000 }body{ background: url(imagem.gif) no-repeat top }body{ background: #00FF00 url(imagem.gif) no-repeat fixed top }

Valores possíveis para posicionamento:top left top center top rightcenter left center center center rightbottom left bottom center bottom right Obs.: o primeiro valor é de posicionamento horizontal e o segundo vertical. O canto supetior esquer é 0 0. Pixels pode ser uma medida utilizada (0px 0px)

24


Aparência dos textos em CSSCSS – Cascating Styles Sheet

Aplicando cor ao texto

25



Aplicando cor ao background

26



Alterando o espaçamento entre as letras

27



Alinhando o texto

28



Decoração do texto

29



Identação do texto

30



Caixa alta, baixa e as apenas as iniciais em caixa alta

31



Tipo de fonte, tamanho, estilo, etc.

p.tipo{ font-family:arial,verdana}

p.tamanho1{font-size:10px;} p.tamanho2{font-size:14pt;}p.tamanho3{font-size:2em;}

p.peso1{font-weight:bold;} p.peso2{font-weight:bolder;}p.peso3{font-weight:normal;} p.peso4{font-weight:lighter;}

p.estilo1{font-style:normal;} p.estilo2{font-style:italic;} p.estilo3{font-style:oblique;}

Dica – propriedades em uma só declaração: p{font: italic small-caps bolder 12px arial;}

32


Definição - sentido do relógioCSS – Cascating Styles Sheet

border: 10px; margin:1px; padding:5px;

Propriedade: a b;Border: 1px (em cima e em baixo) 5px (esquerda e direita)

Border-top:1px; border-bottom:1px;border-left:5px; border-right:5px;

Propriedade: a b c d;border:1px 20px 5px 10px;border-top:1px; border-right:20px;border-bottom:5px; border-left:10px

a

a

a

a

a

b

a

b

a

b

c

d

1px

20px

5px

10px

33


Bordas dos elementos - estilosCSS – Cascating Styles Sheet

34


Bordas (border) - estilosCSS – Cascating Styles Sheet

p{border-style: solid; (estilo da borda)

border-color: #0000ff; (cor da borda que também pode ser aplicada das seguintes formas - border-color:blue;

border-color:#00f; ou border-color:rgb(0,0,255); )

border-bottom-width: 15px (espessura da linha)}

Todos os estilos em uma única declaração:p { border: 16px double rgb(250,0,255); }

35


Margens (margin) – espaço entre a borda do elemento e outros objetos a sua volta.


p{margin-top:10px;margin-right:20px;margin-bottom:15pxmargin-left: 5px;}

Todos os estilos em uma única declaração:p { margin: 16px; }p { margin: 16px 24px; }p{ margin: 10px 15px 20px;}p { margin:10px 20px 15px 5px; }

a

b

a

b

a

b

c

d

dois valores

quatro valores

36


Padding (espaçamento entre o conteúdo do elemento e sua borda)


p{padding-top:10px;padding-right:20px;padding-bottom:15pxpadding-left: 5px;}

Todos os estilos em uma única declaração:p {padding: 16px; }p {padding: 16px 24px; }p{padding: 10px 15px 20px;}p {padding:10px 20px 15px 5px; }

a

b

a

b

a

b

c

d

dois valores

quatro valores

37


Listas CSS – Cascating Styles Sheet

<html><head><style type="text/css">ul {list-style-type:square; list-style-position:inside; list-style-image:url('arrow.gif')}</style></head><body><ul><li>Coffee</li><li>Tea</li><li>Coca Cola</li></ul></body></html>

38


Dimensões CSS – Cascating Styles Sheet

Height- Altera a altura do elemento auto

length%

line-height- Altera a distância entre linhas normal

numberlength

Width- Altera a largura do elemento auto

%length

39


Display CSS – Cascating Styles Sheet

DisplayComo o elemento será apresentado: none

inlineblocklist-item

VisibilitySe o elemento está ou não visível: visible

hidden

40


Posicionamento CSS – Cascating Styles Sheet

PositionSe a posição do elemento será: relativa, absoluta, estática ou fixa: static

relativeabsolutefixed

Posição: bottom (auto, 50% ou 100px)left (auto, 50% ou 100px)right (auto, 50% ou 100px)top (auto, 50% ou 100px)

41



Overflow:<style type="text/css">div {

background-color:#00FFFF;width:150px;height:150px;overflow: scroll

}</style>

42



Vertical align an image:<style type="text/css">

img.top {vertical-align:text-top}img.bottom {vertical-align:text-bottom}

</style>

43



Z-index:<style type="text/css">img.x {

position:absolute;left:0px;top:0px;z-index:-1}

</style>

44



FloatComo o elemento será apresentado junto com outros: left

rightnone

<style type="text/css">img {float:right}</style>

45

Documents

Desenvolvimento Web Professor Horácio Soares ESCM Desenvolvimento Web I CSS - Cascating Styles Sheet Professor Horácio Soares Tel.: 9223-7512 E-mail: [email protected]