CSS - Parte1

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.);

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

SINTAXE

EXEMPLO

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>

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).
.

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>

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)

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.

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

Obrigada!
Obrigada!!!
Prof.. Giorgia Barreto
Prof. Giorgia Barreto Lima Parrio 25

CSS - Parte1

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

CSS - Parte1

Transféré par

Droits d'auteur :

Formats disponibles

DESIGN WEB

Qual a diferena entre CSS e HTML?

Prof Giorgia Barreto Lima Parrio 2

Prof Giorgia Barreto Lima Parrio 3

Mtodo interno (tag style)

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

Composta por dois componentes: seletor e declarao

Prof. Giorgia Barreto Lima Parrio 7

Declarao: Determina os parmetros de estilizao. :

Prof Giorgia Barreto Lima Parrio 8

Prof Giorgia Barreto Lima Parrio 9

Prof Giorgia Barreto Lima Parrio 10

Prof Giorgia Barreto Lima Parrio 15

Com o atributo ID podemos definir um estilo nico para ser utilizado em

Prof Giorgia Barreto Lima Parrio 18

#box2 {width: 300px; border: 2px; solid blue; text-

Prof Giorgia Barreto Lima Parrio 20

Prof Giorgia Barreto Lima Parrio 22

Prof Giorgia Barreto Lima Parrio 23

Prof Giorgia Barreto Lima Parrio 24

Prof. Giorgia Barreto Lima Parrio 25

Vous aimerez peut-être aussi