Web Site » CSS

Matéria da Prova

edysegura — Sun, 14 Jun 2009 20:44:59 +0000

As provas práticas e teóricas desse bimestre avaliará os seguintes conteúdos:

XHTML

Formulários
Tabelas

CSS

Estilização de formulários
Estilização de tabelas

Trabalho Formulário com CSS

edysegura — Mon, 08 Jun 2009 21:50:05 +0000

Utilizando os conceitos aprendidos em sala de aula sobre XHTML e CSS estruture o formulário a seguir e desenvolva 4 estilos de formatação para o mesmo. Atenção: Cada imagem é o resultado de um tema. Utilize a opção para alternar entre os estilos conforme aprendemos em aula.

Orientações:

Clique na imagens para ampliá-las.
Faça download das imagens utilizadas nas formatações do formulário clicando aqui.
Para cada layout foi disponibilizado uma série de cores em hexadecimal, são apenas sugestões, utilize sua criatividade para alterá-las se achar necessário.

Trabalho sobre tabelas com CSS

edysegura — Mon, 08 Jun 2009 19:00:11 +0000

Desenvolver em XHTML e CSS as tabelas que estão representadas nas figuras abaixo. Cliquem na imagem para aumentar.

[update]

As imagem de checked/checado pode ser encontrada aqui: http://files.edysegura.com/aulas/website/icon-check.gif

Cor da primeira linha: #F4F9FD
Cor da segunda linha: #FFF
Cor da linha quando o mouse estiver por cima (hover): #F2F2F2
Cor do texto na sessão cabeçalho da tabela (thead): #7A9FB9
Cor do preço na sessão rodapé (tfoot): #945162
Cor do texto na sessão corpo da tabela (tbody): #737E84

Obs: As cores e imagem são apenas “sugestões”. Utilize a sua criatividade para alterar as cores e a imagem e a formate um novo tema! Lembre-se que na segunda tabela é necessário o uso de rowspan e colspan.

Trabalho sobre formulários

edysegura — Sat, 23 May 2009 22:19:08 +0000

Desenvolver formulários XHTML + CSS como as imagens abaixo, para obter as imagens de background é só fazer o download do arquivo trabalho-forms.zip:

30 Técnicas excepcionais para navegação CSS

edysegura — Mon, 27 Apr 2009 14:04:48 +0000

Aproveitando o ritmo das nossas aulas, vejam o que eu encontrei navegando pela internet: 30 Exceptional CSS Navigation Techniques

Listas XHTML + CSS

edysegura — Mon, 13 Apr 2009 15:00:13 +0000

Listas são muito úteis quando trabalhamos com estruturação de menus, lista de nomes, lista de artigos e listas em geral.

Para conhecer as propriedades CSS para lista acessem esse endereço: A propriedade list

Veja os exemplos abaixo do que podemos fazer com listas XHTML + CSS:

[update]
Exemplos para download:

Pseudo-classes CSS

edysegura — Fri, 20 Mar 2009 22:28:44 +0000

As pseudo-classes complementam seletores CSS com a finalidade de estilizar informações que não fazem parte da estrutura XHTML. Em sala de aula veremos exemplos práticos sobre as pseudo-classes CSS.

Visita obrigatória para obter mais informações:

Pseudo-classes do CSS via Tableless
Seletores Complexos via Tableless
Seletores Agrupados e Encadeados vai Tableless

Background

edysegura — Mon, 09 Mar 2009 22:00:08 +0000

A propriedade background da CSS, destina-se a definir uma cor ou uma imagem de fundo para uma tag da (X)HTML.

As propriedades para estilizar fundos são: background-color, background-image, background-repeat, background-attachment, background-position e background.

Em sala de aula veremos exemplos práticos do uso dessas propriedades da CSS.

CSS Box Model

edysegura — Mon, 02 Mar 2009 22:00:26 +0000

Entender como funciona o Box Model é essencial para aqueles que querem começar o desenvolvimento web utilizando CSS. Os elementos na página são renderizados como retângulos, então, todas as tags HTML funcionam como caixas, e essas caixas são formadas por 4 áreas retangulares que são as seguintes:

Conteúdo
Espaçamentos (padding)
Bordas (border)
Margens (margin)

Mais informações sobre o Box Model vocês podem encontrar nesse excelente blog sobre CSS: CSS no Lanche

[update]

Vejam também: Diferenças entre Margin e Padding.