Programação para WEB I

Transcrição

HTML, CSS e JavaScript
Contato: <[email protected]>
Site: http://professores.chapeco.ifsc.edu.br/lara/
Lara Popov Zambiasi Bazzi Oberderfer
1
Arquivo externo
●
Dentro da tag head:
<link rel=”stylesheet” href=”estilo.css”>
2
Qual a dirença de charset=utf-8 e
charset=iso-8859-1?
●
●
●
O charset é utilizado para arrumar a acentuação do site. Se
todo seu site for em uma linguagem estática (HTML, sem
puxar dados de banco de dados), então deixe como
charset=utf-8.
UTF-8 (8-bit Unicode Transformation Format) é uma
codificação de caracteres que implementa o padrão
UNICODE utilizando uma quantidade variável de bytes (de 1
a 4). Esta se tornando o padrão para a representação e
armazenamento de textos.
Agora, se estiver utilizando PHP, ASP, Banco de Dados... daí
sim é que terá problemas com o charset do site. Sempre
tente deixá-lo como charset=utf-8. Neste caso, se os acentos
ficarem todos errados, daí mude para o charset=iso-8859-1.
3
Propriedades Tipográficas e Fontes
●
●
●
O padrão dos navegadores exibem texto em
“serif”. As fontes mais conhecidas são “Times
New Roman” e “Times”, estas são chamadas
de fontes serifadas, pelos seus ornamentos
em suas terminações.
Podemos alterar a família de fontes para
“sans-serif” (sem serifas), que contém:
“Arial”e “Helvetica”.
Podemos também utilizar as famílias:
“monospace” como a “Courier”.
4
Exemplo de css
h1 {
font-family: serif;
}
h2 {
font-family: sans-serif;
}
p {
font-family: monospace;
}
5
Fonte padrão
●
É possível, e muito comum,
declararmos o nome de algumas fontes
que gostaríamos de verificar se existem
no computador, permitindo que
tenhamos um controle melhor da forma
como o conteúdo será exibido. Usamos
para isso fontes “seguras” por serem
bem populares.
6
Continuando o exemplo...
body{
font-family: "Arial",
"Helvetica", sans-serif;
}
7
Fontes, outras propriedades:
●
●
Font-style, que podem ser:
–
Normal – font-style: normal;
–
Itálico - font-style: italic;
–
Oblíqua - font-style: oblique;
Font-size (tamanho da fonte)
8
Fontes, outras propriedades:
●
Font-variant, que podem ser:
–
Normal – estilo normal;
–
Small-caps – estilo fonte pequena caps;
–
initial – escolhe a opção default;
–
Inherit – herda a mesma opção do
elemento pai.
9
p.normal {
font-variant:normal;
}
p.small {
font-variant:small-caps;
}
10
<h1>Testando propriedades das
fontes</h1>
<p class="normal">Aula de
Desenvolvimento web</p>
<p class="small">Aula de
Desenvolvimento web</p>
11
Alinhamento e Decoração do texto
●
Text-align: especifica o alinhamento
horizontal do texto em um elemento.
text-align: left|right|center|justify;
12
p.direita{
text-align:right;
}
p.esquerda{
text-align:left;
}
p.centro{
text-align:center;
}
p.justificado{
text-align:justify;
}
13
<h1>Testando propriedades de alinhamento</h1>
<p class="direita">Você já viu um site que não possui nenhuma
imagem? E portal que não tenha publicidade? E menu, acessou algum
site que não possua menu de navegação? Pensando nisso, darei
sequência ao artigo anterior, quando mostrei como montar um
layout responsivo.</p>
<p class="esquerda">Você já viu um site que não possui nenhuma
imagem? E portal que não tenha publicidade? E menu, acessou algum
site que não possua menu de navegação?</p>
<p class="centro">Pensando nisso, darei sequência ao artigo
anterior, quando mostrei como montar um layout responsivo. Hoje
vou mostrar como criar o menu, as imagens e a publicidade. Vamos
começar vendo como trabalhar com imagens em um layout
responsivo.</p>
<p class="justificado">Para definirmos qual o bloco de
publicidade será exibido, nós trabalharemos com base na resolução
de tela do usuário. Usaremos apenas CSS para criarmos a rotina
lógica de exibição. Não é necessário nenhum Javascript para
isso.</p>
14
15
Espaçamento dentro do texto
●
tamanho da altura da linha:
–
●
tamanho da espaço entre cada linha:
–
●
letter-spacing: 3px;
tamanho do espaço entre cada palavra:
–
●
line-height: 3px;
word-spacing: 5px;
tamanho da margem da primeira linha do
texto:
–
text-indent: 30px;
16
p.espacamento{
line-height: 50px;
letter-spacing: 10px;
word-spacing: 5px;
text-indent: 30px;
}
<h1>Testando propriedades de
espaçamento</h1>
<p class="espacamento">Você já viu um
site que não possui nenhuma imagem?</p>
17
18
Bordas
●
●
As propriedades que podem ser
definidas, são (em ordem):
border-width, border-style, e bordercolor
●
Border-width: tamanho
●
Border-style: estilo
●
Border-color: cor
19
Border-width
●
●
Mais exemplos em:
http://www.w3schools.com/cssref/playit.
asp?filename=playcss_borderwidth&preval=medium
20
Border-style
●
None ou hidden - valor default
●
Dotted - pontilhada
●
Dashed - risquinhos
●
Solid
●
Double - dupla
●
Groove- efeito 3D
●
ridge
- efeito 3D
●
inset
- efeito 3D
●
outset - efeito 3D
- solida
21
Border-style
●
●
Mais exemplos em:
asp?filename=playcss_borderstyle&preval=dotted
22
Border-color
●
●
Mais exemplos em:
asp?filename=playcss_border-color
23
Tabela de cores
●
http://www.w3schools.com/html/html_co
lornames.asp
24
25
Margin, border, padding, content
margin
border
padding
conteúdo
26
PADDING
●
A propriedade padding é utilizada para definir
uma margem interna em alguns elementos
(por margem interna entende-se a
distânciaentre o limite do elemento, sua
borda, e seu respectivo conteúdo) e tem as
propriedades:
–
Padding-top
–
Padding-right
–
Padding-bottom
–
Padding-left
27
p{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
28
padding
padding-top
padding-left
padding-right
conteudo
Borda
padding-bottom
29
padding
Se passados 4 valores, serão aplicados
respectivamente, top, right, bottom e
left, para facilitar, basta lembrar em
sentido horário.
p {
●
padding: 10px 20px 15px 5px;
}
30
margin
●
A propriedade margin é bem parecida
com padding, exceto que ela adiciona
espaço após o limite do elemento, ou
seja, um espaçamento além do
elemento em si e tem as propriedades:
–
margin-top
–
margin-right
–
margin-bottom
–
margin-left
31
Margin e padding
●
Há ainda uma maneira de permitir o
navegador defina qual será a dimensão
da propriedade padding ou margin
conforme o espaço disponível na tela:
definimos o valor AUTO para a margem
ou o espaçameno que quisermos.
32
Exercícios de Fixação
33
Referências Bibliográficas
●
Caelum Cursos. Desenvolvimento Web
com HTML, CSS e JavaScript.
Disponível em:
https://www.caelum.com.br/. Acesso
em: 21/05/2014.
34

Programação para WEB I

Transcrição

Documentos relacionados

Clique aqui para baixar o convite

G12 Lara Conceição Duarte

estou com o

no link - Vitória

revista sosite

Revista Alshop - Fev. 2013

02_FLOW_Clipping_Jornal-do

A nova geração do amor livre

053 ASM Lara de Faria Lanza

il malditesta ha `i giorni contati`