Aula CSSVianna

Instituto Vianna Júnior
Curso Superior de Tecnologia em

Desenvolvimento Web
INTRODUÇÃO À PROGRAMAÇÃO
WEB
Profª. Lúcia Helena de Magalhães
2007
Site Semântico
• Web Semântica
Segundo RABBITE, Semântica é uma web que
tem toda sua informação organizada,
possibilitando que essa informação seja entendida
não só pelos humanos, mas também por máquinas.
Site Semântico
TAG <TITLE>
Títulos de janela
• O título deve refletir o conteúdo da página
• Toda Homepage necessita de um título de janela

simples e objetivo (especificado pela tag TITLE de
cada documento HTML).
• Os títulos das janelas desempenham um papel

crítico na marcação e localização de sites para
mecanismos de pesquisa.
Título
• Não use acentos no título da página
• Use apenas 60 caracteres para descrição do título.
• Para serem pesquisáveis, os títulos de janela

devem transmitir o máximo de informações
possível com o mínimo de palavras.
Dicas
• Iniciar o título da janela com a palavra que resume
a informação (geralmente o nome da empresa)
• Não incluir o nome de domínio de nível superior,

como ".com", no título da janela, a menos que faça
realmente parte do nome da empresa, como em
"Amazon.com"
Exemplo HTML Semântico
Tag H1
• <h1> Para títulos
• <P> Para parágrafos

Exemplo HTML NÃO Semântico
OBS:
•Use sempre H1 para títulos principais;
• Use H2 para subtítulos

HTML Semântico
• ALT
• Use sempre o atributo “alt” na inserção de

imagens.
• Quando a imagem não aparecer, a descrição da

imagem estará disponível;
<img src=“imagem.gif” alt=“Notbook LG”

HTML Semântico
• Hiperlinks
• Use texto como hiperlink, ao invés de usar
figuras como link.
<a href=http://www.viannafr.edu.br>Vianna Júnior</a>
Tabelas Semanticamente Corretas
• TAG CAPTION
A tag <caption> é usada para inserir o título
da tabela.
• TAG TH
• TAGS THEAD TBODY e TFOOT

As tags <thead>, <tbody> e <tfoot> servem para
otimizar a estrutura de uma tabela. Elas definem
onde será exibido um determinado bloco de
elementos e seu respectivo conteúdo:
. <thead> - topo da tabela

. <tfoot> - rodapé da tabela. Deve ser inserido antes
da tag <tbody>
. <tbody> - todo o conteúdo da tabela
Listas
• Utilizar tags de parágrafo (<p></p>) para criar

uma lista não é semanticamente correto.
• Utilize o tag correto para lista

<ul><li>item1></li></ul>
<ol><li>item1></li></ol>
HTML - comandos e atributos complementares
Formatação de Texto
• <cite> caracteres/ citação ... </cite> - marca o texto

como citação aplicando o efeito itálico sobre ele.
<code> caracteres ... </code> - define o texto como

sendo um código de programação.
<var> caracteres ... </var> - indica que o texto

corresponde a
variáveis de um programa - equivalente ao itálico.
Meta TAGS
• Metas Tags são “etiquetas eletrônicas” usadas para
disponibilizar informações adicionais para facilitar
o encontro de informações pelo sistemas de busca.
• Os Meta Tags devem ser colocados em cada

página do site entre o <HEAD>...</HEAD>
Meta TAGS
Exemplos: HTTP-EQUIV
Content-Type
<META HTTP-EQUIV="Content-type"
CONTENT="text/html; charset=ISO-2022-JP">
- Usado para informar ao Browser o conjunto de
caracteres a ser usado. Normalmente esta tag já
é colocada pelo editores HTML.
Meta TAGS
• Refresh
• <META HTTP-EQUIV="Refresh"
CONTENT="3;URL=http://www.viannajr.edu.br">
• Especifica o tempo que o Browser usará para

atualizar a leitura, opcionalmente pode ser usado
para redirecionar para outra página.
Meta TAGS
Exemplos: NAME
• TITLE
<META NAME=“Title” CONTENT=“Web Semantica,
Web Mining”>
• Meta Tag “TITLE” é usada para definir o nome da página.

Meta TAGS
• DESCRIPTION
• <META NAME="description“
CONTENT="Objetiva melhorar as potencialidades
da web através de padrões que permitem
atribuir significados aos conteúdos das
páginas...">
Fornece uma breve descrição da página usada

pelos "robôs " para descrever seus documentos
nos sistemas de buscas.
Meta TAGS
• KEYWORDS
• <META NAME="keywords" CONTENT="web
semantica web mining padroes tableless css
enginer">
Meta Tag “KEYWORDS” é usado para definir

palavras chaves que ajudarão a identificar seu
Site nos sistemas de buscas.
OBS.: Não use virgula.

Meta TAGS
Author
• <META NAME="author" content=“Lucia Helena">
• Tipicamente usado para informar o autor da

página.
Generator
• <META NAME="generator" content="Notepad">
• Tipicamente usada para informar a ferramenta

HTML usada para construir a página.
Meta TAGS
• Exemplo:
Tableless
• Tableless – Tradução “menos tabelas” não é uma
tecnologia nem uma forma de programação, e sim
uma metodologia, uma maneira de
desenvolvimento.
• Tem como principal característica eliminar o uso
de diagramação de tabelas para a diagramação do
layout.
• Não prega a eliminação da tag <table>, e sim seu
uso semântico.
• Principal objetivo é atingir os padrões Web.
• Formatação das páginas via CSS.
CSS
• CSS é o mesmo que Cascading Style Sheets
(Folhas de Estilo em Cascata).
• No que eles podem nos ajudar?
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
CSS
• Como criar estilos
Cada estilo é definido como uma regra CSS.
Cada regra deve utilizar a seguinte
Sintaxe:
elemento {atributo1: valor;
atributo2: valor
}
CSS
• Elemento descreve o elemento de design ao
qual o estilo será aplicado. A mesma tag HTML
mas sem os sinais de maior e menor. Essa parte
da regra é chamadas de seletor.
• Atributo Elemento que você quer usar como
estilo. Deve ser um nome de atributo CSS válido,
como o atributo fontsize.
• Valor a configuração aplicada ao atributo.
Deve ser uma configuração válida para o atributo
em questão, como 20pt (20 pontos) para font
size.
• Atributo:valor a parte da declaração da
regra. Você pode atribuir múltiplas declarações
se desejar separadas com pontoevírgula (;).
CSS
• Exemplos.
• H1 {fontsize: 42pt}
Todos os títulos de nível 1 (tags <H1>)
devem ter tamanho de 42 pontos;
• H2 {fontsize: 24pt;
color: blue}
Todos os títulos de nível 2 (tags <H2>)
devem ter tamanho de 24 pontos e cor azul;
CSS
• Exemplos:
<style type="text/css">
P {font-family: Times;
font-size: 12pt;
color: blue;
margin-left: 50px
}
</style>
• Se o valor for uma palavra composta, deverá estar
entre aspas duplas " ", ou simples ':
h3 { font-family: "Comic Sans MS" }
CSS
Agrupamento de Seletores
• Uma regra CSS quando válida para vários

seletores, estes podem ser agrupados.
• Separe cada seletor com uma vírgula.
• A cor de todos os cabeçalhos será azul.
h1, h2, h3, h4, h5, h6 { color:
#0000FF; }
CSS
O seletor classe
• A aplicação do seletor de classe a uma marcação HTML é
feita utilizando o atributo HTML.
• As regras de estilos não estão restritas somente aos
elementos HTML (tags);
• Pode ser declarado um nome e com ele criar uma classe a
qual definirá as regras CSS;
• As classes podem ser aplicadas a qualquer elemento
HTML;
• Pode ser aplicado estilos diferentes para o mesmo tipo de
elemento do HTML, usando classes diferentes para cada um
deles.
CSS
O seletor classe
• A sintaxe é praticamente idêntica à sintaxe
normal, com adição de um ponto e o nome
da classe depois do elemento na qual será
utilizado o
atributo
Exemplo:
<STYLE TYPE="text/css">
elemento.nomedaClasse {atributo:valor; ...}
</STYLE>
CSS
Exemplo:
CSS
• Classe aplicável a qualquer elemento HTML.
• Omite o nome do elemento antes da classe.
• A regra CSS pode ser aplicada a qualquer elemento HTML;
• Exemplo:
Visualização
CSS
• Pode definir regras de CSS em três
lugares.
• em um documento separado fora de todos
os documentos HTML (Externo);
• No cabeçalho de um documento HTML
(Incorporado);
• Dentro de uma tag de HTML (Inline).
CSS
• Estilos externos
Externo significa colocar as regras de CSS em um
arquivo separado, e a página HTML pode fazer um
link para esse arquivo. Essa abordagem permite
definir regras em um ou mais arquivos que podem
ser aplicadas em várias páginas do site.
Exemplo:
H1 {font-family: 'Comic Sans MS';
font-size: 36pt;
color: blue}
Salvar como estilo.css
P {font-family: 'Courier';
margin-left: 1in}
CSS
• Folha de estilo linkada
• Para utilizar os estilos definidos no arquivo .css
adicione a tag a seguir ao cabeçalho da
página.
<LINK REL="STYLESHEET” HREF="estilo.css"
TYPE="text/css">
• Exemplo
CSS
Folha de estilo importada
<head>
<style type="text/css">
@import url("estilo.css");
</style>
</head>
CSS
• Estilos incorporados
Incorporado significa especificar as regras de
CSS no cabeçalho do documento. As regras
incorporadas afetam somente a página atual.
CSS
• Estilos inline
Inline significa especificar as regras de CSS dentro
da tag de HTML. Essas regras afetam somente a tag
atual.
CSS
A PROPRIEDADE FONT
 color: Cor da fonte

 font-family: Tipo de fonte
 font-size: Tamanho de fonte
 font-style: Estilo de fonte
 font-variant: Fontes maiúsculas de menor altura
 font-weight: Quanto mais escura a fonte é (negrito)
 font: Maneira abreviada para todas as propriedades
CSS
Valores válidos para as propriedades da fonte
• color:
c) código hexadecimal: #FFFFFF
d) código rgb: rgb(255,235,0)
e) nome da cor: red, blue, green...etc
• font-family:
h) family-name: define o nome da fonte,
Ex: "verdana", "helvetica", "arial", etc.
CSS
• font-size:
b) xx-small
c) x-small
d) small
e) medium
f) large
g) x-large
h) xx-large
i) smaller
j) larger
k) length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)
l) %
CSS
• font-style:
b) normal: fonte normal na vertical
c) italic: fonte inclinada
d) oblique:fonte obliqua
• font-variant:
g) normal: fonte normal
h) small-caps: transforma em maiúsculas de menor
altura
CSS
• font-weight:
b) normal
c) bold
d) bolder
e) lighter
f) 100
g) 200
h) 300
i) 400
j) 500
k) 600
l) 700
m) 800
n) 900
CSS
A PROPRIEDADE TEXT
 color: Cor do texto;
 letter-spacing: Espaçamento entre letras;
 word-spacing: Espaçamento entre palavras;
 text-align: Alinhamento do texto;
 text-decoration: Decoração do texto;
 text-indent: Recuo do texto;
 text-transform: Forma das letras;
 direction: Direção do texto;
 white-space: Como o browser trata os espaços em branco;
CSS
• color:
b) código hexadecimal: #FFFFFF
c) código rgb: rgb(255,235,0)
d) nome da cor: red, blue, etc
Exemplo:
CSS
• letter-spacing: Espaçamento entre letras
b) normal: é o espaçamento default
c) lenght: uma medida reconhecida pelas CSS (px, pt, em, cm)
Exemplo:
Visualização:
CSS
• word-spacing:
Espaçamento entre palavras
d) normal: é o espaçamento default

e) lenght: uma medida reconhecida pelas CSS (px, pt, em, cm)
CSS
Exemplo
Visualização
CSS
• text-align: Alinhamento do texto
• left: alinha o texto a esquerda
• right: alinha o texto a direita
• center: alinha o texto no centro
• justify: força o texto a ocupar toda a extensão da linha da
esquerda a direita
CSS
Exemplo
CSS
• text-decoration: Decoração do texto
c) none: nenhuma decoração
d) underline: coloca sublinhado no texto
e) overline: coloca um sobrelinhado no texto
f) line-through: coloca uma linha em cima do texto
g) blink: faz o texto piscar
CSS
Exemplo: Visualização:
CSS
• text-indent: Recuo do texto
b) lenght: uma medida reconhecida pelas CSS (px,
pt, cm, ...)
c) % : porcentagem da largura do elemento pai
CSS
Exemplo: Visualização
CSS
• text-transform: Forma das letras do texto
c) none: texto normal

d) capitalize: todas as primeiras letras do texto em
maiúsculas
e) uppercase: todas as letras do texto em maiúsculas
f) lowercase: todas as letras do texto em minúsculas
CSS
Exemplo:
CSS
• direction:
• ltr: texto escrito da esquerda para a direita

• rtl: texto escrito da direita para a esquerda
CSS
• Exemplo:
• Visualização:
CSS
• white-space: Espaço em branco
b) normal: os espaços em branco serão ignorados
pelo browser
c) pre: os espaços em branco serão preservados
pelo browser
d) nowrap: o texto será apresentado todo ele numa
linha única na tela. Não há quebra de linha até
ser encontrada uma tag <br>
CSS
Exemplo:
CSS
• A PROPRIEDADE MARGIN
Define um valor para espessura das margens dos
elementos HTML.
 margin-top: Define a margem superior;
 margin-right: Define a margem direita;
 margin-bottom: Define a margem inferior;
 margin-left: Define a margem esquerda;
 margin: Maneira abreviada para todas as margens
CSS
• Exemplo: margin-top - Margem superior
1 cm
CSS
• margin: Declaração das quatro margens
Permitem o controle do espaçamento em volta
dos elementos HTML.
Existem 4 modos de se declarar as margens:
• margin: valor1: As 4 margens terão valor1;
• margin: valor1 valor2: Margem superior e inferior
terão valor1 e margem direita e esquerda terão valor2
• margin: valor1 valor2 valor3: Margem superior terá
valor, margem direita esquerda terão valor2 e margem
inferior terá valor3
• margin: valor1 valor2 valor3 valor4: Margens
superior, direita, inferior e esquerda nesta ordem.
CSS
• Exemplo: margin
CSS
• A PROPRIEDADE BORDER
 border-width: Espessura da borda
 border-style: Estilo da borda
 border-color: Cor da borda
 border-top-width: Espessura da borda superior

 border-top-style: Estilo da borda superior
 border-top-color: Cor da borda superior
 border-right-width: Espessura da borda direita

 border-right-style: Estilo da borda direita
 border-right-color: Cor da borda direita
 border-bottom-width: Espessura da borda inferior

 border-bottom-style: Estilo da borda inferior
 border-bottom-color: Cor da borda inferior
CSS
• A propriedade border – continuação
 border-left-width: Espessura da borda esquerda
 border-left-style: Estilo da borda esquerda
 border-left-color: Cor da borda esquerda
 border-top: Maneira abreviada para todas as propriedades da borda

superior
 border-right: Maneira abreviada para todas as propriedades da borda
direita
 border-bottom: Maneira abreviada para todas as propriedades da borda
inferior
 border-left: Maneira abreviada para todas as propriedades da borda
esquerda
 border: Maneira abreviada para todas as quatro bordas
CSS
Valores da propriedade style
• style:
• none: nenhuma borda
• hidden: equivalente a none
• dotted: borda pontilhada
• dashed: borda tracejada
• solid: borda contínua
• double: borda dupla
• groove: borda estilo 3D
• ridge: borda em ressalto
• inset: borda em baixo relevo
• outset: borda em alto relevo
CSS
Valores Válidos para a propriedade
width
• width:
b) thin: borda fina
c) medium: borda média
d) thick: borda grossa
e) length: uma medida reconhecida pelas CSS (px,
pt, em, cm, ...)
CSS
Continuação abaixo
CSS
Continuação
Visualização
CSS
Exemplo2
CSS
• Visualização
1cm
1c
m
5cm 5cm
1.5c 1.5cm
1c
m m
1cm
A propriedade padding
• Define um valor para os espaçamentos entre o
conteúdo e as bordas dos elementos HTML.São
elementos invisíveis que criam uma área vazia ao
redor de determinado elemento HTML.
 padding-top: Define a espaçamento superior;

 padding-right: Define a espaçamento direita;
 padding-bottom: Define a espaçamento inferior;
 padding-left: Define a espaçamento esquerda;
 padding: Maneira abreviada para todas os
espaçamentos
A propriedade padding
• Em declaração única a ordem das espaçamentos é:
superior, direito, inferior e esquerdo.
• Há quatro modos de se declarar abreviadamente os
espaçamentos:
• padding: valor1 - Os 4 espaçamentos terão valor1;
• padding: valor1 valor2 - Espaçamento superior e
inferior terão valor; espaçamento direito e esquerdo
terão valor2
• padding: valor1 valor2 valor3- Espaçamento superior
terá valor; espaçamento direito e esquerdo terão valor2;
espaçamento inferior terá valor3
• padding: valor1 valor2 valor3 valor4 - Espaçamentos
superior, direito, inferior e esquerdo nesta ordem.
CSS - padding
Exemplo:
Visualização:
5%
As propriedades “list”
• Esta categoria de propriedades permite formatar diversas
características das listas HTML.
• Existem três tipos de listas HTML: Listas Não-
Ordenadas(<ul>), Listas Ordenadas (<ol>) e Listas de
Definição (<dl>).
 list-style-image: Imagem como marcador da lista;

 list-style-position: Onde o marcador da lista é posicionado;
 list-style-type: Tipo do marcador da lista;
 list-style: Maneira abreviada para todas as propriedades.
Permite declarar de forma abreviada as propriedades de
formatação de listas.
CSS - list
• Valores válidos para as propriedades list
list-style-image:
d) none
e) URL: url(caminho/imagem.gif)
CSS - list
Exemplo: foi definida uma imagem para ser o
marcador
CSS - list
• list-style-position:
• Define onde o marcador deve ser colocado
• outside: marcador fora do alinhamento do texto

• inside: marcador alinhado com texto
Exemplo: list-style-position
Visualização
CSS - list
• Propriedades de controle de dimensões
• list-style-type:
c) none: sem marcador;
d) disc: círculo (bolinha cheia);
e) circle: circunferência (bolinha vazia;)
f) square: quadrado cheio;
g) decimal: números 1, 2, 3, 4;
h) decimal-leading-zero;
i) lower-roman: romano minúsculo i, ii, iii, iv.
j) upper-roman: romano maiúsculo I, II, III, IV.
k) lower-alpha: letra minúscula a, b, c, d.
l) upper-alpha: letra maiúscula A, B, C, D.
CSS - list
Visualizaçã
o
CSS
• AS PROPRIEDADES “BACKGROUND”
• Permitem a formatação dos fundos dos elementos
HTML.
• background-color:
 código hexadecimal: #FFFFFF
 código rgb: rgb(255,235,0)
 nome da cor: red, blue, green, etc
CSS
Exemplo: Visualização
CSS
• background-image:
• Aplica uma imagem de fundo no elemento
c) nome (nenhum);
d) url(endereço para a imagem)
• background-repeat:
• no-repeat: Não repete;
• repeat: Repete vertical e horizontal;
• repeat-y: Repete vertical;
• repeat-x: Repete horizontal.
CSS
• Exemplo:
CSS
• background-attachment:
• fixed: A imagem permanece fixa na tela enquanto a página é rolada;
• scroll: Especifica que a imagem devem rolar junto com a página
• background-position:
a) center center
• x-pos y-pos
b) center left
• x-% y-%
c) center right
• top left
d) bottom left
• top center
e) bottom center
• top right
f) bottom right
• background: Permite especificar de forma abreviada os

valores das outras propriedades.
CSS
• Exemplo:
CSS
• Pseudo-elementos CSS
• São usados em CSS, para adicionar efeitos a um
seletor, ou a parte de um seletor.
• A sintaxe dos pseudo-elementos:
seletor:pseudo-elemento
{propriedade: valor;}
• As classes em CSS podem também ser usadas com
pseudo-elementos.
• Esta regra permite que você defina diferentes
efeitos para pseudo-elementos localizados em
diferentes lugares em uma mesma página.
CSS
• Pseudo-classes
. Sua sintaxe é a seguinte:
Seletor:pseudo-classe{propriedade:valor;}
As pseudo-classes também também podem ser combinadas

com seletores de classe, obedecendo a seguinte sintaxe:
• classe:pseudo-classe {propriedade:valor;}
• Seletor.classe.pseudo-classe {propriedade:valor;}
CSS
• Pseudo-classes para links. Foram criadas para
aplicar efeitos em marcações<a></a>, ou seja,
em hyperlinks.
• :link – formata os hyperlinks não visitados;
• :visited - formata os hyperlinks já visitados;
• :hover - formata os hyperlinks que estão com o
cursor do mouse sobre eles;
• :active - formata os hyperlinks ativados
Obs1: a pseudo-classe “:hover” pode ser aplicada em qualquer

elemento HTML.
CSS
CSS
• O pseudo-elemento first-letter
Permite aplicar uma formatação ao primeiro caractere
de um elemento. Exemplo:
Visualização
:
CSS
• O pseudo-elemento first-line
Permite formatar a primeira linha de um texto contido em um
elemento. Exemplo:
Visualização

Aula CSSVianna

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Aula CSSVianna

Transféré par

Droits d'auteur :

Formats disponibles

Instituto Vianna Júnior

Curso Superior de Tecnologia em

Profª. Lúcia Helena de Magalhães

• Toda Homepage necessita de um título de janela

• Os títulos das janelas desempenham um papel

• Use apenas 60 caracteres para descrição do título.

• Para serem pesquisáveis, os títulos de janela

• Não incluir o nome de domínio de nível superior,

• <h1> Para títulos

• <P> Para parágrafos

• Use H2 para subtítulos

• Use sempre o atributo “alt” na inserção de

• Quando a imagem não aparecer, a descrição da

<img src=“imagem.gif” alt=“Notbook LG”

• TAGS THEAD TBODY e TFOOT

. <thead> - topo da tabela

• Utilizar tags de parágrafo (<p></p>) para criar

• Utilize o tag correto para lista

• <cite> caracteres/ citação ... </cite> - marca o texto

<code> caracteres ... </code> - define o texto como

<var> caracteres ... </var> - indica que o texto

• Os Meta Tags devem ser colocados em cada

• Especifica o tempo que o Browser usará para

• Meta Tag “TITLE” é usada para definir o nome da página.

Fornece uma breve descrição da página usada

Meta Tag “KEYWORDS” é usado para definir

OBS.: Não use virgula.

• Tipicamente usado para informar o autor da

• Tipicamente usada para informar a ferramenta

• Uma regra CSS quando válida para vários

 color: Cor da fonte

d) normal: é o espaçamento default

c) none: texto normal

• ltr: texto escrito da esquerda para a direita

 border-top-width: Espessura da borda superior

 border-right-width: Espessura da borda direita

 border-bottom-width: Espessura da borda inferior

 border-top: Maneira abreviada para todas as propriedades da borda

 padding-top: Define a espaçamento superior;

 list-style-image: Imagem como marcador da lista;

• outside: marcador fora do alinhamento do texto

• background: Permite especificar de forma abreviada os

As pseudo-classes também também podem ser combinadas

Obs1: a pseudo-classe “:hover” pode ser aplicada em qualquer

Vous aimerez peut-être aussi