SlideShare uma empresa Scribd logo
CSS - INTRODUÇÃOProf.ª. Giorgia Barreto L. Parrião [2017]
DESIGN WEB
DEFINIÇÃO
CSS é uma linguagem para estilos que define o layout de documentos HTML. É
um mecanismo simples para adicionar estilos: fontes, cores, margens, linhas,
alturas, larguras, imagens de fundo, posicionamentos e etc.
Qual é a diferença entre CSS e HTML?
HTML é usado para estruturar conteúdos. CSS é usado para formatar conteúdos
estruturados.
Profª Giorgia Barreto Lima Parrião 2
VANTAGENS
 Economizar o seu tempo.
 Diminuir o tamanho do código de sua página.
 Sua página irá carregar mais rapidamente.
 Mais facilidade de manter e fazer alterações na página.
 Mais controle no layout da página.
 Aplicação de diferentes layouts para servir diferentes mídias (tela,
impressora, etc.);
Profª Giorgia Barreto Lima Parrião 3
MÉTODOS DE APLICAÇÃO EM HTML
Método in-line (direto no html)
<body style =“background-color: black”>
Método interno (tag style)
<style type=“text/css”>
body { background-color: black;}
</style>
Método externo (link para uma folha de estilos)
<link rel=“stylesheet”type=“text/css” ref=“estilo.css”>
Dentro do estilo.css
body {background-color: black;}
5
Forma de inserção no código HTML
<html>
<head>
<title>Minha página com CSS </title>
<link rel=“stylesheet”type=“text/css” href=“estilo.css”>
</head>
<boby>
<h1>Está página tem estilo</h1>
</body>
</html>
6
REGRA CSS
É a unidade básica de uma folha de estilo (a menor porção do código)
capaz de produzir um efeito de estilização.
Composta por dois componentes: seletor e declaração
Prof.ª Giorgia Barreto Lima Parrião 7
COMPONENTES
Profª Giorgia Barreto Lima Parrião 8
Seletor: É a tag do elemento da marcação ou uma entidade capaz de definir com
precisão em qual lugar da marcação será aplicada a regra CSS. Um seletor
pode conter mais de uma declaração. Compreende
Declaração: Determina os parâmetros de estilização. :
 Propriedade: característica do elemento
 Valor: refere-se a quantidade ou qualidade do elemento
SINTAXE
Profª Giorgia Barreto Lima Parrião 9
EXEMPLO
Profª Giorgia Barreto Lima Parrião 10
DIV
A tag <div> define uma divisão ou uma seção em um documento HTML, é
frequentemente utilizado para bloquear o grupo de elementos para formatá-los com
estilos. serve para formatar as caixas dando tamanho, bordas, cores e outras
funcionalidades.
O elemento div deve ser inserido na body. toda div deverá ser nomeada através
do atributo id , conforme exemplo:
<div” atributo id= “nome” >
Entre <div id= “nome”> e </div> coloca-se o conteúdo.
11
Os elementos div e span foram criados com o HTML 4 com a finalidade de fornecer um
mecanismo genérico para agrupar e prover estrutura aos documentos.
Uma id e/ou class é em geral usada para fornecer uma identidade a uma div ou span
com o propósito de fornecer uma referência para estilização por CSS ou captura por um
script.
HTML
<DIV CLASS="sidebar">Matemática</DIV>
CSS
DIV.sidebar
{
font-family: "Arial";
font-size: 12pt;
text-align: right;
background-color: #C0C0C0;
margin-left: 10px;
margin-right: 10px;
}
12
DIV - EXEMPLO
CSS
Style { background: white; font-size: 36px;}
HTML
<body>
<div id=“Style”> conteúdo </div>
</body>
13
ATRIBUTO CLASS
a função do atributo "class" é nomear a <div>. Com ele podemos definir
diferentes estilos para um mesmo elemento.
Por exemplo, se quiséssemos ter 2 tipos de parágrafos "<p>" em nosso site (um
alinhado à direita e outro centralizado) Fazemos assim:
CSS
p.right {text-align: right}
p.center {text-align: center}
HTML
<p class="right">
Este outro parágrafo está direita
</p>
<p class="center">
Este outro parágrafo está centralizado
</p>
Profª Giorgia Barreto Lima Parrião 15
ATRIBUTO ID
 Assim como a "class“ sua função é nomear a <div>.
 Com o atributo ID podemos definir um estilo único para ser utilizado em
muitos elementos.
CSS
#right {text-align: right}
HTML
<p id="right">
Este paragrafo também ficará alinhado à direita
</p>
<h3 id="right">
Este header também ficará alinhado à direita
</h3>
Observação: o atributo ID deve ter valor único no documento.
17
DIFERENÇAS
Profª Giorgia Barreto Lima Parrião 18
CLASS
Vários estilos para um único
elemento (seletor).
ID
Estilo único para muitos
elementos (seletor).
.
x
PROPRIEDADE: FLOAT
A propriedade float serve para posicionar duas ou mais divs uma do lado
da outra.
19
Top
Left Right
Bottom
CSS
#box{ width: 400px; border: 2px; solid red; text-
align: justify; padding: 20 px; margin: 30px;
float: left;}
#box2 {width: 300px; border: 2px; solid blue; text-
align: justify; float: left;}
HTML
<body>
<div id=“box”>conteúdo</div>
<div id=“box2”> conteúdo </div>
</body>
Profª Giorgia Barreto Lima Parrião 20
APLICAÇÕES
Com CSS podemos formatar:
 Background
 Textos
 Fontes
 Margens
 Bordas
 Listas
 Tabelas
http://www.w3schools.com/css/css_examples.asp
EXERCÍCIO
1. Crie um site com 3 páginas (home, produtos, contato) utilizando a
linguagem de marcação HTML.
A. HOME: Deverá conter uma apresentação do produto comercializado pela
empresa escolhida por você.
B. PRODUTOS: Apresentar pelo menos 6 produtos com a apresentação de foto,
descrição do produto e valor.
C. CONTATO: Formulário de contato (Nome, e-mail, telefone, endereço, campo
para deixar o recado e botão submit e reset)
Profª Giorgia Barreto Lima Parrião 22
Orientações
 A escolha do cliente é livre, exceto produtos ilegais e imorais.
 Vocês deverá utilizar todos os elementos e atributos de HTML necessários à
construção da sua página.
 O layout da página é livre desde que não contenha nenhuma imagem ou texto
imoral ou ilegal.
 Você deverá escolher a forma de inserção da Folha de Estilo (CSS) para
inseri-la ao seu site.
 A Folha de estilo do site será criada na aula 2 de CSS.
Profª Giorgia Barreto Lima Parrião 23
BIBLIOGRAFIA
Profª Giorgia Barreto Lima Parrião 24
 Silva, Mauricio S. Fundamentos de HTML 5 e CSS3. São Paulo:
Novatec, 2015.
Prof.ª Giorgia Barreto Lima Parrião 25
Obrigada!
Obrigada!!!
Prof.ª. Giorgia Barreto

Mais conteúdo relacionado

Mais procurados

Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScript
Carlos Eduardo Kadu
 
Introdução ao CSS
Introdução ao CSSIntrodução ao CSS
Introdução ao CSS
Leonardo Soares
 
HTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no htmlHTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no html
Tiago Luiz Ribeiro da Silva
 
Introdução a programação para a Internet
Introdução a programação para a InternetIntrodução a programação para a Internet
Introdução a programação para a Internet
Leonardo Soares
 
Introdução a JavaScript
Introdução a JavaScriptIntrodução a JavaScript
Introdução a JavaScript
Bruno Catão
 
Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
Victor Adriel Oliveira
 
Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)
Bruno Grange
 
Introdução a HTML5
Introdução a HTML5Introdução a HTML5
Introdução a HTML5
Salvador Torres
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
Rodrigo Rodrigues
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5
Jose Augusto Cintra
 
Introdução ao HTML
Introdução ao HTMLIntrodução ao HTML
Introdução ao HTML
Vinícius Roggério da Rocha
 
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
Renato Bongiorno Bonfanti
 
Aula01-JavaScript
Aula01-JavaScriptAula01-JavaScript
Aula01-JavaScript
Jorge Ávila Miranda
 
Introdução ao HTML e CSS
Introdução ao HTML e CSSIntrodução ao HTML e CSS
Introdução ao HTML e CSS
Sérgio Souza Costa
 
Introdução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxIntrodução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptx
MarceloRosenbrock1
 
Wireframes para sites e dispositivos móveis
Wireframes para sites e dispositivos móveisWireframes para sites e dispositivos móveis
Wireframes para sites e dispositivos móveis
Tersis Zonato
 
Introdução ao CSS
Introdução ao CSSIntrodução ao CSS
Introdução ao CSS
Willian Watanabe
 
Criação de tabelas com HTML
Criação de tabelas com HTMLCriação de tabelas com HTML
Criação de tabelas com HTML
Leonardo Soares
 
Aula 07 Css - Parte 1
Aula 07   Css - Parte 1Aula 07   Css - Parte 1
Aula 07 Css - Parte 1
Professor Samuel Ribeiro
 
Aula 02 - Introdução ao PHP
Aula 02 - Introdução ao PHPAula 02 - Introdução ao PHP
Aula 02 - Introdução ao PHP
Daniel Brandão
 

Mais procurados (20)

Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScript
 
Introdução ao CSS
Introdução ao CSSIntrodução ao CSS
Introdução ao CSS
 
HTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no htmlHTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no html
 
Introdução a programação para a Internet
Introdução a programação para a InternetIntrodução a programação para a Internet
Introdução a programação para a Internet
 
Introdução a JavaScript
Introdução a JavaScriptIntrodução a JavaScript
Introdução a JavaScript
 
Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
 
Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)
 
Introdução a HTML5
Introdução a HTML5Introdução a HTML5
Introdução a HTML5
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5
 
Introdução ao HTML
Introdução ao HTMLIntrodução ao HTML
Introdução ao HTML
 
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
 
Aula01-JavaScript
Aula01-JavaScriptAula01-JavaScript
Aula01-JavaScript
 
Introdução ao HTML e CSS
Introdução ao HTML e CSSIntrodução ao HTML e CSS
Introdução ao HTML e CSS
 
Introdução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxIntrodução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptx
 
Wireframes para sites e dispositivos móveis
Wireframes para sites e dispositivos móveisWireframes para sites e dispositivos móveis
Wireframes para sites e dispositivos móveis
 
Introdução ao CSS
Introdução ao CSSIntrodução ao CSS
Introdução ao CSS
 
Criação de tabelas com HTML
Criação de tabelas com HTMLCriação de tabelas com HTML
Criação de tabelas com HTML
 
Aula 07 Css - Parte 1
Aula 07   Css - Parte 1Aula 07   Css - Parte 1
Aula 07 Css - Parte 1
 
Aula 02 - Introdução ao PHP
Aula 02 - Introdução ao PHPAula 02 - Introdução ao PHP
Aula 02 - Introdução ao PHP
 

Semelhante a Introduçã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
 
W3C Web Standards CSS
W3C Web Standards CSSW3C Web Standards CSS
W3C Web Standards CSS
Andrea Dalforno
 
Htmlbasico
HtmlbasicoHtmlbasico
Htmlbasico
Fernando Vargas
 
Css cascading style sheet
Css cascading style sheetCss cascading style sheet
Css cascading style sheet
Morvana Bonin
 
Css e iFrames
Css e iFramesCss e iFrames
Css e iFrames
Sandra Oliveira
 
Slides Css3
Slides Css3 Slides Css3
Slides Css3
Pedro Neto
 
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Cristofer Sousa
 
Gabarito ad1 web_2012_2
Gabarito ad1 web_2012_2Gabarito ad1 web_2012_2
Gabarito ad1 web_2012_2
paulofa
 
RCOM 11ºAno - CSS
RCOM 11ºAno - CSSRCOM 11ºAno - CSS
RCOM 11ºAno - CSS
Escola Secundária de Vizela
 
Dream 06
Dream 06Dream 06
Dream 06
Anderson Maciel
 
CSS
CSSCSS
Dream 06
Dream 06Dream 06
Básico em (X)HTML e CSS
Básico em (X)HTML e CSSBásico em (X)HTML e CSS
Básico em (X)HTML e CSS
Kako Botasso
 
Aula 02 - Font End
Aula 02 - Font EndAula 02 - Font End
Aula 02 - Font End
mvcbotelho
 
Aula 07
Aula 07Aula 07
HTML e CSS para pequenas gafanhotas
HTML e CSS para pequenas gafanhotasHTML e CSS para pequenas gafanhotas
HTML e CSS para pequenas gafanhotas
Inajara Leppa
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
Cezar Bruno
 
Material css parte I
Material css parte IMaterial css parte I
Material css parte I
Denise Lima
 
Aula 4 - VISÃO GERAL CSS
Aula 4 - VISÃO GERAL CSSAula 4 - VISÃO GERAL CSS
Aula 4 - VISÃO GERAL CSS
diogolevel3
 
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Eduardo Bertolucci
 

Semelhante a Introdução CSS (20)

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
 
W3C Web Standards CSS
W3C Web Standards CSSW3C Web Standards CSS
W3C Web Standards CSS
 
Htmlbasico
HtmlbasicoHtmlbasico
Htmlbasico
 
Css cascading style sheet
Css cascading style sheetCss cascading style sheet
Css cascading style sheet
 
Css e iFrames
Css e iFramesCss e iFrames
Css e iFrames
 
Slides Css3
Slides Css3 Slides Css3
Slides Css3
 
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
 
Gabarito ad1 web_2012_2
Gabarito ad1 web_2012_2Gabarito ad1 web_2012_2
Gabarito ad1 web_2012_2
 
RCOM 11ºAno - CSS
RCOM 11ºAno - CSSRCOM 11ºAno - CSS
RCOM 11ºAno - CSS
 
Dream 06
Dream 06Dream 06
Dream 06
 
CSS
CSSCSS
CSS
 
Dream 06
Dream 06Dream 06
Dream 06
 
Básico em (X)HTML e CSS
Básico em (X)HTML e CSSBásico em (X)HTML e CSS
Básico em (X)HTML e CSS
 
Aula 02 - Font End
Aula 02 - Font EndAula 02 - Font End
Aula 02 - Font End
 
Aula 07
Aula 07Aula 07
Aula 07
 
HTML e CSS para pequenas gafanhotas
HTML e CSS para pequenas gafanhotasHTML e CSS para pequenas gafanhotas
HTML e CSS para pequenas gafanhotas
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
 
Material css parte I
Material css parte IMaterial css parte I
Material css parte I
 
Aula 4 - VISÃO GERAL CSS
Aula 4 - VISÃO GERAL CSSAula 4 - VISÃO GERAL CSS
Aula 4 - VISÃO GERAL CSS
 
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
 

Mais de Giorgia Barreto Lima Parrião

Conheça a Terapeuta Giorgia Barreto
Conheça a Terapeuta Giorgia BarretoConheça a Terapeuta Giorgia Barreto
Conheça a Terapeuta Giorgia Barreto
Giorgia Barreto Lima Parrião
 
059 - Sistema de coleta on-line do Censo Escolar da Educação Básica - Educace...
059 - Sistema de coleta on-line do Censo Escolar da Educação Básica - Educace...059 - Sistema de coleta on-line do Censo Escolar da Educação Básica - Educace...
059 - Sistema de coleta on-line do Censo Escolar da Educação Básica - Educace...
Giorgia Barreto Lima Parrião
 
CirculoCromático.pdf
CirculoCromático.pdfCirculoCromático.pdf
CirculoCromático.pdf
Giorgia Barreto Lima Parrião
 
Semiótica em Design - Aula1
Semiótica em Design - Aula1Semiótica em Design - Aula1
Semiótica em Design - Aula1
Giorgia Barreto Lima Parrião
 
Semiótica em Design - Aula4
Semiótica em Design - Aula4Semiótica em Design - Aula4
Semiótica em Design - Aula4
Giorgia Barreto Lima Parrião
 
Semiótica em Design - Aula3
Semiótica em Design - Aula3Semiótica em Design - Aula3
Semiótica em Design - Aula3
Giorgia Barreto Lima Parrião
 
Semiótica em Design - Aula 2
Semiótica em Design - Aula 2Semiótica em Design - Aula 2
Semiótica em Design - Aula 2
Giorgia Barreto Lima Parrião
 
Semiótica - Aula 4
Semiótica - Aula 4Semiótica - Aula 4
Semiótica - Aula 4
Giorgia Barreto Lima Parrião
 
Semiótica - Aula 3
Semiótica - Aula 3Semiótica - Aula 3
Semiótica - Aula 3
Giorgia Barreto Lima Parrião
 
Semiótica - Aula 2
Semiótica - Aula 2Semiótica - Aula 2
Semiótica - Aula 2
Giorgia Barreto Lima Parrião
 
Semiótica - Aula 1
Semiótica - Aula 1Semiótica - Aula 1
Semiótica - Aula 1
Giorgia Barreto Lima Parrião
 
Avaliação da Interface do site da biblioteca do UniProjeção: Usabilidade e Ac...
Avaliação da Interface do site da biblioteca do UniProjeção: Usabilidade e Ac...Avaliação da Interface do site da biblioteca do UniProjeção: Usabilidade e Ac...
Avaliação da Interface do site da biblioteca do UniProjeção: Usabilidade e Ac...
Giorgia Barreto Lima Parrião
 
Caderno de Referência - Pró-Conselho - MEC (2004)
Caderno de Referência - Pró-Conselho - MEC (2004)Caderno de Referência - Pró-Conselho - MEC (2004)
Caderno de Referência - Pró-Conselho - MEC (2004)
Giorgia Barreto Lima Parrião
 
Melhor idade conectada: um panorama da interação entre idosos e tecnologias m...
Melhor idade conectada: um panorama da interação entre idosos e tecnologias m...Melhor idade conectada: um panorama da interação entre idosos e tecnologias m...
Melhor idade conectada: um panorama da interação entre idosos e tecnologias m...
Giorgia Barreto Lima Parrião
 
Introdução ao Illustrator
Introdução ao IllustratorIntrodução ao Illustrator
Introdução ao Illustrator
Giorgia Barreto Lima Parrião
 
Introdução ao Photoshop
Introdução ao PhotoshopIntrodução ao Photoshop
Introdução ao Photoshop
Giorgia Barreto Lima Parrião
 
Agência de Publicidade: áreas e setores
Agência de Publicidade:  áreas e setoresAgência de Publicidade:  áreas e setores
Agência de Publicidade: áreas e setores
Giorgia Barreto Lima Parrião
 
Processos de Comunicação
Processos de ComunicaçãoProcessos de Comunicação
Processos de Comunicação
Giorgia Barreto Lima Parrião
 
Fundamentos imagem
Fundamentos imagemFundamentos imagem
Fundamentos imagem
Giorgia Barreto Lima Parrião
 
O que é propaganda???
O que é propaganda???O que é propaganda???
O que é propaganda???
Giorgia Barreto Lima Parrião
 

Mais de Giorgia Barreto Lima Parrião (20)

Conheça a Terapeuta Giorgia Barreto
Conheça a Terapeuta Giorgia BarretoConheça a Terapeuta Giorgia Barreto
Conheça a Terapeuta Giorgia Barreto
 
059 - Sistema de coleta on-line do Censo Escolar da Educação Básica - Educace...
059 - Sistema de coleta on-line do Censo Escolar da Educação Básica - Educace...059 - Sistema de coleta on-line do Censo Escolar da Educação Básica - Educace...
059 - Sistema de coleta on-line do Censo Escolar da Educação Básica - Educace...
 
CirculoCromático.pdf
CirculoCromático.pdfCirculoCromático.pdf
CirculoCromático.pdf
 
Semiótica em Design - Aula1
Semiótica em Design - Aula1Semiótica em Design - Aula1
Semiótica em Design - Aula1
 
Semiótica em Design - Aula4
Semiótica em Design - Aula4Semiótica em Design - Aula4
Semiótica em Design - Aula4
 
Semiótica em Design - Aula3
Semiótica em Design - Aula3Semiótica em Design - Aula3
Semiótica em Design - Aula3
 
Semiótica em Design - Aula 2
Semiótica em Design - Aula 2Semiótica em Design - Aula 2
Semiótica em Design - Aula 2
 
Semiótica - Aula 4
Semiótica - Aula 4Semiótica - Aula 4
Semiótica - Aula 4
 
Semiótica - Aula 3
Semiótica - Aula 3Semiótica - Aula 3
Semiótica - Aula 3
 
Semiótica - Aula 2
Semiótica - Aula 2Semiótica - Aula 2
Semiótica - Aula 2
 
Semiótica - Aula 1
Semiótica - Aula 1Semiótica - Aula 1
Semiótica - Aula 1
 
Avaliação da Interface do site da biblioteca do UniProjeção: Usabilidade e Ac...
Avaliação da Interface do site da biblioteca do UniProjeção: Usabilidade e Ac...Avaliação da Interface do site da biblioteca do UniProjeção: Usabilidade e Ac...
Avaliação da Interface do site da biblioteca do UniProjeção: Usabilidade e Ac...
 
Caderno de Referência - Pró-Conselho - MEC (2004)
Caderno de Referência - Pró-Conselho - MEC (2004)Caderno de Referência - Pró-Conselho - MEC (2004)
Caderno de Referência - Pró-Conselho - MEC (2004)
 
Melhor idade conectada: um panorama da interação entre idosos e tecnologias m...
Melhor idade conectada: um panorama da interação entre idosos e tecnologias m...Melhor idade conectada: um panorama da interação entre idosos e tecnologias m...
Melhor idade conectada: um panorama da interação entre idosos e tecnologias m...
 
Introdução ao Illustrator
Introdução ao IllustratorIntrodução ao Illustrator
Introdução ao Illustrator
 
Introdução ao Photoshop
Introdução ao PhotoshopIntrodução ao Photoshop
Introdução ao Photoshop
 
Agência de Publicidade: áreas e setores
Agência de Publicidade:  áreas e setoresAgência de Publicidade:  áreas e setores
Agência de Publicidade: áreas e setores
 
Processos de Comunicação
Processos de ComunicaçãoProcessos de Comunicação
Processos de Comunicação
 
Fundamentos imagem
Fundamentos imagemFundamentos imagem
Fundamentos imagem
 
O que é propaganda???
O que é propaganda???O que é propaganda???
O que é propaganda???
 

Introdução CSS

  • 1. CSS - INTRODUÇÃOProf.ª. Giorgia Barreto L. Parrião [2017] DESIGN WEB
  • 2. DEFINIÇÃO CSS é uma linguagem para estilos que define o layout de documentos HTML. É um mecanismo simples para adicionar estilos: fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos e etc. Qual é a diferença entre CSS e HTML? HTML é usado para estruturar conteúdos. CSS é usado para formatar conteúdos estruturados. Profª Giorgia Barreto Lima Parrião 2
  • 3. VANTAGENS  Economizar o seu tempo.  Diminuir o tamanho do código de sua página.  Sua página irá carregar mais rapidamente.  Mais facilidade de manter e fazer alterações na página.  Mais controle no layout da página.  Aplicação de diferentes layouts para servir diferentes mídias (tela, impressora, etc.); Profª Giorgia Barreto Lima Parrião 3
  • 4. MÉTODOS DE APLICAÇÃO EM HTML Método in-line (direto no html) <body style =“background-color: black”> Método interno (tag style) <style type=“text/css”> body { background-color: black;} </style>
  • 5. Método externo (link para uma folha de estilos) <link rel=“stylesheet”type=“text/css” ref=“estilo.css”> Dentro do estilo.css body {background-color: black;} 5
  • 6. Forma de inserção no código HTML <html> <head> <title>Minha página com CSS </title> <link rel=“stylesheet”type=“text/css” href=“estilo.css”> </head> <boby> <h1>Está página tem estilo</h1> </body> </html> 6
  • 7. REGRA CSS É a unidade básica de uma folha de estilo (a menor porção do código) capaz de produzir um efeito de estilização. Composta por dois componentes: seletor e declaração Prof.ª Giorgia Barreto Lima Parrião 7
  • 8. COMPONENTES Profª Giorgia Barreto Lima Parrião 8 Seletor: É a tag do elemento da marcação ou uma entidade capaz de definir com precisão em qual lugar da marcação será aplicada a regra CSS. Um seletor pode conter mais de uma declaração. Compreende Declaração: Determina os parâmetros de estilização. :  Propriedade: característica do elemento  Valor: refere-se a quantidade ou qualidade do elemento
  • 10. EXEMPLO Profª Giorgia Barreto Lima Parrião 10
  • 11. DIV A tag <div> define uma divisão ou uma seção em um documento HTML, é frequentemente utilizado para bloquear o grupo de elementos para formatá-los com estilos. serve para formatar as caixas dando tamanho, bordas, cores e outras funcionalidades. O elemento div deve ser inserido na body. toda div deverá ser nomeada através do atributo id , conforme exemplo: <div” atributo id= “nome” > Entre <div id= “nome”> e </div> coloca-se o conteúdo. 11
  • 12. Os elementos div e span foram criados com o HTML 4 com a finalidade de fornecer um mecanismo genérico para agrupar e prover estrutura aos documentos. Uma id e/ou class é em geral usada para fornecer uma identidade a uma div ou span com o propósito de fornecer uma referência para estilização por CSS ou captura por um script. HTML <DIV CLASS="sidebar">Matemática</DIV> CSS DIV.sidebar { font-family: "Arial"; font-size: 12pt; text-align: right; background-color: #C0C0C0; margin-left: 10px; margin-right: 10px; } 12
  • 13. DIV - EXEMPLO CSS Style { background: white; font-size: 36px;} HTML <body> <div id=“Style”> conteúdo </div> </body> 13
  • 14. ATRIBUTO CLASS a função do atributo "class" é nomear a <div>. Com ele podemos definir diferentes estilos para um mesmo elemento. Por exemplo, se quiséssemos ter 2 tipos de parágrafos "<p>" em nosso site (um alinhado à direita e outro centralizado) Fazemos assim:
  • 15. CSS p.right {text-align: right} p.center {text-align: center} HTML <p class="right"> Este outro parágrafo está direita </p> <p class="center"> Este outro parágrafo está centralizado </p> Profª Giorgia Barreto Lima Parrião 15
  • 16. ATRIBUTO ID  Assim como a "class“ sua função é nomear a <div>.  Com o atributo ID podemos definir um estilo único para ser utilizado em muitos elementos.
  • 17. CSS #right {text-align: right} HTML <p id="right"> Este paragrafo também ficará alinhado à direita </p> <h3 id="right"> Este header também ficará alinhado à direita </h3> Observação: o atributo ID deve ter valor único no documento. 17
  • 18. DIFERENÇAS Profª Giorgia Barreto Lima Parrião 18 CLASS Vários estilos para um único elemento (seletor). ID Estilo único para muitos elementos (seletor). . x
  • 19. PROPRIEDADE: FLOAT A propriedade float serve para posicionar duas ou mais divs uma do lado da outra. 19 Top Left Right Bottom
  • 20. CSS #box{ width: 400px; border: 2px; solid red; text- align: justify; padding: 20 px; margin: 30px; float: left;} #box2 {width: 300px; border: 2px; solid blue; text- align: justify; float: left;} HTML <body> <div id=“box”>conteúdo</div> <div id=“box2”> conteúdo </div> </body> Profª Giorgia Barreto Lima Parrião 20
  • 21. APLICAÇÕES Com CSS podemos formatar:  Background  Textos  Fontes  Margens  Bordas  Listas  Tabelas http://www.w3schools.com/css/css_examples.asp
  • 22. EXERCÍCIO 1. Crie um site com 3 páginas (home, produtos, contato) utilizando a linguagem de marcação HTML. A. HOME: Deverá conter uma apresentação do produto comercializado pela empresa escolhida por você. B. PRODUTOS: Apresentar pelo menos 6 produtos com a apresentação de foto, descrição do produto e valor. C. CONTATO: Formulário de contato (Nome, e-mail, telefone, endereço, campo para deixar o recado e botão submit e reset) Profª Giorgia Barreto Lima Parrião 22
  • 23. Orientações  A escolha do cliente é livre, exceto produtos ilegais e imorais.  Vocês deverá utilizar todos os elementos e atributos de HTML necessários à construção da sua página.  O layout da página é livre desde que não contenha nenhuma imagem ou texto imoral ou ilegal.  Você deverá escolher a forma de inserção da Folha de Estilo (CSS) para inseri-la ao seu site.  A Folha de estilo do site será criada na aula 2 de CSS. Profª Giorgia Barreto Lima Parrião 23
  • 24. BIBLIOGRAFIA Profª Giorgia Barreto Lima Parrião 24  Silva, Mauricio S. Fundamentos de HTML 5 e CSS3. São Paulo: Novatec, 2015.
  • 25. Prof.ª Giorgia Barreto Lima Parrião 25 Obrigada! Obrigada!!! Prof.ª. Giorgia Barreto