DevMedia
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login

Utilizando CSS no Asp.Net

Nesse artigo veremos como manuipular DIV´s com CSS no ASP.NET Será utilizada a ferramenta Visual Web Developer 2005 Express Edition.

[fechar]

Você não gostou da qualidade deste conteúdo?

(opcional) Você poderia comentar o que não lhe agradou?

Confirmo meu voto negativo

Olá pessoal!

Depois de alguns dias afastado por motivos de trabalho estou de volta para continuar uma série de artigos.
Nesse artigo vou mastrar como é simples utilizar CSS no Asp.Net. O artigo consiste num projeto sem tabelas (tableless) e vou montar uma estrutura simple, um layout, de uma página.

Existem diferentes maneiras de trabalhar com CSS no Asp.Net. Nesse artigo, criaremos uma pasta onde será armazenado um arquivo CSS, dessa forma seu projeto ficara mais organizado, pois o codigo CSS ficará em um arquivo diferente do código HTML do seu projeto.

Será utilizado nesse artigo o Visual Web Developer 2005 Express Edition (VWD). Então, mãos a obra!

Inicie o VWD e crie um Novo projeto e dê o nome de CSS (sinta-se a vontade para escolher um nome de sua prefência).

Em primeiro lugar, prepararemos o ambiente para que nosso projeto fique organizado, ou seja, criaremos uma estrutura independente de cada arquivo.
Clique com o direito do mouse sobre projeto localizado na aba Solution Explorer e adicione uma pasta Theme e altere o nome para Theme1 como mostra a Figura1. Voce pode escolher o nome que achar melhor :)

Figura1.JPG

Figura 1

Agora, clique com o direito do mouse sobre a pasta adicionada no Solution Explorer (a pasta Theme1) e clique Add new item (Figura 2).

Figura2.JPG

Figura 2

Em seguida aparcera uma tela e adicione um arquivo do tipo StyleSheet e clique em OK. (Figura 3)

Figura3.JPG

Figura 3

Pronto! Se tudo correu bem seu Solution Explorer deve estar como a Figura 4.

Figura4.JPG

Figura 4

O ambiente de trabalha já esta pronto e devidamente organizado. Agora vamos inserir codigo ao arquivo Default.aspx. Clique na pagina Default, e no souce insira o seguinte código:

<div id="topo" class="topo">

</div>

<div id="esquerda">

</div>

<div id="inferior">

</div>

<div id="direita">

</div>

Veja a Figura 5 o local exato do código acima no source da pagina Default.

Figura5.JPG

Figura 5

Vejam que para cada  div foi adicionado um "id". Esse "id" será importante pois no arquivo CSS faremos referencia a cada "id" separadamente.

Agora vamos ao codigo CSS. Dê um duplo clique na pasta Theme1 e adicione o código abaixo:

#topo

{

border-style: solid;

border-width:thin;

border-color: Black;

width: 780px;

height: 80px;

background-color: Transparent;

}

#esquerda

{

border-style: solid;

border-width:thin;

border-color: Black;

float: left;

width: 80px;

height: 300px;

margin-top: 2px;

}

#direita

{

border-style: solid;

border-width:thin;

border-color: Black;

float: left;

width: 696px;

height: 300px;

margin-top: 2px;

margin-left: 2px;

}

O intuito desse artigo não é explicar o codigo CSS, por isso não comentarei a fundo sobre o codigo, mas o ele basicamente organiza as div´s na pagina Default.aspx. Percebam tambem que o nome de cada "função" refere-se ao "id" das div´s criadas no souce da pagina Default.aspx

Agora vamos associar o CSS a página Default.aspx. Para isso selecione o arquivo CSS, arraste e solte na pagina Default.aspx. Só isso e a página estará com o CSS.

Isso pode ser feito via cádigo, basta inserir a seguinte linha de código dentro da tag <head>:

<link href="App_Themes/Theme1/StyleSheet.css" rel="stylesheet" type="text/css" />

Execute o progroma e o resultado devera ser igual a Figura 6.

Figura6.JPG

Até a próxima!



Graduado em Ciência da Computação pela Universidade Estadual de Santa Cruz - UESC. Atualmente trabalhando como Analista de sistemas no CEPEDI - Centro de Pesquisa e Desenvolvimento em Informática de Ilhéus e na IPSOFT - Desenvolvi [...]

O que você achou deste post?
Conhece a assinatura MVP?
Serviços

Mais posts