Apostila HTML Css

APOSTILA DE HTML E CSS
Formiga, MG
2010

PROGRAMAO WEB PROF. DANIELLE COSTA

2
ndice

A Linguagem HTML............................................................................................ 3
Introduo........................................................................................................................... 3
Estrutura da pgina ............................................................................................................. 3
Estrutura do documento HTML ......................................................................................... 3
Formatao do Texto.......................................................................................................... 5
Definio de Listas ............................................................................................................. 7
Imagens............................................................................................................................. 10
Tabelas.............................................................................................................................. 11
Hyperlinks ........................................................................................................................ 12
Formulrios....................................................................................................................... 14
Frames .............................................................................................................................. 19

CSS-Folhas de estilo em cascata (Cascading Style Sheets) ... 22
Introduo......................................................................................................................... 22
Como criar estilos............................................................................................................. 22
As folhas de estilo ............................................................................................................ 23
Vantagens e Desvantagens ............................................................................................... 24
Atributos de CSS IE ......................................................................................................... 25


3
A Linguagem HTML

Introduo

HTML (Hypertext
1
Markup Language) - uma linguagem padro de marcao (tags) de
hipertexto, no-proprietrio, para exibio de contedo no World Wide Web da Internet.
No considerada uma linguagem de programao porque no possui comandos para
tomada de decises (if..then..else), estruturas de repetio (do..while, repeat..while),
funes etc.

Compe-se de diretivas (tags e atributos) que so interpretadas pelos navegadores. Ao
interpretar as diferentes diretivas temos a apresentao de uma pgina seguindo a
formatao de texto, cores e imagens definida pelo autor.
Pgina - um hipertexto no WWW que associa diferentes tipos de mdia como textos,
imagens, udio e vdeo, conectados por hiperlinks. Pode ser nica ou estar ligada a outras
pginas formando um sistema de informaes ou um website. Vale a pena ressaltar que
uma pgina html composta de texto e deve ser salva como htm ou html.
Pgina principal ou Home Page - A pgina de entrada ou pgina inicial.

Editores grficos - O uso dos editores permitem que o autor crie uma pgina sem conhecer
os cdigos da linguagem HTML. So exemplos de editores HTML: Adobe Dreamweaver,
Nvu, Edit Plus, Microsoft FrontPage e Mozilla Composer,etc. Alm de Editores existem
tambm programas Assistentes que transformam documentos gerados em MSWord,
PowerPoint e Excel em pginas HTML.

Estrutura da pgina

<HTML> e </HTML> - So tags que dizem que o documento do tipo html, ou seja,
uma pgina web.

Estrutura do documento HTML

cabealho <HEAD> e </HEAD> - aqui especifica-se o ttulo da pgina <TITLE>
e </TITLE>, ser apresentado na barra superior do navegador.

Corpo <BODY> e </BODY> - aqui especifica-se: cores de fundo, texto, links, e o
incio do documento. Tudo que estiver entre essas tags interpretado como corpo
do documento e ser exibido pelo navegador

1
Um hipertexto contm um conjunto de textos interligados e recursivos, ele no comea em lugar algum
nem tem final e apresenta vrias seqncias de leitura.


4
Propriedades aplicadas a tag body, se no forem aplicadas assumem um valor padro:

bgcolor - cor de fundo para a pgina
background - imagem nos formatos .jpg ou .gif usada de fundo da pgina
text - define uma cor para o texto
link - define uma cor para os links
vlink - define cor para os link j visitados
alink - define a cor para o link na hora que for ativado
topmargin -controla a distncia do corpo do texto e a margem superior
bottommargin - controla a distncia do corpo do texto e a margem inferior
leftmargin - controla a distncia do corpo do texto e a margem esquerda
rightmargin - controla a distncia do corpo do texto e a margem direita

Exemplo 1
<BODY BACKGROUND=nome_imagem BGCOLOR=nome_cor
TEXT=nome_cor LINK=nome_cor VLINK=nome_cor ALINK=nome_cor>

Exemplo 2
<BODY BACKGROUND=nome_imagem BGCOLOR=#RRGGBB
TEXT=#RRGGBB LINK=#cdigo_cor VLINK=#RRGGBB
ALINK=#RRGGBB >

A figura 1 abaixo exibe o cdigo HTML visualizado por meio do navegador.

Figura 1 Cdigo de uma pgina HTML


5
Formatao do Texto

O texto pode ser formatado com as tags de tamanho, itlico, negrito e fonte monoespaada,
sobrescrito e subscrito. Para todas elas necessrio delimitar o incio e o fim do texto a ser
formatado.

Cor e fonte :
<font color = nome_cor> Texto </font>
<font face = tipo_letra > Texto </font>
<font size =+n>Texto </font> , onde n seria o incremento ao tamanho original.

Tabela 1 Cores
Nome da cor (portugus) Nome da cor (ingls) Hexadecimal
Bege Beige #F5F5DC
Preta Black #000000
Azul Blue #0000FF
Ouro Gold #FFD700
Verde Green #008000
Cinza Gray #808080
Amarela Yellow #FFFF00
Magenta Magenta #FF00FF
Marrom Brown #A52A2A
Laranja Orange #FFA500
Vermelha Red #FF0000
Rosa Pink #FFC0CB
Prpura Purple #800080
Branca White #FFFFFF

Tipos de fonte definidas pela linguagem HTML:

Cabealhos :
<H1> Tamanho H1</H1>
Exemplo 3: h6, h5, h4, h3, h2, h1


6
Outros estilos :
<B> Texto em Negrito ( Bold ) </B>
--Texto em Negrito ( Bold )
<I> Texto em Itlico </I>
--Texto em Itlico
<TT> Texto com fonte monoespaada </TT>
--Texto com fonte monoespaada
<U> Texto sublinhado </u>
Texto sublinhado
<SUP> Texto sobrescrito </SUP>
--
Texto sobrecrito
<SUB> Texto subscrito </SUB> --
Texto subscrito

Acentuao e Caracteres Especiais

A codificao
2
permite a qualquer equipamento interpretar os cdigos e exibir na tela o
caractere desejado. Funcionamento:
Primeiro o caractere "&"
Seguido da letra que dever ser acentuada, pode ser minscula ou maiscula
Veja a tabela abaixo e coloque o cdigo do acento desejado
Acrescente o caractere " ; " ( ponto de vrgula )

Exemplo 4 :
dirio = diário
natao = natação

Acentos

Caracteres Especiais

Disposio do Texto na Pgina

Diretivas para uma formatao bsica de um texto em uma pgina:

<CENTER>: centraliza o texto em relao pgina
<BR>: quebra de linha, iniciando o texto seguinte na linha logo abaixo
<P>: fora o fim de um pargrafo, ou seja, pula uma linha antes de iniciar outro pargrafo

2
HTML no diferencia maisculas ou minsculo nos identificadores de tags e nome de atributos
Agudo Grave Circunflexo Til Trema Cedilha
&_acute &_grave &_circ &_tilde &_uml; &_cedil;
E < > (c) Espao em Branco
&amp &lt &gt &copy &nbsp

7
<HR>: rgua horizontal; inclui uma linha horizontal no texto, separando o texto em blocos
width = _% comprimento. Ex. width=50%
size = _ espessura do trao. Ex. size=6
<PRE> : respeita a formatao original do texto inserido na pgina

Definio de Listas

Listas so utilizadas para organizar seu texto em uma relao de itens e subitens, ordenados
ou no. Tipos de listas: Listas ordenadas, listas no-ordenadas e listas de definio.

Listas Ordenadas
<ol> - inicia uma lista
type - define o tipo de numerao da lista que pode ser:
A - Letras maisculas
a - Letras minsculas
I - Algarismos romanos
1 - Nmeros arbicos
</ol> - finaliza a lista
<li> - determina um item da lista

Exemplo 5:
Cdigo html <ol type=1>
<li>Primeiro
<li>Segundo
<li>Terceiro
</ol>
No browser 1. Primeiro
2. Segundo
3. Terceiro

Listas No Ordenadas
<ul> - marca o incio da lista
type - define o tipo de marcador de cada item da lista que pode ser:
disc - pequeno disco slido
square - quadrado preenchido
circle - crculo cheio
</ul>- marca o final da lista
<li> - determina um item da lista

Exemplo 6:
Cdigo html <ul type=disc>
<li>Primeira
<ul>
<li>Filha
<li>Filha
</ul>
<li>Segunda
<li>Terceira
</ul>
No browser

Primeira
Filha
Filha
Segunda
Terceira

8
Listas de Definio
<dl> marca o incio da lista
<dt>indica termo a ser definido
<dd>indica a definio do termo acima

Exemplo 7:
Cdigo html <dl>
<dt> LW
<dd>Linguagem Web
<dt>ED
<dd>Estrutura de Dados
</dl>
No browser

LW
Linguagem Web
ED
Estrutura de Dados


9
Exerccios de fixao:

1) Crie uma pgina chamada ex1.html e deixe-a com o seguinte layout:
a) O texto Aula de HTML deve ter tamanho 4 e ficar centralizado.
b) Aps o texto incluir uma Linha Horizontal tamanho 2 e cor Cinza.
c) O texto Estrutura da pgina deve ser em fonte Arial, tamanho 3 e cor Azul.
d) O texto Estrutura do Documento deve ser em fonte Arial, Negrito, tamanho 3
e cor Verde.
e) O texto Formatao de Texto deve ser em fonte Arial, Itlico, tamanho 3, cor
vermelha.
f) O texto Disposio do texto nas pginas deve ser em texto pr-formato, fonte
Arial, tamanho 5 e cor Magenta.

a) O cabealho Definio de Listas: deve ter tamanho 4.
b) Aps o cabealho incluir uma linha horizontal tamanho 2 e cor cinza.
c) Crie as listas com os seguintes itens:
1. Lista Ordenada
1. Primeiro Item da lista ordenada
2. Segundo Item da lista ordenada
2. Lista no Ordenada
Primeiro Item da lista no ordenada
Segundo Item da lista no ordenada
2. Lista de Definio
E1
Exemplo1

Cada item deve ter fonte tamanho 2, alternar as cores das linhas em Verde e
Vermelho.

3) Utilizar a pgina do ex1.html e inserir os comandos necessrios para que a
mesma tenha uma cor de fundo. Altere o exemplo para receber como fundo
uma imagem "fundo.gif".

Obs: Comandos mnimos para se criar uma pgina HTML:
<html>
<head><title></title></head>
<body>
</body>
</html


10
Imagens

A tag <img> inclui uma imagem dentro de um documento HTML. Elas podem ser usadas
com alguns parmetros como:

border para determinar a moldura da imagem.
Exemplo 8: Imagem com borda:

<IMG border=6 SRC=imagens/figura.gif>

width para determinar a largura da imagem
height para determinar a altura da imagem
Exemplo 9: Imagem com limitao de Altura e Comprimento:

<IMG width=50 height=90 SRC=figura.gif>

Alinhar um texto em relao a uma imagem. Parmetros de alinhamento :
align=left para alinhar a imagem a esquerda do texto.
Exemplo 10: Imagem com texto alinhado a esquerda

Texto que acompanha a figura.

<IMG align=left SRC=figura.gif> Texto

Outros alinhamentos:
align=right para alinhar a imagem a direita do texto
<IMG align=right SRC=figura.gif>
align=top para alinhar o texto com o topo da imagem.
<IMG align=top SRC=figura.gif>.
align=bottom para alinhar o texto com a parte inferior da imagem.
<IMG align=bottom SRC=figura.gif>.
align=middle para alinhar o texto com o meio da imagem.
Imagem com texto alinhado a meia altura da imagem
<IMG align=middle SRC=figura.gif>

11
Tabelas

Alm do propsito original de exibir dados tabulados, as tabelas
3
passaram a ser usadas
com sucesso para posicionar elementos nas pginas. As tags <TABLE> </TABLE>
identificam a tabela, especifica a espessura da borda com o parmetro BORDER.

<th>... </th> table head define o cabealho de cada coluna
<tr> ... </tr> table row delimita a linha
<td> ... </td> table data delimita cada elemento da tabela, cada clula.

Atributos que podem ser usados nas tabelas:
colspan : especfica quantas colunas da tabela a clula ocupar
rowspan : especfica quantas linhas da tabela a clula ocupar
width : define a largura exata da clula
height : define a altura exata da clula
align : alinhamento horizontal ( right, center, left )
valign : alinhamento vertical ( top, middle, bottom )
cellspacing: define o espao entre as clulas

Exemplo 11:
<table border=4 height =300> <th>Coluna 1</th><th>Coluna 2</th>
<tr><td width = 150>linha1, coluna 1</td><td> linha 1, coluna 2</td></tr>
<tr><td width = 150>linha 2, coluna 1</td><td>linha 2, coluna 2</td></tr>
</table>

Resultado na tabela:
Coluna 1 Coluna 2
linha 1, coluna 1 linha 1, coluna 2

Exemplo 12:
<table border=4>
<th colspan=2>Colunas 1 e 2</th>
<tr>
<td>linha1, coluna 1</td><td> linha 1, coluna 2</td></tr>
<tr><td>linha 2, coluna 1</td><td>linha 2, coluna 2</td></tr>
<th rowspan=3>3 linhas</th>
<td>uma linha</td>
<tr><td>duas linhas</td></tr>
<tr><td>trs linhas</td></tr>
</table>

3
Dica: Planeje cada tabela antes de iniciar a codificao. Faa um esboo no papel para ter idia da estrutura.
O esquecimento de uma tag pode comprometer a estrutura da tabela. O ideal escrever a tag de fechamento
sempre aps a tag de abertura, antes de incluir o contedo.

12
Resultado na tabela:
Colunas 1 e 2
uma linha
duas linhas

3 linhas
trs linhas

Hyperlinks

A idia central dos hyperlinks proporcionar liberdade ao usurio para navegar entre
diferentes documentos, clicando em termos ou frases que levem a outros documentos.

Fazer links para outros documentos ( pginas, imagens, sons, etc ), atravs da tag <A>
</A>, chamadas de ncoras. Informar o HREF(endereo de onde est a pgina que ser
acessada ) e o TEXTO/IMAGEM que indicar o link.

< A HREF=http://endereo/documento> texto/imagem </A>

Referncia a outro documento pode ser feita por :

Caminho Absoluto : corresponde ao endereo completo do documento,
utilizado quando os documentos esto em servidores diferentes.
< A HREF=http://mquina/diretrio/pagina.html > texto/imagem </A>

Caminho Relativo : quando o documento a ser acessado est no mesmo
servidor que a pgina atual.
< A HREF=../outra-pgina.html > texto/imagem </A>

Um link Mailto permite que os usurios enviem mensagens para um endereo de e-mail
definido, clicando no hyperlink.

Exemplo 13

<html>
<head>
<title> Usando Hyperlinks </title>
</head>
<body>
<A HREF=ex1.html > Exerccio de Fixao 1 </A><br>
<A HREF=ex2.html > Exerccio de Fixao 2 </A><br>
<A HREF=mailto:aluno1@ifmg.edu.br> E-mail </A>
</body>
</html

13
Exerccios de fixao:


5) No ex4.html adicione hyperlinks nos nomes dos alunos. Cada hyperlink deve
direcionar para a pgina pessoal de cada aluno.


14
Formulrios

Os formulrios em uma pgina Web permitem coletar informaes dos usurios que
visitam uma pgina. Usando campos de entrada de textos, menus e botes possvel colher
dados para diversos fins.Tambm definimos que ao ser tomada assim que o formulrio
for preenchido e enviado.

preciso saber que o HTML oferece apenas os meios para receber as informaes do
usurio e envi-las a um servidor ou endereo de e-mail.O HTML no prov meios para
tratar ou armazenar essas informaes. Para manipular e validar os dados inseridos pelo
usurio antes de envi-los ao servidor preciso ainda de uma linguagem de script cliente-
side (do lado do cliente) como o Javascript por exemplo.

Definio do Formulrio

Um formulrio definido pelas tags <form>e</form>.
A tag de formulrio mais usada a tag <input>. O tipo de input especificado com o
atributo type. Os tipos de input mais comumente usados so explicados abaixo.

Campos Tipo Texto
<FORM>
Nome:<INPUT TYPE=TEXT NAME="Nome">
Senha:<INPUT TYPE=PASSWORD
NAME="Senha" >
</FORM>

Alguns Atributos
VALUE- inicializa o campo com um valor definido.

MAXLENGTH define a quantidade mxima de
caracteres permitidos no campo

DIABLED desabilita o campo para digitao

<FORM>
Nome: <INPUT TYPE=TEXT NAME="Nome"
VALUE="Danielle Costa">
NAME="Senha" MAXLENGTH="8">
</FORM>


15
SIZE- Delimita o tamanho do espao para entrada do
valor nos campos.

<FORM>
Nome: <INPUT TYPE=TEXT NAME="Nome"
SIZE=30 >
NAME="Senha">
</FORM>

Campos Tipo Mltipla Escolha
<FORM>
Frutas :
<INPUT TYPE=CHECKBOX NAME="fruta"
VALUE="Abacaxi">Abacaxi
VALUE="Morango">Morango
VALUE="Limo">Limo
VALUE="Pera">Pera
VALUE="Laranja">Laranja
</FORM>

O atributo CHECKED serve para inicializar um item
como j escolhido.

Campos Tipo Escolha nica
<FORM>
Estado Civil :
<INPUT TYPE=RADIO NAME="estciv"
VALUE="Solteiro">Solteiro
VALUE="Casado">Casado
VALUE="Viuvo">Viuvo
VALUE="Divorciado">Divorciado
VALUE="Outros">Outros
</FORM>


16
Botes de Ao
SUBMIT - Envia os dados preenchidos no formulrio
para o servidor, iniciando a execuo do programa
especificado no atributo ACTION.

RESET - Reinicializa o formulrio com os valores
previamente definidos. O atributo VALUE define a
mensagem sobre o boto.

FILE - Exibe a janela para procura de um arquivo

HIDDEN - Alm dos campos definidos no formulrio
que esto visveis e sero preenchidos pelo visitante
podemos definir campos no visveis que estaro
passando parmetros para o programa a ser executado.

<FORM>
<INPUT TYPE=SUBMIT VALUE="Enviar">
<INPUT TYPE=RESET VALUE="Cancelar">
</FORM>

Botes de Seleo
SELECT- utilizada juntamente com a diretiva
<OPTION> para definir uma lista de valores a serem
selecionados.
Pode-se definir um valor como padro usando o
atributo <OPTION SELECTED>valor
O atributo SIZE utilizado para se apresentar mais
de um valor na pgina.

<FORM>
<SELECT NAME="plataforma" SIZE=3>
<OPTION>PC
<OPTION>Workstation
<OPTION>Alpha
<OPTION>Mainframe IBM
</SELECT>
</FORM>

rea de Texto
A Diretiva TEXTAREA define uma rea para entrada de textos. Os atributos COLS e
ROWS definem o tamanho da janela.

<FORM>
<TEXTAREA COLS=60 ROWS=10 NAME="texto">rea para entrada de texto
</TEXTAREA>
</FORM>

17

Passagem de parmetros pelo formulrio

O atributo METHOD define o mtodo de acesso a URL onde est o script, programa a ser
executado no servidor, especificado pelo atributo ACTION.

<FORM METHOD=GET/POST
4
ACTION= script ></FORM>

Exemplo 14:

<html>
<head>
<title> Usando tipo oculto </head>
<body>
<form method=post action= teste.jsp>
<input type=submit name=enviar value="enviar informaes">
</form>
</body>
</html

4
O mtodo GET envia os dados do formulrio em pares/valor anexados URL descrita em action, separando
cada campo como caractere ?. No recomendado quando no se deseja que o usurio veja o que est
sendo enviado. O mtodo POST envia os dados ocultos no corpo da mensagem.

18
Exerccios de fixao:

6) Construa um formulrio HTML com os seguintes campos:
a) Nome: Texto, usurio pode digitar no mximo 20 caracteres.
b) Idade: Caixa de seleo com os itens:
Entre 0 e 20
Entre 21 e 29
Entre 30 e 35
36 ou Mais
Sexo: Dois botes de radio, tendo um radio o value Masculino e outro radio com
o value Feminino.
c) E-Mail: Texto, usurio pode digitar no mximo 40 caracteres.
d) Observaes: TextArea com sete linhas e 40 colunas.

7) Construa o cdigo HTML para o formulrio mostrado abaixo.


19
Frames

Frames ou quadros permitem a diviso da tela de exposio do navegador em diferentes
reas. Assim, possvel, por exemplo, que se determine uma rea da tela para ser a pgina
principal eoutras reas para menus ou links.

O Frameset ou conjunto de frames, indica como ser estruturado cada quadro na tela em
termos de Linhas (rows) e colunas (cols), e quais pginas devero ser apresentadas em cada
um desses quadros.

possvel ainda definir atributos em nosso Frameset que controlam a visualizao e
navegao coordenada entre os frames.

Atributos de controle

Margem:
marginwidth : determina as margens direita e esquerda do frame
marginheight : determina as margens superior e inferior do frame

Barra de rolagem :
Scrolling : determina se o frame ter barra de rolagem se necessrio ou no.
Eliminao da barra de rolagem
< FRAMESET src = ... SCROLLING = "NO" >

Alterao da estrutura :
Os navegadores permitem que o visitante altere a posio dos frames. Para tanto o
atributo noresize inibe esta possibilidade e torna os frames fixos conforme definido.
< FRAMESET src = ... NORESIZE>

Bordas :
possvel definir se nossa estrutura de quadros ser apresentada ressaltando-se as
bordas entre os frames ou no usando os atributos frameborder e border.

Eliminao das bordas dos frames:
< FRAMESET src = ... FRAMEBORDER="NO" >

Eliminao do espao entre os frames :
< FRAMESET src = .... FRAMEBORDER="NO" BORDER="0">

Direcionamento

O atributo target (alvo) o que indica onde uma pgina dever ser apresenta assim que o
visitante clica em um link . Por definio uma nova pgina ser apresentada na mesma rea
onde est link.
Para redirecionar a pgina para outra rea temos as possibilidades a seguir que devem
constar na definio no link ( <a href=pagina.html target= ... > ) :


20
target="nome da rea " : carrega a pgina na rea especificada.
target=_top : limpa a tela e abre a nova pgina ocupando toda a tela.
target=_blank : abre uma nova janela para exibir a pgina.
target=_self : carrega a pgina na mesma rea do link. Opo default.

Exemplo 15:

Como montar dois frames em coluna:
<FRAMESET COLS="x, y">
<FRAME SRC="col1.html">
</FRAMESET>

Dois frames em linha:
<FRAMESET ROWS="x, y">
<FRAME SRC="lin1.html">
</FRAMESET>

Para montar esta estrutura abaixo, deve-se criar primeiro dois frames em coluna e compor a
segunda coluna com dois frames em linha:
</FRAMESET>
</FRAMESET>

Para montar esta estrutura abaixo, deve-se criar primeiro dois frames em linha e compor a
segunda linha com dois frames em coluna:
</FRAMESET>
</FRAMESET>


21
Exerccios de Fixao

8) Construa a pgina abaixo utilizando frames.

9) Altere o exerccio anterior para exibir bordas e depois barra de rolagem. Inclua
meta tags para especificar o autor, palavras chaves e descrio.


22
CSS
Folhas de estilo em cascata (Cascading Style Sheets)

Introduo

Todo documento escrito utiliza certos elementos de design para formatar sees de texto a
fim de manter a mesma aparncia, seguir um padro. Por exemplo, um elemento de design
Heading 1 geralmente alguma fonte grande que identifica todas as principais divises de
tpicos de um captulo, artigo ou pgina da web. Um elemento de design Heading 2
identifica todos os ttulos dos subtpicos. A HTML inclui uma tag para praticamente todos
os elementos de design comumente utilizados.

No passado, a tag <H1> em quase todos os web sites parecia a mesma - texto preto era
consideravelmente maior que o corpo do texto normal. Se voc quisesse fazer seus prprios
ttulos diferenciados, tinha de formatar cada tag de ttulo individualmente, utilizando tags
<FONT> ou similares.
As folhas de estilo em cascata mudam tudo isso. Com uma folha de estilo, voc pode fazer
uma "declarao global", como "quero que todos os meus ttulos <H1> sejam verdes".
preciso dizer isso somente uma vez e cada ttulo <H1> em seu site ser verde. Se depois
decidir que azul uma cor melhor, no preciso voltar e alterar cada tag <H1> para a cor
azul. Em vez disso, basta alterar o estilo - a "regra" - para "quero que todos os meus ttulos
<H1> sejam azuis".

Como criar estilos

Cada estilo criado definido como uma regra CSS. Cada regra deve utilizar a seguinte
sintaxe:
elemento {atributo1: valor; atributo2: valor ...}
Elemento - descreve o elemento de design ao qual o estilo ser aplicado.
Atributo - o aspecto especfico do elemento que voc quer usar como estilo. Deve ser um
nome de atributo CSS vlido, como o atributo font-size.
Valor - a configurao aplicada ao atributo. Deve ser uma configurao vlida para o
atributo em questo, como 20pt para font-size.
Atributo: valor - parte da declarao da regra. possvel atribuir mltiplas declaraes
separando-as por ponto-e-vrgula (;).
Exemplo 1
H2 {font-size: 24pt; color: blue}

Todos os ttulos de nvel 2 (tags <H2>) devem ter tamanho de 24 pontos e cor azul;

23
As folhas de estilo
Voc pode definir regras de CSS em trs lugares. Os trs lugares so:
Externo - Externo significa que voc coloca as regras de CSS em um arquivo separado, e
ento sua pgina HTML pode fazer um link para esse arquivo. Essa abordagem lhe permite
definir regras em um ou mais arquivos que podem ser aplicadas em alguma pgina do seu
web site.
Exemplo 2
Arquivo meu_estilo.css
H1 {font-family: 'Comic Sans MS';
font-size: 36pt;
color: blue}
H2 {font-family: 'Courier';
margin-left: 0.5in}
Sempre que quiser utilizar esses estilos em uma nova pgina, basta colocar uma tag
<LINK> no cabealho que referencia meu_estilo.css.
<LINK REL="STYLESHEET" HREF="http://estilo/meu_estilo.css" TYPE="text/css">
Voc deve inserir este texto entre as tags <HEAD>...</HEAD> e colocar a localizao
correta do seu arquivo e seu nome.
Incorporado - Incorporado significa que voc especifica as regras de CSS no cabealho do
documento. As regras incorporadas afetam somente a pgina atual.
Se quiser criar um conjunto de estilos que se aplicam a uma nica pgina, voc pode
configurar os estilos exatamente como fizemos no exemplo dos estilos externos - mas em
vez de colocar as tags <STYLE>...</STYLE> e as regras em um arquivo separado, coloque
estas tags na prpria pgina HTML. A estrutura bsica de uma pgina da web que utiliza
estilos incorporados semelhante ao seguinte cdigo:
Exemplo 3

<HTML><HEAD><TITLE>Exemplo Estilos Incorporados</TITLE>
<STYLE TYPE="text/css"><!-- para identificar o arquivo referido como cascading style sheet - ->
P {background-color: #FFFFFF;
font-family:'Comic Sans MS';
font-size: 14pt}
</STYLE>
</HEAD></BODY></HTML>

24
Inline - Inline significa que voc especifica as regras de CSS dentro da tag de HTML.
Essas regras afetam somente a tag atual.

Os estilos inline so os que tm menos efeitos. Eles afetam somente a tag atual e no outras
tags na pgina e tampouco outros documentos. A sintaxe para definir um estilo inline a
seguinte:
Exemplo 4
<A STYLE="color: green; text-decoration: none" HREF="http://www.seusite.com">
Note que em vez das tags <STYLE>...</STYLE>, voc apenas utiliza um atributo STYLE
dentro da tag para definir o estilo. E, em vez de colocar as regras de CSS entre colchetes,
voc as coloca entre aspas, separando-as com ponto-e-vrgula como de costume.

Utilizando a tag <DIV>

As tags HTML <DIV>...</DIV> podem ser usadas para formatar um grande bloco de texto
- uma diviso - abrangendo diversos pargrafos e outros elementos. Isso as torna uma boa
opo para definir estilos que afetam grandes sees de um texto em uma pgina.
Exemplo 5
<STYLE TYPE="text/css">
DIV.sidebar {font=family: "Arial";
font-size: 12pt;
text-align: right;
background-color: #C0C0C0;
margin-left: 1in;
margin-right: 1in}
</STYLE>
Ao colocar na tag <DIV> o atributo CLASS, voc estar fazendo com que todos os
elementos que estejam englobados nesta tag sigam estes padres.
Vantagens e Desvantagens
Separao Lgica da Estruturao e da Formatao das Informaes e reduo do Tamanho
e de Tempo de Carregamento das Pginas. Diferentes browsers interpretam o css de forma
diferente principalmente as verses antigas.


25
Atributos de CSS IE
Atributo de CSS O que ele formata
Background Cor de fundo, imagem, transparncia.
background-attachment Rolagem do fundo / Marca d'gua.
background-image Imagem de fundo.
background-color Cor de fundo ou transparncia.
background-position Posicionamento da imagem de fundo.
background-repeat
Configurao lado-a-lado da imagem de
fundo.
Border Largura, estilo e cor de todas as 4 bordas.
border-bottom Largura, estilo e cor da borda inferior.
border-bottom-color Cor da citada borda.
border-bottom-style Estilo da citada borda.
border-bottom-width Largura da citada borda.
border-color Cor das 4 bordas.
border-left Largura, estilo e cor da borda esquerda.
border-left-color Cor da borda citada.
border-left-style Estilo da borda citada.
border-left-width Largura da borda citada.
border-right Largura, estilo e cor da borda direita.
border-right-color Cor da borda citada.
border-right-style Estilo da borda citada.
border-right-width Largura da borda citada.
border-style Estilo de todas as 4 boras.
border-top Largura, estilo e cor da borda superior.
border-top-color Cor da borda citada.
border-top-style Estilo da borda citada.
border-top-width Largura da borda citada.
border-width Largura de todas as 4 bordas.
Clear
Elementos flutuantes esquerda ou direita
de um elemento.
Clip Parte visvel de um elemento.
Color Cor de primeiro plano.
Cursor Tipo de ponteiro do mouse.
Display
Se o elemento exibido e o espao
reservado para ele.
Filter Tipo de filtro aplicado ao elemento.
Float Se o elemento flutua.

26
Font
Estilo, variante, peso, tamanho e altura da
linha do tipo de fonte.
@font-face Incorporao da fonte ao arquivo HTML.
font-family Tipo de fonte.
font-size Tamanho da fonte.
font-style Fonte itlico.
Fonte-variant Fonte bold.
font-weight Peso da fonte de claro a negrito.
Height Altura exibida ao elemento.
@import Folha de estilo a importar.
Left
Posio do elemento em relao a margem
esquerda da pgina.
letter-spacing Distncia entre as letras.
line-height Distncia entre linhas de base.
list-style Tipo, imagem e posio do estilo da lista.
list-style-image Marcador de item de lista.
list-style-position Posio do marcador de item da lista.
list-style-type Marcador de item de lista alternativo.
Margin Tamanho de todas as 4 margens.
margin-left Tamanho da margem esquerda.
margin-right Tamanho da margem direita.
margin-bottom Tamanho da margem inferior.
margin-top Tamanho da margem superior.
Overflow
Exibio de imagens que so maiores do que
suas molduras.
Padding
Espao em torno de um elemento em todos
os lados.
Padding-bottom
Espao a partir da margem inferior de um
elemento.
Padding-left Espao esquerda do elemento.
Padding-right Espao direita do elemento.
Padding-top
Espao a partir da margem superior do
elemento.
page-break-after
Inserir quebra de pgina depois de um
elemento.
page-break-before
Inserir quebra de pgina antes de um
elemento.
Position Como o elemento posicionado na pgina.
text-align Alinhamento do texto.

27
text-decoration Sublinhado, sobrelinhado ou riscado.
text-indent Recuo da primeira linha do pargrafo.
text-transform
Transformao para todas maisculas,
minsculas ou inicial maiscula.
Top
Posio do elemento em relao a parte
superior da pgina.
vertical-align Alinhamento vertical do elemento.
Visibility Se elemento visvel ou invisvel.
Width Largura do elemento.
z-index Posio do elemento na pilha

Exerccios de fixao:

1) Comece com algumas modificaes simples em amostra1.html e css_teste
a) modifique a cor da fonte e do background nas tags H1, H2, e H3
b) modifique o tamanho das fontes nos pargrafos para 12pt

2) Agora veja os resultados no arquivo css_teste.html, usando o seu navegador.
a) modifique a largura da borda nos elementos de borda das classes .first e .last para
"thin"
b)modifique o estilo da borda do elemento H1 para "solid"

3) Agora tente acrescentar novas classes:
a) crie uma classe chamada .highlight -- ajuste a cor do background para amarelo
(#FFFF00)
b) crie uma classe chamada .ufo -- ajuste a font-family para "monospace", o tamanho
para "large", a cor para verde (#00FF00), e o background para preto (#000000)
c) modifique o arquivo css_test.html para poder acomodar as novas classes. Voc vai
poder v-las usando qualquer tag com um atributo de classe ajustado para o nome
da classe (sem o ponto inicial) -- exemplo: <div class="ufo">esta a classe
ufo</div>

Apostila HTML Css

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Apostila HTML Css

Diunggah oleh

Hak Cipta:

Format Tersedia

APOSTILA DE HTML E CSS

Anda mungkin juga menyukai