CSS

 CSS
◦ Cascading Style Sheets
◦ Folhas de Estilo em Cascata
 CSS define como elementos HTML devem ser
exibidos
 Adicionados ao HTML 4.0
 Folhas de Estilo externas são armazenados
em arquivos CSS

 HTML nunca foi destinado a conter tags para a
formatação de um documento.
 HTML destinava-se a definir o conteúdo de um
documento, como:
◦ <h1> Este é um cabeçalho </ h1>
◦ <p> Este é um parágrafo. </ p>

 Quando tags como <font> e atributos de cor foram
adicionados à especificação HTML 3.2, começou um
problema para os desenvolvedores web.
◦ Desenvolvimento de grandes web sites, onde informações
de fontes e cor foram adicionadas a cada página individual,
tornou-se um processo longo e custoso.
 Para resolver este problema, o World Wide Web
Consortium (W3C) criou o CSS.
 Em HTML 4.0 e 5.0, toda a formatação pode ser
removido do documento HTML, e armazenado em um
arquivo CSS separado.

 As definições de estilo são normalmente
guardados em arquivos .css externos.
 Com um arquivo de folha de estilo externa, é
possível alterar a aparência de um site
inteiro, alterando apenas um arquivo.

 Uma regra CSS consiste de um seletor e um bloco de declaração.
 O seletor indica o elemento HTML que você quer aplicar o estilo.
 O bloco de declaração contém uma ou mais declarações separadas
por ponto e vírgula.
 Cada declaração inclui um nome de propriedade e um valor,
separados por dois pontos.

 Todos os elementos <p> terão fonte
vermelha e texto centralizado.

 Comentários são utilizados para explicar o
código e são ignorados pelos navegadores.
 Comentários em CSS são feitos com o uso de
/* e */ e podem aparecer tanto em uma como
em várias linhas.

 Seletores CSS permitem selecionar e
manipular elementos HTML.
 Seletores CSS são usados para encontrar
elementos HTML com base em seu id, classe,
tipo, atributo, etc.

 Seleciona elementos por meio do seu nome.
 Pode ser aplicado para um elemento apenas
ou um grupo de elementos.

 Elementos também podem ser selecionados
com base no seu id
 O id deve ser único para um elemento dentro
da página
<p id="para1">Hello World!</p>

com base na sua classe.
 A classe pode ser aplicada a mais de um
elemento dentro da mesma página.
<h1 class="center">Cabeçalho vermelho e centralizado.</h1>
<p class="center">Parágrafo Vermelho e Centralizado.</p>

Se aplica a todos elementos com class
center

Se aplica somente à tag <p> com class
center

 Há três maneiras de inserir uma folha de
estilo:
◦ Folha de estilo externa
◦ Folha de estilo interna
◦ Inline

 Para usar estilos inline, adicione o atributo
style para a marca relevante.
 Não é recomendado utilizar estilos inline.
 Exemplo
<h1 style = "color: blue; margin-left: 30px;"> Cabeçalho </ h1>.

 Uma folha de estilo interna deve ser usada quando
um único documento tem um estilo único.
 Define-se estilos internos na seção <head> de
uma página HTML, dentro da tag <style>.

 Uma folha de estilo externa é ideal quando o
estilo é aplicado a muitas páginas.
 Com uma folha de estilo externa, você pode
alterar a aparência de um site inteiro,
alterando apenas um arquivo.
 O arquivo de folha de estilo deve ser salvo
com a extensão .css.

 Arquivo HTML fazendo referência ao arquivo CSS
 Arquivo CSS

 Faça uma página principal de um portal de
notícias esportivas que possua um arquivo
css externo definindo o seu estilo.
 A página deve possuir as seguintes seções:
◦ Cabeçalho:
 título do portal com sua imagem
 barra de links de navegação entre categorias de
notícias (futebol, basquete, volei, etc.),
◦ Seção de notícias
 Três notícias resumidas com suas respectivas imagens,
links para notícias completas e vídeos relacionados
◦ Rodapé
 Dados para contato do portal

 Background-image
 Background-Color
 background-position:
◦ Define a posição inicial de uma imagem de fundo
 background-repeat
◦ Define como uma imagem de fundo será repetido

 Color: cor do texto
 Text-Align: alinhamento
 Text-decoration: “decoração”
 Text-indent: indentação

 Font-family: nome da fonte
 Font-style: estilo da fonte
 Font-size: tamanho da fonte
 Font-weight: especifica o peso (negrito) da
fonte

 Pode-se utilizar qualquer propriedade CSS
com links
 Links podem ser estilizados diferentemente,
dependendo do estado em que estão

 Diferentes marcadores de lista
 Utilizar uma imagem como marcador de lista
 Pode-se também utilizar as demais
propriedades CSS

 Bordas
 Colar as bordas
 Tamanho da Tabela
 Alinhamento do texto

 Espaço interno às bordas
 Cor da letra e cor de fundo

 Use a página de notícias criada no exercício
anterior e faça as seguintes alterações no
arquivo CSS:
◦ Use fonte Arial de tamanho 15px e cor preta para
as notícias
◦ Use uma imagem de fundo no cabeçalho
◦ Adicione diferentes efeitos aos eventos em cada um
dos links
◦ Faça da barra de links uma lista não-ordenada e
formate essa barra no arquivo CSS
◦ Insira uma tabela no texto contendo os resultados
dos últimos jogos de futebol e formate essa tabela
no arquivo CSS

 Todos elementos
HTML podem ser
considerados “caixas”.
 Conteúdo - O
conteúdo da caixa, em
que o texto e as
imagens aparecem
 Padding - Área em
torno do conteúdo.
 Border – O limite em
torno do conteúdo
 Margin - Área fora
dos limites

 Border: define as bordas dos elementos HTML
 Border-Style: Estilo da borda. Pode assumir
os valores a seguir:

 Border-Width: Largura da Borda. Determinada
em pixels ou medidas thin, medium, ou thick
 Border-Color: Cor da Borda. Pode ser
determinada pelo nome da cor, valor em RGB
ou Hexadecimal

 Margin: propriedade que define o espaço ao
redor dos elementos. Pode ser definida
automaticamente (auto), por um tamanho
(pixels) determinado, ou em porcentagem.

 Padding: define o espaço entre a borda do
elemento e o conteúdo do elemento. Pode ser
usado um tamanho determinado ou
porcentagem.

 Use a página de notícias criada no exercício
anterior e faça as seguintes alterações no
arquivo CSS:
◦ Insira bordas diferenciadas em cada uma das
notícias e também em cada seção da página.
◦ Adicione margens e use a propriedade padding em
cada uma das notícias e no cabeçalho.

 Display: especifica como um elemento é
exibido.
 Visibility: especifica se um elemento deve ser
visível ou oculto.

 Elemento de bloco
◦ ocupa toda a largura disponível e tem uma quebra
de linha antes e depois dele.
◦ <h1>
◦ <p>
◦ <li>
◦ <div>
 Elemento inline
◦ ocupa apenas o máximo de largura, se necessário,
e não força quebras de linha.
◦ <span>
◦ <a>

 Positioning: permite posicionar um elemento
na página. Usa top, bottom, left, right.
◦ Fixo: posiciona o elemento relativo à janela do
navegador
◦ Relativo: posiciona o elemento relativo à sua
posição normal
◦ Absoluto: posiciona o elemento relativamente ao
seu elemento “pai”

 Float: os elementos podem ser colocados à
esquerda ou à direita
 Clear: Especifica em quais lados de um
elemento outros elementos flutuando não são
permitidos.

 Alinhamento de elementos de bloco
◦ Pode ser feito com o uso de margens ou flutuações.

 Opacity: nível de opacidade em um elemento
HTML.

 O uso de @media torna possível definir diferentes estilos para
diferentes tipos de mídia na mesma folha de estilo
 Handheld:
◦ usado para dispositivos pequenos ou portáteis
 Print:
◦ usado para impressoras
 Projection:
◦ usado para apresentações projetadas, como slides
 Screen:
◦ usada para telas de computador
 Tty:
◦ Usado para mídia usando uma grade de caracteres de passo fixo,
como teletypes e terminais
 Tv:
 usado para dispositivos tipo televisão.

 Pesquisar e montar uma página web
contendo os seguintes tópicos
◦ Navigation bar
◦ DropDown
◦ Transição
◦ Animação

CSS

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (16)

Ähnlich wie CSS

Ähnlich wie CSS (20)

Mehr von Arthur Emanuel

Mehr von Arthur Emanuel (20)

CSS