Como criar Cascading Style Sheets (CSS) simples e fácil

Existe realmente há maneira certa ou errada para criar Cascading Style Sheets (CSS) para suas aplicações javascript, mas usando uma abordagem organizada pode tornar a tarefa ir mais rapidamente e produzir melhores resultados com menos erros. Afinal, CSS é realmente sobre o fornecimento de uma aparição página organizada e agradável para que o usuário gasta mais tempo de visualização da informação em vez de tentar descobrir onde a informação reside.

As etapas a seguir fornecem um processo que você pode usar para criar CSS:

1

Definir um projeto básico para o site como um todo.

Decida como você deseja colocar elementos na tela. Por exemplo, determinar onde você quer colocar um menu. Se o site irá utilizar cabeçalhos e rodapés, é preciso considerar como esses elementos aparecerão. O conteúdo principal deve aparecer no centro da página, mas muitos sites também contam com barras laterais para fornecer detalhes sobre os itens que o usuário seleciona. Aqui está um exemplo típico de um design de página:

2

Desenvolver um modelo para suas páginas que usa este projeto básico e, em seguida, usar esse modelo para criar as páginas reais.

O modelo deve conter todos os elementos de seu projeto básico. Usar

etiquetas para criar os elementos. Adicionar uma entrada de teste em cada uma das áreas que você possa ver o quão bem o CSS está funcionando. Aqui está um exemplo de um modelo que você pode usar com o layout para este exemplo:
Trabalhando com CSS

Conteúdo

3

Criar uma lista dos elementos que você deseja para o estilo.

O modelo fornece uma lista de elementos básicos que você deve incluir na sua .CSS Arquivo. É importante pensar através do processo de layout. A lista elemento age como um esboço para o seu layout. Você usá-lo para garantir a CSS resultante terá o desempenho esperado.

4

Desenvolver um ficheiro.css para ir com o seu modelo.

o .CSS arquivo deve conter todas as informações necessárias para tornar a sua disposição uma realidade. Aqui está um exemplo básico do que o CSS pode parecer para este exemplo:

div {text-align: center-font-family: sans-serif-font-size: 20px; border: 0px; padding: 0px;} # menu {position: absolute-background-color: # bfbfff-width: 90% - height: 80px;} # Header {position: absolute-top: 80px; background-color: # ffff00-width: 90% -Altura: 80px;} # Sidebar {position: absolute-top: 160px; background-color: # 00ff00 -width: 30% -Altura: 200px;} # conteúdo {position: absolute-top: 160px; left: 31% -background-color: # ff8080-width: 60% -Altura: 200px;} # rodapé {position: absolute -top: 360px; background-color: # 00ffff-width: 90% -Altura: 80px;}
5

Testar o layout em todos os navegadores que você pretende apoiar para a aplicação.

O teste é uma parte essencial da criação de um layout. Às vezes você tem de ajustar alguns dos parâmetros de layout para obter o resultado desejado. Veja como o layout olha no Chrome. O layout parece essencialmente o mesmo no Firefox e Internet Explorer também.

Semelhante

menu