Introdução á desenvolvimento WEB AULA3.1 Profª Kalyne Mayla

Desenvolvimento Web

•

IFSertão-PE

0

kalyne mayla

04/12/2017

Esta é uma pré-visualização de arquivo. Entre para ver o arquivo original

Introdução CSS
Aula 03
Professora Kalyne Mayla
contato: kalynead@gmail.com 
Por que o CSS foi criado?
Percebeu-se que o HTMl não foi feito de forma alguma para a formatação, por ser muito complexo e difícil na formatação de informações. 
Definição
O que é Cascading Style Sheets ou Folhas de Estilo em Cascata.
Qual a finalidade?
Exemplo
Vantagens CSS
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 
Regra de estilo
Uma regra CSS segue uma sintaxe própria que define como será aplicado estilo a um ou mais elementos da marcação HTML de uma página. Um conjunto de regras CSS formam uma folha de estilos:
6
Regra de estilo
Seletor: 
A própria Tag do elemento, como: <p>, <h1>, <form> , etc...);
Propriedade: 
tamanho da fonte, cor do texto, altura do elemento).
Valor: 
Letra tipo arial, cor azul, fundo verde, altura igual a 300px.
Regra de estilo: alguns exemplos 
Ex1
p {
font-size: 12px; /* ponto-e-vírgula é facultativo, mas recomendável */
}
Ex2 
body {
	 background-color: #fff;
	 }
Ex3
p { 
	text-align: right;
 	color: #f00; 
}
Folha de estilo
As regras serão salvas com um nome qualquer com a extensão-padrão .css.
Pode ser incorporada no documento ou em uma folha de estilo externa. 
Ex: Meus_estilo.css
Declarando folha de estilo
Folhas de estilo, segundo sua localização, podem ser classificadas em três tipos:
Externas;
Incorporadas;
Inline
Folha de estilo externa
:
Ex1:
<head>
	...
	 <link rel="stylesheet" type="text/css" 	href="estilo.css"> 
	... 
</head>
Folha de estilo incorporada
<head> ... 
<style rel="stylesheet" type="text/css"> 
body { background: #000; url(imagens/minhaimagem.gif); }
 h3 { color: #f00; } 
p { margin-left: 15px; padding:1.5em; }
</style>
 ... </head>
Folha de estilo inline
p style="color:#000; margin: 5px;">
	 Aqui um parágrafo de cor preta e 	com 5px 	nas 4 margens. 
</p>
Algumas propriedades do CSS
Background-color – Define a cor do fundo;
Background-image – Define uma imagem de fundo; 
Font-size – Esta define o tamanho da fonte.
 Font-family – Define a família de fontes. Com ela você pode declarar uma fonte específica e uma genérica.
Algumas propriedades do CSS
Background-color: h1{background-color:gray;} 
 Background-image: Body {Background-image: url(“/imagens/bg-body.jpg”); } 
Font-size : p { font-size: 14px;  }
 Font-family : p { font-family:  "Times New Roman”, serif; }
 
Referências 
CAELUM. Desenvolvimento Web com HTML, CSS e JavaScript. Disponível em:<https://www.caelum.com.br/apostila-html-css-javascript/>. Data de acesso: 20/09/17
BAESSE, Pedro. Autoria WEB. Disponível em: <http://www.professor.pbaesse. net/disciplinas/autoria-web/>. Data de Acesso: 22/09/17
BONIATI, Bruno Batista; SILVA, Teresinha Letícia da. Fundamentos de Desenvolvimento Web Disponível em:< http://www.ouropreto.ifmg.edu.br/dw/apostilas/apostila-fundamentos-de-desenvolvimento-web-1>. Data de Acesso: 22/09/17.
CAMARGOS, Luiz Fernando Macedo; MENEZES, Marcos Antônio Figueiredo. Introdução á HTML e PHP. Rio de Janeiro: Ciência Moderna LTDA, 2008
LOPES, Felipe Mariani; KOMURA, Gustavo Toshi. Curso de Construção de Sites - HTML/CSS. Disponível em:< http://www.inf.ufpr.br/instrutores/arquivos/sites/ html.pdf>. Data de Acesso: 20/09/17
SILVA. Maurício Samy. Criando sites com HTML: Sites de alta qualidade com HTML e CSS. São Paulo: Novatec, 2008.
14976.0
42084.0
34884.0
42804.0
108180.0
37152.0
73152.0
75240.0
32112.0
85788.0
45684.0
39924.0
16416.0
58608.0
62748.0
6336.0
15408.0
8712.0
8856.0