Você está na página 1de 25

DESIGN WEB

CSS - INTRODUO
Prof.. Giorgia Barreto L. Parrio [2017]
DEFINIO
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 diferena entre CSS e HTML?


HTML usado para estruturar contedos. CSS usado para formatar contedos
estruturados.

Prof Giorgia Barreto Lima Parrio 2


VANTAGENS
Economizar o seu tempo.
Diminuir o tamanho do cdigo de sua pgina.
Sua pgina ir carregar mais rapidamente.
Mais facilidade de manter e fazer alteraes na pgina.
Mais controle no layout da pgina.
Aplicao de diferentes layouts para servir diferentes mdias (tela,
impressora, etc.);

Prof Giorgia Barreto Lima Parrio 3


MTODOS DE APLICAO EM HTML
Mtodo in-line (direto no html)
<body style =background-color: black>

Mtodo interno (tag style)


<style type=text/css>
body { background-color: black;}
</style>
Mtodo externo (link para uma folha de estilos)

<link rel=stylesheettype=text/css ref=estilo.css>

Dentro do estilo.css
body {background-color: black;}

5
Forma de insero no cdigo HTML

<html>
<head>
<title>Minha pgina com CSS </title>
<link rel=stylesheettype=text/css href=estilo.css>
</head>
<boby>
<h1>Est pgina tem estilo</h1>
</body>
</html>

6
REGRA CSS
a unidade bsica de uma folha de estilo (a menor poro do cdigo)
capaz de produzir um efeito de estilizao.

Composta por dois componentes: seletor e declarao

Prof. Giorgia Barreto Lima Parrio 7


COMPONENTES
Seletor: a tag do elemento da marcao ou uma entidade capaz de definir com
preciso em qual lugar da marcao ser aplicada a regra CSS. Um seletor
pode conter mais de uma declarao. Compreende

Declarao: Determina os parmetros de estilizao. :


Propriedade: caracterstica do elemento
Valor: refere-se a quantidade ou qualidade do elemento

Prof Giorgia Barreto Lima Parrio 8


SINTAXE

Prof Giorgia Barreto Lima Parrio 9


EXEMPLO

Prof Giorgia Barreto Lima Parrio 10


DIV
A tag <div> define uma diviso ou uma seo 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 atravs
do atributo id , conforme exemplo:
<div atributo id= nome >

11
Entre <div id= nome> e </div> coloca-se o contedo.
Os elementos div e span foram criados com o HTML 4 com a finalidade de fornecer um
mecanismo genrico 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 propsito de fornecer uma referncia para estilizao por CSS ou captura por um
script.

HTML
<DIV CLASS="sidebar">Matemtica</DIV>

CSS
DIV.sidebar
{
font-family: "Arial";
font-size: 12pt;
text-align: right;
background-color: #C0C0C0;
margin-left: 10px;

12
margin-right: 10px;
}
DIV - EXEMPLO
CSS
Style { background: white; font-size: 36px;}

HTML
<body>
<div id=Style> contedo </div>
</body>

13
ATRIBUTO CLASS
a funo do atributo "class" nomear a <div>. Com ele podemos definir
diferentes estilos para um mesmo elemento.

Por exemplo, se quisssemos ter 2 tipos de pargrafos "<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 pargrafo est direita
</p>
<p class="center">
Este outro pargrafo est centralizado
</p>

Prof Giorgia Barreto Lima Parrio 15


ATRIBUTO ID
Assim como a "class sua funo 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 tambm ficar alinhado direita
</p>

<h3 id="right">
Este header tambm ficar alinhado direita
</h3>
Observao: o atributo ID deve ter valor nico no documento.
17
DIFERENAS

CLASS ID
Vrios estilos para um nico
elemento (seletor). x Estilo nico para muitos
elementos (seletor).
.

Prof Giorgia Barreto Lima Parrio 18


PROPRIEDADE: FLOAT
A propriedade float serve para posicionar duas ou mais divs uma do lado
da outra. Top

Left Right

19
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>contedo</div>
<div id=box2> contedo </div>
</body>

Prof Giorgia Barreto Lima Parrio 20


APLICAES
Com CSS podemos formatar:
Background
Textos
Fontes
Margens
Bordas
Listas
Tabelas

http://www.w3schools.com/css/css_examples.asp
EXERCCIO
1. Crie um site com 3 pginas (home, produtos, contato) utilizando a
linguagem de marcao HTML.
A. HOME: Dever conter uma apresentao do produto comercializado pela
empresa escolhida por voc.
B. PRODUTOS: Apresentar pelo menos 6 produtos com a apresentao de foto,
descrio do produto e valor.
C. CONTATO: Formulrio de contato (Nome, e-mail, telefone, endereo, campo
para deixar o recado e boto submit e reset)

Prof Giorgia Barreto Lima Parrio 22


Orientaes
A escolha do cliente livre, exceto produtos ilegais e imorais.
Vocs dever utilizar todos os elementos e atributos de HTML necessrios
construo da sua pgina.
O layout da pgina livre desde que no contenha nenhuma imagem ou texto
imoral ou ilegal.
Voc dever escolher a forma de insero 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 Parrio 23


BIBLIOGRAFIA
Silva, Mauricio S. Fundamentos de HTML 5 e CSS3. So Paulo:
Novatec, 2015.

Prof Giorgia Barreto Lima Parrio 24


Obrigada!
Obrigada!!!
Prof.. Giorgia Barreto

Prof. Giorgia Barreto Lima Parrio 25