Tecnologias para Internet
Prof.º Thyago Maia
Gestão da TI – 2015.2
Objetivos
Aula 4: Folhas de Estilo
• Introduzir o conceito de folhas de estilo
• Apresentar alguns recursos da
tecnologia
...
Introdução ao CSS
Introdução ao CSS
 Folha de Estilo
 A partir do HTML 4.0, toda formatação de uma
página HTML pode ser definida em uma fo...
Introdução ao CSS
• O que é CSS?
 Sigla para Cascading Style Sheets;
 Estilos definem como os elementos HTML serão
apres...
Arquitetura de Sistemas Web
• Qual camada o CSS se enquadra?
6
Arquitetura de Sistemas Web
• Qual camada o CSS se enquadra?
7
Introdução ao CSS
• Sintaxe CSS
 Uma regra CSS possui duas partes: Um seletor e
uma ou mais declarações;
 O seletor é no...
Introdução ao CSS
• Tag usada em um documento HTML para
referenciar um arquivo CSS:
<link rel=“stylesheet” type=“text/css”...
Algumas propriedades CSS
Algumas propriedades CSS
 A propriedade Background
 Utilizada para definir efeitos de fundo em um
elemento CSS;
 Alguns...
Algumas propriedades CSS
 Formatação de texto com CSS
 Utilizamos a propriedade color para setar uma
cor no texto de um ...
Algumas propriedades CSS
 Alinhamento de texto com CSS
 Utilizamos a propriedade text-align para definir o
alinhamento h...
Algumas propriedades CSS
 Decoração de textos com CSS
 A propriedade text-decoration é usada para setar
ou remover decor...
Algumas propriedades CSS
 Transformações de textos
 A propriedade text-transform é usada para
manter textos em caixa alt...
Algumas propriedades CSS
 Indentação
 A propriedade text-indent é usada para
especificar a indentação da primeira linha ...
Algumas propriedades CSS
 Tipos de Fonte
 A propriedade font-family é usada para setar o
tipo de fonte a ser utilizado e...
Algumas propriedades CSS
 Estilos de Fonte
 A propriedade font-style é usada para definir o
estilo de fonte a ser utiliz...
Algumas propriedades CSS
 Tamanho de Fonte
 A propriedade font-size seta o tamanho do texto;
19
p
{
font-size: 40px;
}
#...
Algumas propriedades CSS
 Largura e altura de um elemento
 As propriedades width e height (largura e altura)
setam, resp...
Algumas propriedades CSS
 Bordas
 Através da propriedade border (borda) podemos
inserir bordas em elementos CSS;
21
p
{
...
Algumas propriedades CSS
 Margens
 Através da propriedade margin podemos inserir
margens em elementos CSS;
22
#exemplo
{...
Algumas propriedades CSS
 Padding
 A propriedade padding define o espaço entre a
borda de um elemento e seu conteúdo;
23...
Próximos SlideShares
Carregando em…5
×

Tecnologias para Internet - 2015.2 - Aula 4

282 visualizações

Publicada em

Tecnologias para Internet - 2015.2 - Aula 4

Publicada em: Educação
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
282
No SlideShare
0
A partir de incorporações
0
Número de incorporações
5
Ações
Compartilhamentos
0
Downloads
10
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Tecnologias para Internet - 2015.2 - Aula 4

  1. 1. Tecnologias para Internet Prof.º Thyago Maia Gestão da TI – 2015.2
  2. 2. Objetivos Aula 4: Folhas de Estilo • Introduzir o conceito de folhas de estilo • Apresentar alguns recursos da tecnologia • Definir e apresentar as principais propriedades CSS • Fazer com que o aluno crie seu primeiro projeto Web HTML + CSS 2
  3. 3. Introdução ao CSS
  4. 4. Introdução ao CSS  Folha de Estilo  A partir do HTML 4.0, toda formatação de uma página HTML pode ser definida em uma folha de estilo;  Quando um navegador lê uma folha de estilo, o mesmo formata o documento HTML de acordo com as especificações definidas na folha de estilo; 4
  5. 5. Introdução ao CSS • O que é CSS?  Sigla para Cascading Style Sheets;  Estilos definem como os elementos HTML serão apresentados/formatados;  Estilos foram adicionados no HTML 4.0 para resolver um problema:  Separar o conteúdo da sua formatação!  Folhas de estilo podem ser armazenadas em arquivos .css ao serem definidas em documentos HTML; 5
  6. 6. Arquitetura de Sistemas Web • Qual camada o CSS se enquadra? 6
  7. 7. Arquitetura de Sistemas Web • Qual camada o CSS se enquadra? 7
  8. 8. Introdução ao CSS • Sintaxe CSS  Uma regra CSS possui duas partes: Um seletor e uma ou mais declarações;  O seletor é normalmente um elemento HTML que irá seguir as especificações definidas nas declarações (h1, body, p, a, etc.); 8 h1 { Color: blue; Font-size: 12px; } Seletor Declaração Propriedade Valor
  9. 9. Introdução ao CSS • Tag usada em um documento HTML para referenciar um arquivo CSS: <link rel=“stylesheet” type=“text/css” href=“exemplo.css”> • Tal tag deverá ser declarada entre as tags <head> e </head> (cabeçalho de uma página HTML;
  10. 10. Algumas propriedades CSS
  11. 11. Algumas propriedades CSS  A propriedade Background  Utilizada para definir efeitos de fundo em um elemento CSS;  Alguns possíveis efeitos: background-color (cor de fundo), background-image (imagem de fundo), background-repeat (repetição da imagem de fundo); 11 body { background-color: #b0c4de; background-image:url('paper.gif'); }
  12. 12. Algumas propriedades CSS  Formatação de texto com CSS  Utilizamos a propriedade color para setar uma cor no texto de um determinado elemento;  Com CSS, uma cor pode ser especificada com:  Um valor hexadecimal (Ex.: #FF0000)  Um valor RGB (Ex.: rgb(255,0,0))  O nome da cor em inglês (Ex.: red) 12 body { color: blue; }
  13. 13. Algumas propriedades CSS  Alinhamento de texto com CSS  Utilizamos a propriedade text-align para definir o alinhamento horizontal em textos;  O texto pode ser centralizado (center), alinhado a esquerda ou direita (left ou right) ou justificado (justify); 13 h1 { text-align: right; } P { text-align: center; }
  14. 14. Algumas propriedades CSS  Decoração de textos com CSS  A propriedade text-decoration é usada para setar ou remover decorações em textos; 14 a { text-decoration: none; } h1 { text-decoration: line-through; } h2 { text-decoration: underline; } h3 { text-decoration: overline; }
  15. 15. Algumas propriedades CSS  Transformações de textos  A propriedade text-transform é usada para manter textos em caixa alta ou caixa baixa; 15 p { text-transform: uppercase; } #area { text-transform: lowercase; } #area2 { text-transform: capitalize; }
  16. 16. Algumas propriedades CSS  Indentação  A propriedade text-indent é usada para especificar a indentação da primeira linha de um texto; 16 p { text-indent: 50px; }
  17. 17. Algumas propriedades CSS  Tipos de Fonte  A propriedade font-family é usada para setar o tipo de fonte a ser utilizado em um texto;  Podemos definir vários tipos de fonte para a mesma propriedade.  Caso um ou mais navegadores não suporte um dos tipos listados; 17 p { font-family: “Times new Roman”, Times, Serif; }
  18. 18. Algumas propriedades CSS  Estilos de Fonte  A propriedade font-style é usada para definir o estilo de fonte a ser utilizado em um texto; 18 p { font-style: italic; } #exemplo { font-style: oblique; }
  19. 19. Algumas propriedades CSS  Tamanho de Fonte  A propriedade font-size seta o tamanho do texto; 19 p { font-size: 40px; } #exemplo { font-size: 14px; }
  20. 20. Algumas propriedades CSS  Largura e altura de um elemento  As propriedades width e height (largura e altura) setam, respectivamente, a largura e altura de um determinado elemento; 20 p { width: 240px; height: 100px; }
  21. 21. Algumas propriedades CSS  Bordas  Através da propriedade border (borda) podemos inserir bordas em elementos CSS; 21 p { border: 5px solid red; } #exemplo { border: 1px dotted blue; }
  22. 22. Algumas propriedades CSS  Margens  Através da propriedade margin podemos inserir margens em elementos CSS; 22 #exemplo { margin-top: 100px; margin-bottom: 100px; margin-left: 100px; margin-right: 100px; }
  23. 23. Algumas propriedades CSS  Padding  A propriedade padding define o espaço entre a borda de um elemento e seu conteúdo; 23 #exemplo { padding-top: 100px; padding-bottom: 100px; padding-left: 100px; padding-right: 100px; }

×