Atividade 01 - PPSI II

Taquigrafia CSS

Olá, falarei agora sobre taquigrafia css. Como sabemos o CSS(Cascading Style Sheet) é um tipo de linguagem de formatação que é usada no HTML, ela facilita muito a vida do desenvolvedor pois fica mais fácil editar a formatação de elementos e também é possível fazer sites mais bonitinhos :) .

O que é taquigrafia css?

É uma maneira de simplificar a escrita das formatações no CSS. Como a escrita do CSS se torna menor, ela ajuda no carregamento da página como um todo diminuindo as requisições ao servidor, e aumentando a rapidez com que a página é mostrada.

Como reconhecer uma taquigrafia CSS:

A taquigrafia transforma as várias chamadas CSS de uma elemento em uma só, veja uma exemplo:

Suponhamos que temos uma div com id="xuxu", agora... "suponhamos que isso seja uma caveira..."-Seu Madruga Professor (http://www.youtube.com/watch?v=GWfsfGIm9r4 exatamente aos 28:27)- brincadeira (não resisti)- voltando ao post: Suponhamos que você precise adicionar uma borda a ela de 3 píxels, essa borda deve ser vermelha e pontilhada. Como você faria isso?

Exemplo sem taquigrafia: (dentro do arquivo .css)

#xuxu{

border:3px;

border-color:red;

border-style:dashed;

}

Apareceria dessa forma no navegador:

Agora vamos ver a forma taquigráfica de se escrever:

#xuxu{

border: 3px red dashed;

}

Assim reduzimos o conteúdo de três linhas em apenas uma! E o resultado é o mesmo, obviamente.

Alguns exemplos(como se estivéssemos trabalhando com um arquivo .css) abaixo mostram como é prático o uso da taquigrafia CSS.

Fundo

body{
background: #00ff00 url('smiley.gif') no-repeat fixed center;
}

Nesse exemplo o fundo será verde, conterá uma imagem de nome: "smiley.gif", ela não será repetida e ficará fixa no centro, como mostrado abaixo:

Propriedades de fronteira

Usaremos o exemplo do xuxu acima, as fronteiras no css são usadas através de "border" e "margin",

além podermos fazer como o exemplo do xuxu, podemos também colocar duas margens na div para que ela fique mais para direita e mais para baixo:

#xuxu{

border:3px;

border-color:red;

border-style:dashed;

margin:100px 50px;

}

O primeiro valor(100px) representa: "margin-top:100px;" e o segundo representa: "margin-right:50px;", poderiam ainda ser colocados outros 2 valores,seria o terceiro valor que representa "margin-bottom", e outro para "margin-left"(quarto valor).

O resultado está abaixo(note que a div foi deslocada para a direita e para baixo):

Cor:

a cor no CSS pode ser escrita na forma hexadecimal e na forma RGB(Red, Green, Blue), nas duas maneiras deve-se escrever três valores referentes às cores já ditas(Vermelho,Verde e Azul).
Exemplo para vermelho:

Hexadecimal: #FF0000
RGB: rgb(255,0,0)

No caso da cor preta seria:

Hexadecimal: #000000
RGB: rgb(0,0,0)
Neste caso podemos usar a taquigrafia, na maneira hexadecimal, pois os valores se repetem então pode-se escrever da seguinte forma:

Hexadecimal: #000

Fonte

A maneira taquigráfica em propriedades de fonte é muito utilizada pois agiliza o trabalho e economiza linhas de código, veja um exemplo:

font: italic small-caps bold 50px serif;

Margem

Vimos um exemplo de margem no caso do xuxu acima :)

Padding

O padding é muito parecido com o margin porém ele faz uma "margem" interna, e não externa. Portanto se você colocar um texto dentro de uma div ou qualquer outro elemento, é possível mover esse texto de maneira que fique alinhado de acordo com seu desejo. Veja um exemplo:

padding:25px 50px 75px 100px;(maneira taquigráfica)
Isso significa:
top padding recebe 25px
right padding recebe 50px
bottom padding recebe 75px
left padding recebe 100px
Abaixo vemos como o texto se comporta

Obrigado galera, semana que vez trago mais coisas para vocês ;)