CSS para Formatação de Texto e Layout Responsivo

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

Tecnologias Web
João Paulo 
Brognoni Casati
Aula 10
*
Conteúdo da Aula
Formatação de texto e plano de fundo
Formatação de margens, espaçamento e bordas
Layout em CSS
*
*
Formatação de texto e plano de fundo
Propriedades de formatação de texto
*
*
Formatação de texto e plano de fundo
Propriedades de formatação de fonte
*
*
Formatação de texto e plano de fundo
Aplicação de formatação de fonte:
*
h1{
 font-family: “Arial”;
 font-weight: bold;
 font-size: 36px;
 text-align: center;
 background-color: #000080;
 color: #FFFFFF;
 text-transform: uppercase;
}
p{
 font-family: “Comic Sans MS”;
 text-align: justify;
 background-color: #DEDEDE;
}
<h1>Título do texto com estilo!</h1>
<p>Parágrafo com estilo aplicado!</p>
*
Formatação de texto e plano de fundo
Propriedades de formatação de plano de fundo
*
*
Formatação de texto e plano de fundo
Aplicação de plano de fundo:
*
body{
	background-image: url('globo.png');
	background-repeat: repeat-x;
}
*
Formatação de margens, espaçamentos e bordas
Propriedades de Margem:
margin-bottom
margin-top
margin-left
magin-right
Define-se tamanho para as margens
*
*
Formatação de margens, espaçamentos e bordas
Propriedades de Espaçamento:
padding-bottom
padding-top
padding-left
padding-right
Define-se tamanho para o espaçamento
*
*
Formatação de margens, espaçamentos e bordas
*
Texto
Página Web
Elemento
Margem
Espaçamento
Borda
*
Formatação de margens, espaçamentos e bordas
Principais propriedades de Borda:
border-bottom
border-top
border-left
border-right
border-color
border-width
border-style
*
*
Formatação de margens, espaçamentos e bordas
Principais tipos de borda:
solid
dashed
double
groove
Definição
*
border-style: solid;
border-style: dashed;
border-style: double;
border-style: groove;
*
Formatação de margens, espaçamentos e bordas
Bordas aplicadas
*
*
Layout em CSS
Layout responsivo
Adaptável a diversos dispositivos e tamanhos de tela
Monitores
Tablets
Celulares
*
*
Layout em CSS
Principais elementos HTML para confecção de layouts
<div>
Bloco lógico para confecção de layouts
Não-visual
<span>
Marca trechos em que a formatação é aplicada
Não-visual
*
*
Layout em CSS
Definição da formatação dos blocos
*
*
Layout em CSS
Aplicação da formatação nos blocos
*
*
Layout em CSS
Layout resultante
*
Tecnologias Web
João Paulo 
Brognoni Casati
Atividade 10
*
*
Atividade
1 – Qual a regra css para que todos os parágrafos de uma página tivessem o texto centralizado?
Resposta:
p { text-align: center; }
*
*
Atividade
2 – Qual a regra css para que se defina uma classe que formate o texto com a cor verde?
Resposta:
.texto-verde { color: green; }
*
*
Atividade
3 – Qual a regra css para que se defina uma borda superior lisa e uma borda inferior tracejada em um elemento de id=“el”?
Resposta:
#el { border-top: solid; border-bottom: dashed; }
*
*
Atividade
4 – O que significa layout responsivo?
Resposta:
Layout adaptável a diferentes dispositivos e tamanhos de tela.
*
*
Atividade
5 – Quais a principal TAG HTML utilizada para a confecção de layouts?
Resposta:
A TAG <div>