Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
47 aula4 CSS
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
� �� �
FOLHAS DE ESTILO EM CASCATA
CSS (Cascading Style Sheets) ou Folhas de Estilo em Cascata são um conjunto de
regras de estilo que definem como os elementos e os tags em uma página HTML devem
ser exibidos pelo navegador.
As folhas de estilo permitem que o HTML volte ao seu objetivo inicial : conteúdo.
Separando o conteúdo da exibição, as folhas de estilo criam uma nova facilidade para os
desenvolvedores, que podem controlar de perto suas páginas.
É muito mais fácil manter um site quando se utilizam folhas de estilo. O código das
páginas fica mais legível bem como a manutenção e/ou alteração da exibição fica mais
controlável pois as regras estão reunidas em um só lugar.
As folhas de estilo são compostas de regras. Estas regras têm o seguinte formato:
SELETOR { propriedade1: valor1; propriedade2: valor2; ,...,; propriedaden: valorn}
Onde:
Seletor – escrito à esquerda das chaves, especifica o elemento HTML que será definido
nesta regra de estilo.
Declaração – escrita dentro de chaves ( {} ), especifica como o seletor deve ser
apresentado.
Uma declaração possui duas partes:
Propriedade – especifica qual o aspecto do seletor deve ser modificado.
Valor – especifica como a propriedade deve ser apresentada.
Ex:
p { color:red }
A regra acima indica que os textos marcados pelo tag <p> ...</p> devem ser exibidos
com a cor vermelha.
É possível criar regras com mais de uma combinação de propriedade/valor dentro de
uma única regra de estilo.
Ex:
p { color:red; font-family:arial; font-size:12pt }
A regra anterior indica que os textos marcados pelo tag <p>…</p> são exibidos na cor
vermelha, fonte Arial e tamanho 12 pt.
Uma mesma regra pode ser aplicada a vários elementos HTML, a seguir:
Ex.
� �� �
p, h1, h2 { color:red; font-family:arial; font-size:12pt }
Neste caso, os elementos <p>..</p>, <h1> ... </h1> e <h2> ...</h2> serão exibidos com
a mesma formatação.
Há três maneiras de se inserir CSS nas páginas HTML:
1- Incluir um style sheet no arquivo HTML
Neste método, o código do style sheet é incluído dentro do código da própria página, no
começo do arquivo, antes do corpo (<body>) do código HTML. Veja o exemplo abaixo:
<html>
<head>
<style type="text/css">
<!--
h1 {font-family:impact; background: yellow;color:red}
p {color: green}
-- >
</style>
<title>Mais um Exemplo se Style Sheet</title>
</head>
<body>
<h1>Neste exemplo, estou começando a dominar</h1>
<p>O Cascading Style Sheets</P>
</body>
</html>
Quando o style sheet é incluído desta maneira, as definições colocadas ali, valem para
toda a extensão daquele arquivo HTML. Este é o método mais apropriado quando
queremos incluir style sheets em uma página de cada vez.
O atributo TYPE="text/css" quer dizer que o estilo se trata de um tipo MIME, para que
os browsers que não suportam CSS ignorem o código.
Os tags de comentário (<!-- e -->) também são muito importantes. Alguns browsers
mais antigos (como IE 2.0 para Mac) não reconhecem o código do style sheet pelo
atributo TYPE="text/css", e irão mostrar os códigos style sheet como se fossem texto
normal. Use comentários, e isto não irá acontecer.
2- Criar um link para um style sheet em outro arquivo
Com este método, você pode fazer com que várias páginas HTML usem style sheets
definidos em um único arquivo central. A grande vantagem deste método é que, se você
quiser fazer uma mudança nos estilos da sua página, você só precisa alterar em um
único local. Para criar um link, deve-se substituir a tag <style> pela tag <link>, e
colocar a declaração de estilo dentro da porção <head> do documento. E neste método,
não se precisa usar as tags de comentário. Vamos criar o arquivo abaixo:
<html >
<head>
� �� �
<link rel=”stylesheet” type="text/css” href="def_estilos.css" >
<title>Mais um Exemplo se Style Sheet</title>
</head>
<body>
<h1>Neste exemplo, estou começando a dominar</h1>
<p>O Cascading Style Sheets</P>
</body>
</html>
O arquivo "def_estilos.css", com o qual o documento anterior possui um link possui o
seguinte código:
h1 {font-family:impact; background: yellow;color:red}
p {color: green}
Na hora da visualização do arquivo HTML, as definições do arquivo no link serão
carregadas e usadas no código da página.
3- Adicionar estilos dentro dos comandos HTML
Você também pode adicionar definições de estilo dentro do corpo de seu código HTML,
através do atributo STYLE. Veja o exemplo:
<html>
<head>
<title>Mais um Exemplo se Style Sheet</title>
</head>
<body>
<h1 style="font-family:impact; background:yellow; color:red">Neste exemplo,
estou começando a dominar</h1>
<p style="color: green">O Cascading Style Sheets</P>
</body>
</html>
Uma observação a se fazer aqui é que a definição só vale na linha em que foi definida.
Seguindo o exemplo acima, se tivéssemos mais um texto h1, sem o atributo STYLE, ele
usaria as definições padrões do browser.
Classes
As classes são usadas para criar várias instâncias de uma regra de estilo.
Ex:
<style type="text/css">
<!--
p.first {color: red}
p.second {color: green}
p.third {color: gray}
-->
� �� �
</style>
<head>
<title>Mais um Exemplo se Style Sheet</title>
</head>
<body>
<p class="first">Primeiro parágrafo</p>
<p class="second">Segundo parágrafo</p>
<p class="third">Terceiro parágrafo</p>
<p> Quarto parágrafo</p>
</body>
No exemplo anterior estão definidas três instâncias diferentes para exibição do elemento
<p>..</p>.
Ainda no exemplo anterior, o texto “Primeiro prágrafo” seria exibido em vermelho,
conforme regra p.first { color:red }. Os textos “Segundo parágrafo” e “Terceiro
parágrafo” seriam exibidos respectivamente nas cores verde e cinza. Já o texto “Quarto
parágrafo” por não possuir regra associada, seria exibido conforme as definições padrão
do browser.
O nome de uma classe, pode ser qualquer nome, e identificada pelo "." .
Pode-se criar classes sem associá-las a uma tag HTML. Por exemplo:
p {font-family: Verdana}
h1 {font-family: Arial; font-size: 34 pt}
.cor_padrao {color: green}
Com esta definição, podemos usar class="cor_padrao" dentro das tags <p> .. </p> e
<h1> ... </h1> no corpo da página.
Exemplo:
<p class="cor_padrao"> Este é um texto padrão .</p>
Selecionadores de ID
Funcionam de maneira semelhante às classes. Primeiro, define-se a regra para um
determinado id utilizando o "#":
#texto_padrao {font-family: verdana; font-size: 12 pt}
E depois usamos o estilo da seguinte maneira:
<p id="texto_padrao">Este é um texto padrão </p>
Selecionadores de Contexto
Selecionadores de contexto são utilizados quando uma regra depende de alguma
condição. Por exemplo, suponha que se queira exibir um texto em negrito na cor
� �� �
vermelha, mas somente se este texto em negrito ocorrer em um parágrafo. Neste caso
usaríamos o seguinte código:
p b {color:red}
Para visualizar o resultado desta regra, digite o texto HTML abaixo e experimente no
seu browser:
<p> Este é um texto <b>padrão</b></p>
Herança
Os elementos herdam o estilo de seus pais, o que significa que os elementos assumem as
características dos seus elementos pai.
Considere o exemplo abaixo:
<head>
<title> Exemplo </title>
<style type=”text/css”>
body { color:red }
</style>
<head>
<body>
<p> Esse texto herda as características do elemento pai. </p>
</body>
O Texto “Esse texto herda as características do elemento pai.” Será exibido em cor
vermelha.
FAMÍLIAS DE PROPRIEDADES DAS FOLHAS DE ESTILO
As propriedades das Folhas de Estilo podem ser divididas em famílias baseadasno
aspecto do elemento ao qual as propriedades são aplicadas.
Veremos a seguir as famílias e suas diferentes propriedades e valores que podem ser
utilizados nas definições de estilo.
Sobre os valores de tamanho, as unidades pré-definidas são:
Abreviação Nome
cm Centímetro
in Polegada
mm Milímetro
pt Ponto
px Pixel
Ex.
� �� �
p {font-size:1cm;}
Sobre os valores de cores indicados pelo nome, temos as seguintes possibilidades:
nome cor
aqua azul claro
black preto
blue azul
fuchsia rosa
gray cinza
green verde
lime verde-limão
maroon marrom
navy azul escuro
olive marrom claro
purple roxo
red vermelho
silver prata
teal verde-água
white branco
yellow amarelo
Propriedades de Fonte
Fornecem informações específicas de fonte como tipo, cor e tamanho.
font-family: <family-name> || <generic-family>
Especfica em que tipologia deve ser apresentado o texto. Alguns exemplos de nomes de
família são: Times New Roman, Arial, Helvetica e Sans Serif. A generic-family não é
específica da família, mas descreve o estilo da fonte, ou seja, serifada, sem serifa,
cursiva, fantasiada ou monoespaçada.
A tabela abaixo mostra os nomes de fontes genéricas e o nome da fonte com que se
parecem.
Nome genérico Similar a
serif Times New Roman
sans-serif Arial
cursive Script
fantasy Comic
monospace Courier New
� � �
font-style: normal | italic | oblique
Define o estilo do texto a ser apresentado.
font-size: <xx-small | x-small | small | medium | large | x-large | xx-large> |
<comprimento> | <percentual> | larger | smaller ]
Define o tamanho da fonte de uma dentre quatro maneiras:
1. tamanho absoluto – como small (pequeno) ou x-large (extra grande). É
definido pelo navegador e é relativo ao tamanho real do texto;
2. comprimento – especifica o tamanho da fonte em pixels ou qualquer outra
unidade de medida válida;
3. percentual – especifica o tamanho da fonte atual como percentual da fontebase do
documento;
4. tamanho relativo – como larger (maior que) ou smaller (menor que) . Aumenta ou
diminui o tamanho do texto em relação tamanho da fonte-base do documento.
Valor Descrição
xx-small 50% menor que a fonte x-small
x-small 50% menor que a fonte small
small 50% menor que a fonte medium
medium Um tamanho de fonte de
aproximadamente 10 pontos
large 50% maior que a fonte medium
x-large 50% maior que a fonte large
xx-large 50% maior que a fonte x-large
larger 50% maior que a fonte do elemento pai
smaller 50% menor que a fonte do elemento pai
font-variant: normal | small-caps
Determina se a fonte deve ser exibida em texto regular ou em capitular (inicial
maiúscula).
font-weight: normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | lighter |
bolder
� �
�
Especifica o peso ou largura da fonte utilizando tamanho absoluto (medidas de número)
ou tamanho relativo – lighter (mais claro) ou bolder (mais escuro). O peso 400
representa texto normal, enquanto 700 é texto em negrito.
font: <font-weight> || <font-style> || <font-variant> || <font-size> || <font-family>
Uma versão abreviada das propriedades de família de fontes utilizada para definir todos
os aspectos das fontes com um conjunto de itens propriedade-valor.
Exemplo:
<style type=””text/css”>
p {font-family: Arial sans-serif; font-size: x-large; font-weight: bolder; font-style:
normal; line-height: 50%; }
</style>
Propriedades de Texto
Especifica como o texto deve ser apresentado pelo navegador através de propriedades
como cor, espaçamento, maiúscula ou minúscula, decoração e alinhamento.
color: <nome_da_cor | #RRGGBB>
Define a cor do texto.
text-align: left | right | center | justify
Define o alinhamento do texto.
text-indent: <comprimento> | <percentual>
Define o recuo ou indentação para o texto, em relação à margem esquerda.
word-spacing: normal | <comprimento>
Define o espaçamento entre as palavras. Normal é o padrão e comprimento fornece uma
medida real.
letter-spacing: normal | <comprimento>
Define o espaçamento entre as letras. Normal é o padrão e comprimento fornece uma
medida real.
text-transform: capitalize | uppercase | lowercase | none
Força o navegador a apresentar todo o texto em letras maiúsculas, minúsculas ou com
iniciais maiúsculas, independentemente de como foi digitado.
� �� �
Valor Efeito
uppercase todas as letras do texto serão em
maiúsculas
lowercase todas as letras do texto serão em
minúsculas
capitalize a primeira letra de cada palavra
estará em maiúscula
none
qualquer um dos valores acima
herdados serão ignorados.
Exemplo:
p {text-transform:capitalize}
Cada palavra que estiver no parágrafo terá a sua primeira letra em maiúscula.
text-decoration: none | underline | overline | line-through | blink
Adiciona a decoração do texto.
Valor Efeito
underline texto sublinhado
overline adiciona uma linha sobre o texto
line-through adiciona uma linha cortando o texto
blink texto piscante
none
elimina todos os efeitos
anteriores
vertical-align: base-line | sub | super | top | text-top | middle | bottom | text-bottom |
<percentual>
Especifica como o texto deve ser alinhado em relação ao restante do texto e à página.
Exemplo:
<style type=”text/css>
p {color: blue; letter-spacing: 5px; word-spacing: 10px; text-transform: capitalize; text-
align: center; }
</style>
Propriedades de Segundo Plano
Inclui cor e imagem de segundo plano, além de especificar como as imagens devem ser
dispostas lado a lado. As propriedades de segundo plano permitem que diferentes cores
� �� �
e imagens de segundo plano sejam atribuídas a diferentes elementos HTML e que mais
de uma de cada seja incluída em uma determinada página.
background-color: <nome_da_cor> | transparent
Define a cor do segundo plano ou a propriedade de transparência (que faz o segundo
plano principal aparecer transparente).
background-image: URL | none
Define a imagem do segundo plano. A notação para URL é: url (imagem.extensão)
background-repeat: repeat | repeat-x | repeat-y | no-repeat
Define a disposição da imagem em relação à repetição. Valores:
• repeat – dispõe a imagem lado a lado;
• repeat-x – duplica a imagem em uma linha reta atravessando a página da
• direita para a esquerda;
• repeat-y – duplica a imagem em uma linha reta para baixo na página;
• no-repeat – inclui a imagem apenas uma vez.
background-attachment: scroll | fixed
Define o se a imagem de background rolará com o conteúdo da página ou permanecerá
fixa quando o usuário usar as barras de rolagem.
background-position: top left | top center | top right | center left | center center |
center right | bottom left | bottom center | bottom right
Define a posição da imagem de segundo plano em relação à página e ao seu conteúdo.
Exemplo:
<style type=”text/css”>
p.body {background-image: url (background.gif); background-repeat: no-repeat;
background-position: top center; }
</style>Materiais relacionados
Perguntas relacionadas
Compartilhar