Buscar

Aula_09 (4)

Esta é uma pré-visualização de arquivo. Entre para ver o arquivo original

TECNOLOGIAS WEB – AULA 9
PROF. RENATO GUIMARAES
*
*
Objetivos:
Compreender a sintaxe utilizada em Folhas de Estilos em Cascata, seu uso e limitações. 
Apresentar as principais características das Folhas de Estilos em Cascata. 
Aplicar Folhas de Estilos em Cascata na construção de sites.
*
*
Web Standards é um conjunto de normas, diretrizes, recomendações, notas, artigos, tutoriais e afins de caráter técnico, produzidos pelo W3C e destinados a orientar fabricantes, desenvolvedores e projetistas para o uso de práticas que possibilitem a criação de uma Web acessível a todos, independentemente dos dispositivos usados ou de suas necessidades especiais.
*
*
Folha de Estilo em Cascata (CSS - Cascading Style Sheet)
É um mecanismo simples para adicionar estilos (p.ex., fontes, cores, espaçamentos) aos documentos Web. 
*
*
seletor { propriedade: valor; }
Seletor: É o elemento HTML identificado por sua tag, ou por uma classe, ou por uma ID, e para o qual a regra será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc)
Propriedade: É o atributo do elemento HTML ao qual será aplicada a regra (por exemplo: font, color, background, etc)
Valor: É a característica específica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde, etc)
SINTAXE:
*
*
p { 
font-size: 12px; /* ponto-e-vírgula é facultativo */
 } 
SINTAXE:
body { 
color: #000000; 
background: #FFFFFF; 
font-weight: bold; /*ponto-e-vírgula é facultativo */ } 
*
*
SINTAXE:
p {text-align: right;color: #FF0000;}
p {
text-align: right; 
color: #FF0000;
}
MAIOR LEGIBILIDADE
*
*
SINTAXE:
h3 { 
font-family: "Comic Sans MS" 
}
h1, h2, h3, h4, h5, h6 {
color: #00FF00;
}
AGRUPAMENTO DE SELETORES
*
*
Vinculando Folhas de Estilo a Documentos
A folha de estilo externa é um arquivo separado do arquivo html e que tem a extensão .css
Objetivo: Aplicar a folha de estilo externa em várias páginas.
O arquivo css da folha de estilo externa deverá ser lincado ou importado ao documento HTML, dentro da tag <head> do documento. 
*
*
Vinculando Folhas de Estilo a Documentos
A sintaxe geral para lincar uma folha de estilo chamada estilo.css
<head>
...........
<link rel="stylesheet" type="text/css" href="estilo.css">
..........
</head>
body {background-color: beige}
h1 {color:blue; font-size:20pt}
hr {color:navy}
p {font-size:11pt; margin-left: 15px}
a:link     {color:green}
a:visited  {color:black}
a:hover    {color:red}
a:active   {color:yellow}
*
*
Vinculando Folhas de Estilo a Documentos
Uma folha de estilo é dita incorporada ou interna, quando as regras CSS estão declaradas no próprio documento HTML.
É ideal para ser aplicada a uma única página. Com uma folha de estilo incorporada ou interna, você pode mudar a aparência de somente um documento, aquele onde a folha de estilo esta incorporada.
As regras de estilo, válidas para o documento, são declaradas na seção <head> do documento com a tag de estilo <style>.
*
*
Vinculando Folhas de Estilo a Documentos
<html>
<head>
<title>Titulo da Página</title>
<style type="text/css">
p{
color: #FF0000;
}
</style> 
</head>
<body>
<p>Primeiro Parágrafo</p>
<p>Segundo Parágrafo</p>
</body>
</html>
*
*
Vinculando Folhas de Estilo a Documentos
<head>
...........
<style type="text/css">
<!--
body {
background: #000000; 
}
h3 {
color: #FF0000;
}
-->
</style>
...........
</head>
*
*
Vinculando Folhas de Estilo a Documentos
Uma folha de estilo é dita inline, quando as regras CSS estão declaradas dentro da tag do elemento HTML.
Um estilo inline só se aplica a um elemento HTML. Ele perde muitas das vantagens de folhas de estilo pois mistura o conteúdo com a apresentação. 
Use este método excepcionalmente, como quando quiser aplicar um estilo a uma única ocorrência de um elemento.
*
*
Vinculando Folhas de Estilo a Documentos
<p style="color:#000000; margin: 5px;">
Aqui um parágrafo de cor preta e com 5px nas 4 margens.
</p>
*
*
Vinculando Folhas de Estilo a Documentos
A prioridade para o efeito cascata
folha de estilo padrão do navegador do usuário
 folha de estilo do usuário
 folha de estilo do desenvolvedor
 estilo externo (importado ou linkado)
 estilo incorporado (definido na seção head do documento)
 estilo inline (dentro de um elemento HTML)
*
*
Vinculando Folhas de Estilo a Documentos
h2 {
color: #FFCC00;
text-align: center;
font: italic 9pt Verdana, Sans-serif;
}
Folha de Estilo Externa
h2 {
color: #FFCC00;
text-align: center;
font: italic 10pt Verdana, Sans-serif;
}
Folha de Estilo Interna
*
*
Se você comete um erro na sua escrita, as pessoas provavelmente julgarão tratar-se de um erro de datilografia, mas entenderão o que você quis dizer e não haverá prejuízo para o entendimento. 
Um pequeno deslize no HTML ou nas CSS, por outro lado, é uma história diferente. Algo aparentemente insignificante como uma vírgula ou uma aspas fora do lugar, pode fazer toda a diferença entre uma página funcionando ou não - isto dependerá do erro e de como o navegador tratará o erro. 
*
*
Editores de HTML geralmente vem com um checador de sintaxe embutido (ex: HomeSite , BBEdit, Dreamweaver ou GoLive)
Se você não possui um editor assim, poderá usar um validador online:
W3C - Validador HTML (http://validator.w3.org/)
W3C - Validador CSS (http://jigsaw.w3.org/css-validator/)
Você faz o upload de seu arquivo e obtém de imediato um relatório de erros ou de não existência de erros.
*
*
*
*
*
*
*
*
Strict é um conjunto de regras muito rígidas que definem o que pode e o que não pode ser escrito em HTML.
Transitional é um conjunto um pouco mais flexível e permite escrever algum HTML mais antigo e para algumas peculiaridades próprias de navegadores.
Frame Set não é muito usado nos dias atuais. Não temos nos utilizado do uso de 'frames' pois eles estão em desuso desde o aparecimento das CSS.
*
*
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.0
*
*
Sugestões de onde obter mais informações sobre o tema da aula...
*
*
http://www.maujor.com/
*
*
http://www.wpdfd.com/editorial/basics/index.html
*
*
*
*
*
*
*
*
*
*
*
*
*
Se ambas as páginas estiverem vinculadas ao documento, como há um conflito no tamanho das letras para <h2>, prevalecerá a folha interna e a letra de <h2> terá o tamanho igual a 10 pt.
*
*
*
*
*
*
*
*
*
*
*

Teste o Premium para desbloquear

Aproveite todos os benefícios por 3 dias sem pagar! 😉
Já tem cadastro?

Outros materiais