Olá Pessoal, vamos dar sequência a nossa série de dicas. Seguindo a última quick tip vamos abrir nosso projeto e executar os passos abaixo:
Adicione um arquivo CSS ao projeto através do menu File – New – Other CSS. Salve o arquivo no diretório da aplicação como nome de Style.css. Adicione um componente StyleSheet ao form e através da propriedade FileName aponte-o para o arquivo Style.css gerado anteriormente.
Nosso projeto já esta linkado ao arquivo CSS bastando-nos criar nossas regras de estilos. Como o label menu e na verdade um div vamos então criar regras para os itens deste div. Em primeiro lugar vamos adicionar uma cor de fundo a pagina através da tag BODY:
Body{
background: #FFF;
}
Vamos também adicionar uma imagem, no topo da pagina alinhada a esquerda para servir de logo em nossa pagina:
Body{
background: #FFF url(images/tds.jpg) no-repeat;
}
Aqui estamos aplicando uma regra CSS para o body de nossa página e estamos fazendo isso de forma abreviada. Primeiro definimos uma cor de fundo. Logo após definidos que a imagem contida no diretório Images será adicionada na pagina e por ultimo definimos que esta imagem não ira se repetir na pagina. Vejo o resultado:
Agora vamos começar a formatar o nosso menu. Crie mais uma regra no arquivo CSS desta vez direcionado ao ID menu que na verdade e o nosso label. Primeiro vamos definir suas margens para 0 assim como seus padding’s.
#menu{
margin: 0;
padding: 0;
}
Dentro deste label, ou melhor desta DIV há uma lista com seus itens e cada item com um link especifico. Como vimos anteriormente podemos com CSS criar regras para um item especifico do documento HMTL. Vamos então ajusta a margem esquerda da nossa lista através da tag ( ul ).
#menu ul{
margin-left: 2px;
}
Repare que para margin e padding não informamos a unidade de medida, diferente de margin-left onde informamos “px”. A unidade de medida deve informada sempre que o valor for diferente de zero para evitar problemas com unidades de medida padrão dos navegadores e com isso garantir que nossas regras serão aplicadas tal qual foram criadas independente da unidade padrão definida no navegador.
Para concluirmos esta etapa vamos alinha os itens do nosso meni horizontalmente:
#menu ul li{
display: inline;
}
Agora nosso label já esta tomando forma de menu. Observe:
#menu{
margin: 0;
padding: 0;
}
Dentro deste label, ou melhor desta DIV há uma lista com seus itens e cada item com um link especifico. Como vimos anteriormente podemos com CSS criar regras para um item especifico do documento HMTL. Vamos então ajusta a margem esquerda da nossa lista através da tag ( ul ).
#menu ul{
margin-left: 2px;
}
Repare que para margin e padding não informamos a unidade de medida, diferente de margin-left onde informamos “px”. A unidade de medida deve informada sempre que o valor for diferente de zero para evitar problemas com unidades de medida padrão dos navegadores e com isso garantir que nossas regras serão aplicadas tal qual foram criadas independente da unidade padrão definida no navegador.
Para concluirmos esta etapa vamos alinha os itens do nosso meni horizontalmente:
#menu ul li{
display: inline;
}
Agora nosso label já esta tomando forma de menu. Observe:
Bem pessoal, hoje encerramos por aqui, na próxima Quick veremos mais sobre CSS. Abraços !!!!
