Aula 02 LINGUAGEM DE MARCAÇÃO DE ESTILO-CSS

Prévia do material em texto

ARA0062 - DESV. WEB HTML5, CSS, JS E – 1001/3001
Aula 02 . LINGUAGEM DE MARCAÇÃO DE ESTILO-CSS
Introdução à Programação
AULA 01: Introdução à Lógica de ProgramaçãoDESV. WEB HTML5, CSS, JS E
LINGUAGEM DE MARCAÇÃO DE ESTILO - CSS
DESV. WEB HTML5, 
CSS, JS E
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Objetivo
- Aplicar características de estilo a páginas WEB, utilizando a
linguagem de marcação de estilos (CSS 3), para praticar técnicas
de engenharia de software como facilidade de compreensão,
reutilização de código, manutenibilidade e interoperabilidade;
DESV. WEB HTML5, CSS, JS E
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Agenda
- Objetivo da aula
- Definições
- Situação-problema
- Como funciona o CSS
- Regras de construção
- Formatação geral
- Principais aplicações
- Quiz
DESV. WEB HTML5, CSS, JS E
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
TÓPICOS
2 .1 DEFINIÇÃO
2 .2 SINTAXE & SELEÇÃO DE ELEMENTOS
DESV. WEB HTML5, CSS, JS E
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Situação-problema 
Mesmo com o advento de tecnologias inclusivas o grande
atrativo dos conteúdos digitais ainda é a estética. Uma forma
elegante e agradável de expor um conteúdo sempre será mais
bem vinda que um texto sem formatação. Como podemos
melhorar a estética de nossas páginas?
DESV. WEB HTML5, CSS, JS E
Introdução à Programação
AULA 01: Introdução à Lógica de ProgramaçãoDESV. WEB HTML5, CSS, JS E
CONCEITOS E DEFINIÇÕES
DESV. WEB HTML5, CSS, JS E
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
O que é CSS?
DESV. WEB HTML5, CSS, JS E
São estilos que definem como elementos html devem ser
apresentados no navegador. Permitindo a separação de
conteúdos nas mais diversificadas formatações.
Cascading Style Sheets Folha de Estilo em cascata
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Conceito
DESV. WEB HTML5, CSS, JS E
CSS é uma linguagem de estilos usada para estilizar elementos
de uma página desenvolvida com uma linguagem de
marcação, como o HTML.
Cascading Style Sheets Folha de Estilo em cascata
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
CSS é referencia
DESV. WEB HTML5, CSS, JS E
O CSS tornou-se referencia quando o assunto é padronização de
Estilo na construção de páginas html. Justamente, pela sua
capacidade de dividir a pagina em partes diferentes com
formatos e estilos diferentes.
Cascading Style Sheets Folha de Estilo em cascata
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
E como funciona o CSS?
DESV. WEB HTML5, CSS, JS E
A principal funcionalidade do CSS é separar a parte estrutural
escrita, ou seja, separa o conteúdo da parte visual.
Cada elemento em uma página reside em uma caixa invisível.
Introdução à Programação
AULA 01: Introdução à Lógica de ProgramaçãoDESV. WEB HTML5, CSS, JS E
E como funciona o CSS?
Exemplos de Elementos que permitem a separação de conteúdo.
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
E que e preciso CSS?
DESV. WEB HTML5, CSS, JS E
Por meio de duas regras:
• Seletor
• Declaração
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
E como funciona o CSS?
DESV. WEB HTML5, CSS, JS E
Por meio de duas regras:
• Seletor
Seletor é a parte da regra que informa a qual ou quais 
elementos ela deve ser aplicada.
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
E como funciona o CSS?
DESV. WEB HTML5, CSS, JS E
Por meio de duas regras:
• Declaração
Declaração é a parte da regra que informa como os elementos 
referenciados pelo seletor devem ser modificados.
As declarações são compostas por pares de chave e valor 
separados por dois pontos “:”.
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
E como funciona o CSS?
DESV. WEB HTML5, CSS, JS E
Por meio de duas regras:
Exemplo:
na regra apresentada no Código 1 p é o seletor e todo o conteúdo 
entre chaves é a declaração.
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
E como funciona o CSS?
DESV. WEB HTML5, CSS, JS E
Por meio de duas regras:
Exemplo:
na regra apresentada no Código 2 as propriedades informam
quais características visuais do elemento desejamos modificar
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Formato geral do CSS
DESV. WEB HTML5, CSS, JS E
Uma definição de estilo em CSS será composta por
uma sequência de definições como esta acima:
seletor { propriedade: valor }
Exemplos:
body { color: black }
p { font-family: “arial”; text-align: center; color: green }
h1,h2,h3,h4,h5,h6 { color: black }
p {margin-left: 40px}
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Formato geral do CSS
DESV. WEB HTML5, CSS, JS E
seletor.classe { propriedade: valor }
Exemplos:
p.direita {text-align: right} // Alinhamento à direita
p.centro {text-align: center} // Alinhamento Centraliza
p.esquerda {text-align: left} // Alinhamento a esquerda
• Classes em CSS permitem que um mesmo elemento 
seja exibido de diferentes formas
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Formato geral do CSS
DESV. WEB HTML5, CSS, JS E
seletor.classe { propriedade: valor }
• Classes em CSS permitem que um mesmo elemento seja 
exibido de diferentes formas
<p class=“direita”>Este parágrafo será alinhado à direita</p> 
<p class=“centro”>Este parágrafo será centralizado</p>
<p class=“esquerda”>Este será à esquerda</p>
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Como adicionar CSS ao nosso projeto?
DESV. WEB HTML5, CSS, JS E
• Podemos adicionar as folhas de estilos de três maneiras:
✓ Criando um arquivo especifico do CSS (style.css).
✓ Adicionando um seletor a pagina html.
✓ Definindo a cada linha da pagina html (inline).
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Como adicionar CSS ao nosso projeto?
DESV. WEB HTML5, CSS, JS E
• Podemos adicionar as folhas de estilos de três maneiras:
✓ Criando um arquivo especifico do CSS (style.css).
✓ Adicionando um seletor ao pagina html.
✓ Definindo a cada linha da pagina html (inline).
<head><link rel="stylesheet" type="text/css" href="style.css" /></head>
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Como adicionar CSS ao nosso projeto?
DESV. WEB HTML5, CSS, JS E
• Podemos adicionar as folhas de estilos de três maneiras:
✓ Criando um arquivo especifico do CSS (style.css).
✓ Adicionando um seletor ao pagina html.
✓ Definindo a cada linha da pagina html (inline).
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Como adicionar CSS ao nosso projeto?
DESV. WEB HTML5, CSS, JS E
• Podemos adicionar as folhas de estilos de três maneiras:
✓ Criando um arquivo especifico do CSS (style.css).
✓ Adicionando um seletor ao pagina html.
✓ Definindo a cada linha da pagina html (inline).
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Principais aplicações de formatação com CSS
DESV. WEB HTML5, CSS, JS E
▪ Background
▪ Textos
▪ Fontes
▪ Margens
▪ Bordas
▪ Listas
▪ Tabelas
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Principais aplicações de formatação com CSS
DESV. WEB HTML5, CSS, JS E
▪ Background
▪ Textos
▪ Fontes
▪ Margens
▪ Bordas
▪ Listas
▪ Tabelas
Esta propriedade é utilizada para inserir imagens
como plano de fundo de um elemento.
Nota: Mesmo que a página tenha uma imagem como
plano de fundo, é sempre bom definir o background-
color.
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Principais aplicações de formatação com CSS
DESV. WEB HTML5, CSS, JS E
▪ Background
▪ Textos
▪ Fontes
▪ Margens
▪ Bordas
▪ Listas
▪ Tabelas
A propriedade CSS text-align descreve como
conteúdo inline (em linha), comotexto, é alinhado
no elemento pai em bloco. text-align não controla o
alinhamento de elementos em bloco, apenas o seu
conteúdo de uma linha.
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Principais aplicações de formatação com CSS
DESV. WEB HTML5, CSS, JS E
▪ Background
▪ Textos
▪ Fontes
▪ Margens
▪ Bordas
▪ Listas
▪ Tabelas
A propriedade font-family do CSS permite que se faça uma
lista de prioridades de familias de fontes e/ou nomes
genéricos de famílias a serem especificados para um
elemento selecionado. Também pode ser atribuída a cada
linha (inline)
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Principais aplicações de formatação com CSS
DESV. WEB HTML5, CSS, JS E
▪ Background
▪ Textos
▪ Fontes
▪ Margens
▪ Bordas
▪ Listas
▪ Tabelas
A propriedade margin do CSS define a área de margem nos
quatro lados do elemento. É uma abreviação que define
todas as margens individuais de uma só vez: margin-top ,
margin-right , margin-bottom , e margin-left
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Principais aplicações de formatação com CSS
DESV. WEB HTML5, CSS, JS E
▪ Background
▪ Textos
▪ Fontes
▪ Margens
▪ Bordas
▪ Listas
▪ Tabelas
As propriedades das bordas permitem que você controle o
estilo a cor e a espessura das bordas de um elemento
HTML.
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Principais aplicações de formatação com CSS
DESV. WEB HTML5, CSS, JS E
▪ Background
▪ Textos
▪ Fontes
▪ Margens
▪ Bordas
▪ Listas
▪ Tabelas
As propriedades para as listas, definem as características
das listas e são as listadas da seguinte forma: (list-style-
image) para define uma imagem como marcador da lista;
list-style-position para definir a posição da lista.
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Principais aplicações de formatação com CSS
DESV. WEB HTML5, CSS, JS E
▪ Background
▪ Textos
▪ Fontes
▪ Margens
▪ Bordas
▪ Listas
▪ Tabelas
A propriedade tables é uma tabela que é composta por linhas
e células. As tabelas começam com a tag <table> , as linhas da
tabela são definidas pela tag tr (table row). Dentro das linhas
temos as células, elas são definidas pela tag td (table data).
Introdução à Programação
AULA 01: Introdução à Lógica de ProgramaçãoDESV. WEB HTML5, CSS, JS E
Responda o quiz a seguir:
Introdução à Programação
AULA 01: Introdução à Lógica de ProgramaçãoDESV. WEB HTML5, CSS, JS E
Atividade prática na próxima aula...
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Bibliografia Básica
DESV. WEB HTML5, CSS, JS E
DEITEL, Paul J.; DEITEL, Harvey M. Ajax, Rich Internet Applications e
desenvolvimento Web para programadores. São Paulo: Pearson, 2008.
Disponível em: https://plataforma.bvirtual.com.br/Leitor/Publicacao/426/pdf
PLOTZE, Rodrigo. Tecnologias WEB. Rio de Janeiro: SESES, 2015.
Disponível em:
http://repositorio.novatech.net.br/site/index.html#/objeto/detalhes/BF917AFA-
2335-
4BB8-A269-85491F228012
TERUEL, Evandro C. HTML 5 Guia Prático. 2ª Ed. São Paulo: Érica, 2014.
Disponível em:
https://integrada.minhabiblioteca.com.br/#/books/9788536519296/
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Bibliografia Complementar
DESV. WEB HTML5, CSS, JS E
FLANAGAN, David. JavaScript: O Guia Definitivo. 6ª Ed. Porto Alegre: Bookman,
2014.
Disponível em: https://integrada.minhabiblioteca.com.br/#/books/9788565837484/
FONSECA, Cleber C. Programação para Internet Rica. Rio de Janeiro: SESES, 2016.
Disponível em:
http://repositorio.novatech.net.br/site/index.html#/objeto/detalhes/846BB14A-57D1- 236-
B334-17A19E0A77D6
HAROLD, Elliotte R. Refatorando HTML - Como Melhorar o Projeto de Aplicações
Web Existentes. Porto Alegre: Bookman, 2010.
Disponível em: https://integrada.minhabiblioteca.com.br/#/books/9788577806706/
MILETTO, Evandro M.; BERTAGNOLLI, Silvia C. Desenvolvimento de Software II:
Introdução ao Desenvolvimento Web com HTML, CSS, JavaScript e PHP. Porto
Alegre: Bookman, 2014.
Disponível em: https://integrada.minhabiblioteca.com.br/#/books/9788582601969/
SOARES, Walace. PHP 5 - Conceitos, Programação e Integração com Banco de
Dados. 7ª Ed. São Paulo: Érica, 2013.
Disponível em: https://integrada.minhabiblioteca.com.br/#/books/9788536505633
http://repositorio.novatech.net.br/site/index.html#/objeto/detalhes/846BB14A-57D1-
Introdução à Programação
AULA 01: Introdução à Lógica de Programação
Sugestões de Livros
DESV. WEB HTML5, CSS, JS E