Aula 5 - Introdução CSS (DDM)

Desenvolvimento para
Dispositivos Móveis
(DDM)
Aula 5
Cascading Style Sheets (CSS)
Prof. Wesley Pecoraro
wesley.pecoraro@gmail.com 1
Ementa do Curso
• Introdução • JavaScript
– Motivação e Objetivos, Histórico da – Características da linguagem
Internet e das Linguagens para – Funções, Eventos
WEB/MOBILE, Comparação entre – Windows
linguagens.
– Validação de dados
• HTML (HyperText Markup Language)
– JQuery
– Estrutura da linguagem
• XML (Extensible Markup Language)
– Principais TAG’s, Formulários
– Botões, Caixa de Texto
– Caixa de Seleção, Botão de opção
– Hiperlinks
• Criação de Páginas estáticas
– Cabeçalho, Menu
– Navegação entre páginas
• CSS
– Estruturação de código
– Criação de folhas de estilo
– Aplicação de folhas de estilo
2
Ementa do Curso
• Introdução • JavaScript
– Motivação e Objetivos, Histórico da – Características da linguagem
Internet e das Linguagens para – Funções, Eventos
WEB/MOBILE, Comparação entre – Windows
linguagens.
– Validação de dados
• HTML (HyperText Markup Language)
– JQuery
– Estrutura da linguagem
• XML (Extensible Markup Language)
– Principais TAG’s, Formulários
– Botões, Caixa de Texto
– Caixa de Seleção, Botão de opção
– Hiperlinks
• Criação de Páginas estáticas
– Cabeçalho, Menu
– Navegação entre páginas
• CSS
– Estruturação de código
– Criação de folhas de estilo
– Aplicação de folhas de estilo
3
Introdução
• CSS é a sigla em inglês para Cascading Style Sheet.
• CSS separa a marcação HTML da apresentação do

site:
– HTML: estrutura e conteúdo
– CSS: apresentação visual do documento.
4
Introdução
• Tags e atributos de formatação são um problema,

pois precisam ser definidas repetidas vezes.
• CSS foi criado para resolver esse problema.
• Mas CSS também permitiu que o mesmo código

HTML possa ser apresentado de infinitas maneiras
diferentes.
• Ver http://www.csszengarden.com/tr/portuguese/
5
Introdução
É possível estilizar uma

página com HTML, mas isso
é considerado
MÁ PRÁTICA
6
Introdução
• Hoje, o CSS é usado para estilizar a página

• Vantagens
– Mais robusto para estilização
– Escrever formatação visual misturado ao conteúdo
de texto do HTML → impraticável!!!
– CSS separa as regras de estilo
7
Sintaxe do CSS
• Com o CSS, o estilo de um elemento HTML é definido

por meio de regras;
• Uma regra CSS tem:

– Um seletor: elemento HTML afetado pelo estilo;
– Uma ou mais declarações no formado propriedade:valor.
Separador de
propriedades
8
Sugestão padrão para a aula!!!
9
Sintaxe do CSS
• Um comentário começa com o "/*", e termina com

"*/".
• Exemplo:
/*meu comentário*/
p{
text-align:center;
/*outro comentário*/
color:black;
font-family:arial;
}
10
Sintaxe do CSS
• Os estilos podem ser definidos de 3 formas:

– Inline: com o atributo style de um elemento HTML;
<p style="color:sienna;margin-left:20px;">
Meu parágrafo.
</p>
11
Sintaxe do CSS

– Inline: com o atributo style de um elemento HTML;
<p style="color:sienna;margin-left:20px;">
Meu parágrafo.
</p>
Não é recomendado na
prática → não separa as
regras de estilo do HTML
12
Resultado
13
Sintaxe do CSS

– Interno: definido no documento HTML por meio da
tag <style>;
– Como a declaração é feita em outro lugar do
documento é necessário indicar a qual elemento
se refere → uso do seletor
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/brasil.jpg");}
</style>
</head> 14
Resultado
background-repeat: no-repeat;
background-size: cover;
15
Sintaxe do CSS

– Externo: em arquivos .css (recomendado);
– Deixa o HTML mais limpo
– Maior organização do projeto
– Pode reaproveitar a folha de estilo para outro projeto
<head>
<link rel="stylesheet" type="text/css“
href=“meu_estilo.css">
</head> 16
Sintaxe do CSS

– Externo: em arquivos .css (recomendado);
– Deixa o HTML mais limpo
– Maior organização do projeto
– Pode reaproveitar a folha de estilo para outro projeto
Especifica o relacionamento entre o documento

corrente e o referenciado
<head>
</head> 17
Sintaxe do CSS
• Se um elemento HTML for afetado por mais de uma

forma de estilo, as propriedades do estilo são
definidas da mais específica para a menos específica,
seguindo a seguinte prioridade:
1. Inline;
2. Interno
3. Externo
18
Exercício
• Criar uma página em HTML a sua escolha e

criar um estilo (CSS) externo que faça
referência para a mesma.
• Lembrando....
<head>
</head>
19

Aula 5 - Introdução CSS (DDM)

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Aula 5 - Introdução CSS (DDM)

Enviado por

Direitos autorais:

Formatos disponíveis

Desenvolvimento para

• CSS é a sigla em inglês para Cascading Style Sheet.

• CSS separa a marcação HTML da apresentação do

• Tags e atributos de formatação são um problema,

• CSS foi criado para resolver esse problema.

• Mas CSS também permitiu que o mesmo código

É possível estilizar uma

• Hoje, o CSS é usado para estilizar a página

• Com o CSS, o estilo de um elemento HTML é definido

• Uma regra CSS tem:

• Um comentário começa com o "/*", e termina com

• Os estilos podem ser definidos de 3 formas:

• Os estilos podem ser definidos de 3 formas:

• Os estilos podem ser definidos de 3 formas:

• Os estilos podem ser definidos de 3 formas:

• Os estilos podem ser definidos de 3 formas:

Especifica o relacionamento entre o documento

• Se um elemento HTML for afetado por mais de uma

• Criar uma página em HTML a sua escolha e

Você também pode gostar