Prof. Risiberg Teixeira
email: risiberg.teixeira@ifrj.edu.br
São estilos de apresentação consistentes aplicados ao alfabeto. Uma fonte consiste de atributos que alteram a aparência de um símbolo, sem alterar o seu significado.
Os atributos essenciais de uma fonte são:
◦ Seu tipo (ou família)
◦ Seu tamanho
◦ Seu estilo (regular, itálico, outline, etc.)
◦ Seu peso (normal, negrito, light, black)
2 Prof. Risiberg Teixeira
Uma família de fontes (tipo) é selecionada com a propriedade font-family.
Exemplo:
H1 { font-family: garamond }
H2 { font-family: arial, helvetica, sans-serif }
H3 { font-family: courier, "courier new", monospaced }
H4 { font-family: monospaced }
3 Prof. Risiberg Teixeira
O tamanho de uma fonte é alterado usando font-size.
Pode ser especificado em valores absolutos ou relativos.
Para especificar um valor absoluto, pode-se usar:
◦ font-size: número(pt | px | cm | mm | pc | in)
◦ font-size: xx-small|x-small|small|medium|large|x-large|xx- large
Exemplo:
◦ H1 { font-size: 24pt}
◦ H1 { font-size: x-large}
◦ H1 { font-size: smaller}
◦ H1 { font-size: 1.5em}
◦ H1 { font-size: 150%}
4 Prof. Risiberg Teixeira
O estilo de uma fonte é afetado através de duas diferentes propriedades: fontweight, que altera o peso da fonte, e font-style, que altera o estilo ou inclinação.
Sintaxe: font-style: normal (ou italic, oblique) Exemplos:
H1 { font-style: italic } I { font-style: normal }
Prof. Risiberg Teixeira 5
A propriedade text-transform realiza transformações no formato caixa-alta ou caixa-baixa do texto.
Sintaxe:
◦ text-transform: capitalize
◦ text-transform: uppercase
◦ text-transform: lowercase
◦ text-transform: none (valor default)
Prof. Risiberg Teixeira 6
<style>
p {font-weight: bold}
span {font-weight: normal}
.non {text-transform: none}
.upp {text-transform: uppercase}
.cap {text-transform: capitalize}
.low {text-transform: lowercase}
</style>
<body>
<p>Sem transformação:
<span class=non>HTML e CSS</span></p>
<p>Uppercase: <span class="upp">html e css</span></p>
<p>Capitalize:<span class="cap">HTML e CSS</span></p>
<p>Lowercase:<span class="low">HTML e CSS</span></p>
</body>
Prof. Risiberg Teixeira 7
A propriedade text-decoration permite colocar (ou tirar) sublinhados, linhas sobre e atravessando o texto, etc.
Sintaxe:
◦ text-decoration: underline (default em links)
◦ text-decoration: overline
◦ text-decoration: line-through
◦ text-decoration: blink
◦ text-decoration: none (default)
Prof. Risiberg Teixeira 8
Exemplo:
<style>
.sm {font-variant: small-caps}
.tc {font-size: 120%}
</style>
---
<body>
<p>Um texto simples sem SmallCaps...</p>
<p class=sm>Um texto simples com SmallCaps...</p>
<p><span class=sm><span class=tc>U</span>m texto simples com <span class=tc>S</span>mall<span
class=tc>C</span>aps...
verdadeiros</span>.</p>
</body>
Prof. Risiberg Teixeira 9
Prof. Risiberg Teixeira 10
<style type="text/css">
.und {text-decoration: underline;}
.ovr {text-decoration: overline;}
.blk {text-decoration: blink;}
.lin {text-decoration: line-through;}
</style>
<body>
<h1> text-decoration</h1>
<h2 class="und">Moda Fashion</h2>
<h2 class="ovr">Moda Fashion</h2>
<h2 class="blk">Moda Fashion</h2>
<h2 class="lin">Moda Fashion</h2>
</body>
Crie uma página com título “selecionando o texto com o mouse”. Salve o arquivo com nome selecaotxt.html.
.selection {background-color: #ff0; color:#f00;}
Inserir um texto com 2 parágrafo no arquivo selecaotxt.html.
Configure a tag <body class="selection">.
Obs: Testar no navegador. Selecione o texto. Veja que o fundo fica na cor amarela e letras vermelhas.
Prof. Risiberg Teixeira 11
