Aula4 PDF

Internet
Prof Rita de Cassia Gaieski

rita.gaieski@qi.edu.br
Aula 04
Revisando os contedos
Tag <meta>: fornece informaes sobre o documento, palavras-chaves, autor da

pgina, ltima atualizao, etc. Essas informaes no so mostradas na pgina, apenas
processadas pela mquina. Lembrando que as tags <meta> sempre devem ser colocadas
na seo <head>.
<meta charset="UTF-8"> caracteres e acentos.

<meta name="description" content="QI"> descrio da pgina.
<meta name="keywords" content="HTML,CSS,QI"> motores de busca,
informaes encontradas em seu ttulo e body.
<meta name="author" content="Rita Gaieski"> nome do autor da pgina.
Introduo ao CSS
CSS a abreviatura de Cascading Style Sheets, que significa folha de estilos em
Cascata.
O CSS uma linguagem que nos auxiliar a realizar a formatao dos estilos, layouts
das nossas pginas WEB. Mas o que isso quer dizer? Isso quer dizer que poderemos
alterar: tamanho e tipo de fontes, margens, espaamentos, cores, imagens, entre outras
coisas.
A linguagem CSS funciona atravs de regras com o principal objetivo de estilizar

visualmente o contedo HTML da pgina. Com as regras, podemos selecionar um ou
mais elementos em uma pgina e aplicar estilos de acordo. Uma regra formada de:
Um ou mais seletores;
Chaves: { e };
Declaraes: propriedade e valor (terminando a linha com ";").

Internet
Sintaxe CSS
O seletor normalmente o elemento HTML que se quer estilizar. No exemplo da

imagem acima, o elemento que receber o estilo ser o <h1> . J as declaraes, que
ficam dentro de chaves { }, consistem de uma propriedade e um valor. A propriedade
o atributo de estilo que ser alterado: color e font-size, no exemplo acima. O valor da
propriedade o que vai alterar, de fato, o elemento: blue e 12px. Toda declarao deve
ser encerrada com ponto-e-vrgula.
No exemplo de cdigo abaixo, por exemplo, o elemento est sendo estilizado: o atributo
color (cor do texto) recebeu o valor red (vermelho), e o atributo text-align (alinhamento
do texto) recebeu o valor center (centralizado).
Assim como no HTML, os comentrios no CSS so usados para explicar o cdigo, e

podem ser teis ao editar os estilos posteriormente. Os comentrios so ignorados pelos
navegadores e, no CSS, eles iniciam com /* e encerram com */.
Internet
SELETOR: o alvo da regra, o que define com preciso onde a regra ser aplicada, a
qual tag;
DECLARAO: a declarao compreende a propriedade e o valor;
PROPRIEDADE: defina a caracterstica do elemento, o que ser alterado;
VALOR: a qualificao da propriedade, qual cor, nmero...
Exemplo:
Importncia do CSS
Os estilos CSS resolveram um grande problema do desenvolvimento Web. Depois de a

tag<font> ter sido includa no HTML, os desenvolvedores passaram a aplicar cores,
tamanhos e diversos outros estilos aos textos das pginas. No entanto, como um site
pode conter muitas pginas, a alterao de cor de um texto que precisasse ser feita em
todo o site necessitava de manuteno em todas as pginas, gastando muito tempo.
(W3Schools, 2014). Para resolver esse e outros problemas, o W3C desenvolveu a
linguagem CSS, que pode conter todas as formataes do site em um nico arquivo de
estilos, facilitando o desenvolvimento e a manuteno de pginas Web.
Tipos de CSS: Importadas/linkadas, incorporadas e inline
Inline: o mais simples, aplica-se os elementos diretamente nas marcaes da

linguagem. Porm no nos traz vantagens em relao manutenes.
Internet
Exemplo:
Incorporados: Ficam juntamente com o HTML, porm no incio do cdigo.
Exemplo:
Internet
LINK ou EXTERNO: a mais usada atualmente. Uma folha de estilos externa

um simples arquivo de texto com a extenso .css na qual linkada ao arquivo.
Na pgina HTML dentro do < head> colocamos o link abaixo como exemplo:
Criando um exemplo de cada um, utilizando os cdigos acima estudados:

Internet

Aula4 PDF

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Aula4 PDF

Hochgeladen von

Copyright:

Verfügbare Formate

Internet

Prof Rita de Cassia Gaieski

Tag <meta>: fornece informaes sobre o documento, palavras-chaves, autor da

<meta charset="UTF-8"> caracteres e acentos.

A linguagem CSS funciona atravs de regras com o principal objetivo de estilizar

Declaraes: propriedade e valor (terminando a linha com ";").

O seletor normalmente o elemento HTML que se quer estilizar. No exemplo da

Assim como no HTML, os comentrios no CSS so usados para explicar o cdigo, e

DECLARAO: a declarao compreende a propriedade e o valor;

PROPRIEDADE: defina a caracterstica do elemento, o que ser alterado;

VALOR: a qualificao da propriedade, qual cor, nmero...

Os estilos CSS resolveram um grande problema do desenvolvimento Web. Depois de a

Tipos de CSS: Importadas/linkadas, incorporadas e inline

Inline: o mais simples, aplica-se os elementos diretamente nas marcaes da

Incorporados: Ficam juntamente com o HTML, porm no incio do cdigo.

LINK ou EXTERNO: a mais usada atualmente. Uma folha de estilos externa

Criando um exemplo de cada um, utilizando os cdigos acima estudados:

Das könnte Ihnen auch gefallen