tecnologias para internet - aula 4
DESCRIPTION
Tecnologias para Internet - Aula 4TRANSCRIPT
![Page 1: Tecnologias para Internet - Aula 4](https://reader036.vdocuments.net/reader036/viewer/2022081519/5584ce77d8b42ae0138b4ec8/html5/thumbnails/1.jpg)
Profº Thyago Maia
Tecnologias para Internet
Aula 4
![Page 2: Tecnologias para Internet - Aula 4](https://reader036.vdocuments.net/reader036/viewer/2022081519/5584ce77d8b42ae0138b4ec8/html5/thumbnails/2.jpg)
Sumário
Camada de Apresentação Introdução a CSS
![Page 3: Tecnologias para Internet - Aula 4](https://reader036.vdocuments.net/reader036/viewer/2022081519/5584ce77d8b42ae0138b4ec8/html5/thumbnails/3.jpg)
Introdução ao HTML
Estilos HTML 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;
Existem 3 formas para inserir uma folha de estilo: Folha de estilo externa; Folha de estilo interna; Estilos “em linha”;
![Page 4: Tecnologias para Internet - Aula 4](https://reader036.vdocuments.net/reader036/viewer/2022081519/5584ce77d8b42ae0138b4ec8/html5/thumbnails/4.jpg)
Introdução ao HTML
Folha de estilo interna Pode ser usada se um documento HTML possui um
único estilo; Estilos internos são definidos entre as tags <head>
e </head>, através da tag <style>;<html>
<head><style type="text/css">body {background-color:yellow;}p {color:blue;}</style> </head><body>...
![Page 5: Tecnologias para Internet - Aula 4](https://reader036.vdocuments.net/reader036/viewer/2022081519/5584ce77d8b42ae0138b4ec8/html5/thumbnails/5.jpg)
Introdução ao HTML
Folha de estilo externa Ideal quando o mesmo estilo é aplicado em várias
páginas; Podemos mudar o estilo de 50 páginas HTML, por
exemplo, a partir de um único arquivo;
<html>
<head><link rel="stylesheet" type="text/css" href="mystyle.css" /> </head><body>...
![Page 6: Tecnologias para Internet - Aula 4](https://reader036.vdocuments.net/reader036/viewer/2022081519/5584ce77d8b42ae0138b4ec8/html5/thumbnails/6.jpg)
Introdução ao HTML
Estilos “em linha” Estilos aplicáveis em um elemento simples; Para utilizar estilos “em linha”, definimos o atributo
style em uma tag específica; O valor do atributo poderá conter qualquer propriedade
CSS;<html><body>
<p style=“margin-left: 20px”>Parágrafo com 20 pixels de margem esquerda</p>
</body></html>
![Page 7: Tecnologias para Internet - Aula 4](https://reader036.vdocuments.net/reader036/viewer/2022081519/5584ce77d8b42ae0138b4ec8/html5/thumbnails/7.jpg)
Introdução a CSS
O que é CSS? Sigla para Cascading Style Sheets; Estilos definem como os elementos HTML serão
apresentados; Estilos foram adicionados no HTML 4.0 para resolver
um problema: Separar o conteúdo da sua formatação!
Folhas de estilo externas salvam tempo de trabalho; Folhas de estilo externas são armazenadas em
arquivos .css;
![Page 8: Tecnologias para Internet - Aula 4](https://reader036.vdocuments.net/reader036/viewer/2022081519/5584ce77d8b42ae0138b4ec8/html5/thumbnails/8.jpg)
Introdução a 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.);
h1{Color: blue;Font-size: 12px;
}
Seletor
Declaração
Propriedade Valor
![Page 9: Tecnologias para Internet - Aula 4](https://reader036.vdocuments.net/reader036/viewer/2022081519/5584ce77d8b42ae0138b4ec8/html5/thumbnails/9.jpg)
Introdução a CSS
Os seletores id e class Além dos seletores de elementos HTML, CSS
também permite que nós criemos nossos próprios seletores, chamados id e class;
![Page 10: Tecnologias para Internet - Aula 4](https://reader036.vdocuments.net/reader036/viewer/2022081519/5584ce77d8b42ae0138b4ec8/html5/thumbnails/10.jpg)
Introdução a CSS
Os seletores id Seletores id são usados para especificar um estilo
para um elemento único; Seletores id formatam elementos HTML que os
invocam a partir do atributo id;
/* no css */
#paragrafos{
color: red;}
<!-- no html -->
<p id=“paragrafos” />
![Page 11: Tecnologias para Internet - Aula 4](https://reader036.vdocuments.net/reader036/viewer/2022081519/5584ce77d8b42ae0138b4ec8/html5/thumbnails/11.jpg)
Introdução a CSS
Os seletores class Seletores class são usados para especificar um
estilo para um grupo de elementos; Seletores class formatam elementos HTML que os
invocam a partir do atributo class;
/* no css */.centro{
text-align: center;}
<!-- no html -->
<p class=“centro” />
![Page 12: Tecnologias para Internet - Aula 4](https://reader036.vdocuments.net/reader036/viewer/2022081519/5584ce77d8b42ae0138b4ec8/html5/thumbnails/12.jpg)
Introdução a CSS
Os seletores class Também podemos especificar que apenas alguns
tipos de elementos HTML deverão ser afetados pela classe;
/* no css */p.centro{
text-align: center;}
<!-- no html -->
<p class=“centro” />
![Page 13: Tecnologias para Internet - Aula 4](https://reader036.vdocuments.net/reader036/viewer/2022081519/5584ce77d8b42ae0138b4ec8/html5/thumbnails/13.jpg)
Introdução a 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);
body {
background-color: #b0c4de; }
![Page 14: Tecnologias para Internet - Aula 4](https://reader036.vdocuments.net/reader036/viewer/2022081519/5584ce77d8b42ae0138b4ec8/html5/thumbnails/14.jpg)
Introdução a 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)
body {
color: blue; }
![Page 15: Tecnologias para Internet - Aula 4](https://reader036.vdocuments.net/reader036/viewer/2022081519/5584ce77d8b42ae0138b4ec8/html5/thumbnails/15.jpg)
Introdução a 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);
h1 {
text-align: right; }
P{
text-align: center;}
![Page 16: Tecnologias para Internet - Aula 4](https://reader036.vdocuments.net/reader036/viewer/2022081519/5584ce77d8b42ae0138b4ec8/html5/thumbnails/16.jpg)
Introdução a CSS
Decoração de textos com CSS A propriedade text-decoration é usada para setar
ou remover decorações em textos;
a { text-decoration: none; }h1 { text-decoration: line-through; }h2 { text-decoration: underline; }h3 { text-decoration: overline; }h4 { text-decoration: blink; }
![Page 17: Tecnologias para Internet - Aula 4](https://reader036.vdocuments.net/reader036/viewer/2022081519/5584ce77d8b42ae0138b4ec8/html5/thumbnails/17.jpg)
Introdução a CSS
Transformações de textos A propriedade text-transform é usada para manter
textos em caixa alta ou caixa baixa;
p { text-transform: uppercase; }#area { text-transform: lowercase; }#area2 { text-transform: capitalize; }
![Page 18: Tecnologias para Internet - Aula 4](https://reader036.vdocuments.net/reader036/viewer/2022081519/5584ce77d8b42ae0138b4ec8/html5/thumbnails/18.jpg)
Introdução a CSS
Indentação A propriedade text-indent é usada para especificar
a indentação da primeira linha de um texto;
p {
text-indent: 50px; }
![Page 19: Tecnologias para Internet - Aula 4](https://reader036.vdocuments.net/reader036/viewer/2022081519/5584ce77d8b42ae0138b4ec8/html5/thumbnails/19.jpg)
Introdução a 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;
p {
font-family: “Times new Roman”, Times, Serif; }
![Page 20: Tecnologias para Internet - Aula 4](https://reader036.vdocuments.net/reader036/viewer/2022081519/5584ce77d8b42ae0138b4ec8/html5/thumbnails/20.jpg)
Introdução a CSS
Estilos de Fonte A propriedade font-style é usada para definir o
estilo de fonte a ser utilizado em um texto;
p {
font-style: italic; }
#exemplo{
font-style: oblique; }
![Page 21: Tecnologias para Internet - Aula 4](https://reader036.vdocuments.net/reader036/viewer/2022081519/5584ce77d8b42ae0138b4ec8/html5/thumbnails/21.jpg)
Introdução a CSS
Tamanho de Fonte A propriedade font-size seta o tamanho do texto;
p {
font-size: 40px; }
#exemplo{
font-size: 14px; }
![Page 22: Tecnologias para Internet - Aula 4](https://reader036.vdocuments.net/reader036/viewer/2022081519/5584ce77d8b42ae0138b4ec8/html5/thumbnails/22.jpg)
Introdução a 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;
p {
width: 240px; height: 100px;
}
![Page 23: Tecnologias para Internet - Aula 4](https://reader036.vdocuments.net/reader036/viewer/2022081519/5584ce77d8b42ae0138b4ec8/html5/thumbnails/23.jpg)
Introdução a CSS
Bordas Através da propriedade border (borda) podemos
inserir bordas em elementos CSS;
p {
border: 5px solid red;}
#exemplo {
border: 1px dotted blue;}
![Page 24: Tecnologias para Internet - Aula 4](https://reader036.vdocuments.net/reader036/viewer/2022081519/5584ce77d8b42ae0138b4ec8/html5/thumbnails/24.jpg)
Introdução a CSS
Margens Através da propriedade margin podemos inserir
margens em elementos CSS;
#exemplo {
margin-top: 100px; margin-bottom: 100px;
margin-left: 100px;margin-right: 100px;
}
![Page 25: Tecnologias para Internet - Aula 4](https://reader036.vdocuments.net/reader036/viewer/2022081519/5584ce77d8b42ae0138b4ec8/html5/thumbnails/25.jpg)
Introdução a CSS
Padding A propriedade padding define o espaço entre a
borda de um elemento e seu conteúdo;
#exemplo {
padding-top: 100px; padding-bottom: 100px;
padding-left: 100px;padding-right: 100px;
}