CSS3

Cascading Style Sheet

Apresentação

Alberto Stephanio Veloso

Web Designer, Designer gráfico e linux é vida.

Linkedin: http://br.linkedin.com/in/albertosveloso

Luiz Gustavo Alexandre Malpelli

Web Developer, certificado Microsoft, entusiasta PHP e apaixonado por churrasco.

Linkedin: https://br.linkedin.com/in/luiz-gustavo-malpelli-26012443

Review

O que é CSS e para que serve?

Com o objetivo de separar a estrutura da página de sua configuração visual, foi criada uma tecnologia chamada CSS, que significa Cascading Style Sheet. Utilizando o CSS podemos fazer as configurações visuais dos elementos através de propriedades, sem precisar mexer na estrutura da página.

HTML inicial já esta no jeito?

Vamos codar!

Você pode encontrar o HTML inicial para baixar no grupo de estudos ou neste link http://bit.ly/2aJVksS

Exemplo 1

CSS inline (background-color, color)

Exemplo 2

• CSS isolado dentro da tag style (text-indent, text-decoration, font-style)
• id e class

CSS isolado em arquivo

Desta forma o CSS pode ser usado em outras páginas e outras tags (seletor body, margin, fonte e fonte secundária, text-align, hover, padding)

Tabela

Estilizando uma tabela com seletor hierarquico (border, border-collapse , th (cabeçalho da tabela) com destaque)

CSS além do horizonte

• Background com gradiente

h2 { background:-moz-linear-gradient(top, #9C8F67, #C7BE9B 30%); }
                

• Bordas arredondadas

h2 {
   border-radius:15px;
   border: 1px solid black;
}
                

• Sombras

box-shadow:5px 5px 3px rgba(0,0,0,0.7);
                

• Animações

-moz-transform:rotate(-5deg);
                

Hands on

Faça um mini currículo utilizando as técnicas passadas até aqui.

CSS isolado em arquivo (obrigatório).

Seu currículo precisa ter no mínimo duas sessões. Exemplo: Dados pessoais e escolaridade.

Utilize a fonte Consolas, utilize este site http://bit.ly/1VHBjr7 para ver o nome ou hexadecimais das cores, lembre-se de utilizar div e class para facilitar. Faça com calma e atenção.

Referências para estudar mais e mais

• http://w3schools.com
• Livros do Maujor na Novatec
• Use o youtube a seu favor seu conhecimento
• Tutoriais e cursos online
• Apaixone-se
• Pratique sempre, faça pequenos projetos

HTML 5

Dicas finais

Obrigado!

alberto.veloso@linx.com.br

luiz.malpelli@linx.com.br