Demonstra Passo a passo: Trabalhando com um arquivo CSS existente

  • Artigo

Este guia passo a passo introduz os recursos das folhas de estilo em cascata (CSS) de Visual Studio 2008.Ele o guia através da criação e modificação do layout de uma página de duas colunas.Ele também ilustra as técnicas básicas de criação de novas páginas Web e uma nova folha de estilo em cascata.

Essa explicação passo a passo ilustra as seguintes tarefas:

  • Criar um site Web do sistema de arquivos.

  • Utilizando os recursos da orientação CSS de Visual Web Developer.

  • Criando um layout de uma página de duas colunas utilizando CSS.

    Observação:

    Esse guia passo a passo exibe recursos adicionais de Visual Studio 2008 que não foram cobertos em Passa a Passo: Criando e Modificando Arquivos CSS.

Pré-requisitos

Para completar este passo a passo, são necessários os seguintes componentes:

  • Visual Studio 2008 ou Microsoft Visual Web Developer Express Edition. Para obter informações de baixar, consulte o Microsoft Visual Studio Express Editions Site da Web.

  • A versão 3.5 .NET Framework.

  • Uma imagem que você pode adicionar à página Web.A imagem em si não é importante; você usará as imagens apenas para ilustrar o posicionamento dos recursos.

Criando um site da Web

Nesta parte da explicação passo a passo, você irá criar um site e adicionar uma nova página a ele.

Se você já criou um site em Visual Web Developer (por exemplo, seguindo as etapas no passo a passo: Demonstra Passo a passo: Criando um Basic página da Web no Visual Web Developer), você poderá usar esse site e ir para a seção "Adicionando Elementos HTML e um Arquivo CSS" mais tarde nesse passo a passo.Caso contrário, crie um novo site seguindo as seguintes etapas.

Para criar um novo site de sistema de arquivos

  1. Abra Visual Web Developer.

  2. No menu File, clique em NewWeb Site.

    A caixa de diálogo New Web Site é exibida.

  3. Em O Visual Studio installed templates, clicar Site da Web do ASP.NET.

  4. Na caixa Local, selecione Arquivo de Sistema e digite o nome da pasta onde você deseja manter as páginas do seu Web site.

    Por exemplo, digite o nome de pasta a seguir: C:\CSSWebSite

  5. Na lista Language, clique em Visual Basic ou Visual C#.

    A linguagem de programação que você escolher será o padrão para o site, mas você pode definir a linguagem de programação para cada página individualmente.

  6. Clique em OK.

    Visual Web Developer cria a pasta e uma nova página chamada Default.aspx.

Adicionando Elementos HTML e um Arquivo CSS

Para permitir que você se foque na formatação e ferramentas de estilo ao invés da criação de elementos de estilo, um conjunto de elementos é fornecido nessa seção.Você pode copiar e colar esses elementos em uma página.O código inclui seções criadas com os elementos div que inclui um banner, seções nas laterais, um seção principal de conteúdo, e um rodapé.Esses elementos simples contém textos que você pode trabalhar e IDs de elementos.Em alguns casos, os elementos contém classes CSS que você pode utilizar para aplicar estilos a elementos específicos da página.

Adicionando Elementos HTML

Esta seção adiciona conteúdo para trabalhar.A página consiste de um banner com texto e uma caixa de pesquisa, um rodapé e três seções de texto.O conteúdo principal da página está na última seção de texto.

Adicionar elementos HTML à página

  1. Abra a página Default.aspx no modo de exibição Fonte.

  2. Adicione o código a seguir após o elemento <form>.

    <div id="pagecontainer">
<div id="banner">
<h1>AdventureWorks Styling Page</h1>
<h2>Making CSS Styling Easier in Design View</h2>
<div id="search">Find:<input id="searchbox" type="text" />
<input id="searchbutton" type="button" value="Go" />
</div>
</div>
<div id="leftsidebar" class="column">
<h3>Matters of the Web</h3>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur in sem. Vivamus adipiscing vulputate lacus. Sed enim 
lorem, fringilla eget, nonummy sed, ullamcorper sit amet, diam. Sed a justo. Curabitur quis nibh sit amet nunc malesuada 
rutrum.</p>
</div>
<div id="rightsidebar" class="column">
<h3>Matters of the Web</h3>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur in sem. Vivamus adipiscing vulputate lacus. Sed enim 
lorem, fringilla eget, nonummy sed, ullamcorper sit amet, diam. Sed a justo. Curabitur quis nibh sit amet nunc malesuada 
rutrum.</p>
</div>
<div id="maincontent" class="column">
<h2>Matters of the Web</h2>
<p> Pellentesque mattis tincidunt ipsum. Donec tempus, nunc vitae rhoncus imperdiet, eros turpis accumsan risus, ut luctus ipsum 
lacus a felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean convallis euismod 
nulla. Suspendisse potenti. Donec in mi nec odio tincidunt luctus. Donec euismod, mauris cursus molestie convallis, quam 
pede tempus magna, mollis dapibus quam est et magna. Aenean eros massa, elementum vehicula, dapibus eget, lobortis non, 
mauris. Vivamus nisl ante, interdum eget, sagittis vel, scelerisque nec, magna. Praesent placerat nibh vel metus viverra 
tincidunt.</p>
<asp:Image ID="Image1" />
<p>Fusce magna urna, gravida non, sodales vehicula, consequat ac, lacus. Ut sed eros sit amet neque malesuada 
malesuada. Fusce porttitor cursus eros. Maecenas libero odio, convallis vel, tristique id, sodales vel, leo. Curabitur nibh 
neque, interdum eget, convallis id, adipiscing nec, risus. Suspendisse rutrum dui sed urna. Pellentesque leo felis, tempor eu, 
convallis venenatis, auctor vitae, justo. In at massa.</p>
</div>
<div id="footer">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit 2007.</p>
</div>
</div>

  3. Salve a página.

  4. Alterne para o Design modo de exibição para ver a formatação padrão.

Adicionando um Arquivo CSS

Nesta seção você irá adicionar uma folha de estilo em cascata (arquivo .css) que formata e estiliza os elementos que você adicionou à página na última seção.A folha de estilo utiliza tanto regras baseadas em ID quanto em estilos baseados em classe.

Para adicionar um arquivo CSS

  1. In O gerenciador de soluções, clicar com o botão direito do mouse no nome do Web do site e, em seguida, clique em Adicionar novo item.

    The Adicionar novo item caixa de diálogo é exibida.

  2. Sob o Visual Studio installed templates, clique em Style Sheet.

  3. No Nome na caixa, digite Layout.css e, em seguida, clicar Adicionar.

    O editor abre com uma nova folha de estilos que contém uma regra de estilo body.

  4. Remova a regra de estilo body, e então cole as regras seguintes no arquivo.

    #pagecontainer {
    width: 800px;
}
#banner {
    height: 126px;
    padding-top: 18px;
    background-color: #DD6B26;
}
#search {
    width: 254px;
    position: absolute;
    top: 115px;
    left: 545px;
    font-family: "Lucida Sans";
    font-size: small;
    color: #930626;
}
#leftsidebar {
    width: 188px;
    float: left;
    padding-right: 10px;
}
#rightsidebar {
    width: 238px;
    float: right;
    padding-left: 6px;
}
#maincontent {
    border-left: 1px solid #DD6B26;
    margin-left: 203px;
    margin-right: 260px;
    padding-left: 13px;
    padding-right: 13px;
}
#footer {
    text-align: center;
    background-color: #DD6B26;
}
h1 {
    font-family: "Lucida Calligraphy";
    font-size: x-large;
    font-weight: bold;
    color: #930626;
    text-align: center;
    height: 42px;
    margin-bottom: 0px;
}
h2 {
    font-family: "Lucida Sans";
    font-variant: small-caps;
    font-size: large;
    color: #307630;
    font-weight: bold;
    text-align: center;
    margin-bottom: 0px;
    margin: 0;
    padding: 0;
}
p {
    font-family: "Palatino Linotype";
    font-size: medium;
}

  5. Salve o arquivo.

Adicionando Regras de Estilo à Folha de Estilo

Quando estiver trabalhando com uma folha de estilo CSS existente, você poderá usar a janela Gerenciar Estilos para modificar as regras de estilo na folha de estilo.Nesse passo a passo, você poderá modificar as páginas do layout original em três colunas para o layout em duas colunas.Então você removerá os estilos aplicados ao layout original.

Removendo a Coluna da Direita e Reestilizando

Para modificar o layout da página para um layout em duas colunas, você poderá remover o código que cria a coluna da direita.Então você poderá reestilizar outros elementos para criar um layout em duas colunas.

Para remover o código e a formatação da coluna da direita

  1. Abra ou alterne para a página Default.aspx.

  2. Alterne para o modo de exibição Design.

  3. Do Gerenciador de Soluções, arraste o arquivo .css que você criou e solte-o na página.

    Isso vincula o arquivo .css à página atual.As mudanças na página refletem os estilos definidos no arquivo .css.

  4. Alterne para o fontemodo de exibição de .

  5. Delete o elemento div que começa com <div id="rightsidebar" class="column">.

  6. Salve o arquivo.

  7. No menu Formatar, clique em Estilos CSS, e então clique em Gerenciar Estilos.

    A janela Gerenciar Estilos aparecerá.(Por padrão, a janela está inacessível.)

  8. Na janela Gerenciar Estilos, clique com o botão direito no estilo #rightsidebar e então clique em Deletar.

    Observação:

    O ícone para o estilo #rightsidebar não tem um círculo à sua volta, o que indica que não está mais em uso pela página e pode ser removido.

  9. Na janela Gerenciar Estilos, clique com o botão direito no estilo #maincontent e então clique em Deletar.

    A caixa de diálogo Modificar Estilo aparece.

  10. Sob Categoria, clique Caixa.

  11. Sob margem, modifique o valor da caixa direita para 0.

  12. Clique em OK.

  13. Alterne para o modo de exibição Design.Agora você tem um layout em duas colunas.

  14. Salve o arquivo.

Adicionando uma Imagem

Antes de configurar o estilo de uma imagem, você deve adicionar a imagem ao projeto e configurar as propriedades da imagem ImageUrl.

Para adicionar uma imagem ao projeto

  1. No Gerenciador de Soluções, clique com o botão direito do mouse no nome do site, e então clique em Adicionar Novo Item.

    A caixa de diálogo Add Existing Item aparece.

  2. Selecione um arquivo de imagem e clique em Adicionar.

Agora que a imagem foi adicionada ao projeto, você deve atribuir um controle à imagem Image.

Para atribuir uma imagem ao controle de Imagens

  1. Abrir ou comutador para o arquivo padrão.aspx.

  2. Alterne para o modo de exibição Design e selecione o controle Image.

  3. Na janela Propriedades, configure as propriedades ImageUrl do controle Image para a URL do novo arquivo de imagem adicionado.

Adicionando Regras de Estilo para a Formatação da Imagem

Para fazer a imagem encaixar-se melhor com o texto, você pode posicioná-la tanto para a esquerda quanto para a direita da borda da coluna principal e adicionar um preenchimento, o que move o texto para fora da imagem.

Para adicionar imagens ao layout

  1. em aberto ou alterne para o arquivo Layout.css.

  2. Adicione o seguinte código à folha de estilo:

    img {
    margin: 0px;
    border: 1px solid #DD6B26;
    padding: 5px;
}
.floatright {
    margin-left: 10px;
    float:right;
}
.floatleft {
    float: left;
    margin-right: 10px;
}

  3. Abrir ou comutador para o arquivo padrão.aspx.

  4. Alterne para o modo de exibição Design e selecione o controle Image.

  5. Na janela Gerenciar Estilos, aplique tanto o estilo floatright como o floatleft ao controle Image clicando com o botão direito no estilo CSS e selecionando Aplicar Estilo.

    O estilo CSS que você selecionou será atribuído ao estilo img.

Próximas etapas

Esse passo a passo ilustra as técnicas básicas para trabalhar com estilos CSS através da interface com o usuário Visual Studio 2008.Você poderá também querer explorar as seguintes formas de controlar a aparência das páginas Web:

Consulte também

Tarefas

Passa a Passo: Criando e Modificando Arquivos CSS

Conceitos

Trabalhando com CSS: Uma visão geral

Controle de Servidor Web do ASP.NET e Estilos CSS

Como: Usar a janela Propriedades CSS