Desenvolvimento WEB CSS

•

UNINGÁ

Beatriz Jacinto de Almeida

24/11/2017

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Sistemas da Informação

3.739 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

Multimídia
CSS
2014
Prof. Willian Magalhães
wmagalhaes@unipar.br
• Apostila K19 Desenvolvimento WEB
• Download gratuito em 
• http://www.k19.com.br/downloads/apostilas
• Site W3Schools (material oficial W3C)
• http://www.w3schools.com
• (material base para o criação destes slides)
wmagalhaes@unipar.br
Material Recomendado
• Tableless – site sobre web standards
• http://tableless.com.br
• Maujor – site sobre CSS e web standards
• http://www.maujor.com
wmagalhaes@unipar.br
Material Recomendado
Cascading Style Sheet
• CSS - Cascading Style Sheets (Folhas de Estilos em 
Cascata)
• Define através de regras define como o navegador deve 
exibir o conteúdo HTML
• O CSS foi introduzido (W3C) na versão 4 do HTML para 
resolver o problema da sopa de tags
wmagalhaes@unipar.br
CSS
• Uma das recomendações W3C
• Separa a apresentação (layout) do conteúdo
• Permite controle centralizado sobre a formatação 
(facilita manutenção)
• Páginas mais leves (reutilização / cache)
• Portabilidade
wmagalhaes@unipar.br
CSS
• O CSS formata a informação
• Esta informação pode ser uma IMAGEM, um TEXTO, um 
VIDEO, um ÁUDIO ou qualquer outro elemento de uma 
página
wmagalhaes@unipar.br
O que o CSS formata?
• Geralmente esta informação é visual
• Porém, nem sempre...
• No CSS Aural é possível manipular o áudio entregue ao 
usuário através de um sistema leitor de tela
• É possível controlar o volume, o tipo da voz, a posição do 
som
wmagalhaes@unipar.br
Compreendendo o CSS
• O CSS deve preparar a informação para que ela possa ser 
acessada (consumida) da melhor maneira possível
wmagalhaes@unipar.br
Definição
• As especificações do CSS são publicadas e mantidas pelo 
W3C (World Wide Web Consortium)
• http://www.w3.org/css
wmagalhaes@unipar.br
CSS quem?
Compatibilidade
• Estatísticas dos navegadores mais utilizados
• http://www.w3schools.com/browsers/browsers_stats.asp
• Estatísticas das resoluções mais utilizadas
• http://www.w3schools.com/browsers/browsers_display.asp
wmagalhaes@unipar.br
Para quem desenvolver?
Regras CSS
• Seletor define quem será formatado
• Propriedade define o que será formatado
• Valor define como será formato
wmagalhaes@unipar.br
Sintaxe Regra CSS
wmagalhaes@unipar.br
Olá CSS
wmagalhaes@unipar.br
Comentários
Seletores
• Os seletores definem como identificar o elemento à ser 
formatado
• Os principais seletores são por tag, id e classe
• No CSS3 existem 44 formas diferentes de acessar um 
determinado elemento
• http://www.w3schools.com/cssref/css_selectors.asp
wmagalhaes@unipar.br
Seletores
wmagalhaes@unipar.br
Seletor universal
wmagalhaes@unipar.br
Seletor por tag
wmagalhaes@unipar.br
Seletor por id
wmagalhaes@unipar.br
Seletor por classe
wmagalhaes@unipar.br
Seletor por descendência
wmagalhaes@unipar.br
Seletor por descendência direta
wmagalhaes@unipar.br
Seletor por atributo
wmagalhaes@unipar.br
Agrupando seletores
CSS onde?
• Existem três maneiras de vincular folhas de estilo ao 
documento HTML
• Código INLINE
• Código INTERNO
• Código EXTERNO
wmagalhaes@unipar.br
CSS onde?
• Método não recomendado, pois não possibilita nenhuma 
forma reutilização
• Geralmente utilizados em testes e casos muito 
específicos
wmagalhaes@unipar.br
INLINE
• Utilizado em páginas especificas, não possibilita 
reutilização entre arquivos distintos
• Possibilita reutilização no mesmo arquivo
• É possível descrever uma regra em qualquer parte do 
documento porém recomenda-se que as regras sejam 
descritas dentro do bloco de cabeçalho, ou seja, entre as 
tags <head> e </head>
wmagalhaes@unipar.br
INTERNO
wmagalhaes@unipar.br
INTERNO
• Método recomendado, pois possibilita reutilização de 
estilos em páginas distintas
wmagalhaes@unipar.br
EXTERNO
Cores no CSS
• No CSS as cores podem ser atribuídas a um determinado 
elemento de diversas formas
wmagalhaes@unipar.br
Cores no CSS
• Cores descritas em hexadecimal são compostas pelo 
padrão de cores RGB
• Cada uma destas cores é representado por um ou dois 
algarismos variando de 0 a F
• http://www.w3schools.com/cssref/css_colorsfull.asp
wmagalhaes@unipar.br
Valores em hexadecimal
• Nesta modalidade cada uma das cores variar de 0 a 255 
ou de 0% a 100%
• Ainda é possível informar o valor do canal de 
transparência (alpha), podendo variar de 0 a 1
wmagalhaes@unipar.br
Valores em RGB
• Cores em HSL são compostas por três valores
• Hue (matiz), Saturation (saturação) e Lightness
(luminosidade)
• Existe um quarto paramento referente a transparência, 
variando de 0 a 1
• http://hslpicker.com
wmagalhaes@unipar.br
Valores em HSL
• Existem cerca de 141 cores podem ser referenciadas 
através do nome
• No link abaixo pode ser encontrada uma lista com os 
nomes de cores possíveis 
• http://www.w3schools.com/cssref/css_colornames.asp
wmagalhaes@unipar.br
Nome da cor (em inglês)
• É possível utilizar algumas cores utilizadas pelo sistema 
operacional do usuário
• No link abaixo apresenta alguma destas cores
• http://maujor.com/tutorial/syscolor.html
wmagalhaes@unipar.br
Cores do sistema operacional
Propriedades CSS
http://www.w3schools.com/css/css_background.asp
wmagalhaes@unipar.br
Plano de Fundo
Propriedade Descrição
background Define todas as propriedades em uma definição
background-attachment Define se a imagem de fundo é fixa ou não
background-color Define uma cor de fundo
background-image Define um imagem de fundo
background-position Define a posição da imagem de fundo
background-repeat Define se como a imagem de fundo deve ser repetida
http://www.w3schools.com/css/css_text.asp
wmagalhaes@unipar.br
Texto
Propriedade Descrição
color Define a cor para o texto
text-align Define o alinhamento horizontal do texto
text-decoration Utilizado para definir ou remover decorações em textos
text-transform Tranforma o texto em maiusculas e minusculas
http://www.w3schools.com/css/css_text.asp
wmagalhaes@unipar.br
Fonte
Propriedade Descrição
font-family Define a “familia” da fonte
font-style Geralmente utilizada para deixar a fonte em itálico
font-size Define o tamanho da fonte
font-weight Utilizada para definir o “peso” da fonte (negrito)
http://drmarkwomack.com/a-writing-handbook/style/typography/
wmagalhaes@unipar.br
Fontes Serif e Sans-Serif
http://www.w3schools.com/css/css_text.asp
wmagalhaes@unipar.br
Links
Propriedade Descrição
:link Estado normal, quando o link ainda não foi visitado
:visited Estado quando o link já visitado pelo usuário
:hover Estado quando o mouse estiver sobre o link
:active Estado quando o link esta sendo clicado
text-decoration Utilizado para definir ou remover decorações em textos
http://www.w3schools.com/css/css_list.asp
wmagalhaes@unipar.br
Listas
Propriedade Descrição
list-style-type Define o estilo da lista
list-style-image Define se a imagem de fundo é fixa ou não
background-image Define um imagem de fundo
http://www.w3schools.com/css/css_table.asp
wmagalhaes@unipar.br
Tabelas
Propriedade Descrição
border-style Define o tipo (estilo) da borda
border-color Define a cor da borda
border-width Define o tamanho da borda
border-collapse Define como as bordas devem se unir
width Define a largura
height Define a altura
padding Define o espaço entre o conteúdo e a borda
text-align Define o alinhamento do texto horizontalmente
vertical-align Define o alinhamentodo texto verticalmente
CSS Box Model
• Box Model é um termo utilizado para descrever o 
comportamento visual dos elementos HTML
• Neste modelo cada um dos elementos HTML possui uma 
espécie de caixa ao redor
wmagalhaes@unipar.br
Box Model
• Esta caixa que envolve os elementos é composta 
basicamente por três partes:
• Margem externa (margin)
• Borda (border)
• Margem interna (padding)
wmagalhaes@unipar.br
Box Model
Compreendendo o Box Model
• MARGIN corresponde a uma área vazia em torno da 
borda, a margem não possui cor de fundo (background)
• BORDER área intermediaria entre as margens internas e 
margens externas
• PADDING corresponde ao espaço entre a borda e o 
conteúdo do elemento
wmagalhaes@unipar.br
Detalhes do Box Model
250px – largura do elemento (width)
+ 20px – margens internas (padding)
+ 10px – bordas (border)
+ 20px – margens (margin)
= 300px
wmagalhaes@unipar.br
Calculo - Largura x Altura
http://www.w3schools.com/css/css_border.asp
wmagalhaes@unipar.br
Bordas
Propriedade Descrição
border-style Define o tipo (estilo) da borda
border-color Define a cor da borda
border-width Define o tamanho da borda
border Definição abreviada para as propriedades acima
http://www.w3schools.com/css/css_margin.asp
wmagalhaes@unipar.br
Margens Externas
Propriedade Descrição
margin Define o tamanho da margem
Propriedade Descrição
margin: 25px 50px 75px 100px superior, Direita, Inferior, Esquerda
margin: 25px 50px 75px Superior, Esquerda e Direita, Inferior
margin: 25px 50px Superior e Inferior, Direita e Esquerda
margin: 25px Todas as margens
http://www.w3schools.com/css/css_padding.asp
wmagalhaes@unipar.br
Margens Internas (espaçamento)
Propriedade Descrição
padding Define o tamanho da margem interna
Propriedade Descrição
padding: 25px 50px 75px 100px superior, Direita, Inferior, Esquerda
padding: 25px 50px 75px Superior, Esquerda e Direita, Inferior
padding: 25px 50px Superior e Inferior, Direita e Esquerda
padding: 25px Todas as margens internas
CSS Display e Visibility
• A regra visibility: hidden oculta o elemento, porém 
matem seu espaço reservado
• A regra display: none não exibe o elemento liberando 
seu espaço no navegador
wmagalhaes@unipar.br
Escondendo elementos
wmagalhaes@unipar.br
Exemplo de utilização
• Elementos em bloco (block) ocupam a largura disponível 
e possuem um intervalo de linha
• Exemplos: H1, P, DIV
• Elementos inline ocupam apenas o espaço necessário 
para seu conteúdo, este elementos não forçam quebra de 
linha
• Exemplos: A, LABEL
wmagalhaes@unipar.br
Elementos em bloco
wmagalhaes@unipar.br
Exemplo de utilização
Posicionamento
wmagalhaes@unipar.br
Posicionamento
Propriedade Descrição
position: absolute Posiciona o objeto independente de outros objetos
position: fixed Posiciona o objeto em um ponto fixo na tela
position: relative Posiciona o objeto relativo a sua posição de origem
Propriedade Descrição
top Distancia da margem superior da janela
bottom Distancia da margem inferior da janela
right Distancia da margem direita da janela
left Distancia da margem esquerda da página
z-index Ordem dos objetos quanto sobrepostos
Flutuação
• Elementos sem flutuação
wmagalhaes@unipar.br
Flutuação
002
003
001
• Elemento 001 com flutuação a direita
wmagalhaes@unipar.br
Flutuação
003
002 001
• Todos elementos com flutuação à esquerda
wmagalhaes@unipar.br
Flutuação
003001 002
http://www.w3schools.com/css/css_float.asp
wmagalhaes@unipar.br
Flutuação
Propriedade Descrição
float: none Restaura a flutuação para o valor padrão
float: left Alinha os objetos a esquerda
float: right Alinha os objetos a direita
• BUDD, Andy. Criando página WEB com CSS. São Paulo: Pearson Education do 
Brasil, 2006;
• LEWIS, Joseph R. CSS avançado. São Paulo: Novatec Editora, 2010;
• EIS, Diego; FERREIRA, Elcio. HTML5 e CSS3 com farinha e pimenta. Tabless.com.br, 
2012;
• FERREIRA, Elcio; EIS, Diego. HTML5 Curso W3C Escritório Brasil. Disponível em 
<www.w3c.br/pub/Cursos/CursoHTML5/html5-web.pdf>. Acesso em 04 de 
agosto de 2013;
• W3SCHOOLS. Disponível em <www.w3schools.com>. Acesso em 04 de agosto de 
2013
Referências