tecnologias para internet - aula 4
DESCRIPTION
Tecnologias para Internet - Aula 4TRANSCRIPT
Profº Thyago Maia
Tecnologias para Internet
Aula 4
Sumário
Camada de Apresentação Introdução a CSS
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”;
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>...
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>...
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>
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;
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
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;
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” />
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” />
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” />
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; }
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; }
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;}
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; }
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; }
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; }
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; }
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; }
Introdução a CSS
Tamanho de Fonte A propriedade font-size seta o tamanho do texto;
p {
font-size: 40px; }
#exemplo{
font-size: 14px; }
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;
}
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;}
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;
}
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;
}