SlideShare ist ein Scribd-Unternehmen logo
1 von 6
Downloaden Sie, um offline zu lesen
Cascading Style Sheets,[object Object],Folha de Estilo em cascata,[object Object],Folha de estilo em cascata é um mecanismo simples para adicionar estilos (p.ex., fontes, cores, espaçamentos) aos documentos Web.,[object Object],A grande vantagem do uso de CSS é a de separar a marcação HTML, da apresentação do site.,[object Object]
Introdução,[object Object],Sintaxe,[object Object],seletor {propriedade: valor; },[object Object],Seletor: é o elemento HTML, ex: <p> <h1>,[object Object],Propriedade: Atributo que será aplicado ao elemento HTML, ex: font, color, background.,[object Object],Valor: valor do atributo. Ex: letra tipo arial, cor azul.,[object Object],p { color: #FF0000; },[object Object]
Inserir CSS no HTML,[object Object],Inline – declarado no HTML ,[object Object],Ex: <p style=“color:#ff0000;”> Texto </p>,[object Object],Incorporadas – dentro do elemento <head>,[object Object],Ex: <head>...,[object Object],     <styletype=“text/css”>,[object Object],           p { color: #ff0000; },[object Object],     </style>   </head>,[object Object]
Inserir CSS no HTML,[object Object],Externo – Arquivo externo com a extensão .css,[object Object],Está é a melhor forma de se inserir CSS em um site,[object Object],Ex: <head>,[object Object],     <link rel=“stylesheet” type=“text/css” href=“estilos/principal.css” />,[object Object],     </head>,[object Object],     ...,[object Object]
HTML e CSS,[object Object],<html><head><title>HTML e CSS</title>,[object Object],<styletype=“text/css”>,[object Object],h1{ color: blue; },[object Object],body{ background-color: yellow; },[object Object],</style>,[object Object],</head><body>,[object Object],<h1>Este texto está com a cor azul</h1>,[object Object],</body></html>,[object Object]
Agrupamento de Seletor,[object Object],Possibilita agrupar seletores que possuam declarações idênticas.,[object Object],Ex:Aplicar a cor vermelha aos títulos <h1> até <h6>:,[object Object],H1,h2,h3,h4,h5,h6{color:#FF0000;},[object Object]

Weitere ähnliche Inhalte

Was ist angesagt? (13)

HTML - Listas, Estilos, Tabelas, Div, Span, Formulário
HTML -  Listas, Estilos, Tabelas, Div, Span, FormulárioHTML -  Listas, Estilos, Tabelas, Div, Span, Formulário
HTML - Listas, Estilos, Tabelas, Div, Span, Formulário
 
Dream 06
Dream 06Dream 06
Dream 06
 
CSS
CSSCSS
CSS
 
HTML - Introducao
HTML - Introducao HTML - Introducao
HTML - Introducao
 
Introdução CSS
Introdução CSSIntrodução CSS
Introdução CSS
 
Aula 11
Aula 11Aula 11
Aula 11
 
Aula 07
Aula 07Aula 07
Aula 07
 
Html com css
Html com cssHtml com css
Html com css
 
Introdução ao CSS
Introdução ao CSSIntrodução ao CSS
Introdução ao CSS
 
Folha de estilo css
Folha de estilo   cssFolha de estilo   css
Folha de estilo css
 
Técnicas e processos - HTML / CSS - aula 2
Técnicas e processos - HTML / CSS - aula 2Técnicas e processos - HTML / CSS - aula 2
Técnicas e processos - HTML / CSS - aula 2
 
Técnicas e processos - HTML / CSS - aula 5
Técnicas e processos - HTML / CSS - aula 5Técnicas e processos - HTML / CSS - aula 5
Técnicas e processos - HTML / CSS - aula 5
 
W3C Web Standards CSS
W3C Web Standards CSSW3C Web Standards CSS
W3C Web Standards CSS
 

Andere mochten auch (20)

4 herramientas
4 herramientas4 herramientas
4 herramientas
 
Triptico (3)
Triptico (3)Triptico (3)
Triptico (3)
 
Curso de power point
Curso de power pointCurso de power point
Curso de power point
 
Fase inicial de proyectos.
Fase inicial de proyectos.Fase inicial de proyectos.
Fase inicial de proyectos.
 
Qué es la naturaleza primera parte 2003
Qué es la naturaleza primera parte 2003Qué es la naturaleza primera parte 2003
Qué es la naturaleza primera parte 2003
 
Cineticaquimica
CineticaquimicaCineticaquimica
Cineticaquimica
 
Analregistros[2]
Analregistros[2]Analregistros[2]
Analregistros[2]
 
El ejemplo de japón
El ejemplo de japónEl ejemplo de japón
El ejemplo de japón
 
Felix cumpleaños...cristian
Felix cumpleaños...cristianFelix cumpleaños...cristian
Felix cumpleaños...cristian
 
Triptico y afiche
Triptico y aficheTriptico y afiche
Triptico y afiche
 
descubre como ganar dinero
descubre como ganar dinerodescubre como ganar dinero
descubre como ganar dinero
 
Trabajoyenergia4
Trabajoyenergia4Trabajoyenergia4
Trabajoyenergia4
 
Electricidad4
Electricidad4Electricidad4
Electricidad4
 
Barcelona
BarcelonaBarcelona
Barcelona
 
Casilla de verificacion[1]..
Casilla de verificacion[1]..Casilla de verificacion[1]..
Casilla de verificacion[1]..
 
Resolucin 1074 de 2011 licencia caaverales
Resolucin 1074 de 2011 licencia caaveralesResolucin 1074 de 2011 licencia caaverales
Resolucin 1074 de 2011 licencia caaverales
 
Resolução uerj
Resolução uerjResolução uerj
Resolução uerj
 
Historia colegio
Historia colegioHistoria colegio
Historia colegio
 
El orden anárquico del caos. nuevo.
El orden anárquico del caos. nuevo.El orden anárquico del caos. nuevo.
El orden anárquico del caos. nuevo.
 
Conectores
ConectoresConectores
Conectores
 

Ähnlich wie CSS - Parte 1

Ähnlich wie CSS - Parte 1 (20)

Introdução a desenvolvimento web
Introdução a desenvolvimento webIntrodução a desenvolvimento web
Introdução a desenvolvimento web
 
Academia Verão 2011 - HTML
Academia Verão 2011 - HTMLAcademia Verão 2011 - HTML
Academia Verão 2011 - HTML
 
Academia verao 2011 - HTML + CSS
Academia verao 2011 - HTML + CSSAcademia verao 2011 - HTML + CSS
Academia verao 2011 - HTML + CSS
 
W3 c
W3 cW3 c
W3 c
 
Desenvolvimento para a Internet - Aula 03
Desenvolvimento para a Internet - Aula 03Desenvolvimento para a Internet - Aula 03
Desenvolvimento para a Internet - Aula 03
 
Css completo(2)
Css   completo(2)Css   completo(2)
Css completo(2)
 
Css completo(2)
Css   completo(2)Css   completo(2)
Css completo(2)
 
HTML + CSS
HTML + CSSHTML + CSS
HTML + CSS
 
O que é html
O que é htmlO que é html
O que é 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
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
HTML
HTMLHTML
HTML
 
Htmlbasico
HtmlbasicoHtmlbasico
Htmlbasico
 
Introdução HTML_CSS.pptx
Introdução  HTML_CSS.pptxIntrodução  HTML_CSS.pptx
Introdução HTML_CSS.pptx
 
Css e iFrames
Css e iFramesCss e iFrames
Css e iFrames
 
Construindo layout de sites com CSS
Construindo layout de sites com CSSConstruindo layout de sites com CSS
Construindo layout de sites com CSS
 
Aula III HTML - Criação de Sites I
Aula III HTML - Criação de Sites IAula III HTML - Criação de Sites I
Aula III HTML - Criação de Sites I
 
Iniciação em css
Iniciação em cssIniciação em css
Iniciação em css
 
1ª aula php
1ª aula php1ª aula php
1ª aula php
 

CSS - Parte 1

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.