Folha de estilo css

Folha de Estilo - CSS
Poupe muito trabalho com CSS!

O Que é CSS?
O Cascading Style Sheets (CSS) é uma "folha de estilo" composta por
“camadas” e utilizada para definir a apresentação (aparência) em páginas da
internet que adotam para o seu desenvolvimento linguagens de marcação
(como XML, HTML e XHTML). O CSS define como serão exibidos os elementos
contidos no código de uma página da internet e sua maior vantagem é
efetuar a separação entre o formato e o conteúdo de um documento.

Por que o CSS foi criado?
• Com a evolução dos recursos de programação as páginas da
internet estavam adotando cada vez mais estilos e variações para
deixá-las mais elegantes e atrativas para os usuários. Com isto,
linguagens de marcação simples como o HTML, que era destinada
para apresentar os conteúdos também precisou ser aprimorada.

Estilos Múltiplos Cascatearão Uns Sobre os
Outros
• As Folhas de Estilo permitem que a informação de estilo seja
especificada de muitas maneiras. Os estilos podem ser
especificados dentro de um único elemento HTML, dentro do
elemento <head> de uma página HTML, ou num arquivo CSS
externo. Mesmo múltiplas Folhas de Estilo externas podem ser
referenciadas dentro de um único documento HTML.

Ordem de Cascata
• Qual estilo será usado quando há mais de um estilo especificado para
um elemento HTML?
Falando de modo geral pode-se dizer que todos os estilos irão
"cascatear" em uma nova Folha de Estilo "virtual" pelas seguintes regras,
onde a número quatro tem a prioridade mais alta:
1. Padrão do Navegador
2. Folha de Estilo Externa
3. Folha de Estilo interna (dentro da tag <head>)
4. Estilo em linha (Inline) (dentro do elemento HTML)

Conclusão
• Assim, um estilo em linha (inline) (dentro de um elemento HTML)
tem a mais alta prioridade, o que significa que ele irá anular cada
estilo declarado dentro da tag <head>, numa folha de estilo
externa, e num navegador (um valor padrão).

Sintaxe CSS
• A sintaxe CSS é constituída de
três partes: um seletor
(selector), uma propriedade
(property) e um valor (value)

Seletor – Propriedade - Valor
O seletor é normalmente o elemento/tag HTML que você deseja
definir, a propriedade é o atributo que você deseja mudar, e cada
propriedade pode ter um valor. A propriedade e o valor são
separados por dois pontos e circundadas por chaves:
body {
color: black
}

Sintaxe
• Se o valor contém múltiplas palavras, ponha aspas em torno do
valor.
p {
font-family: “sans serif”
}

Sintaxe
• Se você deseja especificar mais de uma propriedade, você deve separar
cada propriedade com um ponto e vírgula. O exemplo abaixo mostra
como definir um parágrafo alinhado no centro, com uma cor de texto
vermelha
p {
text-align: center; color: red
}

Sintaxe
• Para tornar as definições de estilo mais legíveis, você pode descrever uma
propriedade em cada linha, assim:
p {
text-align: center;
color: red;
font-Family: arial
}

Agrupamento
• Você pode agrupar seletores. Separe cada seletor com uma vírgula. No
exemplo abaixo agrupamos todos os elementos header (título). Todos os
elementos header serão verdes:
h1, h2, h3, h4, h5, h6
{
Color: green
}

Seletor class (classe)
• Com o seletor class você pode definir diferentes estilos para o mesmo
tipo de elemento HTML. Digamos que você gostaria de ter dois tipos de
parágrafos em seu documento: uma parágrafo alinhado à direita, e um
parágrafo centralizado. Eis como você pode fazer isso com estilos:
p.right {text-align: right}
p.center {text-align: center}

• Você tem que usar o atributo class no seu documento HTML
<p class=“right”>
Este parágrafo será alinhado à direita.
</p>
<p class=“center”>
Este parágrafo será alinhado ao centro.
</p>

• Você também pode omitir o nome da tag no seletor para
definir um estilo que será usado por todos os elementos
HTML que tem uma certa classe. No exemplo abaixo, todos
os elementos HTML com class="center" serão centralizados.
.center {text-align: center}

Seletor id
• O seletor id é diferente do seletor class
selector! Enquanto um seletor class pode ser
aplicado a VÁRIOS elementos numa página, um
seletor id sempre se aplica a somente UM
elemento.
• Um atributo ID deve ser único dentro do
documento.
• A regra de estilo ao lado será aplicada a um
elemento p que tem seu valor id como "para1":
• p#para1
• {
• text-align: center;
• color: red
• }

Comentários em CSS
• Você pode inserir um comentário na CSS para explicar o seu
código, o que pode ajuda-lo quando você editar o código fonte
numa data posterior. Um comentário será ignorado pelo
navegador. Um comentário em CSS começa com "/*", e termina
com "*/“.

Exemplo deComentário
/* Este é um comentário */
p
{
text-align: center;
/* Este é outro comentário */
color: black;
font-Family: arial
}

Como inserir uma folha de estilo
• Quando um navegador lê uma folha de estilo, ele formata o documento
de acordo com ela. Há três maneiras de inserir uma folha de estilo:
• Folha de estilo externa;
• Folha de estilo interna;
• Folha de estilo inline (em linha);
• Folha de estilos múltiplas.

Folha de Estilo Externa
• Uma folha de estilo é ideal quando o estilo é aplicado a muitas
páginas. Com uma folha de estilo externa, você pode mudar a
aparência de um site Web inteiro mudando apenas um arquivo.
Cada página deve vincular-se com a folha de estilo usando a tag
<link>. A tag <link> vai dentro da seção head.
<head>
<link rel=“stylesheet” type=“text/css” href=“meuestilo.css” />
</head>

Folha de Estilo Externa
• O navegador lerá as definições de estilo do arquivo meuestilo.css,
e formatará o documento de acordo com ela.
• Uma folha de estilo externa pode ser escrita em qualquer editor
de texto. O arquivo não deve conter qualquer tag html. A sua
folha de estilo deve ser salva com uma extensão .css. Um exemplo
de uma folha de estilo está mostrado abaixo:hr
hr {color: sienna}
p {margin-left: 20px}
body (background-image: url(“images/back.gif”)}

Folha de estilo Interna
• Uma folha de estilo interna deve ser usada quando um único documento
tem um estilo particular. Você define estilos internos na seção head
usando a tag <style>, assim:
<head>
<style type=“text/css”>
hr {color: sienna}
</style>
</head>

Navegadores Antigos
• Um navegador normalmente ignora tags desconhecidas. Isto
significa que um navegador antigo que não suporta estilos, irá
ignorar a tag <style>, mas o conteúdo da tag <style> será exibido
na página. É possível prevenir um navegador antigo de exibir o
conteúdo escondendo-o num elemento de comentário HTML.

Prevenindo um navegador antigo
<head>
<style type=“text/css”>

</style>
</head>

Estilos Inline (em linha)
• Um estilo em linha perde muitas das vantagens das folhas de estilo pela
mistura de conteúdo com apresentação. Use este método com cuidado,
como quando um estilo deve ser aplicado a uma única ocorrência de um
elemento.
• Para usar estilos inline você usa o atributo de estilo na tag relevante. O
atributo de estilo pode conter qualquer propriedade CSS.

Estilos Inline (em linha)
• O exemplo mostra como mudar a cor e a margem esquerda de um
parágrafo:
<p style=“color: sienna; margin-left: 20px”>
Este é um prágrafo
</p>

Folha de estilos múltiplas
• Se algumas propriedades foram configuradas para o mesmo seletor
em diferentes folhas de estilo, os valores serão herdados da folha
de estilo mais específica

Exemplo
• Por exemplo, uma folha de estilo externa tem estas propriedades
para o seletor h3:
h3 {color: red, text-align: left, font-size: 8pt}
E uma folha de estilo interna tem estas propriedades para o seletor
h3:
h3 {text-align: right, font-size: 20pt}
Se a página com a folha de estilo interna também se vincula com a
folha de estilo externa as propriedades para h3 serão:
color: red, text-align: right, font-size: 20pt
A cor é herdada da folha de estilo externa e o alinhamento do texto
e o tamanho da fonte são substituídos pela folha de estilo interna.

Configurações de plano de fundo
• Configurar a cor plano de fundo
• Configurar uma imagem como plano de fundo
• Como repetir uma imagem de fundo
• Como posicionar uma imagem de fundo
• Como configurar uma imagem de fundo fixa
• Todas as propriedades do plano de fundo em uma declaração
Exemplo
Exemplo
Exemplo
Exemplo
Exemplo
Exemplo

Propriedades de Texto em CSS
• Configurar a cor do texto
• Especificar os espaços entre os caracteres
• Alinhar o texto
• Decorar o texto
• Recua (Indent) o texto
• Controla as letras em um texto
Exemplo
Exemplo
Exemplo
Exemplo
Exemplo
Exemplo

• Especificar as fontes de um texto
• Especificar o tamanho da fonte
• Especificar o estilo da fonte
• Especificar a variante da fonte
• Especificar a espessura (boldness) da fonte
• Todas as propriedades em uma declaração
Exemplo
Exemplo
Exemplo
Exemplo
Exemplo
Exemplo

Bordas no CSS
• As propriedades de borda permitem-lhe especificar o estilo, a cor,
e a largura de um elemento border. Em HTML usamos tabelas para
criar bordas em torno de um texto, mas com as propriedades de
borda na CSS podemos criar bordas com belos efeitos, e elas
podem ser aplicadas a qualquer elemento.

Propriedades de Borda em CSS
• Quatro estilos de Borda
• Diferentes bordas em cada lado do elemento
• Especificar a cor das quatro bordas
• Especificar a largura da borda inferior
• Especificar a largura da borda esquerda
• Especificar a largura da borda direita
• Especificar a largura da borda superior
Exemplo
Exemplo
Exemplo
Exemplo
Exemplo
Exemplo
Exemplo

Propriedades de Borda em CSS
• Todas as propriedades da borda inferior
• Todas as propriedades da borda esquerda
• Todas as propriedades da borda direita
• Todas as propriedades da borda superior
• Todas as propriedades das largura da bordas
• Todas as propriedades das bordas
Exemplo
Exemplo
Exemplo
Exemplo
Exemplo
Exemplo

Propriedades de Margem em CSS
• As propriedades de margem definem o espaço em volta dos
elementos. É possível usar valores negativos para sobrepor o
conteúdo. As margens superior, direita, inferior, e esquerda podem
ser mudadas independentemente usando propriedades separadas.
Uma propriedade de margem estenográfica pode também ser
usada para mudar todas as margens de uma só vez.

• Especificar a margem esquerda de um texto
• Especificar a margem direita de um texto
• Especificar a margem superior de um texto
• Especificar a margem inferior de um texto
• Especificar todas as propriedades das margens
Exemplo
Exemplo
Exemplo
Exemplo
Exemplo

Propriedades de Enchimento (padding) em
CSS
• As propriedades de enchimento definem o espaço entre a borda do elemento e
o conteúdo do elemento. Valores negativos não são permitidos. O enchimento
superior, direito, inferior, e esquerdo podem ser mudados independentemente
usando propriedades separadas. Uma propriedade de enchimento estenográfica
é também criada para controlar múltiplos lados de uma só vez.

Propriedades de Enchimento (padding) em
CSS
• Especificar o enchimento esquerdo
• Especificar o enchimento direito
• Especificar o enchimento superior
• Especificar o enchimento inferior
• Especificar todas as propriedades dos enchimentos
Exemplo
Exemplo
Exemplo
Exemplo
Exemplo

Propriedades de Lista em CSS
• As propriedades de Lista permitem-lhe trocar diferentes marcadores de
item de lista, especificar uma imagem como marcador de item de lista,
e especificar onde colocar um marcador de item de lista.

• Marcadores para listas não ordenadas
• Marcadores para listas ordenadas
• Especificar imagem como marcador de uma lista
• Posicionar o marcador de um lista
Exemplo
Exemplo
Exemplo
Exemplo

Propriedades de Dimensão em CSS
• As propriedades de Dimensão permitem-lhe controlar a altura e a
largura de um elemento. Também permitem-lhe aumentar o
espaço entre duas linhas.

• Especificar a altura (height) e a largura (width) de uma imagem
• Aumentar os espaços entre linhas
Exemplo
Exemplo

Propriedades de Classificação em CSS
• As propriedades de Classificação permitem-lhe controlar como
exibir um elemento, especificar onde uma imagem aparecerá em
outro elemento, posicionar um elemento em relação à sua posição
normal, posicionar um elemento usando um valor absoluto, e
como controlar a visibilidade de um elemento.

Propriedades de Classificação em CSS
• Como exibir um elemento
• Flutuar (Float)
• Position:relative
• Position:absolute
• Como tornar um elemento invisível
• Mudar o cursor
Exemplo
Exemplo
Exemplo
Exemplo
Exemplo
Exemplo

Propriedades de Posicionamento em CSS
• As propriedades de Posicionamento permitem-lhe especificar a
posição esquerda, direita, superior e inferior de um elemento.
Também permitem-lhe especificar a forma de um elemento,
posicionar um elemento atrás de outro, e especificar o que deve
acontecer quando o conteúdo de um elemento é muito grande
para caber numa área específica.

Entendendo a propriedade Position
• O Position é uma propriedade perigosa para iniciantes. Normalmente o
desenvolvedor que acaba de conhecer essa propriedade, acha que ela é
a resposta para todos os problemas de posicionamento e diagramação de
layout. Pelo contrário. O Position não serve para diagramar a estrutura
de layouts. Para isso, você utiliza a propriedade float do css. O Position
vai servir para fazer coisas mais simples.

Coordenadas
• Para posicionar seus elementos, você precisa inserir uma
coordenada. Essas coordenadas são comandadas pelas
propriedades: top, left, right ou bottom. Todos os
valores de positions só trabalham com essas
coordenadas. Obviamente, se você definir um left para o
seu elemento, não faz sentido definir um right. A mesma
coisa para o bottom e o top. Em código ficaria assim:

Tipos de Posicionamento: Position Fixed
• O position: fixed; irá fixar a posição do elemento na coordenada que você
definir. A medida que a página é rolada, o elemento continua fixo na
posição que você definiu e o conteúdo da página rola normalmente.
• Geralmente é usado para fixar elementos como cabeçalhos ou sidebars.
Exemplo 1 Exemplo 2

Tipos de Posicionamento: Position Relative
• Todos os positions precisam de um ponto para iniciar o cálculo da
coordenada para assim posicionar o elemento na tela. Ao contrário do que
muitos acham, esse ponto não é o ponto central do elemento, o ponto base
é o canto superior esquerdo do elemento. A partir deste canto, o browser
irá calcular a coordenada que você definiu e irá posicionar o elemento no
viewport.
• O position relative posiciona o elemento em relação a si mesmo. Ou seja, o
ponto zero será o canto superior esquerdo, e ele começará a contar a partir
dali.

Tipos de Posicionamento: Position Absolute
• O Position Absolute é um tanto diferente do Relative. Enquanto o
elemento com Position Relative utiliza seu próprio canto para
referenciar sua posição, o elemento com Position Absolute se utiliza
do ponto superior esquerdo de outros elementos. Estes elementos
são os parentes dele do elemento com position absolute. Mais
especificamente o pai.

Overflow
• Com a propriedade Overflow (sobrecarga) do CSS, podemos
escolher o que deverá acontecer se o conteúdo ultrapassar o
tamanho de uma DIV. Podemos adicionar barra de rolagem, ocultar
o conteúdo ultrapassado, etc.

Tipos de Overflow mais utilizados
• hidden – Corta o conteúdo que ultrapassa o tamanho da DIV.
• scroll – Mostra as barras de rolagens, vertical e horizontal, mesmo que
não seja necessário.
• auto – Acho essa a melhor opção porque só cria barra de rolagem quando
necessário.
Exemplo

Propriedades de Posicionamento em CSS
• Especificar a forma de um elemento
• Especificar a posição esquerda e superior de um elemento
• Especificar a posição direita e inferior de um elemento
• Sobrecarga (Overflow)
• Alinhar verticalmente uma imagem
• Z-index
Exemplo
Exemplo
Exemplo
Exemplo
Exemplo
Exemplo

Pseudo-elementos em CSS
• Pseudo-elementos são usados em CSS para adicionar
efeitos diferentes em alguns seletores, ou parte de
alguns seletores.

Propriedades de Pseudo-classes em CSS
• Este exemplo demonstra como adicionar cores diferentes a um
hipervínculo (hyperlink) num documento. Especificar a posição esquerda e
superior de um elemento
• Este exemplo demonstra como adicionar outros estilos a um hipervínculo.
Exemplo
Exemplo

Pseudo-classes em CSS
• As Pseudo-classes são usadas na CSS para adicionar
efeitos diferentes em alguns seletores, ou a uma parte
de alguns seletores.

Propriedades de Pseudo-classes em CSS
• Este exemplo demonstra como adicionar um estilo especial à primeira
letra de um texto.
• Este exemplo demonstra como adicionar um estilo especial à primeira
linha de um texto.
Exemplo
Exemplo

Tipos de Mídia
• Os Tipos de Mídia permitem-lhe especificar como os documentos
serão apresentados em diferentes tipos de mídia. O documento
pode ser exibido diferentemente na tela, no papel, num
navegador auricular, etc.

A Regra @media
• A regra @media permite diferentes regras de estilo para diferentes
mídias na mesma folha de estilo.
• O estilo no exemplo diz ao navegador para exibir uma fonte Verdana com
14 pixels na tela. Mas se a página for impressa, ela será com fonte Times
com 10 pixels. Observe que a espessura da fonte (font-weight) está
especificada como negrito (bold), tanto na tela quanto no papel.
Exemplo

Folha de estilo css

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (6)

Similar a Folha de estilo css

Similar a Folha de estilo css (20)

Más de Escola de Informática Evolutime; Colégio Pio XII

Más de Escola de Informática Evolutime; Colégio Pio XII (20)

Folha de estilo css

Notas del editor