lpsychomamba: TAQUIGRAFIA CSS

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>

<!--

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>

<!--

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>

<!--

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>

<!--

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>

<!--

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>

<!--

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>

<!--

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>

<!--

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>

<!--

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>

<!--

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>

<!--

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>

<!--

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>

<!--

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>

<!--

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/

lpsychomamba

quinta-feira, 14 de março de 2013

TAQUIGRAFIA CSS

Nenhum comentário:

Postar um comentário