SlideShare uma empresa Scribd logo
1 de 3
Baixar para ler offline
O que é CSS
O Cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir
a apresentação (aparência) em páginas da internet que adotam para o seu desenvolvimento linguagens
de marcação (como XML, HTML e XHTML). O CSS define como serão exibidos os elementos contidos
no código de uma página da internet e sua maior vantagem é efetuar a separação entre o formato e o
conteúdo de um documento.
Fonte: TECMUNDO
LINK: http://www.tecmundo.com.br/programacao/2705-o-que-e-css-.htm
Formas de utilização (Externo, embutido, inline)
Externo - Existem 3 maneiras de colocarmos configurações de cores, fontes, tamanhos e outros em CSS
para usarmos uma delas e a referencia do CSS como arquivo externo.
<link rel="stylesheet" type="text/css" href="arquivo.css" />
Embutido – Comando CSS fica dentro da página HTML. Permite que a página fique dentro de outra
página.
<style type="text/css">
a
{
background: #ff9;
color: #00f;
text-decoration: underline;
}
</style>
Inline – Possibilita que só aquele elemento seja estabilizado.
<p style="border-style: groove; color: red;">
Copyright 2007
</p>
Tipos de Seletores (elemento HTML,Id ou Classe)
Elemento HTML - Seletor universal ou seja qualquer elemento.
*{
color: #000000;
}
Aplicável a todos os elementos
ID - Seleciona o elemento <e> identificado com id.
h1#chapter1 {
text-align: center;
}
<e id="Id"... />
Classe – Seletor de classe: seleciona os alementos <e> em que se aplicou a “classe”.
h1.pastoral {
color: green;
}
<e class="classe"... />
Sintaxe
@import "folha.css" tipo-midia;
/* Comentários */
@media tipo-midia {
seletor {
Propriedade: valor(es);
}
};
Unidades
Relativas
Px – Tamanho de pixels (relativo ao dispositivo)
Em – Tamanho relativo à fonte utilizada no elemento ao qual está inserido
Ex – Corresponde à altura da fonte ‘x’
Absolutas
In – Polegadas (1 polegada=2,54 cm)
Cm – Centímetros
Mm – Milímetros
Pt – pontos (1pt=1/72 polegadas)
Pc – Picas (1 pica=12 pontos)
Porcentagem
% - Porcentagem
0 – Valor ‘0’ não requer atribuição de unidade

Mais conteúdo relacionado

Mais procurados (19)

Introdução ao CSS
Introdução ao CSSIntrodução ao CSS
Introdução ao CSS
 
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
 
Introdução CSS
Introdução CSSIntrodução CSS
Introdução CSS
 
Material css parte I
Material css parte IMaterial css parte I
Material css parte I
 
Propriedades css e propriedades de fontes de texto
Propriedades css e propriedades de fontes de texto Propriedades css e propriedades de fontes de texto
Propriedades css e propriedades de fontes de texto
 
Aula 11
Aula 11Aula 11
Aula 11
 
Minicurso CSS: Definição e aplicação
Minicurso CSS: Definição e aplicaçãoMinicurso CSS: Definição e aplicação
Minicurso CSS: Definição e aplicação
 
Css completo(2)
Css   completo(2)Css   completo(2)
Css completo(2)
 
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
 
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
 
Endnote Web
Endnote WebEndnote Web
Endnote Web
 
CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012
CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012
CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012
 
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativosModular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
 
Aula 01 introdução css
Aula 01 introdução cssAula 01 introdução css
Aula 01 introdução css
 
Folha de estilo css
Folha de estilo   cssFolha de estilo   css
Folha de estilo css
 
Css cascading style sheet
Css cascading style sheetCss cascading style sheet
Css cascading style sheet
 
CSS 3 - Aula 1
CSS 3 - Aula 1CSS 3 - Aula 1
CSS 3 - Aula 1
 
Introdução ao CSS
Introdução ao CSSIntrodução ao CSS
Introdução ao CSS
 

Destaque

Trabajocreatividad
TrabajocreatividadTrabajocreatividad
Trabajocreatividadunomascinco
 
Diada Teleco 29 09 09
Diada Teleco 29 09 09Diada Teleco 29 09 09
Diada Teleco 29 09 09muriel sebas
 
Double page spread
Double page spreadDouble page spread
Double page spreadThomas-93
 
Multiculturalism_Presentation
Multiculturalism_PresentationMulticulturalism_Presentation
Multiculturalism_PresentationSoHyun Bonnie Lim
 
Estrategia Marketing En Nube Social
Estrategia Marketing En Nube SocialEstrategia Marketing En Nube Social
Estrategia Marketing En Nube SocialRafael Bonnelly
 
Aula abierta específica de alumnos con TEA - Miguel Ángel Escobar Solano. (CP...
Aula abierta específica de alumnos con TEA - Miguel Ángel Escobar Solano. (CP...Aula abierta específica de alumnos con TEA - Miguel Ángel Escobar Solano. (CP...
Aula abierta específica de alumnos con TEA - Miguel Ángel Escobar Solano. (CP...davidpastorcalle
 

Destaque (7)

Trabajocreatividad
TrabajocreatividadTrabajocreatividad
Trabajocreatividad
 
Diada Teleco 29 09 09
Diada Teleco 29 09 09Diada Teleco 29 09 09
Diada Teleco 29 09 09
 
Double page spread
Double page spreadDouble page spread
Double page spread
 
Software
SoftwareSoftware
Software
 
Multiculturalism_Presentation
Multiculturalism_PresentationMulticulturalism_Presentation
Multiculturalism_Presentation
 
Estrategia Marketing En Nube Social
Estrategia Marketing En Nube SocialEstrategia Marketing En Nube Social
Estrategia Marketing En Nube Social
 
Aula abierta específica de alumnos con TEA - Miguel Ángel Escobar Solano. (CP...
Aula abierta específica de alumnos con TEA - Miguel Ángel Escobar Solano. (CP...Aula abierta específica de alumnos con TEA - Miguel Ángel Escobar Solano. (CP...
Aula abierta específica de alumnos con TEA - Miguel Ángel Escobar Solano. (CP...
 

Semelhante a Aula 4 - VISÃO GERAL CSS

Aula 4 e 5 css e java script
Aula 4 e 5   css e java scriptAula 4 e 5   css e java script
Aula 4 e 5 css e java scriptandreluizlc
 
Introdução a Wordpress - David Arty - SENAC
Introdução a Wordpress - David Arty - SENACIntrodução a Wordpress - David Arty - SENAC
Introdução a Wordpress - David Arty - SENACDavid Arty
 
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
 
Desenvolvimento Web 03 - David Arty - SENAC
Desenvolvimento Web 03 - David Arty - SENACDesenvolvimento Web 03 - David Arty - SENAC
Desenvolvimento Web 03 - David Arty - SENACDavid Arty
 
Internet I - Aula 04 - Coisando o HTML com o CSS
Internet I - Aula 04 - Coisando o HTML com o CSSInternet I - Aula 04 - Coisando o HTML com o CSS
Internet I - Aula 04 - Coisando o HTML com o CSSManoel Afonso
 
Desenvolvimento Web 01 - David Arty - SENAC
Desenvolvimento Web 01 - David Arty - SENACDesenvolvimento Web 01 - David Arty - SENAC
Desenvolvimento Web 01 - David Arty - SENACDavid Arty
 
Desenvolvimento Web 02 - David Arty - SENAC
Desenvolvimento Web 02 - David Arty - SENACDesenvolvimento Web 02 - David Arty - SENAC
Desenvolvimento Web 02 - David Arty - SENACDavid Arty
 
Apostila completa de css
Apostila completa de cssApostila completa de css
Apostila completa de cssHeitor Victorio
 
2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdfRubenManhia
 
Aula 1 programação web i
Aula 1   programação web iAula 1   programação web i
Aula 1 programação web iEliene Resende
 
Aula 1 programação web i
Aula 1   programação web iAula 1   programação web i
Aula 1 programação web iEliene Resende
 
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
 

Semelhante a Aula 4 - VISÃO GERAL CSS (20)

Post 4
Post   4Post   4
Post 4
 
Aula 4 e 5 css e java script
Aula 4 e 5   css e java scriptAula 4 e 5   css e java script
Aula 4 e 5 css e java script
 
Introdução a Wordpress - David Arty - SENAC
Introdução a Wordpress - David Arty - SENACIntrodução a Wordpress - David Arty - SENAC
Introdução a Wordpress - David Arty - SENAC
 
W3C Web Standards CSS
W3C Web Standards CSSW3C Web Standards CSS
W3C Web Standards CSS
 
Aula 07
Aula 07Aula 07
Aula 07
 
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
 
Aula 07
Aula 07Aula 07
Aula 07
 
14 CSS Introdução
14 CSS Introdução14 CSS Introdução
14 CSS Introdução
 
Desenvolvimento Web 03 - David Arty - SENAC
Desenvolvimento Web 03 - David Arty - SENACDesenvolvimento Web 03 - David Arty - SENAC
Desenvolvimento Web 03 - David Arty - SENAC
 
Internet I - Aula 04 - Coisando o HTML com o CSS
Internet I - Aula 04 - Coisando o HTML com o CSSInternet I - Aula 04 - Coisando o HTML com o CSS
Internet I - Aula 04 - Coisando o HTML com o CSS
 
Dream 06
Dream 06Dream 06
Dream 06
 
Desenvolvimento Web 01 - David Arty - SENAC
Desenvolvimento Web 01 - David Arty - SENACDesenvolvimento Web 01 - David Arty - SENAC
Desenvolvimento Web 01 - David Arty - SENAC
 
Desenvolvimento Web 02 - David Arty - SENAC
Desenvolvimento Web 02 - David Arty - SENACDesenvolvimento Web 02 - David Arty - SENAC
Desenvolvimento Web 02 - David Arty - SENAC
 
Css Aula 1
Css   Aula 1Css   Aula 1
Css Aula 1
 
Apostila completa de css
Apostila completa de cssApostila completa de css
Apostila completa de css
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
 
2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf
 
Aula 1 programação web i
Aula 1   programação web iAula 1   programação web i
Aula 1 programação web i
 
Aula 1 programação web i
Aula 1   programação web iAula 1   programação web i
Aula 1 programação web i
 
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
 

Mais de diogolevel3

Norma 508 e wcag
Norma 508 e wcagNorma 508 e wcag
Norma 508 e wcagdiogolevel3
 
Noções sobre os quatro princípios de acessibilidade
Noções sobre os quatro princípios de acessibilidadeNoções sobre os quatro princípios de acessibilidade
Noções sobre os quatro princípios de acessibilidadediogolevel3
 
Design universal
Design universalDesign universal
Design universaldiogolevel3
 
Design responsivo
Design responsivoDesign responsivo
Design responsivodiogolevel3
 
Lista de abreviações 3
Lista de abreviações 3Lista de abreviações 3
Lista de abreviações 3diogolevel3
 
Lista de abreviações 2
Lista de abreviações 2Lista de abreviações 2
Lista de abreviações 2diogolevel3
 
Lista de abreviações
Lista de abreviaçõesLista de abreviações
Lista de abreviaçõesdiogolevel3
 
Bases para internet
Bases para internetBases para internet
Bases para internetdiogolevel3
 
Lista de abreviações
Lista de abreviaçõesLista de abreviações
Lista de abreviaçõesdiogolevel3
 

Mais de diogolevel3 (20)

Norma 508 e wcag
Norma 508 e wcagNorma 508 e wcag
Norma 508 e wcag
 
Noções sobre os quatro princípios de acessibilidade
Noções sobre os quatro princípios de acessibilidadeNoções sobre os quatro princípios de acessibilidade
Noções sobre os quatro princípios de acessibilidade
 
Design universal
Design universalDesign universal
Design universal
 
Acessibilidade
AcessibilidadeAcessibilidade
Acessibilidade
 
Design responsivo
Design responsivoDesign responsivo
Design responsivo
 
Acessibilidade
AcessibilidadeAcessibilidade
Acessibilidade
 
Taquigrafia css
Taquigrafia cssTaquigrafia css
Taquigrafia css
 
Seletores css
Seletores cssSeletores css
Seletores css
 
Seletores css
Seletores cssSeletores css
Seletores css
 
Modelo TCP/IP
Modelo TCP/IPModelo TCP/IP
Modelo TCP/IP
 
Modelo osi
Modelo osiModelo osi
Modelo osi
 
Modelo osi
Modelo osiModelo osi
Modelo osi
 
Tutorial css
Tutorial cssTutorial css
Tutorial css
 
Css avançado
Css avançadoCss avançado
Css avançado
 
Lista de abreviações 3
Lista de abreviações 3Lista de abreviações 3
Lista de abreviações 3
 
Lista de abreviações 2
Lista de abreviações 2Lista de abreviações 2
Lista de abreviações 2
 
Lista de abreviações
Lista de abreviaçõesLista de abreviações
Lista de abreviações
 
Bases para internet
Bases para internetBases para internet
Bases para internet
 
Lista de abreviações
Lista de abreviaçõesLista de abreviações
Lista de abreviações
 
Post 5
Post   5Post   5
Post 5
 

Aula 4 - VISÃO GERAL CSS

  • 1. O que é CSS O Cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação (aparência) em páginas da internet que adotam para o seu desenvolvimento linguagens de marcação (como XML, HTML e XHTML). O CSS define como serão exibidos os elementos contidos no código de uma página da internet e sua maior vantagem é efetuar a separação entre o formato e o conteúdo de um documento. Fonte: TECMUNDO LINK: http://www.tecmundo.com.br/programacao/2705-o-que-e-css-.htm Formas de utilização (Externo, embutido, inline) Externo - Existem 3 maneiras de colocarmos configurações de cores, fontes, tamanhos e outros em CSS para usarmos uma delas e a referencia do CSS como arquivo externo. <link rel="stylesheet" type="text/css" href="arquivo.css" /> Embutido – Comando CSS fica dentro da página HTML. Permite que a página fique dentro de outra página. <style type="text/css"> a { background: #ff9; color: #00f; text-decoration: underline; } </style> Inline – Possibilita que só aquele elemento seja estabilizado. <p style="border-style: groove; color: red;"> Copyright 2007 </p>
  • 2. Tipos de Seletores (elemento HTML,Id ou Classe) Elemento HTML - Seletor universal ou seja qualquer elemento. *{ color: #000000; } Aplicável a todos os elementos ID - Seleciona o elemento <e> identificado com id. h1#chapter1 { text-align: center; } <e id="Id"... /> Classe – Seletor de classe: seleciona os alementos <e> em que se aplicou a “classe”. h1.pastoral { color: green; } <e class="classe"... /> Sintaxe @import "folha.css" tipo-midia; /* Comentários */ @media tipo-midia { seletor { Propriedade: valor(es); } };
  • 3. Unidades Relativas Px – Tamanho de pixels (relativo ao dispositivo) Em – Tamanho relativo à fonte utilizada no elemento ao qual está inserido Ex – Corresponde à altura da fonte ‘x’ Absolutas In – Polegadas (1 polegada=2,54 cm) Cm – Centímetros Mm – Milímetros Pt – pontos (1pt=1/72 polegadas) Pc – Picas (1 pica=12 pontos) Porcentagem % - Porcentagem 0 – Valor ‘0’ não requer atribuição de unidade