Avaliação: | Publicado em: 26/10/2006

CSS com ASP.NET, parte1

Lucas de Azevedo Fernandes é programador e possui conhecimentos em C# ,ASP.NET, CSS, Javascript e Sql.

CSS com ASP.NET, parte1

A primeira coisa a se fazer é abrir o Visual Studio 2005

(Fig.1)

Com o Visual Studio aberto vá a File > New > Web Site (Fig.1)

(Fig.2)

Agora ASP.NET Web Site

Em Location eu deixei File System, mais se você tiver o IIS instalado pode escolher salvar em alguma pasta do seu servidor.

Em Languague eu escolhi C#, mais esse exemplo pode ser feito em VB também.

Em Browse você escolhe em que lugar quer salvar o Seu Projeto e o Nome do Projeto.

Clique em Ok e você terá seu novo Projeto.(Fig.2)

Aperte Ctrl+W,S para aparecer o Solution Explorer.

Reparem que no canto direito apareceu a o Solution  Explorer.

(Fig.3)

O próximo passo é ir ao Solution Explorer e deletar todos os arquivos do projeto. (Fig.3)

(Fig.4)

Começaremos a usar o CSS do ASP. NET, para isso vá ao Solution  Explorer clique com o botão direito > Add Asp.NET Folder > Theme, dei o nome da pasta de tema  (Fig.4)

(fig.5)

Agora clique com o botão direito em cima da pasta tema > Add New Item > vai abrir uma janela, escolha StyleSheet (fig.5)

Dei o nome do meu StyleSheet de tema.css

Abra o Arquivo de tema que criamos é nesse arquivo que vamos definir toda a formatação do nosso site.

Reparem que abriu uma folha CSS só com uma body.

Nessa body definiremos a formatação geral do site, como tipo de letra, cor do plano de fundo.

Nessa body colocaremos a seguinte formatação.

body

{              

background-color: yellow; /* cor fundo da página*/

font-size: 12pt; /*tamanho da fonte*/

color: black; /*cor da fonte*/

font-family: 'Times New Roman'; /*estilo da fonte*/

}

Vamos fazer agora nosso primeiro estilo formatação.

(fig.6)

Clique com o Botão direito em cima da folha de CSS e selecione Add Style Rule.(fig.6)

(fig.7)

Vai abrir uma janela, onde daremos o nome da nova formatação em Element ID e escolha o nome da primeira formatação, a minha eu coloquei como topo(fig.7)

O estilo da  formatação topo vai ficar assim:

    #topo

{

border-right: #000000 1px dashed; /*borda direita*/

border-top: #000000 1px dashed; /*borda topo*/

border-left: #000000 1px dashed; /*borda esquerda*/

border-bottom: #000000 1px dashed;/*borda embaixo*/

width: 800px;/*largura*/

height: 100px;/*tamanho*/  

}

Vamos fazer agora nossa segunda formatação como fizemos à primeira formatação.

Escolha o nome da segunda formatação, a minha eu coloquei como esquerdo.

O estilo da  formatação esquerdo vai ficar assim:

#esquerdo

{

border-right: #000000 1px dashed; /*borda direita*/

border-top: #000000 1px dashed; /*borda topo*/

border-left: #000000 1px dashed; /*borda esquerda*/

border-bottom: #000000 1px dashed; /*borda embaixo*/

width: 150px; /*largura*/

height: 100px;/*altura*/

position: absolute; /* so ele nessa posição*/

top: 140px; /*altura para o topo*/

Vamos fazer nossa terceira formatação.

Escolha o nome da terceira formatação, a minha eu coloquei como centro.

A formatação centro vai ficar assim:

#centro

{  

border-right: #000000 1px dashed; /*borda direita*/            

border-top: #000000 1px dashed; /*borda topo*/

border-left: #000000 1px dashed; /*borda esquerda*/ 

border-bottom: #000000 1px dashed; /*borda embaixo*/         

width: 495px; /*largura*/

height: 100px; /*altura*/         

position: absolute; /* so ele nessa posição*/

left: 177px; /*distância do lado esquerdo da página*/

top: 140px;/*altura para o topo da página*/                          

}

Escolha o nome da terceira formatação, a minha eu coloquei como direito.

A formatação direito vai ficar assim.

#direito

{

border-right: #000000 1px dashed;/*borda direita*/

border-top: #000000 1px dashed;/*borda topo*/

border-left: #000000 1px dashed;/*borda esquerda*/

border-bottom: #000000 1px dashed;/*borda embaixo*/

width: 120px; /*largura*/

height: 100px;/*altura*/

position: absolute; /* so ele nessa posição*/

left: 690px; /*distância do lado esquerdo da página*/

top: 140px;/*altura para o topo da página*/

}

Agora iremos criar um Web Configuration File para que podermos aplicar as formatações feitas no CSS.

Primeiro passo é ir ao Solution Explorer e adicionar um novo arquivo chamado Web Configuration File

(fig.8)

Botão direito > Add New Item > vai abrir uma janela nessa janela iremos adicionar um > Web Configuration File (fig.8)

Vocês podem colocar o nome que quiser aqui eu deixei como Web que é o padrão.

Vá para o Solution Explorer  e abra o Web.config.

(fig.9)

Agora vá ao final da página e coloque a seguinte configuração.

<pages theme="tema"/> (fig.9)

 Como eu disse no começo o meu CSS se chama tema por isso ali esta tema, ali vocês colocaram o nome o nome que deram para seu CSS.

Hoje terminamos por aqui, na próxima parte iremos aplicar todas as formatações que fizemos CSS.

• 10 Dicas de CSS, parte 1