CSS 02 Textos Fontes Espacamentos

CSS Folha de Estilo em Cascata
Unidade 2 Textos, Fontes e Espaamentos

Curso: Auxiliar de Web Design
Carga horria: 30h/a
Professor Regis Pires Magalhes
regis@ifpi.edu.br
http://sites.google.com/site/ifpiregis
Referncias importantes
Site sobre CSS e Padres Web.
Por Maurcio Maujor Samy Silva.
Disponvel em: http://www.maujor.com/
Apostila da K19
Desenvolvimento Web com HTML, CSS e
Javascript
Vdeos da Universidade XTI - YouTube
Curso de CSS (35 aulas)
Curso de (X)HTML (31 aulas)
Curso de JavaScript (47 aulas)
Curso de jQuery (56 aulas)
A disciplina
Unidades
1. Fundamentos de CSS
2. Textos, Fontes e Espaamentos
3. Cores e background
4. Listas, Menus e Links
5. Tabelas e Formulrios
6. Posicionamento e Layout
A propriedade CSS font
Propriedades bsicas:
color:...................cor da fonte
font-family:.........tipo de fonte
font-size:.............tamanho de fonte
font-style:...........estilo de fonte
font-variant:.......fontes maisculas de menor altura
font-weight:........quanto mais escura a fonte (negrito)
font:....................maneira abreviada para todas as propriedades
font - color
<html>
<head>
<style type="text/css">
h1 {color: #FF0000;}
h2 {color: #00FF00;}
p {color: rgb(0,0,255);}
</style>
</head>
<body>
<h1>Cabealho com letras vermelhas</h1>
<h2>Cabealho com letras verdes</h2>
<p>Pargrafo com letras azuis</p>
</body>
</html>
Valores vlidos:
cdigo hexadecimal: #FFFFFF
cdigo rgb: rgb(255,235,0)
nome da cor: red, blue, green...etc.
font-family
<html>
<head>
h2 {font-family: times, serif;}
p {font-family: arial, helvetica, sans-serif;}
</style>
</head>
<body>
<h2>Famlia por nome: arial, helvetica, serif;</h2>
<p>Famlia genrica: sans-serif;<p>
</body>
</html>
font-family
Valores vlidos:
Nome da famlia de fontes:
Ex: "verdana", "helvetica", "arial", etc.
Nome da famlia genrica:
Ex:"serif", "sans-serif", "cursive", etc.
font-family
font-family
Windows e Mac: Mac:
font-size
<html>
<head>
h1 {font-size: 14px;}
h2 {font-size: smaller;}
p {font-size: 100%;}
</style>
</head>
<body>
<h1>Letras com tamanho: 14px</h1>
<h2>Letras com tamanho: smaller</h2>
<p>Letras com tamanho:100%</p>
</body>
</html>
Valores vlidos:
xx-small, x-small, small, medium, large, x-
large, xx-large, smaller, larger
length: uma medida reconhecida
pelas CSS (px, pt, em, cm, ...)
%
font-size
font-size
font-size
font-size
font-style
<html>
<head>
h1 {font-style: italic;}
h2 {font-style: normal;}
p {font-style: oblique;}
</style>
</head>
<body>
<h1>Este o estilo italic</h1>
<h2>Este o estilo normal</h2>
<p>Este o estilo oblique</p>
</body>
</html>
font-style
Valores vlidos:
normal: fonte normal na vertical
italic: fonte inclinada
oblique: fonte obliqua
font-variant
<html>
<head>
h3 {font-variant: normal;}
p {font-variant: small-caps;}
p</style>
</head>
<body>
<h3>Este cabealho com letras normais</h3>
<p>Este pargrafo com letras em "small-caps"</p>
</body>
</html>
Valores vlidos:
normal: fonte normal
small-caps: transforma em maisculas
de menor altura
font-weight
<html>
<head>
p {font-weight: bold;}
</style>
</head>
<body>
<p>Este um pargrafo em negrito</p>
</body>
</html>
Valores vlidos:
normal
bold
bolder
lighter
100, 200, 300, 400, 500, 600, 700,
800, 900
font valor inherit
Herda a fonte usada pelo elemento pai.
Deve ser declarado isolado na propriedade font.
<html>
<head>
.p1 { font: status-bar; }
.p2 { font: inherit; }
.p3 { font: small-caption ; }
</style>
</head>
<body>
<p class="p1">Pargrafo com fonte status-
bar</p>
<p class="p2">Pargrafo com fonte
inherit</p>
<p class="p3">Pargrafo com fonte small-
caption</p>
</body>
</html>
font declarao nica
font: [style] [variant] [weight] [size] [/line-height] [family] |
caption | icon | menu | message-box | small-caption | status-bar |
inherit
<html>
<head>
p { font: italic small-caps bold 14px "Comic Sans MS", sans-serif; }
</style>
</head>
<body>
<p>Pargrafo em declarao nica</p>
</body>
</html>
Propriedade CSS Text
Propriedades para texto:
letter-spacing.......espaamento entre letras;
word-spacing........espaamento entre palavras;
text-align..............alinhamento do texto;
text-decoration.....decorao do texto;
text-indent............recuo do texto;
text-transform......forma das letras;
direction...............direo do texto;
white-space..........como o navegador trata os espaos em
branco.
CSS Text letter-spacing - espao entre letras
<html>
<head>
h2 {letter-spacing: 1.2em;}
p {letter-spacing: 0.4cm;}
</style>
</head>
<body>
<h2> Este o cabealho</h2>
<p> Este o pargrafo</p>
</body>
</html>
Valores vlidos:
normal: o espaamento default
lenght: uma medida reconhecida
So vlidos valores negativos
CSS Text word-spacing- espao entre palavras
<html>
<head>
h2 {word-spacing: 1.8em;}
p {word-spacing: 80px;}
</style>
</head>
<body>
<h2> Este o cabealho</h2>
<p> Este o pargrafo</p>
</body>
</html>
Valores vlidos:
normal: o espaamento default
lenght: uma medida reconhecida
So vlidos valores negativos.
CSS Text text-align alinhamento do texto
<html>
<head>
h1 {text-align: left;}
h2 {text-align: center;}
h3 {text-align: right;}
p {text-align: justify;}
</style>
</head>
<body>
<h1>Este o cabealho 1</h1>
<p>Este o pargrafo cujo texto foi alongado para mais de duas
linhas para que voc possa visualizar o efeito de text-align:
justify que fora o texto a estender-se desde a direita at a
esquerda.</p>
</body>
</html>
Valores vlidos:
left: alinha o texto a esquerda
right: alinha o texto a direita
center: alinha o texto no centro
justify: fora o texto a ocupar toda a
extenso da linha da esquerda a direita
CSS Text text-decoration decorao do texto
<html>
<head>
h1 {text-decoration: underline;}
h2 {text-decoration: line-through;}
h3 {text-decoration: overline;}
a {text-decoration: none;}
</style>
</head>
<body>
<h1>Texto com sublinhado</h1>
<h2>Texto com linha em cima</h2>
<h3>Texto com sobrelinhado</h3>
<p>
<a href="http://www.maujor.com">
Este um link sem sublinhado</a>
</p>
</body>
</html>
CSS Text text-decoration decorao do texto
Valores vlidos:
none: nenhuma decorao
underline: coloca sublinhado no texto
overline: coloca um sobrelinhado no
texto
line-through: coloca uma linha em
cima do texto
blink: faz o texto piscar
CSS Text text-indent recuo do texto
<html>
<head>
h3 {text-indent: 80px;}
p {text-indent: 3em;}
</style>
</head>
<body>
<h3>Texto com recuo de 80 pixel</h3>
<p>Texto com recuo de 3.0em</p>
</body>
</html>
Valores vlidos:
lenght: uma medida reconhecida pelas CSS (px,
pt, em, cm, ...)
% : porcentagem da largura do elemento pai
CSS Text text-transform forma das letras
<html>
<head>
h1 {text-transform: none;}
h2 {text-transform: capitalize;}
h3 {text-transform: uppercase;}
h4 {text-transform: lowercase;}
</style>
</head>
<body>
<h1>Texto com letras como digitadas</h1>
<h2>Texto com primeira letra das palavras, maisculas</h2>
<h3>Texto com todas letras, maisculas</h3>
<h4>Texto com letras minsculas</h4>
</body>
</html>
Valores vlidos:
none: texto normal
capitalize: todas as primeiras letras do texto em
maisculas
uppercase: todas as letras do texto em maisculas
lowercase: todas as letras do texto em minsculas
Box model
Propriedade CSS margin
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 margin - margin-top margem superior
<html>
<head>
p {margin-top: 2cm;}
</style>
</head>
<body>
<p>Uma margem superior de 2cm</p>
</body>
</html>
CSS margin - margin-right margem direita
<html>
<head>
p {margin-right: 300px;}
</style>
</head>
<body>
<p>Uma margem direita de 300px nesta
frase mais longa dentro do pargrafo</p>
</body>
</html>
CSS margin - margin-bottom - margem inferior
<html>
<head>
p {margin-bottom: 2em;}
</style>
</head>
<body>
<p>Uma margem inferior de 2.0em</p>
</body>
</html>
CSS margin - margin-left margem esquerda
<html>
<head>
p {margin-left: 10%;}
</style>
</head>
<body>
<p>Uma margem esquerda de 10%</p>
</body>
</html>
CSS margin declarao nica
<html>
<head>
p {margin: 20px 40px 80px 5px;}
</style>
</head>
<body>
<p>Uma margem superior de 20px, uma margem
direita de 40px,
uma margem inferior de 80px e uma margem
esquerda de 5px</p>
</body>
</html>
Propriedades das bordas
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
border-left-width:...........espessura da borda esquerda
border-left-style:...........estilo da borda esquerda
border-left-color:...........cor da borda esquerda
Propriedades das bordas
Maneiras abreviadas para todas as propriedades:
border-top
border-right
border-bottom
border-left
border
border-width, border-style e border-color
<html>
<head>
h3 {
border-width: medium; border-style: solid; border-color: #00f; }
p {
border-width: 6px; border-style: dashed; border-color: #f00; }
</style>
</head>
<body>
<h3>Borda mdia, contnua e azul</h3>
<p>Borda 6px, tracejada e vermelha</p>
</body>
</html>
border-style
border-style: valor (dotted, dashed, etc..)
border-width
<html>
<head>
p {
border-style: solid; border-bottom-width: 10px;
border-top-width: 0; border-right-width: 0;
border-left-width: 0;
}
</style>
</head>
<body><p>Borda com espessura inferior de 10px</p></body>
</html>
border declarao nica
<html>
<head>
p { border: thick groove rgb(255,0,255) }
</style>
</head>
<body><p>Bordas em declarao nica</p></body>
</html>
Propriedade CSS outline
Coloca margem ao redor de um elemento.
Difere da propriedade border por no interferir
com as dimenses do box model.
No ocupa espao no box do elemento.
No afeta o posicionamento do box e nem dos
boxes adjacentes.
CSS outline
<html>
<head>
<style>
p {
border: 1px solid red;
outline: green dashed thick;
}
</style>
</head>
<body>
<p>Testando border e outline</p>
</body>
</html>
Propriedade CSS padding
padding-top..........define a espaamento superior;
padding-right........define a espaamento direita;
padding-bottom.......define a espaamento inferior;
padding-left.........define a espaamento esquerda;
padding..............maneira abreviada para todos os
espaamentos.
CSS padding - padding-top espaamento superior
<html>
<head>
p {padding-top: 2cm; }
</style>
</head>
<body><p>Um espaamento superior de 2cm</p></body>
</html>
CSS padding declarao nica
<html>
<head>
p {padding: 20px 40px 80px 5px;}
</style>
</head>
<body>
<p>Um espaamento superior de 20px, um espaamento direito
de 40px,
um espaamento inferior de 80px e um espaamento esquerdo de
5px</p>
</body>
</html>
Entrelinhas - Propriedade line-height
<head>
<style type="text/css"> p { line-height:200%; } </style>
</head>
<body>
<p>1o. Pargrafo....Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Nulla pharetra egestas neque. Duis dolor lacus, volutpat ac,
vestibulum nec, suscipit a, felis. Aenean pharetra orci id elit. Duis non
dui. Suspendisse potenti. Ut ac risus. Etiam dignissim. Quisque nec
felis.</p>
<p>2o.Pargrafo.......Sed blandit est non ante. Ut imperdiet sagittis mi.
Sed gravida sodales nisl. Ut hendrerit ipsum eu enim. Duis tempus consequat
mauris. In hac habitasse platea dictumst. Vivamus lectus justo, commodo in,
rutrum non, eleifend eget, pede. Sed ac lacus. In tortor.</p>
</body>
Exerccio
Crie uma pgina HTML com CSS externo que use as seguintes
propriedades:
color
font-family
font-size
font-style
font-variant
font-weight
font
letter-spacing
word-spacing
text-align
text-decoration
text-indent
text-transform
margin-top, margin-right, margin-
bottomou margin-left
margin
border-width
border-style
border-color
outline
padding-top, padding-right,
padding-bottom ou padding-left
padding
line-height

CSS 02 Textos Fontes Espacamentos

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

CSS 02 Textos Fontes Espacamentos

Enviado por

Direitos autorais:

Formatos disponíveis

CSS Folha de Estilo em Cascata

Unidade 2 Textos, Fontes e Espaamentos

Você também pode gostar