EDO0417_4

•

ESTÁCIO

Lania Sousa

31/10/2021

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Programação para Internet Rica

409 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

PROGRAMAÇÃO PARA INTERNET RICA - EDO0417
Semana Aula: 4
Fundamentos de CSS - Parte I
Tema
Fundamentos de CSS
Palavras-chave
Objetivos
Após esta aula o aluno estará apto para o trabalho com os padrões CSS.
Aplicar os recursos e tecnicas das folhas de estilo.
 
Controlar o layout de paginas web a partir de uma folha de estilos.
Estrutura de Conteúdo
CSS
 
Um Breve Histórico
 
À medida que o HTML foi se popularizando e evoluindo foram incluídas em suas 
características a capacidade de controlar algumas aparências para o documento. Isso 
fez com que a linguagem ficasse muito complexa, mais difícil para entender e 
manter.
Outro problema era que os browsers tinham diferentes implementações, o que 
dificultava a visualização dos sites, trazendo menos controle na navegação pela web.
 
Em 1994 Hakon Wium Lie, vendo toda essa dificuldade, resolveu criar um jeito mais 
fácil para formatar a informação em um site. Ele propôs a criação do CSS ou 
Cascading Style Sheets. Aceitando o convite feito pelo próprio Hakon, Bert Bos, que 
naquele tempo estava trabalhando em um browser chamado Argo – começou a 
trabalhar no projeto.
Os dois então trabalharam juntamente no começo do desenvolvimento do CSS.
Em 1995 eles apresentaram sua proposta e finalmente, o W3C – World Wide Web 
Consortium – que estava acabando de nascer, se interessou pelo projeto e resolveu 
criar uma equipe, obviamente liderada por Hakon e Bert Bos.
O resultado apareceu logo, em 1996, eles lançaram a recomendação oficial pelo W3C 
do CSS Level 1 (CSS 1).
Dois anos depois, no dia 12 de Maio de 1998, eles lançaram a recomendação do CSS 
de nível 2 (CSS 2). A segunda versão das Folhas de Estilo para web.
 
Cascading Style Sheets (CSS) é um moderno padrão para apresentação web. Quando 
combinado com uma linguagem de marcação como HTML, XHTML, XML (embora não 
se limitando a estes), fornece a informação para navegadores que lhes permite apresentar 
todos os aspectos visuais de um documento da web. 
 
 
CSS controla a apresentação de aspectos do Design de uma página web 
 
 
O que eu posso fazer com CSS?
 
CSS é uma linguagem para estilos que define a forma como os documentos HTML serão 
apresentados. 
Por exemplo, CSS controla fontes, cores, imagens de fundo, linhas, margens, alturas, 
larguras, posicionamentos e muito mais.
 
CSS é suportado por todos os navegadores atuais.
 
 
Quais são os benefícios do uso de CSS?
 
Os benefícios concretos do uso de CSS incluem:
 
 * Controle do layout de vários documentos a partir de uma folha de estilos;
 * Maior precisão no controle do layout;
 * Aplicação de diferentes layouts para servir diferentes mídias (tela, celular, 
impressora, etc.);
 * Emprego de técnicas avançadas de desenvolvimento.
 
Vinculando folhas de estilo a documentos
 
Os três tipos de vinculação de folhas de estilo
 
 1. Inline; 
 2. Incorporadas;
 3. Importadas ou Externa.
 
Folha de estilo inline
 
Em uma folha de estilo inline as regras CSS estão declaradas dentro da tag do elemento 
HTML.
 
Um estilo inline só se aplica a um elemento HTML. 
 
Ao trabalhar com CSS inline perdemos muitas das vantagens das folhas de estilo, pois 
este método mistura o conteúdo com a apresentação. Não é recomendada a utilização 
deste método, utilize excepcionalmente, quando quiser aplicar um estilo a uma única 
ocorrência de um elemento.
 
A sintaxe para aplicar estilo inline é mostrada a seguir:
 
<p style="color:#000000; margin: 5px;">
Aqui um parágrafo de cor preta e com 5px nas 4 margens.
</p> 
 
 
Folha de estilo incorporada ou interna
 
 Em uma folha de estilo é incorporada ou interna as regras CSS estão declaradas no 
próprio documento.
 
Uma folha de estilo interna é ideal para ser aplicada a um único documento. Com uma 
folha de estilo 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>
 
 
<head>
...........
<style type="text/css">
<!--
body {
background: #000000; 
url("imagens/minhaimagem.gif");
}
h3 {
color: #0000FF;
}
p {
margin-left: 20px; 
}
-->
</style>
...........
</head>
 
Folha de estilo Importadas
 
Em uma folha de estilo é importada ou externa as regras CSS estão declaradas em um 
arquivo a parte com a extensão .CSS. 
Uma folha de estilo externa é ideal para ser aplicada a várias páginas. Com uma folha 
de estilo externa, você pode mudar a aparência de um site inteiro mudando um único 
arquivo.
 
O arquivo css da folha de estilo externa deverá ser lincado ou importado ao documento 
HTML, dentro da tag <head> do documento. 
 
A sintaxe geral para lincar uma folha de estilo:
 
<head>
...........
<link rel="stylesheet" type="text/css" href="meu_estilo.css">
..........
</head>
 
A sintaxe geral para importar uma folha de estilo: 
 
<head>
...........
<style type="text/css">
@import url("meu_estilo.css");
</style>
..........
</head>
 
 
A regra CSS e sua sintaxe
 
Uma regra CSS é uma declaração que segue uma sintaxe própria e que define como será 
aplicado estilo a um ou mais elementos HTML. 
 
Um conjunto de regras CSS formam uma Folha de Estilos. 
 
Uma regra CSS, na sua forma mais elementar, compõe-se de três partes: 
 
um seletor, uma propriedade e um valor
 
 
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. 
 
Exemplos: 
<p>
<h1>
<form>
.minha_classe
 
 
Propriedade: 
É o atributo do elemento HTML ao qual será aplicada a regra.
 
Exemplos: 
font-size 
color
background
 
 
 
Valor: 
É a característica específica a ser assumida pela propriedade. 
 
Exemplo: 
tamanho da letra 12px
letra tipo verdana
cor verde
fundo azul
 
 
Observações:
 
Na sintaxe de uma regra CSS, escreve-se o seletor e a seguir a propriedade e valor 
separados por dois pontos e entre chaves { }. Quando mais de uma propriedade for 
definida na regra, deve-se usar ponto-e-vírgula para separá-las. O ponto-e-vírgula é 
facultativo no caso de propriedade única e também após a declaração da última 
propriedade no caso de mais de uma, contudo é uma boa prática usar sempre o ponto-e-
vírgula após cada regra para uma propriedade.
 
Para maior legibilidade das folhas de estilo, é de boa prática usar linhas distintas para 
escrever cada uma das declarações propriedade e seu valor. 
 
p{
text-align: left;
color: #0000FF;
}
 
Agrupamento de Seletores
 
Podemos agrupar vários seletores quando uma regra CSS for comum a eles, para isso, 
separe cada seletor com uma vírgula.
 
Exemplo: 
 
h1, h2, h3, h4, h5, h6 {
color: #0000FF;
}
 
Acima agrupamos todos os elementos cabeçalho e a propriedade cor terá o valor 
#0000FF (cor azul) para todos os cabeçalhos.
 
O seletor classe
 
Você pode definir as regras CSS através de um nome criando uma classe. As classes 
podem ser aplicadas a qualquer elemento HTML. 
 
É Possível aplicar estilos diferentes para o mesmo tipo de elemento, usando classes 
diferentes para cada um deles.
 
Sintaxe para o seletor classe: 
 
Elemento HTML .nome 
 
elemento HTML.minhaclasse { 
 propriedade: valor;
}
 
 
Exemplos:
 
 
<html>
 <head>
<style type="text/css">
<!--
 p.minhaCor { 
 color:#000000;
 } 
 
 p.outraCor { 
 color:#0000FF;
 }
-->
</style>
</head>
<body>
 
<p class ="minhaCor"> este parágrafo terá cor preta.</p>
 
<p class ="outraCor">
este parágrafo terá cor azul.
</p>
</body>
</html>
 
 
<html>
<head>
<style type="text/css">
<!--
 
a {
 color: blue;
}
 
a.whitewine {
 color: #FFBB00;
}
 
a.redwine {
 color: #800000;
}
 
-->
 
</style>
</head>
<body>
<p>Uvas para vinho branco:</p>
<ul>
<li><a href="ri.htm" class="whitewine">Riesling</a></li>
<li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li>
</ul>
 
<p>Uvas para vinho tinto:</p>
<ul>
<li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li>
<li><a href="me.htm"class="redwine">Merlot</a></li>
<li><a href="pn.htm" class="redwine">Pinot Noir</a></li>
</ul>
</body>
</html>
 
 
Ao criar uma classe você talvez queira que ela seja aplicável a qualquer elemento HTML. 
Neste caso basta que se omita o nome do elemento antes da classe. Por exemplo: a regra 
CSS a seguir pode ser aplicada a qualquer elemento HTML ao qual você deseja atribuir 
cor azul:
 
 .corAzul {
 color: #0000FF;
 }
 
No exemplo a seguir tanto o cabeçalho <h3> como o parágrafo <p> terão cor azul:
 
<h3 class="corAzul">
Este cabeçalho é azul.
</h2>
 
<p class="corAzul">
Este parágrafo é azul.
</p >
 
O seletor ID
 
Outra forma de definir as regras CSS é através do atributo ID. Uma ID só pode ser 
aplicada a UM elemento HTML. Para casos em que haja necessidade de mais de um 
elemento com a mesma identificação usamos o atributo class. 
 
O seletor ID segue a seguinte sintaxe: 
 
Símbolo # ("tralha, jogo da velha, cerquilha, Octothorpe , como você quiser chamar") + 
o nome que você desejar
 
#minhaID {
propriedade: valor;
 }
 
 
 
Exemplos:
 
...
#c1-2 {
 color: red;
}
...
 
<h1 id="c1">Capítulo 1</h1>
...
<h2 id="c1-1">Capítulo 1.1</h2>
http://pt.wikipedia.org/wiki/Cerquilha
...
<h2 id="c1-2">Capítulo 1.2</h2>
...
<h1 id="c2">Capítulo 2</h1>
...
<h2 id="c2-1">Capítulo 2.1</h2>
...
<h3 id="c2-1-2">Capítulo 2.1.2</h3>
...
 
 
 
Comentários
 
 
Podemos inserir comentários nas CSS para explicar seu código, e principalmente ajudar a 
relembrar de como estruturamos e qual a finalidade de partes importantes do código. 
 
O comentário introduzido no código, será ignorado pelo browser. Um comentário nas 
CSS começa com a combinação "/*", e termina com a combinação " */". 
 
exemplo:
 
/* isto é um comentário*/
p { 
font-size: 16px; /* isto é outro comentário*/
color: #00FF00;
font-family: Arial, Serif;
}
 
 
Fontes
 
As propriedades para as fontes definem as características das letras nos textos dentro 
dos elementos HTML.
 
Algumas das propriedades:
 
 * color:  cor da fonte
 * font-family:  tipo de fonte
 * font-size:  tamanho de fonte
 * font-style:  estilo de fonte
 * font-variant:  fontes maiúsculas de menor altura
 * font-weight:  quanto mais escura a fonte é (negrito)
 * font:  maneira abreviada para todas as propriedades
 
 
Valores 
 
 font-size:
 1. xx-small
 2. x-small
 3. small
 4. medium
 5. large
 6. x-large
 7. xx-large
 8. smaller
 9. larger
 10. length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)
 11. %
 
 
 font-style:
 1. normal: fonte normal na vertical
 2. italic: fonte inclinada
 3. oblique:fonte obliqua
 
 
 font-variant:
 1. normal: fonte normal
 2. small-caps: transforma em maiúsculas de menor altura
 
 * font-weight:
 1. normal
 2. bold
 3. bolder
 4. lighter
 5. 100
 6. 200
 7. 300
 8. 400
 9. 500
 10. 600
 11. 700
 12. 800
 13. 900
 
 
 
Estratégias de Aprendizagem
Indicação de Leitura Específica
Aplicação: articulação teoria e prática
Criar paginas XHTML com formatação através de folhas de estilo. 
 
Testar as formatações vistas durante a aula.
Considerações Adicionais