WEBSTANDARDS
CSS
Prof.: Marcelo Torres
Contatos:
[Link]
[Link]@[Link]
[Link]
@martorres_tec
Alunos
Quem são ?
O que esperam do curso ?
O que conhecem sobre a internet ?
Conteúdo da aula
Webstandards
Cascading Style Sheet CSS
Vantagens e Desvantagens do
uso
Formas de Inserção
Exercícios
WEBSTANDARDS
POR QUE “PADRÕES” ?
Tornar as páginas mais acessíveis
Universalizar o conteúdo independente do
navegador
Reduzir custos de produção
Evitar múltiplas versões de cada página
Facilitar o acesso de um maior número de
dispositivos à Internet (Celular, TV, Tablets
e etc...)
WEBSTANDARDS
A separação entre informação e
formatação traz muitas vantagens:
Facilidade de Manutenção
Maior produtividade
Interfaces mais leves
Melhor integração com interpretadores
dos dispositivos ( Mobile, TV e etc...)
SEPARANDO A ESTRUTURA DA
FORMA
Vários CSS para uma página
Um CSS para várias páginas (Style Switcher)
O PADRÃO HTML
Hyper Text Markup Language
Linguagem de “marcação” para produzir
páginas para internet
Utiliza “marcas” conhecidas como tags
Usado para apresentação das informações
na tela do usuário
Era usado de uma forma totalmente
despadronizada por designers e
desenvolvedores
Recomendado pelo W3C
CASCADING STYLE SHEETS - CSS
São conhecidas como “folhas de estilo”.
Vantagens:
◦ Separam forma da estrutura.
◦ São puramente textos.
◦ Não exigem plugins.
◦ Facilitam codificação e manutenções
posteriores.
Problemas:
◦ Diferenças entre browsers.
MÉTODOS DE ESPECIFICAÇÃO
As folhas de estilo podem ser vinculadas a
um documento de três maneiras distintas:
- Inline
- Embedded
- Linked
- Imported
CSS - INLINE
Estilo aplicado localmente na tag HTML
através do atributo “STYLE”:
<html>
<head><title>Exemplo</title>
</head>
<body>
<p style=“font-family: Arial;
color:red”>Esta frase também está escrita
com fonte “Arial” e na cor vermelha.</p>
<p>Esta frase está normal.</p>
</body>
</html>
CSS - EMBEDDED
Estilo aplicado no próprio documento XHTML
com o emprego das regras de estilo dentro da tag
<style> , </style> conforme exemplo abaixo:
<head>
<style type=“text/css” media=“all”>
body {
margin: 0;
color: blue;
background: yellow;
}
</style>
</head>
EXERCÍCIO
Aplicar os seguintes estilos utilizando o
método de especificação inline:
- Mudar a cor do Título principal para vermelho e
a fonte para ‘Trebuchet MS’;
- Mudar a cor do subtítulo para verde e o
tamanho da fonte para 12px ;
- Mudar a cor dos paragrafos para azul;
- Mudar o tamanho da fonte dos paragrafos para
10px e tipo de fonte para “Verdana”;
EXERCÍCIO
Aplicar os seguintes estilos utilizando o
método de especificação Embedded:
O título principal na cor Laranja e fonte Verdana
tamanho 24px;
Os sub-títulos na cor Azul e fonte Verdana
tamanho 16px;
O 1º parágrafo o texto na cor Vermelho
O 2º parágrafo o texto na cor Rosa
Os demais parágrafos o texto com a cor Verde
O fundo do site na cor Amarelo.
Todos os parágrafos com fonte Verdana tamanho
12px;