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

Mais conteúdo relacionado

PPT
Css – cascading style sheets
PDF
Css 3
PDF
Css cascading style sheet
PPTX
PDF
Internet I - Aula 04 - Coisando o HTML com o CSS
PPSX
CSS 3 - Aula 1
PDF
Slides Css3
PPT
Css3 - Aula 2
Css – cascading style sheets
Css 3
Css cascading style sheet
Internet I - Aula 04 - Coisando o HTML com o CSS
CSS 3 - Aula 1
Slides Css3
Css3 - Aula 2

Mais procurados (13)

PPTX
HTML - Listas, Estilos, Tabelas, Div, Span, Formulário
PPTX
PPTX
HTML - Introducao
PDF
PDF
Html com css
PPTX
Introdução ao CSS
PPS
Técnicas e processos - HTML / CSS - aula 2
PPS
Técnicas e processos - HTML / CSS - aula 5
PPSX
W3C Web Standards CSS
HTML - Listas, Estilos, Tabelas, Div, Span, Formulário
HTML - Introducao
Html com css
Introdução ao CSS
Técnicas e processos - HTML / CSS - aula 2
Técnicas e processos - HTML / CSS - aula 5
W3C Web Standards CSS
Anúncio

Destaque (20)

PPTX
4 herramientas
DOCX
Triptico (3)
PPTX
Curso de power point
PPTX
Fase inicial de proyectos.
PPS
Qué es la naturaleza primera parte 2003
PPT
Cineticaquimica
PPT
Analregistros[2]
PPS
El ejemplo de japón
PPTX
Felix cumpleaños...cristian
DOCX
Triptico y afiche
PPTX
descubre como ganar dinero
PPT
Trabajoyenergia4
PPT
Electricidad4
PPS
Barcelona
PPT
Casilla de verificacion[1]..
PDF
Resolucin 1074 de 2011 licencia caaverales
PPTX
Resolução uerj
PPTX
El orden anárquico del caos. nuevo.
DOC
Conectores
4 herramientas
Triptico (3)
Curso de power point
Fase inicial de proyectos.
Qué es la naturaleza primera parte 2003
Cineticaquimica
Analregistros[2]
El ejemplo de japón
Felix cumpleaños...cristian
Triptico y afiche
descubre como ganar dinero
Trabajoyenergia4
Electricidad4
Barcelona
Casilla de verificacion[1]..
Resolucin 1074 de 2011 licencia caaverales
Resolução uerj
El orden anárquico del caos. nuevo.
Conectores
Anúncio

Semelhante a CSS - Parte 1 (20)

PDF
PPTX
Desenvolvimento de sites css
PDF
2. Introdução ao CSSpptx.pdf
PPTX
Curso Desenvolvimento WEB com PHP - CSS
PDF
Material css parte I
PDF
Css tutorial
PDF
PDF
Aula 4 css
PDF
Apostila completa de css
PDF
Post 4
PPTX
14 CSS Introdução
PPT
Super CSS
PDF
CSS - IntroduçãoParaQuemEstaInciandoNaProgramacao.pdf
PDF
3844 css
PPTX
Aula 01 introdução css
DOCX
Aula 1 programação web i
DOCX
Aula 1 programação web i
PPT
Aula3 - Curso Web-Design - ETECA Camargo Aranha
PPTX
Aula 01 introdução css
Desenvolvimento de sites css
2. Introdução ao CSSpptx.pdf
Curso Desenvolvimento WEB com PHP - CSS
Material css parte I
Css tutorial
Aula 4 css
Apostila completa de css
Post 4
14 CSS Introdução
Super CSS
CSS - IntroduçãoParaQuemEstaInciandoNaProgramacao.pdf
3844 css
Aula 01 introdução css
Aula 1 programação web i
Aula 1 programação web i
Aula3 - Curso Web-Design - ETECA Camargo Aranha
Aula 01 introdução css

CSS - Parte 1

  • 1. Cascading Style SheetsFolha de Estilo em cascataFolha de estilo em cascata é um mecanismo simples para adicionar estilos (p.ex., fontes, cores, espaçamentos) aos documentos Web.A grande vantagem do uso de CSS é a de separar a marcação HTML, da apresentação do site.
  • 2. IntroduçãoSintaxeseletor {propriedade: valor; }Seletor: é o elemento HTML, ex: <p> <h1>Propriedade: Atributo que será aplicado ao elemento HTML, ex: font, color, background.Valor: valor do atributo. Ex: letra tipo arial, cor azul.p { color: #FF0000; }
  • 3. Inserir CSS no HTMLInline – declarado no HTML Ex: <p style=“color:#ff0000;”> Texto </p>Incorporadas – dentro do elemento <head>Ex: <head>... <styletype=“text/css”> p { color: #ff0000; } </style> </head>
  • 4. Inserir CSS no HTMLExterno – Arquivo externo com a extensão .cssEstá é a melhor forma de se inserir CSS em um siteEx: <head> <link rel=“stylesheet” type=“text/css” href=“estilos/principal.css” /> </head> ...
  • 5. HTML e CSS<html><head><title>HTML e CSS</title><styletype=“text/css”>h1{ color: blue; }body{ background-color: yellow; }</style></head><body><h1>Este texto está com a cor azul</h1></body></html>
  • 6. Agrupamento de SeletorPossibilita agrupar seletores que possuam declarações idênticas.Ex:Aplicar a cor vermelha aos títulos <h1> até <h6>:H1,h2,h3,h4,h5,h6{color:#FF0000;}