2014 - desenvolvimento web - 03 css
DESCRIPTION
TRANSCRIPT
![Page 2: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/2.jpg)
• 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)
Material Recomendado
![Page 3: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/3.jpg)
• Tableless – site sobre web standards
• http://tableless.com.br
• Maujor – site sobre CSS e web standards
• http://www.maujor.com
Material Recomendado
![Page 4: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/4.jpg)
Cascading Style Sheet
![Page 5: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/5.jpg)
• 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
CSS
![Page 6: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/6.jpg)
• 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
CSS
![Page 7: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/7.jpg)
• 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
O que o CSS formata?
![Page 8: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/8.jpg)
• 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
Compreendendo o CSS
![Page 9: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/9.jpg)
• O CSS deve preparar a informação para que ela possa ser acessada (consumida) da melhor maneira possível
Definição
![Page 10: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/10.jpg)
• As especificações do CSS são publicadas e mantidas pelo W3C (World Wide Web Consortium)
• http://www.w3.org/css
CSS quem?
![Page 11: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/11.jpg)
Compatibilidade
![Page 12: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/12.jpg)
• 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
Para quem desenvolver?
![Page 13: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/13.jpg)
Regras CSS
![Page 14: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/14.jpg)
• Seletor define quem será formatado
• Propriedade define o que será formatado
• Valor define como será formato
Sintaxe Regra CSS
![Page 17: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/17.jpg)
Seletores
![Page 18: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/18.jpg)
• 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
Seletores
![Page 27: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/27.jpg)
CSS onde?
![Page 28: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/28.jpg)
• Existem três maneiras de vincular folhas de estilo ao documento HTML
• Código INLINE
• Código INTERNO
• Código EXTERNO
CSS onde?
![Page 29: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/29.jpg)
• Método não recomendado, pois não possibilita nenhuma forma reutilização
• Geralmente utilizados em testes e casos muito específicos
INLINE
![Page 30: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/30.jpg)
• 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>
INTERNO
![Page 32: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/32.jpg)
• Método recomendado, pois possibilita reutilização de estilos em páginas distintas
EXTERNO
![Page 33: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/33.jpg)
Cores no CSS
![Page 34: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/34.jpg)
• No CSS as cores podem ser atribuídas a um determinado elemento de diversas formas
Cores no CSS
![Page 35: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/35.jpg)
• 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
Valores em hexadecimal
![Page 36: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/36.jpg)
• 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
Valores em RGB
![Page 37: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/37.jpg)
• 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
Valores em HSL
![Page 38: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/38.jpg)
• 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
Nome da cor (em inglês)
![Page 39: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/39.jpg)
• É 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
Cores do sistema operacional
![Page 40: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/40.jpg)
Propriedades CSS
![Page 41: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/41.jpg)
http://www.w3schools.com/css/css_background.asp
Plano de FundoPropriedade 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
![Page 42: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/42.jpg)
http://www.w3schools.com/css/css_text.asp
TextoPropriedade 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
![Page 43: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/43.jpg)
http://www.w3schools.com/css/css_text.asp
FontePropriedade 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)
![Page 44: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/44.jpg)
http://drmarkwomack.com/a-writing-handbook/style/typography/
Fontes Serif e Sans-Serif
![Page 45: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/45.jpg)
http://www.w3schools.com/css/css_text.asp
LinksPropriedade 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
![Page 46: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/46.jpg)
http://www.w3schools.com/css/css_list.asp
ListasPropriedade 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
![Page 47: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/47.jpg)
http://www.w3schools.com/css/[email protected]
TabelasPropriedade 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 alinhamento do texto verticalmente
![Page 48: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/48.jpg)
CSS Box Model
![Page 49: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/49.jpg)
• 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
Box Model
![Page 50: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/50.jpg)
• Esta caixa que envolve os elementos é composta basicamente por três partes:
• Margem externa (margin)
• Borda (border)
• Margem interna (padding)
Box Model
![Page 51: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/51.jpg)
Compreendendo o Box Model
![Page 52: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/52.jpg)
• 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
Detalhes do Box Model
![Page 53: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/53.jpg)
250px – largura do elemento (width)
+ 20px – margens internas (padding)
+ 10px – bordas (border)
+ 20px – margens (margin)
= 300px
Calculo - Largura x Altura
![Page 54: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/54.jpg)
http://www.w3schools.com/css/css_border.asp
BordasPropriedade 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
![Page 55: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/55.jpg)
http://www.w3schools.com/css/css_margin.asp
Margens ExternasPropriedade 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
![Page 56: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/56.jpg)
http://www.w3schools.com/css/css_padding.asp
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
![Page 57: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/57.jpg)
CSS Display e Visibility
![Page 58: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/58.jpg)
• 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
Escondendo elementos
![Page 60: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/60.jpg)
• 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
Elementos em bloco
![Page 62: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/62.jpg)
Posicionamento
![Page 63: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/63.jpg)
PosicionamentoPropriedade 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
![Page 64: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/64.jpg)
Flutuação
![Page 68: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/68.jpg)
http://www.w3schools.com/css/css_float.asp
FlutuaçãoPropriedade 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
![Page 69: 2014 - Desenvolvimento Web - 03 CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022061212/54965056ac7959412e8b5028/html5/thumbnails/69.jpg)
• 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