<ul><li>Conteúdo da aula: </li></ul><ul><ul><li>Tag DIV </li></ul></ul><ul><ul><li>Introdução ao CSS </li></ul></ul><ul><u...
<ul><li>O que é Tableless </li></ul><ul><li>  Em poucas palavras: um site tableless é um site que não utiliza tables para ...
<ul><li>Tag DIV </li></ul><ul><li>Definidor genérico de bloco para especificar idioma ou formatação associada ao estilo . ...
<ul><li>O que é CSS </li></ul><ul><li>A  Cascading Style Sheet (CSS)  é uma ferramenta utilizada para a construção da apar...
<ul><li>Sintaxe básica da linguagem CSS </li></ul><ul><ul><li>Regras </li></ul></ul><ul><ul><li>Regras CSS é uma declaraçã...
<ul><li>Sintaxe básica da linguagem CSS </li></ul><ul><ul><li>Seletor </li></ul></ul><ul><ul><li>Genericamente, é o elemen...
<ul><li>Exemplos </li></ul><ul><ul><li>Seletor é todo o documento ( body ), a propriedade é o fundo do documento( backgrou...
<ul><li>Comentários dentro das regras CSS </li></ul><ul><ul><li>Utilizamos os comentários para uma maior facilidade de int...
<ul><li>Vários seletores juntos </li></ul><ul><ul><li>Quando utilizarmos vários seletores juntos, separar com uma vírgula....
<ul><li>Seletor ID </li></ul><ul><ul><li>O seletor ID é único, podendo ser aplicado somente a um elemento HTML. Muito util...
<ul><li>Ligamento entre CSS e documentos </li></ul><ul><ul><li>As regras CSS podem ser ligadas a um documento de três mane...
<ul><li>CSS importado (externo) </li></ul><ul><li>As regras CSS são importadas quando estão declaradas em um documento à p...
<ul><li>CSS incorporado (interno) </li></ul><ul><li>É possível incorporar regras CSS declarando-as no próprio documento HT...
<ul><li>CSS incorporado (interno) </li></ul><ul><li><head> </li></ul><ul><li>... </li></ul><ul><li><style  type=“text/css”...
<ul><li>CSS inline </li></ul><ul><li>São regras declaradas dentro da tag do elemento HTML (aplica regras a apenas um eleme...
Próximos SlideShares
Carregando em…5
×

Aula3 - Curso Web-Design - ETECA Camargo Aranha

2.263 visualizações

Publicada em

Aula 3 do Curso de Web-design e Computação Gráfica da ETECA Camargo Aranha - São Paulo.

Professor Felipe Volpato

Publicada em: Educação
  • Seja o primeiro a comentar

Aula3 - Curso Web-Design - ETECA Camargo Aranha

  1. 2. <ul><li>Conteúdo da aula: </li></ul><ul><ul><li>Tag DIV </li></ul></ul><ul><ul><li>Introdução ao CSS </li></ul></ul><ul><ul><ul><li>Sintaxe básica </li></ul></ul></ul><ul><ul><ul><li>CSS inline </li></ul></ul></ul><ul><ul><ul><li>CSS Externo </li></ul></ul></ul><ul><ul><ul><li>CSS Interno </li></ul></ul></ul><ul><li>Montagem Projeto 0 – Spa Felicity </li></ul>
  2. 3. <ul><li>O que é Tableless </li></ul><ul><li> Em poucas palavras: um site tableless é um site que não utiliza tables para a estruturação do Layout. É um site que segue os Padrões Web. O termo “tableless” é usado mais largamente aqui no Brasil. Em outros países outros foram mais difundidos, por exemplo: CSS Layouts. </li></ul>Fonte: Site Tableless – www.tableless.com.br
  3. 4. <ul><li>Tag DIV </li></ul><ul><li>Definidor genérico de bloco para especificar idioma ou formatação associada ao estilo . </li></ul><ul><li>Atributos mais usados: </li></ul><ul><ul><li>class </li></ul></ul><ul><ul><li>Classe ou classes do elemento </li></ul></ul><ul><ul><li>id </li></ul></ul><ul><ul><li>Identificador único e exclusivo </li></ul></ul>Fonte: Guia de Referência Rápida XHTML / W3C
  4. 5. <ul><li>O que é CSS </li></ul><ul><li>A Cascading Style Sheet (CSS) é uma ferramenta utilizada para a construção da aparência de páginas para Web. Permite o uso de uma técnica diferente da convencional (HTML puro), possibilitando uma considerável redução no tempo de trabalho. </li></ul><ul><li>O recurso, que traduzido significa Folha de Estilo em Cascata , se tornou uma necesidade para quem deseja ser um bom webdeveloper e para quem quer criar qualquer projeto para Web. </li></ul>Fonte: Livro: Treinamento Prático em CSS – Ed. Digerati
  5. 6. <ul><li>Sintaxe básica da linguagem CSS </li></ul><ul><ul><li>Regras </li></ul></ul><ul><ul><li>Regras CSS é uma declaração com sintaxe própria, que indica como será aplicado um estilo a um ou mais elementos HTML. Ela é composta de três partes: um seletor, uma propriedade e um valor. </li></ul></ul><ul><ul><li>Sintaxe de uma regra: </li></ul></ul><ul><ul><li>seletor { </li></ul></ul><ul><ul><li>propriedade: valor; </li></ul></ul><ul><ul><li>} </li></ul></ul>Fonte: Livro: Treinamento Prático em CSS – Ed. Digerati
  6. 7. <ul><li>Sintaxe básica da linguagem CSS </li></ul><ul><ul><li>Seletor </li></ul></ul><ul><ul><li>Genericamente, é o elemento HTML identificado por sua tag, por uma classe ou por uma ID. </li></ul></ul><ul><ul><li>Exemplo: <p> , <h1>, .classe ou #id. </li></ul></ul><ul><ul><li>Propriedade </li></ul></ul><ul><ul><li>É o atributo do elemento HTML ao qual será aplicada a regra. </li></ul></ul><ul><ul><li>Exemplo: font, color e background. </li></ul></ul><ul><ul><li>Valor </li></ul></ul><ul><ul><li>É a característica a ser assumida pela parte propriedade. </li></ul></ul><ul><ul><li>Exemplo: fonte/letra tipo Arial, fundo preto, cor vermelha. </li></ul></ul>Fonte: Livro: Treinamento Prático em CSS – Ed. Digerati
  7. 8. <ul><li>Exemplos </li></ul><ul><ul><li>Seletor é todo o documento ( body ), a propriedade é o fundo do documento( background ) e o valor é a cor preta( #000000 ). </li></ul></ul><ul><ul><li>body { </li></ul></ul><ul><ul><li>background: #000000; </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>Para uma melhor leitura do código CSS, é aconselhável o uso de uma linha para escrever cada uma das declarações. Acrescentando a cor branca para fonte: </li></ul></ul><ul><ul><li>body { </li></ul></ul><ul><ul><li>background: #000000; </li></ul></ul><ul><ul><li>color: #FFFFFF; </li></ul></ul><ul><ul><li>} </li></ul></ul>Fonte: Livro: Treinamento Prático em CSS – Ed. Digerati
  8. 9. <ul><li>Comentários dentro das regras CSS </li></ul><ul><ul><li>Utilizamos os comentários para uma maior facilidade de interpretação do código escrito </li></ul></ul><ul><ul><li>Exemplo: </li></ul></ul><ul><ul><li>body { </li></ul></ul><ul><ul><li>background: #000000; /* Fundo na cor preta */ </li></ul></ul><ul><ul><li>color: #FFFFFF; /* Texto na cor branca */ </li></ul></ul><ul><ul><li>} </li></ul></ul>Fonte: Livro: Treinamento Prático em CSS – Ed. Digerati
  9. 10. <ul><li>Vários seletores juntos </li></ul><ul><ul><li>Quando utilizarmos vários seletores juntos, separar com uma vírgula. </li></ul></ul><ul><ul><li>Exemplo, todos os cabeçalhos na cor vermelha: </li></ul></ul><ul><ul><li>h1, h2, h3, h4, h5, h6 { </li></ul></ul><ul><ul><li>color: #FF0000; /* Texto na cor vermelha */ </li></ul></ul><ul><ul><li>} </li></ul></ul>Fonte: Livro: Treinamento Prático em CSS – Ed. Digerati
  10. 11. <ul><li>Seletor ID </li></ul><ul><ul><li>O seletor ID é único, podendo ser aplicado somente a um elemento HTML. Muito utilizado para identificar as DIVs. A sintaxe básica para o seletor ID é composta pelo nome precedido de cerquilha (#). </li></ul></ul><ul><ul><li>Exemplo, div topo com altura fixa em 39px: </li></ul></ul><ul><ul><li>#topo { </li></ul></ul><ul><ul><li>height: 39px; /* Altura do topo */ </li></ul></ul><ul><ul><li>} </li></ul></ul>Fonte: Livro: Treinamento Prático em CSS – Ed. Digerati
  11. 12. <ul><li>Ligamento entre CSS e documentos </li></ul><ul><ul><li>As regras CSS podem ser ligadas a um documento de três maneiras diferentes: </li></ul></ul><ul><ul><ul><li>Importadas (lincadas); </li></ul></ul></ul><ul><ul><ul><li>Incorporadas; </li></ul></ul></ul><ul><ul><ul><li>Inline. </li></ul></ul></ul>Fonte: Livro: Treinamento Prático em CSS – Ed. Digerati
  12. 13. <ul><li>CSS importado (externo) </li></ul><ul><li>As regras CSS são importadas quando estão declaradas em um documento à parte do documento HTML. A folha de estilo CSS é um arquivo que tem a extensão .css. A principal vantagem é utilizar o mesmo arquivo para mudar a aparência de várias páginas de um website. </li></ul><ul><li>O arquivo .css deverá ser vinculado ao documento HTML, dentro da tag <head>. </li></ul><ul><li><head> </li></ul><ul><li>... </li></ul><ul><li><link rel=“stylesheet” type=“text/css” href=“style.css”> </li></ul><ul><li>... </li></ul><ul><li></head> </li></ul>Fonte: Livro: Treinamento Prático em CSS – Ed. Digerati
  13. 14. <ul><li>CSS incorporado (interno) </li></ul><ul><li>É possível incorporar regras CSS declarando-as no próprio documento HTML. Esse tipo de procedimento serve para aplicar regras CSS a uma única página. </li></ul><ul><li>As regras CSS internas deverão ser declaradas na seção <head> do documento com a tag de estilo <style> </li></ul>Fonte: Livro: Treinamento Prático em CSS – Ed. Digerati
  14. 15. <ul><li>CSS incorporado (interno) </li></ul><ul><li><head> </li></ul><ul><li>... </li></ul><ul><li><style type=“text/css”> </li></ul><ul><li><!-- /* esse símbolo representa comentário em HTML */ </li></ul><ul><li>body{ </li></ul><ul><li>background: #00FF00; </li></ul><ul><li>} </li></ul><ul><li>--> </li></ul><ul><li></style> </li></ul><ul><li>... </li></ul><ul><li></head> </li></ul>Fonte: Livro: Treinamento Prático em CSS – Ed. Digerati
  15. 16. <ul><li>CSS inline </li></ul><ul><li>São regras declaradas dentro da tag do elemento HTML (aplica regras a apenas um elemento). </li></ul><ul><li><p style=“color:#CCCCCC; font-size: 14px;”> Aqui um parágrafo com a cor cinza e com letras tamanho 14 </li></ul><ul><li></p> </li></ul>Fonte: Livro: Treinamento Prático em CSS – Ed. Digerati

×