CSS

CSS - Cascating Style Sheets
Motivos para utilizar CSS

  • O arquivo HTML nao foi desenvolvido para suportar estilos.
  • A manutencao de grandes documentos é muito trabalhosa.
  • Os navegadores atuais suportam toda configuracao de estilos num arquivo CSS em um arquivo externo.

Formas de utilizacao

  1. Em um arquivo externo CSS

    É inserida uma linha semelhante a linha a seguir, com os parametros indicando CSS e apontando para um arquivo de estilos CSS.
    <link rel="stylesheet" type="text/css" href="meu_estilo.css" />


    Internamente ao arquivo de estilos, meu_estilo.css, diversas configuracoes de estilo podem ser inseridas. No exemplo a baixo definimos que a margem de todos os paragrafos sera de 20px, a cor das HR sera amarela e foi inserida uma imagem no fundo da tela.
    p {margin-left:20px;}
    hr {color:yellow}
    body {background-image:url("fundo.gif");}
  2. Internamente em uma area de estilos
    <head>
    <style type="text/css">
    p {margin-left:20px;}
    hr {color:yellow;}
    body {background-image:url("fundo.gif");}
    </style>
    </head>
  3. Inseridos na linha
    <p style="color:yellow;margin-left:20px">Este é um exemplo de paragrafo com estilo na linha.</p>

Propriedades


Fundos (background)

As propriedades fundos (background) definem os efeitos dos fundos dos elementos.

  • Background-attachment: a diferenca entre as duas janelas abaixo na janela mais a direita tem: background-attachment:fixed;
  • background-color
  • background-image
  • background-position

  • background-repeat



Textos (text)


Nome
Tag
Codigo HTML
Resultado
cor
Nome
<style type="text/css">
p.vermelho {color:red; }
</style>
<p class="vermelho">Texto cor = red</p>

Texto cor = red

cor
Hexa
<style type="text/css">
p.verde {color:#00ff00; }
</style>
<p class="verde">Texto cor = #00ff00</p>

Texto cor = #00ff00

cor
RGB
<style type="text/css">
p.amarelo {color:rgb(255,255,0); }
</style>
<p class="amarelo">Texto cor = rgb(255,255,0)</p>

Texto cor = rgb(255,255,0)

Alinhamento
Esquerda
Direita
Centrado
Justificado
<style type="text/css">
p.esquerda
{text-align:left;}
p.direita
{text-align:right;}
p.centro
{text-align:center;}
p.justificado
{text-align:justify;}
</style>
<p class="esquerda">Texto para teste de alinhamento. Observe o comportamento de suas margens</p>
<p class="direita">Texto para teste de alinhamento. Observe o comportamento de suas margens</p>
<p class="centro">Texto para teste de alinhamento. Observe o comportamento de suas margens</p>
<p class="justificado">Texto para teste de alinhamento. Observe o comportamento de suas margens</p>

Texto para teste de alinhamento. Observe o comportamento de suas margens

Texto para teste de alinhamento. Observe o comportamento de suas margens

Texto para teste de alinhamento. Observe o comportamento de suas margens

Texto para teste de alinhamento. Observe o comportamento de suas margens

Link
Sem sublinha
<style type="text/css">
a.texto {text-decoration:none;} </style>
<a class="texto" href="http://www.ogomes.com">Link sem sublinha


Link sem sublinha

Texto
Sobrelinha
<style type="text/css">
p.config1
{ text-decoration:overline; }
</style>
<p class="config1">Texto para teste</p>

Texto para teste

Texto
Riscado
<style type="text/css">
p.config2
{ text-decoration:line-through; }
</style>
<p class="config2">Texto para teste</p>

Texto para teste

Texto
Soblinha
<style type="text/css">
p.config3
{ text-decoration:underline; }
</style>
<p class="config3">Texto para teste</p>

Texto para teste

Texto
Maiusculo
<style type="text/css">
p.maiusculo
{ text-transform:uppercase; }
</style>
<p class="maiusculo">Texto para teste</p>

Texto para teste

Texto
Minusculo
<style type="text/css">
p.Minusculo
{ text-transform:lowercase; }
</style>
<p class="Minusculo">Texto para teste</p>

Texto para teste

Texto
Capitalizar
<style type="text/css">
p.Capitalizar
{ text-transform:capitalize; }
</style>
<p class="Capitalizar">Texto para teste</p>

Texto para teste

Texto
Indentar
<style type="text/css">
p.Indentar
{ text-indent:50px; }
</style>
<p class="Indentar">Texto para teste</p>

Texto para teste continuando texto para teste. Texto para teste continuando texto para teste. Texto para teste continuando texto para teste. Texto para teste continuando texto para teste. Texto para teste continuando texto para teste.

Texto
Direita para esquerda
<style type="text/css">
p.DirpEsq
{ direction:rtl; }
</style>
<p class="DirpEsq">Texto para teste</p>

Texto para teste

Texto
Espaco entre letras
<style type="text/css">
p.LPequeno
{ letter-spacing:-2px; }
p.LGrande
{ letter-spacing:3px; }
</style>
<p class="LPequeno">Texto para teste</p>
<p class="LGrande">Texto para teste</p>

Texto para teste

Texto para teste

Texto
Espaco entre palavras
<style type="text/css">
p.PPequeno
{ word-spacing:-2px; }
p.PGrande
{ word-spacing:5px; }
</style>
<p class="PPequeno">Texto para teste</p>
<p class="PGrande">Texto para teste</p>

Texto para teste

Texto para teste

Fonte
Georgia
<style type="text/css">
p.Georgia { font-family: Georgia; }
</style>
<p class="Georgia">Georgia</p>

Georgia

Fonte
Times New Roman
<style type="text/css">
p.TimesNewRoman
{ font-family: Times New Roman; }
</style>
<p class="TimesNewRoman">Times New Roman</p>

Times New Roman

Fonte
Arial
<style type="text/css">
p.Arial
{ font-family: Arial; }
</style>
<p class="Arial">Arial</p>

Arial

Fonte
Verdana
<style type="text/css">
p.Verdana
{ font-family: Verdana; }
</style>
<p class="Verdana">Verdana</p>

Verdana

Fonte
Courier New
<style type="text/css">
p.CourierNew
{ font-family: Courier New; }
</style>
<p class="CourierNew">Courier New</p>

Courier New

Fonte
Lucida Console
<style type="text/css">
p.LucidaConsole
{ font-family: Lucida Console; }
</style>
<p class="LucidaConsole">Lucida Console</p>

Lucida Console

Estilo
Normal
<style type="text/css">
p.normal {font-style:normal;}
</style>
<p class="Normal">Normal</p>

Estilo Normal

Estilo
Italico
<style type="text/css">
p.italico {font-style:italic;}
</style>
<p class="italico">Italico</p>

Estilo italico

Estilo
Obliquo
<style type="text/css">
p.oblique {font-style:oblique;}
</style>
<p class="oblique">Obliquo</p>

Estilo Obliquo

Fonte
Tamanho
<style type="text/css">
p.Tam_40_PX {font-size:30px;}
p.Tam_2_5_em {font-size:2.5em;}
</style>
<p class="Tam_40_PX">Fonte tamanho 30px</p> <p class="Tam_2_5_em">Fonte tamanho 2.5em</p>
Fonte tamanho 30px
Fonte tamanho 2.5em
Ligacoes
Links
<style type="text/css">
a.Ligacao:link {color:#00FF00;/* Cor antes de ser visitado */ text-decoration:underline;}
a.Ligacao:visited {color:#FFFFFF;/* Cor visitado */
text-decoration:underline;}
a.Ligacao:hover {color:#0000FF;/* Cor com o mouse em cima */
text-decoration:none;background-color:#FFFFFF;}
a.Ligacao:active {color:#FFFFFF;/* Cor ativo */
text-decoration:none;background-color:#FF0000;}
</style>
<a class="Ligacao" href=http://www.ogomes.com>Teste do link</a>
Teste do link
Listagens
Disco
<style type="text/css">
ul.List1 {list-style-type: disc;}
</style>
<ul class="List1">
<li>Opcao 1</li> <li>Opcao 2</li> <li>Opcao 3</li> </ul>
  • Opcao 1
  • Opcao 2
  • Opcao 3
Listagens
Circulo
<style type="text/css">
ul.List2 {list-style-type: circle;}
</style>
<ul class="List2">
<li>Opcao 1</li> <li>Opcao 2</li> <li>Opcao 3</li> </ul>
  • Opcao 1
  • Opcao 2
  • Opcao 3
Listagens
Quadrado
<style type="text/css">
ul.List3 {list-style-type: square;}
</style>
<ul class="List3">
<li>Opcao 1</li> <li>Opcao 2</li> <li>Opcao 3</li> </ul>
  • Opcao 1
  • Opcao 2
  • Opcao 3
Listagens
Decimal
<style type="text/css">
ul.List4 {list-style-type: decimal;}
</style>
<ul class="List4">
<li>Opcao 1</li> <li>Opcao 2</li> <li>Opcao 3</li> </ul>
  • Opcao 1
  • Opcao 2
  • Opcao 3
Listagens
Alfa minusculo
<style type="text/css">
ul.List5 {list-style-type: lower-alpha;}
</style>
<ul class="List5">
<li>Opcao 1</li> <li>Opcao 2</li> <li>Opcao 3</li> </ul>
  • Opcao 1
  • Opcao 2
  • Opcao 3
Listagens
Alfa maiusculo
<style type="text/css">
ul.List6 {list-style-type: upper-alpha;}
</style>
<ul class="List6">
<li>Opcao 1</li> <li>Opcao 2</li> <li>Opcao 3</li> </ul>
  • Opcao 1
  • Opcao 2
  • Opcao 3
Listagens
Grego minusculo
<style type="text/css">
ul.List7 {list-style-type: lower-roman ;}
</style>
<ul class="List7">
<li>Opcao 1</li> <li>Opcao 2</li> <li>Opcao 3</li> </ul>
  • Opcao 1
  • Opcao 2
  • Opcao 3
Listagens
Romanos Minusculo
<style type="text/css">
ul.List8 {list-style-type: lower-roman;}
</style>
<ul class="List8">
<li>Opcao 1</li> <li>Opcao 2</li> <li>Opcao 3</li> </ul>
  • Opcao 1
  • Opcao 2
  • Opcao 3
Listagens
Romanos maiusculo
<style type="text/css">
ul.List9 {list-style-type: upper-roman;}
</style>
<ul class="List9">
<li>Opcao 1</li> <li>Opcao 2</li> <li>Opcao 3</li> </ul>
  • Opcao 1
  • Opcao 2
  • Opcao 3
Tabelas
Disco
<style type="text/css">
table,th,td
{ border:1px solid yellow; }
</style>
<table>
<tr> <th>Titulo 1</th> <th>Titulo 2</th> </tr>
<tr> <td>Lin 1 - Col 1</td> <td>Lin 1 - Col 2</td> </tr>
<tr> <td>Lin 2 - Col 1</td> <td>Lin 2 - Col 2</td> </tr>
</table>
Titulo 1 Titulo 2
Lin 1 - Col 1 Lin 1 - Col 2
Lin 2 - Col 1 Lin 2 - Col 2
Listagens
Disco
<style type="text/css">
ul.List1 {list-style-type: disc;}
</style>
<ul class="List1">
<li>Opcao 1</li> <li>Opcao 2</li> <li>Opcao 3</li> </ul>
  • Opcao 1
  • Opcao 2
  • Opcao 3

Fontes


De uma forma geral existem 3 tipos de fonte de caracteres:
  • as fontes com Serif, são as fontes que tem uma pequena linha no finais de alguns caracteres;
    • Georgia
    • Times New Roman
  • as fontes sem Serif, são as fontes que não tem esta linhas.
    • Arial
    • Verdana
  • as fontes monospace, são aquelas fontes que todos os caracteres ocupam o mesmo espaco.
    • Courier New
    • Lucida Console

Ligacoes (Links)

ListsListagens (Lists)

TablesTabelas (tables)


































Sobre


Bom proveito...
Espero que seja de alguma valia.
Por: Willer Gomes Junior