prof. cleverson b. klettenberg - edubox.com.br de css 2014.pdf · index.html teste css configure

UNIGUAÇU – Unidade de Ensino Superior Vale do Iguaçu

APOSTILA DE CSS

Prof. Cleverson B. Klettenberg

União da Vitória

2014

Sumário1. INTRODUÇÃO AO CSS.................................................................................................................3

1.2. O que é CSS?............................................................................................................................31.3 Como Criar Estilos ....................................................................................................................3

2. TIPOS DE FOLHA DE ESTILO......................................................................................................62.1 Estilos Externos ........................................................................................................................62.2 Estilos Incorporados .................................................................................................................72.3. Estilos Inline ............................................................................................................................8

3. TAGS PERSONALIZADAS (CLASSES).....................................................................................123.1. Utilizando a TAG <DIV> ......................................................................................................123.2. Utilizando a TAG <SPAN> ....................................................................................................13

4. ATALHOS CSS..............................................................................................................................145. PSEUDO CLASSES......................................................................................................................16APÊNDICE I – ATRIBUTOS CSS....................................................................................................18

1. INTRODUÇÃO AO CSS

1.2. O que é CSS?

CSS é a mesma coisa que Style Sheets e que Folhas de Estilo. Você já deve ter visto

esses nomes em vários lugares. CSS é mais uma forma de aperfeiçoar seus documentos, o CSS tem

muitos tipos de definição aqui veremos muitas delas.

No que eles podem nos ajudar?

• Economizar o seu tempo.

• Diminuir o tamanho do código de sua página.

• Sua página irá carregar mais rapidamente.

• Mais facilidade de manter e fazer alterações na página.

• Mais controle no layout da página.

1.3 Como Criar Estilos

Cada estilo que você cria é definido como uma regra CSS. Cada regra deve utilizar a

seguinte sintaxe:

elemento {atributo1: valor; atributo2: valor ...}

Elemento - descreve o elemento de design ao qual o estilo será aplicado. A mesma tag

HTML mas, sem os sinais de maior e menor. Essa parte da regra é às vezes chamada de seletor.

Atributo - o aspecto específico do elemento que você quer usar como estilo. Deve ser

um nome de atributo CSS válido, como o atributo font-size.

Valor - a configuração aplicada ao atributo. Deve ser uma configuração válida para o

atributo em questão, como 20pt (20 pontos) para font-size.

Atributo: valor - à parte declaração da regra. Você pode atribuir múltiplas declarações

se desejar separá-los com ponto-e-vírgula (;). Não coloque um ponto- e-vírgula depois da última

declaração.

Obs.: Uma lista de Atributos e Valores pode ser encontrado no APENDICE I desta

apostila.

Agora é hora de exemplos. Eis uma regra CSS que especifica que todos os títulos de

nível 1 (tags <H1>) sejam exibidos em uma fonte de 36 pontos:

H1 {font-size: 36pt}

Aqui está um exemplo de regra que diz que todos os títulos de nível 2 (tags <H2>)

devem ter tamanho de 24 pontos e cor azul;

H2 {font-size: 24pt; color: blue}

Você pode inserir quebras de linha e espaços em branco dentro da regra como quiser.

Assim, é possível ver mais facilmente todas as declarações e certificar-se de que colocou todos os

sinais de ponto-e-vírgula e colchetes nos lugares corretos. Por exemplo, aqui está uma regra que diz

que os parágrafos aparecerão em fonte Times, 12 pontos, azul e recuados meia polegada a partir da

margem esquerda da página:

P { font-family: Times; font-size: 12pt; color: blue; margin-left: 0.5in}

Note como é fácil aplicar todas as declarações ao elemento parágrafo (P) e como cada

declaração, exceto a última, é seguida pelo caracter de ponto-e-vírgula exigido.

Exercício 1: Dado o seguinte html:

index.html

<html>

<head> <title>Teste CSS</title> <style type=”text/css”> configure aqui observando APENDICE I desta apostila cor de fundo da página h1 com 36 pt h2 na cor azul p com margem esquerda de 50 pixels </style></head>

<body> <h1>Este cabeçalho tem 36 pt</h1> <h2>Este cabeçalho é azul</h2> <p>Este parágrafo tem uma margem esquerda de 50 pixels</p></body>

</html>

Exercício 2:

a) Título “SISTEMAS PARA INTERNET“ em formato de cabeçalho e centralizado.

b) Após o cabeçalho incluir uma linha horizontal tamanho 2 e cor cinza.

c) O texto “DISCIPLINAS - II SEMESTRE” na fonte Arial, negrito, tamanho 3 e cor

Vermelha.

d) Denominar as disciplinas (1,2 e 3), na fonte Arial, tamanho 3 e cor Verde.

e) O texto “Esta é a primeira aula de HTML” deve ser um texto pré-formato, fonte

Arial.

Exercício 3:

A folha de estilos deverá:

a) Colocar o texto do lado esquerdo da imagem;

b) Separar o texto da borda esquerda da imagem em 30 pixels;

c) Usar, para o texto, o alinhamento justificado;

d) Separar o texto da borda esquerda da página em 20 pixels;

e) Afastar o texto e a imagem da borda superior da página em 40 pixels;

f) Separar a borda direita da imagem em relação ao lado direito da página em 10 pixels.

2. TIPOS DE FOLHA DE ESTILO

Você pode definir regras de CSS em três lugares. E, por definição, pode utilizar uma

combinação dos três métodos nos seus web sites. 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 e,

3) dentro de uma tag de HTML.

Cada um destes métodos tem um nome e afeta as páginas HTML em seu site de um

modo diferente, como discutido aqui:

Externo - Externo significa que você coloca as regras de CSS em um arquivo separado,

e então sua página HTML pode fazer um link para esse arquivo. Essa abordagem lhe permite definir

regras em um ou mais arquivos que podem ser aplicadas em alguma página do seu web site.

Incorporado - Incorporado significa que você especifica as regras de CSS no cabeçalho

do documento. As regras incorporadas afetam somente a página atual.

Inline - Inline significa que você especifica as regras de CSS dentro da tag de HTML.

Essas regras afetam somente a tag atual.

2.1 Estilos Externos

Para definir um conjunto de regras de estilo que você pode facilmente aplicar em

alguma página do seu site, é preciso colocar as regras em um arquivo de texto. Você pode criar este

arquivo com um editor de textos simples, como o Notepad do Windows, e dar ao nome desse

arquivo a extensão .css.

Sempre que quiser utilizar esses estilos em uma nova página, basta colocar uma tag

<LINK> no cabeçalho que referencie esse arquivo .css. Veja o exemplo:

Arquivo OrgaoColegiado.css

H4 { font-family: 'Arial'; font-size: 14pt; color: blue }

Agora, para utilizar os estilos definidos neste arquivo .css você precisa adicionar a tag a

seguir ao cabeçalho da página, onde nome_do_arquivo é uma referência absoluta ou relativa ao

arquivo .css.

<LINK REL="STYLESHEET" HREF=" OrgaoColegiado.css" TYPE="text/css">

OBS: Você deve inserir este texto entre as tags <HEAD>...</HEAD>, e colocar a

localização correta do seu arquivo e seu nome.

Exercício 1: Teste os códigos abaixo:

index.html

<html>

<head> <title>Teste CSS</title> <link rel="stylesheet" type="text/css" href="estilo.css"> </head>

<body> <h1> Teste de folha de estilo CSS </h1> <p> Este é um teste de uma <i>folha de estilo</i> CSS. </p> </body>

</html>

estilo.css

body { background-color: yellow; background-image: url("estrela.jpg"); background-epeat: no-repeat; background-attachment: fixed; background-position: right bottom; } h1 { font-family: arial, sans-serif; font-size: 12pt; text-transform: uppercase; } p { font-weight: bold; font-size: 12pt; font-family: arial, sans-serif; text-align: justify; text-indent: 30px; }

2.2 Estilos Incorporados

Se quiser criar um conjunto de estilos que se aplicam a uma única página, você pode

configurar os estilos exatamente como fizemos no exemplo dos estilos externos - mas em vez de

colocar as tags <STYLE>...</STYLE>, e as regras em um arquivo separado, coloque estas tags na

própria página HTML. A estrutura básica de uma página da web que utiliza estilos incorporados é

semelhante ao seguinte código:

<HTML>

<HEAD> <TITLE>Exemplo Estilos Incorporados</TITLE> <STYLE TYPE="text/css"> P { background-color: #FFFFFF; font-family:'Comic Sans MS'; font-size: 14pt } </STYLE> </HEAD>

<BODY> <P>teste</P></BODY>

</HTML>

Exercício 1: Transforme o exercício 1 do capítulo 2.1 em estilo incorporados

2.3. Estilos Inline

Os estilos inline são os que têm menos efeitos. Eles afetam somente a tag atual - não

outras tags na página e tampouco outros documentos. A sintaxe para definir um estilo inline é a

seguinte:

<A STYLE="color: green; text- decoration: none" HREF="http://www.google.com.br"> Google</A>

Note que em vez das tags <STYLE>...</STYLE>, você apenas utiliza um atributo

STYLE dentro da tag para definir o estilo. E, em vez de colocar as regras de CSS entre colchetes,

você as coloca entre aspas, separando-as com ponto-e-vírgula como de costume.

Exercício 1: Transforme o exercício 1 do capítulo 2.1 em estilo in line

Exercício 2: Observe o seguinte trecho de código:

...<style type=”text/css”> B: {color: navy} </style>...<B>Minhas páginas agora usarão <I> CSS </I> </B>

Diga em que cor é apresentado o texto CSS, justifique ?

Exercício 3: Dado o arquivo HTML:

<HTML>

<BODY> <H1>Neste exemplo, estou começando a dominar</H1> <P>O Cascading Style Sheets</P> <HR></BODY>

</HTML>

Faça as alterações necessárias de modo a :

a) no estilo externo, mude o fundo da página para amarelo e cor do texto vermelho.

b) no estilo incorporado, mude o h1 para fonte impact

c) no estilo in line mude o h1 para font tamanho 16px

Exercício 4: Observe o código seguinte

<HTML>

<HEAD> <TITLE>Mais um Exemplo se Style Sheet</TITLE> <STYLE TYPE="text/css"> P {color: red} </STYLE> </HEAD>

<BODY> <P STYLE="color: green">Cascading Style Sheets</P> </BODY>

</HTML>

Tendo em consideração a ordem de prioridade de estilos, diga o que acontece ao texto

que se encontra na tag <P>.

Exercício 5:

a) Faça uma folha de estilo que permita obter um texto de cor vermelha no primeiro

parágrafo, verde no segundo parágrafo e cinza para o terceiro.

b) Contrua 3 links. Os links criados devem ser mostrados, inicialmente, com o texto na

cor vermelha (red), os links que já foram visitados na cor azul (navy).

c) Faça um link sem estar sublinhado.

Exercício 6: Responda as questões abaixo:

a) Qual o significado de CSS? Creative Style Sheets Colorful Style Sheets Cascading Style Sheets Computer Style Sheets

b) Qual é a opção correta para referenciarmos um CSS externo ? <link rel="stylesheet" type="text/css" href="mystyle.css"> <style src="mystyle.css"> <stylesheet>mystyle.css</stylesheet>

c) Em que parte do documento HTML é correcto referenciar um arquivo CSS externo ? At the top of the documentoIn the <head> sectionIn the <body> sectionAt the end of the document

d) Qual tag HTML é utilizada para definir um CSS interno? <css> <style> <script>

e) Qual atributo HTML é utilizado para definir estilos inline? styles style font class

f) Qual é a sintaxe correta CSS? {body;color:black} body {color: black} body:color=black {body:color=black(body}

g) Qual é a propriedade que utilizamos para alterar a cor do background? background-color: color: bgcolor:

h) Como adicionamos uma cor de background para todos elementos <h1>? h1.all {background-color:#FFFFFF} h1 {background-color:#FFFFFF} all.h1 {background-color:#FFFFFF}

i) Como alteramos a cor de texto de um elemento? text-color: color: fgcolor: text-color=

j) Qual é a propriedade em CSS que controla o tamanho do texto? text-style text-size font-size font-style

k) Qual a sintaxe correta CSS para tornar todos elementos <p> bold? <p style="text-size:bold"> p {text-size:bold} <p style="font-size:bold"> p {font-weight:bold}

l) Como fazer para retirar o sublinhado dos links? a {underline:none} a {text-decoration:no underline} a {decoration:no underline}a {text-decoration:none}

m) Como alterar o tipo de fonte de um elemento? font-family: font= f:

n) Como posicionamos o topo de um elemento a 100 pixels de distância de seu elemento imediatamente anterior? border-left:100px margin-top:100px margin:100px margin-top:100px

o) Como alteramos a margem esquerda de um elemento? margin: text-indent: margin-left: indent:

3. TAGS PERSONALIZADAS (CLASSES)

Com as classes de estilo, é possível definir diversas variações de uma única tag. Por

exemplo, você poderia fazer um estilo de parágrafo "texto alinhado à direita", um estilo de

parágrafo "texto centralizado" e assim por diante, criando múltiplos temas em torno da tag de

parágrafo. (<P>)

Você pode definir classes de estilo tanto em folhas de estilo externa como nas

incorporadas. (Não há sentido em definir uma classe em um estilo inline!). A sintaxe é praticamente

idêntica à sintaxe normal para os estilos externo e incorporado, com adição de um ponto e o nome

da classe depois do elemento na qual será utilizado o atributo.

<STYLE TYPE="text/css"> elemento.nomedaClasse {atributo:valor; ... } </STYLE>

Adicionar esta TAG dentro da TAG <Head> da página index.html:

<STYLE TYPE="text/css"> A.meuslinks { color: blue; text-decoration: none } </STYLE>

Depois apenas adiciono o atributo CLASS="meuslinks" aos links em que eu desejar que

fiquem azuis e não-sublinhados. Veja como deve ficar:

<A CLASS="meuslinks" HREF="EstiloTexto.html"> Estilo de Texto </A>

3.1. Utilizando a TAG <DIV>

As tags HTML <DIV>...</DIV> podem ser usadas para formatar um grande bloco de

texto - uma divisão - abrangendo diversos parágrafos e outros elementos. Isso as torna uma boa

opção para definir estilos que afetam grandes seções de um texto em uma página. Veja:

<STYLE TYPE="text/css"> DIV.sidebar { font=family: "Arial"; font-size: 12pt; text-align: right; background-color: #C0C0C0; margin-left: 1in; margin-right: 1in } </STYLE>

Ao colocar na tag <DIV> o atributo CLASS, você estará fazendo com que todos os

elementos que estejam englobados nesta tag sigam estes padrões.

... Cursos: <OL> <LI>Selecione <DIV CLASS="sidebar">Matemática</DIV> <br> <DIV CLASS="sidebar">Medicina</DIV> </OL>...

Exercício 1: Crie um quadro com bordas e que seja preenchido com uma imagem e um texto. Este

quadro deve ficar por cima de todos os elementos de uma página qualquer.

3.2. Utilizando a TAG <SPAN>

As tags <SPAN>...</SPAN> são como tags <DIV>...</DIV> no sentido de que você

pode utilizá-las para definir estilos que formatam um bloco de texto. Ao contrário de <DIV>,

contudo, que é utilizada para divisões de texto grandes, a tag <SPAN> é especializada para blocos

de textos menores - que podem ser tão pequenos como um único caracter. Veja um bom exemplo do

que se pode fazer utilizando esta tag.

<STYLE TYPE="text/css"> SPAN.hot { color:green; text-decoration: underline }</STYLE>

Utilizada no código HTML...

... Para sair de um programa: <OL> <LI>Selecione <SPAN CLASS="hot">A</SPAN>rquivo - <SPAN CLASS="hot">S</SPAN>air </OL>...

4. ATALHOS CSS

Alguns atributos de CSS lhe permitem fazer diversas configurações em uma declaração.

Por exemplo, suponha que você queira definir diversos aspectos da fonte utilizada para tags H1,

como segue:

H1 { font-style: italic; font-weight: bold; font-size: 18pt; font-family: 'Times Roman'}

Como alternativa a especificar todas essas formatações de fonte individualmente, você

pode utilizar o atributo font: para defini-las todas de uma só vez, assim:

H1 { font: italic bold 18pt 'Times Roman'}

Note como diversos valores - itálico, negrito, 18pt e Times Roman – são separados

apenas por um espaço em branco. Essas regras abreviadas certamente poupam espaço e tempo de

digitação.

Exercício 1: Crie uma folha de estilos, chame-a de basico.css, e a carregue no arquivo

StyleTest.html e em websites.html (ou utilize outros arquivos) . Nesta folha de estilos, usando o

mínimo de declarações possível, declare:

a) que todo H1 tenha fonte Arial (de preferência)

b) que todo o texto do corpo do arquivo tenha tamanho 10 pontos

c) que todos os H1, H2 e H3 sejam vermelhos

d) que os H1 tenham tamanho 24 pontos

e) que os H2 tenham tamanho 18 pontos

f) que os H3 tenham tamanho 14 pontos

Mude a cor do fundo da página para preto e a cor default do texto para branco em uma

única declaração.

Faça com que a página websites tenha uma cor de fundo clara e cor de texto escuro

(diferente daquela definida por basico.css) sem alterar as outras páginas que usam o mesmo estilo.

Exercício 2 : Construa a seguinte página usando apenas CSS para formatação. Utilize classes para

definir as linhas verde e vermelha:

5. PSEUDO CLASSES

Os efeitos em links e outros elementos HTML são possíveis através de declarações de

regras de estilo para as pseudo-classes do elemento. São usadas para adicionar efeitos diferentes a

alguns seletores, ou a uma instância de alguns seletores.

Sintaxe

seletor:pseudo-classe {propriedade: valor}

Exemplo: definir diferentes efeitos para links localizados em diferentes lugares em uma

mesma página.

A { text-decoration:none}A:hover { text-decoration:none; color:red;}

São quatro as pseudo classes para links:

a:link........define o estilo do link no estado inicial;

a:visited...define o estilo do link visitado;

a:hover.....define o estilo do link quando passa-se o mouse sobre ele;

a:active....define o estilo do link ativo (o que foi "clicado").

Mais detalhes podem ser encontrados no APENDICE I desta apostila.

Exercício 1 : Construa as seguintes páginas usando apenas CSS para formatação.

Figura 1

Figura 2

APÊNDICE I – ATRIBUTOS CSS

SeletoresPadrão Significado Exemplo CSS Exemplo (X)HTML

* Seletor universal: qualquer elemento

* {color: #000000; }

Aplicável a todos os elementos

eSeletor de tipo de elemento: seleciona qualquer elemento<e>

e {font-family: sans-serif;}

<e> ... </e>

e.classeSeletor de classe: seleciona o(s) elemento(s) <e> em quese aplicou a "classe"

h1.pastoral {color: green;}

<e class="classe"... />

e#IdSeletor de ID: seleciona o elemento <e> identificado com Id

h1#chapter1 {text-align: center;}

<e id="Id"... />

e , fAgrupamento de seletores: Seleciona os elementos <e> e <f> do agrupamento

h1, h2 {font-family: sans-serif; }

<e> … </e> … <f> …</f>

a:link

Pseudo-classe link: aplica-se ao elemento <a> com hiperlinks ou âncoras ainda não visitados

a:link {color: red;}

<a href="http://endereço.link/">link</a>

a:visited

Pseudo-classe visited: aplica-se ao elemento <a> com hiperlinks ou âncoras jávisitados

a:visited {color: blue; }


e:active

Pseudo-classe active: aplica-se ao elemento <e> quando este for ativado pelo usuário

a:active {color: lime; }


e:hover

Pseudo-classe hover: aplica-se ao elemento <e> quando o cursor estiver sobre ele, mas sem ativá-lo

a:hover {color: yellow; }


e:focus

Pseudo-classe focus: aplica-se ao elemento <e> quando o foco estiver posicionado nele

a:focus {background: yellow; }


e:first-line

Pseudo-elemento first-line: aplica-se à primera linha do elemento <e>

p:first-line {text-transform: uppercase; }

<e>...</e>

e:first-letter

Pseudo-elemento first-letter: aplica-se à primera letra do elemento <e>

p:first-letter {font-size: 3em; font-weight: normal; }

<e>...</e>

Unidades

Unidades de tamanho relativasUnidade Descriçãopx Tamanho em pixels (relativo ao dispositivo)em Tamanho relativo à fonte utilizada no elemento ao qual está inserido

Unidades de tamanho absolutasUnidade Descriçãoin Polegadas (1polegada = 2.54 cm)cm Centímetrosmm Milímetrospt Pontos (1pt = 1/72 polegadas)

BordasPropriedade Descrição Valores Descrição

border-top-widthborder-right-widthborder-bottom-widthborder-left-width

Largura das bordas em cada um dos quatro lados: superior, direito, inferior e esquerdo

[ thin | medium | thick | <tamanho> ]

thin: espessura finamedium: espessura médiathick: espessura grossa

Exemplo:e {border-bottom-width: medium; }

border-width

Atalho para definir de uma sóvez larguras de bordas para todosos lados

[ thin | medium| thick | <tamanho> ] {1,4}

Exemplos:Todas as bordas com espessura 'thin':e {border-width: thin;}

Bordas superior e inferior com espessura 'thin', bordas direita e esquerda com espessura 'thick':e {border-width: thin thick;}

Borda superior com espessura 'thin', bordas direita e esquerda com espessura'thick', borda inferior com espessura 'medium':e {border-width: thin thick medium;}

Borda superior com espessura 'thin', borda direita com espessura 'thick', borda inferior com espessura 'medium', borda esquerda com espessura 'thin':e {border-width: thin

Propriedade Descrição Valores Descriçãothick medium thin;}

border-top-colorborder-right-colorborder-bottom-colorborder-left-color

Cor das bordas em cada um dos quatro lados: superior, direito, inferior e esquerdo

[ <color> | transparent ]

Exemplo:e {border-top-color: black; }

border-color

Atalho para definir de uma sóvez cores de bordas para todosos lados

[ <color> | transparent ] {1,4}

Exemplos:Todas as bordas com a cor 'black':e {border-color: black;}

Bordas superior e inferior com a cor 'black', bordas direita e esquerda com a cor 'silver':e {border-color: black silver;}

Borda superior com a cor 'black', bordas direita e esquerda com a cor 'silver', borda inferior com a cor 'gray':e {border-color: black silver gray; }

Borda superior com a cor 'black', borda direita com a cor 'silver', borda inferior com a cor 'gray', borda esquerda com a cor 'white':e {border-color: black silver gray white; }

border-top-styleborder-right-styleborder-bottom-styleborder-left-style

Estilo de bordas em cada um dos quatro lados: superior, direito, inferior e esquerdo

[ none | hidden| dotted | dashed | solid | double | groove | ridge |inset | outset ]

none: nenhuma borda (largura computada como zero)hidden: idêntico à 'none', exceto na resolução de conflito de bordas nos elementos de uma tabeladotted: série de pontosdashed: série de segmentos de pequenas linhassolid: segmento de linha simples e contínuadouble: Duas linhas 'solid'. A soma das duas linhas e o espaço entre elas é igualao valor definido em 'border-width'groove: Efeito 3D, entalhadaridge: Efeito 3D, oposto de 'groove': ressaltadainset: Efeito 3D, baixo relevooutset: Efeito 3D, alto relevo

Propriedade Descrição Valores DescriçãoExemplo:e {border-left-style: dotted; }

border-style

Atalho para definir de uma sóvez estilos de bordas para todosos lados

[ none | hidden| dotted | dashed | solid | double | groove | ridge |inset | outset ] {1,4}

Exemplos: Todas as bordas com estilo 'solid':e {border-style: solid;}

Bordas superior e inferior com estilo 'solid', bordas direita e esquerda com estilo 'dotted':e {border-style: solid dotted;}

Borda superior com estilo 'solid', bordasdireita e esquerda com estilo 'dotted', borda inferior com o estilo 'dashed':e {border-color: solid dotted dashed; }

Borda superior com estilo 'solid', borda direita com estilo 'dotted', borda inferiorcom estilo 'dashed', borda esquerda como estilo 'double':e {border-color: solid dotted dashed double; }

border-top border-right border-bottom border-left

Atalho para definir largura, estilo e cor das bordas superior, direita, inferior ou esquerda

[ <border-top-width> || <border-top-style> || <border-top-color> ]

Exemplo:e {border-bottom: thick solid red;}

border

Atalho para largura, estilo e cor das quatro bordas

[ <border-top-width> || <border-top-style> || <border-top-color> ]

Exemplo:e {border: thick solid red;}

MargensPropriedade Descrição Valores Descrição

margin-top margin-right margin-bottom

margin-left

Tamaho da margem paracada um dos lados: superior, direito, inferiore esquerdo

[ <tamanho> | <porcentagem> | auto ]

Exemplo:body {margin-top: 2em }

margin Atalho para definir de uma só vez o tamanho

[ <tamanho> | <porcentagem> |

Exemplos:Todas as margens com 2em:

Propriedade Descrição Valores Descrição

da margem para todos oslados

auto ]{1,4}

body {margin: 2em }

Margem superior e inferior com 1em, esquerda e direita com 2em:body {margin: 1em 2em }

Margem superior com 1em; direitacom 2em; inferior com 3em; e esquerda com 2em:body {margin: 1em 2em 3em }

Margem superior com 1em; direitacom 2em; inferior com 3em; e esquerda com 4em:body {margin: 1em 2em 3em 4em }

EspaçamentoPropriedade Descrição Valores Descrição

padding-top padding-right padding-bottom

padding-left

Distância utilizada para espaçamento em cada um dos quatro lados: superior, direito, inferior e esquerdo

[ <tamanho> |<porcentagem> ]

Exemplo:body {padding-top: 2em}

padding

Atalho para definir de uma só vez a distância de espaçamento para todos os lados

[ <tamanho> |<porcentagem> ]{1,4}

Exemplos:Todas as margens com 2em:body {padding: 2em }

Margem superior e inferior com 1em, esquerda e direita com 2em:body {padding: 1em 2em}

Margem superior com 1em; direita com 2em; inferior com 3em; e esquerda com 2em:body {padding: 1em 2em3em }

Margem superior com 1em; direita com 2em; inferior com 3em; e esquerda com 4em:body {padding: 1em 2em3em 4em }

Modelo de formtação visualPropriedade Descrição Valores Descrição / Exemplos

position Esquema de posicionamento

[ static | relative | absolute | fixed ]

static: Posicionamento normal de acordo com o fluxo normal dos elementos na página. As proprieades 'top', 'right', 'bottom',e 'left' não se aplicamrelative: posicionamento é calculado de acordo com o fluxo normal. O efeito de 'position:relative' é indefinido nos elementos 'table-row-group', 'table-header-group', 'table-footer-group', 'table-row', 'table-column-group', 'table-column', 'table-cell', e 'table-caption'absolute: Posicionamento (e possivelmenteo tamanho) é especificado com as propriedades 'top', 'right', 'bottom', e 'left'. Essas propriedade são especificadas em relação ao conteúdo do blocofixed: Posicionamento é calculado tal comoo modelo 'absolute', mas adicionalmente se manterá fixo, mesmo que se utilize a barra de rolagemExemplo:@media screen {e#exemplo {position: fixed; }}@media print {e#exemplo {position: static;}}

top rightbottom left

Distância do elemento com relação à extremidade de seu elemento-pai

[ <tamanho> | <porcentagem> | auto ]

top: Distância vertical em relação à margem superiorright: Distância horizontal em relação à margem direitabottom: Distância vertical em relação à margem inferiorleft: Distância horizontal em relação à margem esquerda

Exemplo:e { top: 20px; left: 40px;}

z-index

Níveis de profundidade de sobreposição de elementos

[ auto | <número inteiro> ]

Os números serão considerados para ordenar os elementos que ficarão sobrepostos, do mais baixo para o mais alto:'z-index: 1'; 'z-index:2'; 'z-index: 3'; …

Exemplo: e {z-index: 1;}

Detalhes do modelo de formatação visualPropriedade Descrição Valores Descrição / Exemplos

width Largura[ <tamanho> | <porcentagem> | auto ]

Exemplo: e {width: 25%;}

height Altura[ <tamanho> | <porcentagem> | auto ]

Exemplo:e {height: 250px;}

Obs.: Valores em negrito são os adotados como padrão

Efeitos visuaisPropriedade Descrição Valores Descrição / Exemplos

visibility Define se um elemento estará ou não visível

[ visible | hidden | collapse ]

visible - O elemento será exibidohidden - O elemento não será exibido, ficando totalmente transparente. Mas o leiaute da página continuará sendo afetadocollapse - Mesmo efeito que hidden, mas aplicável a elementos de tabela

Exemplo:e {visibility: hidden; }

Cores e FundoPropriedade Descrição Valores Descrição / Exemplos

colorCor do texto presente no elemento

<color>

Exemplo:e {color: red; }e {color: rgb(255,0,0); }

background-color Cor de fundodo elemento

[ <color> | transparent ]

Para 'transparent' será adotada a cor de fundo do elemento superior e na ausência deste, a cor de fundo padrão do browser

Exemplo:e {background-color: #f00; }e {background-color: transparent; }

background-imageImagem de fundo do elemento

[ url(...) | none ]

Exemplo:e {background-image: url(http://caminho/imagem.jpg); }

background-repeat

Define se e como a imagem de fundo utilizada se

[ repeat | repeat-x | repeat-y | no-repeat ]

repeat: a imagem é repetida emambas as direções: horizontal e verticalrepeat-x: a imagem é repetida somente horizontalmente

Propriedade Descrição Valores Descrição / Exemplos

repetirá

repeat-y: a imagem é repetida somente verticalmente.no-repeat: a imagem não será repetida e somente uma cópia da mesma será renderizada

Exemplo:e {background-repeat:no-repeat;}

background-attachment

Define se a imagem de fundo utilizada seráfixa ou com rolagem

[ scroll | fixed ]

scroll: a imagem acompanha a rolagem da página na janela do browser, mantendo-se como imagem de fundofixed: a imagem é fixada na página e não acompanhará a rolagem da página

background-position

Posição da imagem de fundo utilizada.

[ [ <porcentagem> | <tamanho> | left | center | right ] [ <porcentagem> | <tamanho> | top | center | bottom]? ] | [ [left | center | right ] || [top | center | bottom ] ]

top: Equivalente a '0%' do posicionamento verticalright: Equivalente a '100%' do posicionamento horizontalbottom: Equivalente a '100%' do posicionamento verticalleft: Equivalente a '0%' do posicionamento horizontal. center: Equivalente a '50%' do posicionamento horizontal ou '50%' do posicionamento vertical

Exemplo:body {background-position: right top; }body {background-position: 100% 0; }

background

Atalho para definir de uma só vez todas as propriedadesde imagem de fundo

[ <background-color>|| <background-image> || <background-repeat> || <background-attachment> || <background-position> ]

Exemplo:e {background: red url("chess.png")repeat-x fixed 50% right; }


Fontes tipográficasPropriedade Descrição Valores Descrição / Exemplos

font-family Família(s) de fontes

[ [ <nome-fonte> | <família-genérica> ] [, <nome-fonte> | <família-genérica> ]* ]

As seguintes famílias-genéricas de fontessão definidas em CSS2.1:

• 'serif' • 'sans-serif' • 'cursive' • 'fantasy' • 'monospace'

Exemplo: e {font-family: "NewCentury Schoolbook", serif;}

font-style Estilo utilizado na fonte

[ normal | italic | oblique ]

normal: fonte do elemento sem efeito itálico ou oblíquoitalic: fonte do elemento com efeito itálicooblique: fonte do elemento com efeito oblíquo

Exemplo:e {font-style: italic; }

font-variant

Exibe o texto em pequena caixa-alta (versalete) ou fonte normal

[ normal | small-caps ]

normal: fonte do elemento sem efeito decapitalização small-caps: fonte do elemento com efeito de pequena caixa alta (versalete)

Exemplo:e {font-variant: small-caps; }

font-weight Peso da fonte

[ normal | bold | bolder| lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ]

normal: fonte do elemento com efeito padrão de peso (corresponde ao valor 400)bold: fonte do elemento com efeito de negrito (corresponde ao valor 700)bolder: fonte do elemento com o valor de peso imediatamente superior ao do valor herdado (p.ex: de 400 para 500)lighter: fonte do elemento com o valor de peso imediatamente inferior ao do valor herdado (p.ex: de 400 para 300)

Exemplo:e {font-weight: bold; }

font-size Tamanho da fonte

[ [ xx-small | x-small | small | medium | large | x-large | xx-large] | [larger | smaller] | <tamanho> |

medium: fonte do elemento com valor padrão de tamanho e equivalente ao padrão do browser. Os demais valores ( xx-small | x-small | small | large | x-large | xx-large) são calculados pelo


<porcentagem> ]

browser considerando esse valor 'medium'.larger | smaller: aumenta ou diminui o tamanho em relação ao valor herdado.tamanho: valor absoluto. Não são permitidos valores negativos.porcentagem: porcentagem do tamanho do valor herdado.

Exemplo:e {font-size: 90%; }

font

Atalho para definir de uma só vez todas as propriedades defonte

[ [ [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family> ] | caption | icon | menu | message-box | small-caption | status-bar ]

Além dos valores para as propriedades de estilo, variação, peso, tamanho, altura da linha e família, pode-se utilizar os seguintes, de acordo com o ambiente do usuário:

caption: fonte utilizada por controles com legenda (ex.: botões, drop-downs, etc.)icon: fonte utilizada em íconesmenu: fonte utilizada em menus do sistema (ex.: dropdown menus e menus suspensos)message-box: fonte utilizada em caixas de diálogo.small-caption: fonte utilizada em controles com legenda reduzidastatus-bar: fonte utiliza em barra de status das janelas

Exemplo:e {font: 300 italic 1.3em/1.7em "Helvetica", sans-serif; }


TextoPropriedade Descrição Valores Descrição / Exemplos

text-align Alinhamento do texto

[ left | right | center | justify ]

left: alinhamento do texto à esquerdaright: alinhamento do texto à direitacenter: alinhamento do texto centralizadojustify: alinhamento do texto justificado

Exemplo:e {text-align:

Propriedade Descrição Valores Descrição / Exemploscenter; }

text-decoration

Efeitos decorativos no texto como sublinhado, tachado,linha acima e piscante

[ none | [ underline || overline || line-through || blink ] ]

none: não produz decoração no texto do elementounderline: cada linha de texto do elemento terá uma linha abaixo (sublinhado)overline: cada linha de texto do elemento terá uma linha acimaline-through: cada linha de texto do elemento terá uma linha cortando-o ao meio (tachado)blink: textos piscantes alternadamente entre visíveis e não visíveis

Exemplo:e {text-decoration: underline; }

letter-spacing Espaçamento entre caracteres

[ normal | <tamanho> ]

Exemplo:e {letter-spacing: 0.1em; }

word-spacing Espaçamento entre palavras

[ normal | <tamanho> ]

Exemplo:e {word-spacing: 1em; }

text-transform

Transforma o texto em maiúsculas/minúsculas

[ capitalize | uppercase | lowercase | none ]

capitalize: coloca o primeiro caracter de cada palavra do elemento em maiúsculas (caixa alta)uppercase: coloca todos os caracteres de cada palavra do elemento em maiúsculas (caixa alta)lowercase: coloca todos os caracteres de cada palavra do elemento em minúsculas (caixa baixa)none: não aplica efeitos de capitalização

Exemplo:e {text-transform: capitalize; }

white-space

Definições sobre espaços em branco num determinado elemento

[ normal | pre | nowrap | pre-wrap | pre-line ]

normal: utiliza a configuração padrão do browser para espaçamentos em brancopre: todos os espaços em branco presentes no código fonte serão exibidos no elementonowrap: os espaços em branco serão tratados como 'normal', mas as quebras de linha serão

Propriedade Descrição Valores Descrição / Exemplossuprimidaspre-wrap: todos os espaços em branco contantes no código-fonte serão exibidos no elementopre-line: os espaços em branco serão tratados como normal.

Exemplo:e {white-space: pre; }


TabelasPropriedade Descrição Valores Descrição / Exemplos

border-collapse Seleciona o modelo debordas a ser utilizado

[ collapse | separate ]

separate: as bordas serão renderizadas para cada célula, dado a impressão de linha dupla collapse: as bordas das células serão mescladas, dando a impressão de uma única linha

Exemplo:table {border-collapse: collapse; }

border-spacing

Distância entre as bordas de células adjacentes (quando 'border-collapse=separated')

<tamanho> <tamanho>?

Exemplo:table {border-spacing: 15pt; }table {border-spacing: 10pt 5pt; }

empty-cellsVisibilidade das bordas de células sem conteúdo

[ show | hide]

show: exibe as células vazias da tabelahide: não exibe as células vazias da tabela

Exemplo:table {empty-cells: hide;}


Interface de usuárioPropriedade Descrição Valores Descrição / Exemplos

cursor Especifica o cursor

[ [http://.../cursor.ico,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait |help | progress ]

Exemplo: e {cursor:help; }

speak-header (Aural) Freqüência em que os 'headers'

[ once | always ]once: Os títulos de tabelas serão 'falados' uma vez,


da tabela serão pronunciados. Utilizado quando 'media=speech'

antes da série de célulasalways: Os títulos de tabelas serão 'falados' sempre que ocorrer uma célula pertinente

Exemplo:e {speak-header: always; }

Um Guia mais detalhado por ser encontrado em :

http://www.w3c.br/divulgacao/guiasreferencia/css2/

http://www.w3c.br/divulgacao/guiasreferencia/css2/

prof. cleverson b. klettenberg - edubox.com.br de css 2014.pdf · index.html teste css configure

Documents