PPSI 2 - Post 1
O QUE É
CSS?
Cascading
Style Sheets (ou
simplesmente CSS) é uma linguagem de estilo utilizada para
definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML
ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo
de um documento.
SINTAXE
Uma regra
CSS é uma declaração que segue uma sintaxe prória e que define como será aplicado
estilo a um ou mais elementos HTML. Um conjunto de regras CSS formam uma folha de
Estilos. Uma regra CSS, na sua forma mais elementar, compõe-se de três partes: um
seletor, uma propriedade e um valor e tem a sintaxe conforme mostrando abaixo:
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...)
Ex:
elemento.minhaclasse {
propriedade: valor;
}
a) Fundo
A
propriedade background define as características (os valores na regra CSS) do
fundo dos elementos HTML.
As propriedades background são as listadas abaixo:
background-color: Cor do
fundo;
01.<html>
02.<head>
03.<style type="text/css">
04.body
{background-color: #cff;} /*azul claro*/
05.h2
{background-color: #f00;} /* vermelho */
06.p
{background-color: #0f0;} /* verde */
07.</style>
08.</head>
09.<body>
10.<h2>Estude
CSS</h2>
11.<p>Com
CSS você controla melhor seu layout</p>
12.</body>
13.</html>
Este é o
efeito da folha de estilo acima:
Estude CSS
Com CSS você controla melhor seu layout
background-image: Imagem de
fundo;
01.<html>
02.<head>
03.<style type="text/css">
04.body {
background-image: url("/images/css.gif");}
05.</style>
06.</head>
07.<body>
08.</body>
09.</html>
background-repeat: Maneira como a imagem de fundo é
posicionada;
POSIÇÃO VERTICAL
01.<html>
02.<head>
03.<style type="text/css">
04.body {
05.background-image:
url("/images/css.gif");
06.background-repeat:
repeat-y;
07.}
08.</style>
09.</head>
10.<body>
11.</body>
12.</html>
POSIÇÃO HORIZONTAL
01.<html>
02.<head>
03.style
type="text/css">
04.body {
05.background-image:
url("/images/css.gif");
06.background-repeat:
repeat-x;
07.}
08.</style
09.</head>
10.<body>
11.</body>
12.</html>
background-position: Como e onde a imagem de fundo é
posicionada;
01.<html>
02.<head>
03.<style type="text/css">
04.body {
05.background-image:
url("/images/css.gif");
06.background-repeat:
no-repeat;
07.background-position:
200px 70px;
08.}
09.</style>
10.</head>
11.<body>
12.</body>
13.</html>
b)
Cor:
Detalhar
as diferentes maneiras de se escrever a sintaxe para os valores das cores em
uma regra CSS.
Regras de Estilo
1-) div.um {background-color: #FF0000;}
2-) div.dois {background-color:
#F00;}
3-) div.tres {background-color:
rgb(255, 0, 0);}
4-) div.quatro {background-color:
rgb(100%, 0%, 0%);}
5-) div.cinco {background-color:
red;}
6-) div.seis {background-color:
ThreeDShadow;}
Aqui
estão apresentadas seis maneiras diferentes de definir uma cor de fundo para
uma div .
Se
considerarmos que para as duas primeiras regras é válido usar letras
minúsculas, existem 08 (oito) maneiras de se definir uma cor em uma regra CSS.
As maneiras mais usadas são as mostradas em 1 e em 2, ou seja, com uso do
código hexadecimal de cores.
O
efeito das regras no navegador
Observe
agora no screenshot a seguir como estas seis DIV's serão renderizadas:
As
cinco primeiras estão com a mesma cor de fundo, vermelha o que nos leva a
concluir que as cinco primeiras regras mostradas são equivalentes, ou seja são
cinco maneiras diferentes de definir um mesmo valor para uma cor.
#FF0000 = #F00 = rgb(255,0,0) = rgb(100%,0%,0%) =
red
A sexta
cor, ThreeDShadow depende do equipamento do usuário.
Eis aqui duas maneiras de se definir uma cor.
A primeira é a mais conhecida, cuja maneira é definir a cor pelo seu código
hexadecimal.
Convém
ressaltar que em uma regra CSS é indiferente usar letras maiúsculas ou minúsculas
na sintaxe hexadecimal de cores e também que é válido abreviar a notação para
três dígitos.
Na notação abreviada cada um dos três dígitos é automaticamente dobrado
conforme exemplos a seguir:
#FFF = #FFFFFF
#CF9 = #CCFF99
#cde = #ccddee
#49c = #4499cc
Não é do
escopo deste tutorial detalhar o código hexadecimal, contudo ressalto que os
dezesseis dígitos hexadecimais são:
0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F
e somente eles são válidos para definir uma cor, podendo em geral ser usada
qualquer combinação deles. Assim: #FFDDHH não define uma cor, pois H não é
válido.
A seguir,
outra maneira de se definir uma cor: a palavra-chave. Nela você pode definir
uma cor usando o nome. Os nomes de cor válidos são os listados nas
recomendações CSS do W3C.
As Recomendações
para CSS 2.1 listam as seguintes 17 cores: aqua, black, blue, fuchsia,
gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal,
white, e yellow
Assim, as regras a seguir são válidas para definir cor.
p
{color: aqua;}
div {background-color: teal;}
c)
Fonte: As propriedades para as fontes, definem as características (os
valores na regra CSS) das letras que constituem os textos dentro dos elementos
HTML.
As
propriedades básicas para fontes e que abordaremos neste tutorial são as
listadas abaixo:
color: Cor da fonte
Exemplo:
<html>
<head>
<style type="text/css">
<!--
h1 {color: #FF0000;}
h2 {color: #00FF00;}
p {color: rgb(0,0,255);}
-->
</style>
</head>
<body>
<h1>Cabeçalho com letras
vermelhas</h1>
<h2>Cabeçalho com letras
verdes</h2>
<p>Parágrafo com letras
azuis</p>
</body>
</html>
Cabeçalho com letras vermelhas
Cabeçalho com letras verdes
Parágrafo com letras azuis
font-family: Tipo de fonte.
Exemplo:
<html>
<head>
<style type="text/css">
<!--
h2 {font-family: arial, helvetica, serif;}
p {font-family: sans-serif;}
-->
</style>
</head>
<body>
<h2>Família por nome: arial,
helvetica, serif;</h2>
<p>Família genérica:
sans-serif;<p>
</body>
</html>
Família por nome: arial, helvetica, serif;
Família genérica: sans-serif;
font-size: Tamanho de fonte.
Exemplo:
<html>
<head>
<style type="text/css">
<!--
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>
Letras com tamanho: 14px
Letras com tamanho: smaller
Letras com tamanho:100%
font-style: Estilo de fonte.
Exemplo:
<html>
<head>
<style type="text/css">
<!--
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>
Este é o estilo italic
Este é o estilo normal
Este é o estilo oblique
font-variant: Fontes maiúsculas de menor altura.
Exemplo:
<html>
<head>
<style type="text/css">
<!--
h3 {font-variant: normal;}
p{font-variant: small-caps;}
-->
p</style>
</head>
<body>
<h3>Este cabeçalho com letras
normais</h3>
<p>Este parágrafo com letras em
"small-caps"</p>
</body>
</html>
Este cabeçalho com letras normais
Este parágrafo com letras
em "small-caps"
font-weight: Quanto mais escura a fonte é
(negrito).
Exemplo:
<html>
<head>
<style type="text/css">
<!--
p {font-weight: bold;}
-->
</style>
</head>
<body>
<p>
Este é um parágrafo em
negrito</p>
</body>
</html>
Este é um parágrafo em negrito
d)
Margem: A
propriedade para margens, define um valor para espessura das
margens
dos elementos HTML.
As
propriedades para margens são as listadas abaixo:
margin-top: Define a margem superior;
Ex:
<html>
<head>
<style type="text/css">
<!--
p {margin-top: 2cm;}
-->
</style>
</head>
<body>
<p>Uma margem superior de
2cm</p>
</body>
</html>
Uma margem superior de 2cm
margin-right:
Define a margem
direita;
Ex:
<html>
<head>
<style type="text/css">
<!--
p {margin-right: 300px;}
-->
</style>
</head>
<body>
<p>Uma margem direita de 300px
nesta
frase mais longa dentro do parágrafo</p>
</body>
</html>
Uma margem direita de 300px nesta
frase mais longa dentro do parágrafo
margin-bottom: Define a
margem inferior;
Ex:
<html>
<head>
<style type="text/css">
<!--
p {margin-bottom: 2em;}
-->
</style>
</head>
<body>
<p>Uma margem inferior de
2.0em</p>
</body>
</html>
Uma margem inferior de 2.0em
margin-left:
Define a
margem esquerda;
Ex:
<html>
<head>
<style type="text/css">
<!--
p {margin-left: 10%;}
-->
</style>
</head>
<body>
<p>Uma margem esquerda de
10%</p>
</body>
</html>
Uma margem esquerda de 10%
e) Padding: A propriedade para espaçamentos (alguns traduzem como
"enchimento"), define um valor para os espaçamentos entre o conteúdo
e as bordas dos elementos HTML.
As propriedades para espaçamentos são as listadas abaixo:
padding-top: Define a
espaçamento superior;
<html>
<head>
<style type="text/css">
<!--
p {padding-top: 2cm;}
-->
</style>
</head>
<body>
<p>Um espaçamento superior de
2cm</p>
</body>
</html>
Um espaçamento
superior de 2cm
padding-right: Define a espaçamento direita;
<html>
<head>
<style type="text/css">
<!--
p {padding-right: 300px;}
-->
</style>
</head>
<body>
<p>Um espaçamento direito de
300px nesta
frase mais longa dentro do parágrafo</p>
</body>
</html>
Um espaçamento a
direita de 300px nesta frase mais longa dentro do parágrafo
padding-bottom: Define a
espaçamento inferior;
<html>
<head>
<style type="text/css">
<!--
p {padding-bottom: 2em;}
-->
</style>
</head>
<body>
<p>Um espaçamento inferior de
2.0em</p>
</body>
</html>
Um espaçamento inferior de 2.0em
padding-left: Define a
espaçamento esquerda;
<html>
<head>
<style type="text/css">
<!--
p {padding-left: 10%;}
-->
</style>
</head>
<body>
<p>Um espaçamento esquerdo de
10%</p>
</body>
</html>
Um espaçamento esquerdo de 10%
Link : http://maujor.com/
