DESENVOLVIMENTO WEB I
CSS incorporado –
Formatando textos utilizando
estilos em cascata
O QUE É CSS?
› Folha de estilo em cascata é um mecanismo
simples para adicionar estilos (p.ex., fontes,
cores, espaçamentos) aos documentos Web.
E WEB STANDARDS?
› Web
Standards
é
um
conjunto
de
normas,
diretrizes, recomendações, notas, artigos, tutoriais
e afins de caráter técnico, produzidos pelo W3C e
destinados a orientar fabricantes, desenvolvedores
e projetistas para o uso de práticas que possibilitem
a
criação
de
uma
Web
acessível
a
todos,
independentemente dos dispositivos usados ou de
suas necessidades especiais.
SINTAXE BÁSICA
seletor { propriedade: valor; }
• Seletor: genericamente, é o elemento HTML identificado por
sua tag, ou por uma classe, ou por uma ID, ou etc., e para o
qual a regra será válida (por exemplo: <p>, <h1>, <form>,
.minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será
aplicada a regra (por exemplo: font, color, background, etc...).
• Valor: é a característica específica a ser assumida pela
propriedade (por exemplo: letra tipo arial, cor azul, fundo
verde, etc...)
P
EXEMPLOS USANDO TAGs COM
SELETORES
{
FONT-SIZE: 12PX;
}
BODY
{
COLOR: #000000;
BACKGROUND: #FFFFFF;
FONT-WEIGHT: BOLD;
}
ESTILO INCORPORADO
Uma folha de estilo é dita incorporada ou
interna, quando as regras CSS estão
declaradas no próprio documento HTML.
ESTILO INCORPORADO
<HEAD>
<STYLE TYPE=“TEXT / CSS”>
H3
{
COLOR: #FF0000;
}
</STYLE>
</HEAD>
ESTILO INCORPORADO
<STYLE TYPE=“TEXT / CSS”>
H3
{
COLOR: #FF0000;
FONT-FAMILY: COMICS;
}
P
{
FONT-FAMILY: ARIAL;
COLOR: GREEN;
}
</STYLE>
PROPRIEADEDES PARA FORMATAR
FONTES
• color:...................cor da fonte
• font-family:..........tipo de fonte
• font-size:.............tamanho de fonte
• font-style:............estilo de fonte
• font-variant:.........fontes maiúsculas de menor altura
• font-weight:.........quanto
(negrito)
mais
escura
a
fonte
é
PROPRIEADEDES PARA FORMATAR
TEXTOS
• color.....................cor do texto;
• letter-spacing........espaçamento entre letras;
• word-spacing.........espaçamento entre palavras;
• text-align..............alinhamento do texto;
• text-decoration......decoração do texto;
• text-indent............recuo do texto;
• text-transform.......forma das letras;
• direction...............direção do texto;
• white-space.........como o browser trata os espaços
em branco;
Download
