SlideShare une entreprise Scribd logo
1  sur  11
Télécharger pour lire hors ligne
Internet I
“Coisando” o HTML com o CSS
Prof. Manoel Afonso
O que é CSS? É pra temperar comida?
 CSS é a sigla de Cascade Style Sheet, folha de estilos em
cascata. É uma linguagem que aplica formatações de
estilo e de layout a documentos HTML.
 CSS é capaz de definir como os elementos HTML serão
exibidos na página.
 Assim com o HTML, você não programa em CSS;
Porque e como usar essa nova coisa?
 Porque:
 Depois de a tag <font> ter sido incluída no HTML, os desenvolvedores passaram a aplicar
cores, tamanhos e diversos outros estilos aos textos das páginas. No entanto, como um
site pode conter muitas páginas, a alteração de cor de um texto que precisasse ser feita
em todo o site necessitava de manutenção em todas as páginas, gastando muito tempo.
 Como:
 Assim como o HTML há diversos editores (IDEs) que trabalham com documentos CSS,
geralmente são os mesmos do HTML:
 Aptana Studio;
 Bloco de Notas;
 Notepad++;
Entendendo
 As declarações, 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.
E o código?
 No exemplo de código abaixo, por exemplo, o elemento <p> 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).
 O código CSS jamais irá conter tags. Os seletores referem-se apenas ao nome
da tag. O seletor p, por exemplo, referencia a tag <p>
Tipos de CSS
 Há, basicamente, três maneiras diferentes de inserir CSS a
uma página HTML:
 Código CSS inline;
 Código CSS interno;
 Arquivo CSS externo;
Código CSS inline
 Para aplicar estilos inline, utiliza-se o atributo style no
elemento que se pretende estilizar. Esse atributo pode
conter qualquer propriedade CSS, por exemplo:
Código CSS interno
 Códigos CSS internos devem ser declarados na seção <head> do arquivo
HTML utilizando a tag <style>
Arquivo CSS externo
 Os arquivos CSS externos são ideais para aplicar estilos a muitas páginas. Também são a
maneira mais correta de se desenvolver sites, pois seguem os Web Standards que
recomendam a separação de códigos.
 Para utilizar arquivos CSS externos em uma página HTML, o documento HTML deve conter um
link para o arquivo de estilos, utilizando a tag <link> na seção <head>
 O href está referenciando outro documento que está na mesma pasta que o nosso HTML;
Larga as dúvida ae pá nóis!
Exercícios
 1) Construa uma página HTML utilizando tudo que foi
mostrado na ultima aula para um dos itens:
 Sertanejo;
 Gospel;
 Heavy Metal;
 Rock;
 Pop;
 Reggae;
 PS: Sim, é para HOJE!

Contenu connexe

Tendances (13)

Desenvolvimento de sites css
Desenvolvimento de sites cssDesenvolvimento de sites css
Desenvolvimento de sites css
 
Aula 07
Aula 07Aula 07
Aula 07
 
Iniciação em HTML
Iniciação em HTMLIniciação em HTML
Iniciação em HTML
 
Curso HTML módulo 4 - Como buscar um elemento html e personalizá-lo
Curso HTML módulo 4 - Como buscar um elemento html e personalizá-loCurso HTML módulo 4 - Como buscar um elemento html e personalizá-lo
Curso HTML módulo 4 - Como buscar um elemento html e personalizá-lo
 
Css basico
Css basicoCss basico
Css basico
 
Sass
SassSass
Sass
 
Curso HTML módulo 3 - Conceitos básicos CSS
Curso HTML módulo 3 - Conceitos básicos CSSCurso HTML módulo 3 - Conceitos básicos CSS
Curso HTML módulo 3 - Conceitos básicos CSS
 
AULA - 1
AULA - 1AULA - 1
AULA - 1
 
Htmlbasico
HtmlbasicoHtmlbasico
Htmlbasico
 
Aula 1 programação web i
Aula 1   programação web iAula 1   programação web i
Aula 1 programação web i
 
Apresentaoword 100114113635-phpapp02
Apresentaoword 100114113635-phpapp02Apresentaoword 100114113635-phpapp02
Apresentaoword 100114113635-phpapp02
 
02 html - fontes e estilos
02 html  - fontes e estilos02 html  - fontes e estilos
02 html - fontes e estilos
 
Minicurso HTML
Minicurso HTMLMinicurso HTML
Minicurso HTML
 

En vedette

HTML & CSS - Aula 3
HTML & CSS - Aula 3 HTML & CSS - Aula 3
HTML & CSS - Aula 3 lucampos_si
 
Métodos de enseñanza para incentivar la creatividad docente
Métodos de enseñanza para incentivar la creatividad docenteMétodos de enseñanza para incentivar la creatividad docente
Métodos de enseñanza para incentivar la creatividad docenteandreastefy1993
 
Cavidades del corazon y sistema valvular del corazon
Cavidades del corazon y sistema valvular del corazonCavidades del corazon y sistema valvular del corazon
Cavidades del corazon y sistema valvular del corazonChrisTorres458
 
Beschikbaar Technisch en funktioneel SharePoint specialist
Beschikbaar Technisch en funktioneel SharePoint specialistBeschikbaar Technisch en funktioneel SharePoint specialist
Beschikbaar Technisch en funktioneel SharePoint specialistMarc Servaes (06-47841367)
 
12741 20080111105342-walter turma-51___2008-_caminhos_para_o_desenvolvimento_...
12741 20080111105342-walter turma-51___2008-_caminhos_para_o_desenvolvimento_...12741 20080111105342-walter turma-51___2008-_caminhos_para_o_desenvolvimento_...
12741 20080111105342-walter turma-51___2008-_caminhos_para_o_desenvolvimento_...Camilaazul2
 
At tin-161130084341-161216020200
At tin-161130084341-161216020200At tin-161130084341-161216020200
At tin-161130084341-161216020200amirulmuminin9
 
El calentamiento global
El calentamiento globalEl calentamiento global
El calentamiento globalsilvi23
 
4. expresion de emociones metapsc
4. expresion de emociones  metapsc4. expresion de emociones  metapsc
4. expresion de emociones metapscVAV_700
 

En vedette (12)

HTML & CSS - Aula 3
HTML & CSS - Aula 3 HTML & CSS - Aula 3
HTML & CSS - Aula 3
 
Métodos de enseñanza para incentivar la creatividad docente
Métodos de enseñanza para incentivar la creatividad docenteMétodos de enseñanza para incentivar la creatividad docente
Métodos de enseñanza para incentivar la creatividad docente
 
Cavidades del corazon y sistema valvular del corazon
Cavidades del corazon y sistema valvular del corazonCavidades del corazon y sistema valvular del corazon
Cavidades del corazon y sistema valvular del corazon
 
Inauguration of the Mining Implementation and Strategy Team (MIST)
 Inauguration of the Mining Implementation and Strategy Team (MIST) Inauguration of the Mining Implementation and Strategy Team (MIST)
Inauguration of the Mining Implementation and Strategy Team (MIST)
 
Microsoft Windows 8
Microsoft Windows 8Microsoft Windows 8
Microsoft Windows 8
 
Beschikbaar Technisch en funktioneel SharePoint specialist
Beschikbaar Technisch en funktioneel SharePoint specialistBeschikbaar Technisch en funktioneel SharePoint specialist
Beschikbaar Technisch en funktioneel SharePoint specialist
 
12741 20080111105342-walter turma-51___2008-_caminhos_para_o_desenvolvimento_...
12741 20080111105342-walter turma-51___2008-_caminhos_para_o_desenvolvimento_...12741 20080111105342-walter turma-51___2008-_caminhos_para_o_desenvolvimento_...
12741 20080111105342-walter turma-51___2008-_caminhos_para_o_desenvolvimento_...
 
At tin-161130084341-161216020200
At tin-161130084341-161216020200At tin-161130084341-161216020200
At tin-161130084341-161216020200
 
Programación lineal
Programación linealProgramación lineal
Programación lineal
 
El calentamiento global
El calentamiento globalEl calentamiento global
El calentamiento global
 
4. expresion de emociones metapsc
4. expresion de emociones  metapsc4. expresion de emociones  metapsc
4. expresion de emociones metapsc
 
Combination therapy
Combination therapyCombination therapy
Combination therapy
 

Similaire à Internet I - Aula 04 - Coisando o HTML com o CSS

Aula3 - Curso Web-Design - ETECA Camargo Aranha
Aula3 - Curso Web-Design - ETECA Camargo Aranha Aula3 - Curso Web-Design - ETECA Camargo Aranha
Aula3 - Curso Web-Design - ETECA Camargo Aranha fevooduck
 
Curso de css3 unidade 1 - introdução ao css
Curso de css3   unidade 1 - introdução ao cssCurso de css3   unidade 1 - introdução ao css
Curso de css3 unidade 1 - introdução ao cssLéo Dias
 
Apostila completa de css
Apostila completa de cssApostila completa de css
Apostila completa de cssHeitor Victorio
 
Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSS
Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSSMódulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSS
Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSSAgrupamento de Escolas da Batalha
 
Aula 1 programação web i
Aula 1   programação web iAula 1   programação web i
Aula 1 programação web iEliene Resende
 
Aula02 Desenvolvimento em Ambiente Web - CSS 3
Aula02 Desenvolvimento em Ambiente Web - CSS 3Aula02 Desenvolvimento em Ambiente Web - CSS 3
Aula02 Desenvolvimento em Ambiente Web - CSS 3Messias Batista
 
DSI-PARTE 5 formação de websites e programas .pdf
DSI-PARTE 5 formação de websites e programas .pdfDSI-PARTE 5 formação de websites e programas .pdf
DSI-PARTE 5 formação de websites e programas .pdfthallyssonedu1209199
 
Css – cascading style sheets
Css – cascading style sheetsCss – cascading style sheets
Css – cascading style sheetsDenise Lima
 

Similaire à Internet I - Aula 04 - Coisando o HTML com o CSS (20)

W3C Web Standards CSS
W3C Web Standards CSSW3C Web Standards CSS
W3C Web Standards CSS
 
Css e iFrames
Css e iFramesCss e iFrames
Css e iFrames
 
Aula3 - Curso Web-Design - ETECA Camargo Aranha
Aula3 - Curso Web-Design - ETECA Camargo Aranha Aula3 - Curso Web-Design - ETECA Camargo Aranha
Aula3 - Curso Web-Design - ETECA Camargo Aranha
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
 
Folha de estilo css
Folha de estilo   cssFolha de estilo   css
Folha de estilo css
 
Css completo(2)
Css   completo(2)Css   completo(2)
Css completo(2)
 
Css completo(2)
Css   completo(2)Css   completo(2)
Css completo(2)
 
Curso de css3 unidade 1 - introdução ao css
Curso de css3   unidade 1 - introdução ao cssCurso de css3   unidade 1 - introdução ao css
Curso de css3 unidade 1 - introdução ao css
 
Css Aula 1
Css   Aula 1Css   Aula 1
Css Aula 1
 
Curso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSSCurso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSS
 
Apostila completa de css
Apostila completa de cssApostila completa de css
Apostila completa de css
 
Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSS
Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSSMódulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSS
Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSS
 
Aula 07 Css - Parte 1
Aula 07   Css - Parte 1Aula 07   Css - Parte 1
Aula 07 Css - Parte 1
 
CSS Mastigado
CSS MastigadoCSS Mastigado
CSS Mastigado
 
Tutorial Css Parte 1
Tutorial Css  Parte 1Tutorial Css  Parte 1
Tutorial Css Parte 1
 
Aula 1 programação web i
Aula 1   programação web iAula 1   programação web i
Aula 1 programação web i
 
Aw aula 04
Aw aula 04Aw aula 04
Aw aula 04
 
Aula02 Desenvolvimento em Ambiente Web - CSS 3
Aula02 Desenvolvimento em Ambiente Web - CSS 3Aula02 Desenvolvimento em Ambiente Web - CSS 3
Aula02 Desenvolvimento em Ambiente Web - CSS 3
 
DSI-PARTE 5 formação de websites e programas .pdf
DSI-PARTE 5 formação de websites e programas .pdfDSI-PARTE 5 formação de websites e programas .pdf
DSI-PARTE 5 formação de websites e programas .pdf
 
Css – cascading style sheets
Css – cascading style sheetsCss – cascading style sheets
Css – cascading style sheets
 

Plus de Manoel Afonso

Servidores 03 - Hyper V
Servidores 03 - Hyper VServidores 03 - Hyper V
Servidores 03 - Hyper VManoel Afonso
 
Servidores 02 - Sistemas de arquivos
Servidores 02 - Sistemas de arquivosServidores 02 - Sistemas de arquivos
Servidores 02 - Sistemas de arquivosManoel Afonso
 
Servidores 01 - Servidores web
Servidores 01 - Servidores webServidores 01 - Servidores web
Servidores 01 - Servidores webManoel Afonso
 
Inglês Técnico - Aula 04 - Friends in Plural!
Inglês Técnico - Aula 04 - Friends in Plural!Inglês Técnico - Aula 04 - Friends in Plural!
Inglês Técnico - Aula 04 - Friends in Plural!Manoel Afonso
 
Banco de Dados I - Aula 02 - Entidades e Relacionamentos!
Banco de Dados I - Aula 02 - Entidades e Relacionamentos!Banco de Dados I - Aula 02 - Entidades e Relacionamentos!
Banco de Dados I - Aula 02 - Entidades e Relacionamentos!Manoel Afonso
 
Inglês Técnico - Aula 02 - Skimming!
Inglês Técnico - Aula 02 - Skimming!Inglês Técnico - Aula 02 - Skimming!
Inglês Técnico - Aula 02 - Skimming!Manoel Afonso
 
Inglês Técnico - Aula 01 - Welcome to sua aula of English
Inglês Técnico - Aula 01 - Welcome to sua aula of EnglishInglês Técnico - Aula 01 - Welcome to sua aula of English
Inglês Técnico - Aula 01 - Welcome to sua aula of EnglishManoel Afonso
 
Banco de dados I - Aula 01 - Guardando Tudo no Armário
Banco de dados I - Aula 01 - Guardando Tudo no ArmárioBanco de dados I - Aula 01 - Guardando Tudo no Armário
Banco de dados I - Aula 01 - Guardando Tudo no ArmárioManoel Afonso
 
Internet I - Aula 08 - Intercâmbio de Dados
Internet I - Aula 08 - Intercâmbio de DadosInternet I - Aula 08 - Intercâmbio de Dados
Internet I - Aula 08 - Intercâmbio de DadosManoel Afonso
 
Automação de Escritório - Aula 07 - Gerações
Automação de Escritório - Aula 07 - GeraçõesAutomação de Escritório - Aula 07 - Gerações
Automação de Escritório - Aula 07 - GeraçõesManoel Afonso
 
Internet I - Aula 07 - Primeiros Passos com JavaScript
Internet I - Aula 07 - Primeiros Passos com JavaScriptInternet I - Aula 07 - Primeiros Passos com JavaScript
Internet I - Aula 07 - Primeiros Passos com JavaScriptManoel Afonso
 
Internet I - Aula 06 - Formulários
Internet I - Aula 06 - FormuláriosInternet I - Aula 06 - Formulários
Internet I - Aula 06 - FormuláriosManoel Afonso
 
Automação de Escritório - Aula 06 - Ergonomia
Automação de Escritório - Aula 06 - ErgonomiaAutomação de Escritório - Aula 06 - Ergonomia
Automação de Escritório - Aula 06 - ErgonomiaManoel Afonso
 
Internet I - Aula 05 - Primeiro App FireFox OS!
Internet I - Aula 05 - Primeiro App FireFox OS!Internet I - Aula 05 - Primeiro App FireFox OS!
Internet I - Aula 05 - Primeiro App FireFox OS!Manoel Afonso
 
Automação de Escritório - Aula 03 - As Influências do Novo Mundo
Automação de Escritório - Aula 03 - As Influências do Novo MundoAutomação de Escritório - Aula 03 - As Influências do Novo Mundo
Automação de Escritório - Aula 03 - As Influências do Novo MundoManoel Afonso
 
Internet I - Aula 03 - O Maravilhoso Mundo do HTML
Internet I - Aula 03 - O Maravilhoso Mundo do HTMLInternet I - Aula 03 - O Maravilhoso Mundo do HTML
Internet I - Aula 03 - O Maravilhoso Mundo do HTMLManoel Afonso
 

Plus de Manoel Afonso (17)

Servidores 03 - Hyper V
Servidores 03 - Hyper VServidores 03 - Hyper V
Servidores 03 - Hyper V
 
Servidores 02 - Sistemas de arquivos
Servidores 02 - Sistemas de arquivosServidores 02 - Sistemas de arquivos
Servidores 02 - Sistemas de arquivos
 
Servidores 01 - Servidores web
Servidores 01 - Servidores webServidores 01 - Servidores web
Servidores 01 - Servidores web
 
Android - Aula 01
Android - Aula 01Android - Aula 01
Android - Aula 01
 
Inglês Técnico - Aula 04 - Friends in Plural!
Inglês Técnico - Aula 04 - Friends in Plural!Inglês Técnico - Aula 04 - Friends in Plural!
Inglês Técnico - Aula 04 - Friends in Plural!
 
Banco de Dados I - Aula 02 - Entidades e Relacionamentos!
Banco de Dados I - Aula 02 - Entidades e Relacionamentos!Banco de Dados I - Aula 02 - Entidades e Relacionamentos!
Banco de Dados I - Aula 02 - Entidades e Relacionamentos!
 
Inglês Técnico - Aula 02 - Skimming!
Inglês Técnico - Aula 02 - Skimming!Inglês Técnico - Aula 02 - Skimming!
Inglês Técnico - Aula 02 - Skimming!
 
Inglês Técnico - Aula 01 - Welcome to sua aula of English
Inglês Técnico - Aula 01 - Welcome to sua aula of EnglishInglês Técnico - Aula 01 - Welcome to sua aula of English
Inglês Técnico - Aula 01 - Welcome to sua aula of English
 
Banco de dados I - Aula 01 - Guardando Tudo no Armário
Banco de dados I - Aula 01 - Guardando Tudo no ArmárioBanco de dados I - Aula 01 - Guardando Tudo no Armário
Banco de dados I - Aula 01 - Guardando Tudo no Armário
 
Internet I - Aula 08 - Intercâmbio de Dados
Internet I - Aula 08 - Intercâmbio de DadosInternet I - Aula 08 - Intercâmbio de Dados
Internet I - Aula 08 - Intercâmbio de Dados
 
Automação de Escritório - Aula 07 - Gerações
Automação de Escritório - Aula 07 - GeraçõesAutomação de Escritório - Aula 07 - Gerações
Automação de Escritório - Aula 07 - Gerações
 
Internet I - Aula 07 - Primeiros Passos com JavaScript
Internet I - Aula 07 - Primeiros Passos com JavaScriptInternet I - Aula 07 - Primeiros Passos com JavaScript
Internet I - Aula 07 - Primeiros Passos com JavaScript
 
Internet I - Aula 06 - Formulários
Internet I - Aula 06 - FormuláriosInternet I - Aula 06 - Formulários
Internet I - Aula 06 - Formulários
 
Automação de Escritório - Aula 06 - Ergonomia
Automação de Escritório - Aula 06 - ErgonomiaAutomação de Escritório - Aula 06 - Ergonomia
Automação de Escritório - Aula 06 - Ergonomia
 
Internet I - Aula 05 - Primeiro App FireFox OS!
Internet I - Aula 05 - Primeiro App FireFox OS!Internet I - Aula 05 - Primeiro App FireFox OS!
Internet I - Aula 05 - Primeiro App FireFox OS!
 
Automação de Escritório - Aula 03 - As Influências do Novo Mundo
Automação de Escritório - Aula 03 - As Influências do Novo MundoAutomação de Escritório - Aula 03 - As Influências do Novo Mundo
Automação de Escritório - Aula 03 - As Influências do Novo Mundo
 
Internet I - Aula 03 - O Maravilhoso Mundo do HTML
Internet I - Aula 03 - O Maravilhoso Mundo do HTMLInternet I - Aula 03 - O Maravilhoso Mundo do HTML
Internet I - Aula 03 - O Maravilhoso Mundo do HTML
 

Internet I - Aula 04 - Coisando o HTML com o CSS

  • 1. Internet I “Coisando” o HTML com o CSS Prof. Manoel Afonso
  • 2. O que é CSS? É pra temperar comida?  CSS é a sigla de Cascade Style Sheet, folha de estilos em cascata. É uma linguagem que aplica formatações de estilo e de layout a documentos HTML.  CSS é capaz de definir como os elementos HTML serão exibidos na página.  Assim com o HTML, você não programa em CSS;
  • 3. Porque e como usar essa nova coisa?  Porque:  Depois de a tag <font> ter sido incluída no HTML, os desenvolvedores passaram a aplicar cores, tamanhos e diversos outros estilos aos textos das páginas. No entanto, como um site pode conter muitas páginas, a alteração de cor de um texto que precisasse ser feita em todo o site necessitava de manutenção em todas as páginas, gastando muito tempo.  Como:  Assim como o HTML há diversos editores (IDEs) que trabalham com documentos CSS, geralmente são os mesmos do HTML:  Aptana Studio;  Bloco de Notas;  Notepad++;
  • 4. Entendendo  As declarações, 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.
  • 5. E o código?  No exemplo de código abaixo, por exemplo, o elemento <p> 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).  O código CSS jamais irá conter tags. Os seletores referem-se apenas ao nome da tag. O seletor p, por exemplo, referencia a tag <p>
  • 6. Tipos de CSS  Há, basicamente, três maneiras diferentes de inserir CSS a uma página HTML:  Código CSS inline;  Código CSS interno;  Arquivo CSS externo;
  • 7. Código CSS inline  Para aplicar estilos inline, utiliza-se o atributo style no elemento que se pretende estilizar. Esse atributo pode conter qualquer propriedade CSS, por exemplo:
  • 8. Código CSS interno  Códigos CSS internos devem ser declarados na seção <head> do arquivo HTML utilizando a tag <style>
  • 9. Arquivo CSS externo  Os arquivos CSS externos são ideais para aplicar estilos a muitas páginas. Também são a maneira mais correta de se desenvolver sites, pois seguem os Web Standards que recomendam a separação de códigos.  Para utilizar arquivos CSS externos em uma página HTML, o documento HTML deve conter um link para o arquivo de estilos, utilizando a tag <link> na seção <head>  O href está referenciando outro documento que está na mesma pasta que o nosso HTML;
  • 10. Larga as dúvida ae pá nóis!
  • 11. Exercícios  1) Construa uma página HTML utilizando tudo que foi mostrado na ultima aula para um dos itens:  Sertanejo;  Gospel;  Heavy Metal;  Rock;  Pop;  Reggae;  PS: Sim, é para HOJE!